• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Header Widget Within Metro

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header Widget Within Metro

This topic is: resolved

Tagged: header, header widget, Metro, widget

  • This topic has 8 replies, 3 voices, and was last updated 10 years, 9 months ago by bassjamm.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 1, 2013 at 6:46 am #23481
    bassjamm
    Member

    Hi all...

    I'm trying to widen the header widget area within my Metro child theme.

    Here's my site - http://injuryfree.me

    My attempts within the css file have just widened all the widget areas/sidebars which obviously isn't cool.

    How do I single out the Header Widget area and customise the width and all that?

    Thanks in advance

    Jamie

    March 1, 2013 at 7:12 am #23485
    sanjeev
    Participant

    You can check the below thread, I have given the css to increase the width of widget there...you can change the values accordingly

    http://www.studiopress.community/topic/468px-banner-in-metro-theme-header-area/


    Check Why I Love Genesis Framework So Much

    March 1, 2013 at 7:22 am #23488
    tomos
    Member

    I was going to say the same as @sanjeev in terms of what you need to do.

    Simply put, as the widget is within header div you need to be more specific when targeting the widget itself. Therefore you can target the header (#header) itself, then the widget (.widget-area) within like so (#header .widget-area). You'd also need to reduce the title width as that would force things down.

    I played about with the Chrome Inspector on your site and these values should work for you:

    #title-area { width:29.62962962963%; /* 100(320/1080) */ }

    #header .widget-area { width:56.944444444444%; /* 100(615/1080) */ }


    @tomoswyn

    March 1, 2013 at 7:55 am #23494
    bassjamm
    Member

    Thanks for that guys.

    So do I need to simply add that code to the bottom of my  css file, or do I need to replace the current styling with the style mentioned here?

    March 1, 2013 at 8:06 am #23496
    bassjamm
    Member

    Woah...I've redone all of that following the instructions and it's totally screwed the layout up!

    Any ideas?

    March 1, 2013 at 8:24 am #23501
    tomos
    Member

    Found it.

    Try this. Open up your style.css file:

    1) Go to Line 451, and change:

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .sidebar,
    .subnav-left,
    width: 31.111111111%; /* 336px / 1080px */
    }

    to

    .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .sidebar,
    .subnav-left {
    width: 31.111111111%; /* 336px / 1080px */
    }

    ( notice how .subnav-left has the symbol { instead of using a comma )

    2) Right at the bottom of the file, remove this bit of code:

    #header .widget-area { float: right; padding: 14px 0 0; width: 468px;

    Things should look better then (doing these 2 things fixes the layout issue on my mac).


    @tomoswyn

    March 1, 2013 at 8:43 am #23508
    bassjamm
    Member

    Awesome!

    DONE!

    Now...how do I stop the site header/name getting cut on the right hand side? You'll see it's kind of chopped off a bit.

    Really appreciate the help dude!

    March 1, 2013 at 8:55 am #23514
    tomos
    Member

    Right at the bottom of the style.css file change:


    #title-area {
    float: left;
    overflow: hidden;
    padding: 18px 0 0 20px;
    width: 298px;
    }

    to:


    #title-area {
    float: left;
    overflow: hidden;
    padding: 18px 0 0 20px;
    }


    @tomoswyn

    March 1, 2013 at 10:40 am #23539
    bassjamm
    Member

    Thanks for that...I was just figuring out it was that bit as it happens. Much appreciated!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble