Duplicate Home Middle Widget

[elkiehound]

Is there a way to duplicate the Home Middle widget on the home page, so there are two (separate) sets of images.

[Brad Dalton]

For which theme? Link to your site please.

---

Tutorials for StudioPress Themes.

[elkiehound]

Hi brad,

Theme is Agency Pro

I made some progress, however still need some help.

Using the Genesis Extender, I was able to create a new widget and with a conditional, put it on a page that is NOT the Front page. (i can change to front page later) And I created a new CSS class for the widget (mid page). I hooked the widget in the “genesis-before-loop” area.

Then, I copied all of the CSS code that had home.middle, replaced the words “home.middle” with “mid page”.

The good news, is that I get the widget on the page, the not so good news is it is not formatted like the middle widget on the homepage.

Is this the right approach to duplicate this home middle widget in Agency Pro ?

Here is my page: http://bwc.swschool.com/middle%20widget/

Here is the Homepage: http://bwc.swschool.com/ (Our work is what I am trying to replicate)

Here is my complete CSS Modifications:

.midpage {
padding: 10% 0 5%;
}

.midpage .featuredpost img.entry-image {
left: 0;
position: absolute;
}

.midpage .featuredpost img:hover {
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=10)”;
filter: alpha(opacity=10);
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
}

.midpage .featuredpost .entry {
background-color: #333;
color: #fff;
}

.midpage .featuredpost .entry {
min-height: 380px;
}

.midpage .featuredpost .entry-title a {
color: #fff;
}
.midpage .featuredpost .post:nth-of-type(3n+1) {
clear: left;
}
.midpage .featuredpost .entry {
min-height: 320px;
}
.midpage .featured-content .post:nth-of-type(3n+1) {
clear: none;
}
.midpage .featured-content .post:nth-of-type(2n+1) {
clear: left;
}
.midpage .featuredpost .entry {
min-height: 320px;
}
.midpage .featuredpost img.entry-image {
position: relative;
}

.midpage .featuredpost .entry img:hover {
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=90)”;
filter: alpha(opacity=90);
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}

[Brad Dalton]

I've already written about how to do this: http://wpsites.net/web-design/custom-portfolio-template-with-hover-effects-using-genesis-featured-posts-widget/

---

Tutorials for StudioPress Themes.

[elkiehound]

Thanks, I saw that post, however it appears that it works only for non Agency Pro themes?

I am using Agency Pro, and when I follow the instructions, it messes up my existing home page.

As mentioned, I got the widget on the page, and the content showing up, (using Genesis Extender), it's just missing something relative to formatting, I suspect something in the CSS. (CSS is posted above).

Thanks

Roy

[elkiehound]

I cleaned up the CSS for this page, however still has something missing for the right format:

Here is my page: http://bwc.swschool.com/middle%20widget/

#midpage {
padding: 10% 0 5%;
}

#midpage .featuredpost img.entry-image {
left: 0;
position: absolute;
}

#midpage .featuredpost img:hover {
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=10)”;
filter: alpha(opacity=10);
-moz-opacity: 0.1;
-khtml-opacity: 0.1;
opacity: 0.1;
}

#midpage .featuredpost .entry {
background-color: #333;
color: #fff;
}

#midpage .featuredpost .entry {
min-height: 380px;
}

#midpage .featuredpost .entry-title a {
color: #fff;
}
#midpage .featuredpost .post:nth-of-type(3n+1) {
clear: left;
}

#midpage .featured-content .post:nth-of-type(2n+1) {
clear: left;
}

[Brad Dalton]

I think you may need to change the functions as they are the same as the existing ones and then it should work.

---

Tutorials for StudioPress Themes.

[elkiehound]

Thanks Brad

Can you be more specific about changing the functions

Roy

[Brad Dalton]

Actually, i have already changed them so it should work fine. What problems did you have with it?

---

Tutorials for StudioPress Themes.

[elkiehound]

Ok, the problem was my toolset.

I was trying to use the Genesis Extender product to create the function, CSS mods, Create a widget, blah blah.

So, I bailed out on the tool and did it as recommended using FTP. Created a new page if you want to look at it:

http://bwc.swschool.com/widgetpage/

Included the CSS mods for @media and it looks great on mobile device too.

Thank you.

[Brad Dalton]

That's it.

---

Tutorials for StudioPress Themes.

[Author]

Posts