Community Forums › Forums › Archived Forums › General Discussion › Styling Duplicate Widget Areas in Metro
Tagged: Metro theme.
- This topic has 11 replies, 2 voices, and was last updated 11 years ago by Anita.
-
AuthorPosts
-
March 2, 2013 at 8:17 am #23734WendyYoheMember
I've duplicated the homepage widget areasĀ (Home Top, Home Middle Left, Home Middle Right and Home Bottom) in Metro.
I've created them in the functions.php file and registered them in the home.php file. Now I need to style them. I can't find those areas in the stylesheet. Metro's stylesheet is a little different from other StudioPress themes I've worked with.
Can anyone help me find these areas in the Metro stylesheet?
Wendy
Johnstown360.comMarch 2, 2013 at 8:27 am #23739AnitaKeymasterLooking at the code in Firebug - look for this:
.footer-widgets-1, .footer-widgets-2, .home-middle-left, .home-middle-left2, .sidebar-content #sidebar, .sidebar-sidebar-content #sidebar, #content, #content-sidebar-wrap, #footer .gototop, #sidebar-alt, #title-area { float: left; } .content-sidebar-sidebar #sidebar-alt, .footer-widgets-3, .home-middle-right, .home-middle-right2, .sidebar, .sidebar-content #content, .sidebar-content-sidebar #content-sidebar-wrap, .sidebar-sidebar-content #content, .sidebar-sidebar-content #content-sidebar-wrap, #footer .creds, #header .widget-area { float: right; }
See where the .home-middle-left, .home-middle-left2... is located. I believe you can add your new widgets to this same area. See the .content-sidebar-sidebar line? then see the .home-middle-right....
Just find locations in the style sheet like that - then add your own, i.e., .home-middle-left3 or left4... whatever names you gave your new areas.
Love coffee, chocolate and my Bella!
March 2, 2013 at 8:48 am #23745WendyYoheMemberThe home-middle-left2 and the home-middle-right2 are the areas I added. Those areas overlap a bit. I just added text widgets to those areas so you can see what I mean. What do I adjust to fix the overlap?
Thanks for your help! =)
March 2, 2013 at 9:48 am #23753AnitaKeymasterWhat does your home file look like? Did you add those to the same DIV or did you create a new DIV below the existing one?
Love coffee, chocolate and my Bella!
March 2, 2013 at 9:50 am #23754AnitaKeymasterI don't see anything overlapping? I see the two test widgets right before the footer area.
Love coffee, chocolate and my Bella!
March 2, 2013 at 10:35 am #23764WendyYoheMemberI just copied the DIVs. Here's the widget section of the home.php file:
function metro_homepage_widgets() {
genesis_widget_area( 'home-top', array(
'before' => '<div class="home-top widget-area">',
) );
genesis_widget_area( 'home-top2', array(
'before' => '<div class="home-top2 widget-area">',
) );if ( is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) ) {
echo '<div class="home-middle">';
genesis_widget_area( 'home-middle-left', array(
'before' => '<div class="home-middle-left widget-area">',
) );genesis_widget_area( 'home-middle-right', array(
'before' => '<div class="home-middle-right widget-area">',
) );echo '</div>';
}
genesis_widget_area( 'home-bottom', array(
'before' => '<div class="home-bottom widget-area">',
) );
if ( is_active_sidebar( 'home-middle-left2' ) || is_active_sidebar( 'home-middle-right2' ) ) {echo '<div class="home-middle2">';
genesis_widget_area( 'home-middle-left2', array(
'before' => '<div class="home-middle-left2 widget-area">',
) );genesis_widget_area( 'home-middle-right2', array(
'before' => '<div class="home-middle-right2 widget-area">',
) );echo '</div>';
}
genesis_widget_area( 'home-bottom2', array(
'before' => '<div class="home-bottom2 widget-area">',
) );}
genesis();
March 2, 2013 at 10:38 am #23765WendyYoheMemberI'm viewing the site in Firefox and Chrome and they both show the text widgets overlapping.
Can I add an image here? I can take screenshots.
March 2, 2013 at 11:39 am #23773AnitaKeymasterUpload your image in your Media area and then post the link to it here.
Love coffee, chocolate and my Bella!
March 2, 2013 at 11:58 am #23776WendyYoheMemberScreenshots -
Firefox browser = http://johnstown360.com/wp-content/uploads/2013/03/firefox.png
Chrome browser = http://johnstown360.com/wp-content/uploads/2013/03/chrome.png
March 2, 2013 at 1:01 pm #23787AnitaKeymasterThat's weird because in my Firefox & Google Chrome, they are side by side. In Internet Explorer, the are like your image, however - if I click Compatibility Mode - they fix to side by side.
Love coffee, chocolate and my Bella!
March 2, 2013 at 1:21 pm #23789WendyYoheMemberI just grabbed my husband's computer and checked the site. Looks great in both Chrome and Firefox. Test widget areas display correctly. Sooo, looks like we're dealing with a caching issue on my computer.
Thanks for all your help, anitac! =)
March 2, 2013 at 2:15 pm #23793AnitaKeymasterSure, not a problem.
Love coffee, chocolate and my Bella!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.