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 2 years ago.

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


    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



    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




    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.

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

    I hope this helps point you in the right direction.



    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



    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.



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

    thank you again



    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.



    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.