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