Styling Duplicate Widget Areas in Metro

Community Forums Forums General Discussion Styling Duplicate Widget Areas in Metro

This topic is: not resolved

Tagged: 

This topic contains 11 replies, has 2 voices, and was last updated by  Anita 1 year, 5 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #23734

    WendyYohe
    Participant
    Post count: 14

    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.com

    #23739

    Anita
    Participant
    Post count: 7430

    Looking at the code in Firebug – look for this:

    [css]
    .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;
    }
    [/css]

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #23745

    WendyYohe
    Participant
    Post count: 14

    The 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! =)

    #23753

    Anita
    Participant
    Post count: 7430

    What 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?


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #23754

    Anita
    Participant
    Post count: 7430

    I don’t see anything overlapping? I see the two test widgets right before the footer area.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #23764

    WendyYohe
    Participant
    Post count: 14

    I 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();

    #23765

    WendyYohe
    Participant
    Post count: 14

    I’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.

    #23773

    Anita
    Participant
    Post count: 7430

    Upload your image in your Media area and then post the link to it here.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #23776

    WendyYohe
    Participant
    Post count: 14
    #23787

    Anita
    Participant
    Post count: 7430

    That’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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #23789

    WendyYohe
    Participant
    Post count: 14

    I 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! =)

    #23793

    Anita
    Participant
    Post count: 7430

    Sure, not a problem.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.