Header Widget Within Metro

Community Forums Forums Design Tips and Tricks Header Widget Within Metro

This topic is: resolved

This topic contains 8 replies, has 3 voices, and was last updated by  bassjamm 1 year, 9 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #23481

    bassjamm
    Participant
    Post count: 15

    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

    #23485

    sanjeev
    Participant
    Post count: 34

    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.com/forums/topic/468px-banner-in-metro-theme-header-area/


    Meet me at: Make Web World

    #23488

    tomos
    Participant
    Post count: 12

    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) */ }


    #23494

    bassjamm
    Participant
    Post count: 15

    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?

    #23496

    bassjamm
    Participant
    Post count: 15

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

    Any ideas?

    #23501

    tomos
    Participant
    Post count: 12

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


    #23508

    bassjamm
    Participant
    Post count: 15

    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!

    #23514

    tomos
    Participant
    Post count: 12

    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;
    }


    #23539

    bassjamm
    Participant
    Post count: 15

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

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

You must be logged in to reply to this topic.