Community Forums › Forums › Archived Forums › General Discussion › Duplicate Home Middle Widget
- This topic has 10 replies, 2 voices, and was last updated 10 years, 4 months ago by Brad Dalton.
-
AuthorPosts
-
November 26, 2013 at 3:00 pm #75749elkiehoundMember
Is there a way to duplicate the Home Middle widget on the home page, so there are two (separate) sets of images.
November 27, 2013 at 2:30 am #75823Brad DaltonParticipantNovember 27, 2013 at 5:49 am #75841elkiehoundMemberHi 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;
}November 27, 2013 at 7:39 am #75852Brad DaltonParticipantI've already written about how to do this: http://wpsites.net/web-design/custom-portfolio-template-with-hover-effects-using-genesis-featured-posts-widget/
November 27, 2013 at 8:30 am #75858elkiehoundMemberThanks, 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
November 27, 2013 at 9:03 am #75868elkiehoundMemberI 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;
}November 28, 2013 at 6:04 am #76016Brad DaltonParticipantI think you may need to change the functions as they are the same as the existing ones and then it should work.
November 28, 2013 at 6:59 am #76019elkiehoundMemberThanks Brad
Can you be more specific about changing the functions
Roy
November 28, 2013 at 7:26 am #76028Brad DaltonParticipantActually, i have already changed them so it should work fine. What problems did you have with it?
November 28, 2013 at 11:34 am #76054elkiehoundMemberOk, 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.
November 28, 2013 at 2:26 pm #76077Brad DaltonParticipant -
AuthorPosts
- The topic ‘Duplicate Home Middle Widget’ is closed to new replies.