Mix Metro and Copyblogger

Community Forums Forums Design Tips and Tricks Mix Metro and Copyblogger

This topic is: not resolved

This topic contains 6 replies, has 3 voices, and was last updated by  rfmeier 1 year, 4 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #45676

    dominadorweb
    Participant
    Post count: 5

    Hi, I was trying to edit the code in metro theme but I can’t figure how to make a Large Header and Menu, similar to the copyblogger one.

    I want to know if someone can help to figure it out. The images speak for itself

    http://s3.postimg.org/w2e1hyb9f/antes.jpg

    http://s9.postimg.org/jzcpw2w3z/after.jpg

    What I want is that header and menu don’t keep the 1080 structure, just like on copyblogger that the header is of the large of the screen

    Thank you in advance

    • This topic was modified 1 year, 4 months ago by  dominadorweb.
    • This topic was modified 1 year, 4 months ago by  dominadorweb.
    #45695

    rfmeier
    Participant
    Post count: 597

    Hello,

    The CopyBlogger site uses the .wrap elements within the #header and #nav to provide the 1152px width for the content. The #header element is still 100% width and has a background of black.

    Here is an example of what they are doing.

    [css]
    /* will expand the whole width of the page */
    #header {
    background: #222; /* black background */
    min-height: 72px;
    overflow: hidden;
    }

    /* .wrap is withing #header and other parent structure elements */
    .wrap {
    margin: 0 auto; /* center the content */
    max-width: 1152px; /* set a width */
    }[/css]

    I hope this helps point you in the right direction.


    #45901

    dominadorweb
    Participant
    Post count: 5

    Thank you rfmeier

    I have the metro theme, I don’t know what to do, I’m trying using some copyblogger codes but without success. Can someone indicate me what i have to change on the metro theme editor?

    Thank you

    #45904

    rfmeier
    Participant
    Post count: 597

    Unfortunately it is going to be a somewhat decent amount of css. Styling this remotely (without source code or development environment) will be a bit of a headache.


    #45917

    dominadorweb
    Participant
    Post count: 5

    that’s ok, I will try with a designer here in the company

    thank you again

    #45969

    devnick
    Participant
    Post count: 12

    I’m confused.  Wouldn’t he want to add/change #wrap to have max-width: 100%  In doing so, I’m not sure what side image you would load into the header.

    #45979

    rfmeier
    Participant
    Post count: 597

    That would probably work.  There are probably a few ways to do this, but I am going off of the Copyblogger markup and the image you supplied.


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

You must be logged in to reply to this topic.