WordPress.org

Support

Support » Themes and Templates » [Resolved] Full width header/footer background colour

[Resolved] Full width header/footer background colour

  • I want to make the header background colour run full width, keeping the header image aligned to the main content container but am struggling to understand the container architecture of 2012 theme.

    http://anythingaudio.co.uk/aa_2013_wp/

    I have resolved this for the footer by removing it from the page template but now the content of the footer stretches the full page width too, this is not ideal. Also the colouring stops before the bottom of the page?

    Any suggestions greatly appreciated.

Viewing 14 replies - 1 through 14 (of 14 total)
  • paulwpxp

    @paulwp

    Font hero

    I remember this same question in other thread, I believe there are solution for this in this forum already, please search for it.

    You got a child theme runing, so it’s just a matter of taking header and footer out of the body area and do some CSS work.

    Thanks but I have searched and read up & am still struggling. I have taken the header and footer out of the body area but there is still some formatting over riding the styling somewhere that I cannot find. I have tried looking with firebug but cannot track it down.

    paulwpxp

    @paulwp

    Font hero

    Thanks I followed that and that pushed it full width

    WPyogi

    @wpyogi

    Forum Moderator

    You should really start by removing all the parent CSS from the child theme style.css – only your changes should go there. You’ll need to use the @import line to bring in the parent styles.

    Thanks that’s a good tip can you explain the @import line?

    WPyogi

    @wpyogi

    Forum Moderator

    paulwpxp

    @paulwp

    Font hero

    This is a CSS only method of making full width bg color for header and footer. Keep template as is, this is CSS only method.

    /* Use this in child theme's style.css of TwentyTwelve */
    
    html:before {
    	content: "";
    	display: block;
    	position: absolute;
    	top: 0;
    	width: 100%;
    	z-index: -1;
    	height: 250px; /* change me */
    	background: red; /* change me */
    }
    html:after {
    	content: "";
    	display: block;
    	position: relative;
    	width: 100%;
    	z-index: -1;
    	height: 250px; /* change me */
    	margin-top:-250px; /* change me */
    	background: blue; /* change me */
    }

    The background could be gradient or image, the important bit is the height that need to fine tune to match the theme’s.

    Thanks very much, think I am sorted now. Great Advice

    Superb Css! I have been wrangling over the formatting and this just makes it really easy to keep the content centered. Brilliant.

    paulwpxp

    @paulwp

    Font hero

    @hazelfader

    I just realized that you have footer widgets added on, that will trouble the height of footer bg using CSS above. Because TwentyTwelve is responsive, when viewed on small screen the height of footer widget increases due to the collapsed contents inside.

    The best bet is to have the templates edited, take them out of body and style them. It seems tedious but it’s a sure way.

    Or you can continue to use the method above but you have to wrap it inside media query and adjust it according to screenwidths.

    Twentytwelve is mobile first and it has 2 breakpoints, one at 600px and one at 960px, ( look at the lower part of Twentytwelve style.css).

    thanks I did wonder if that would affect it. I don’t mind moving the footer out of the page wrapper but when I did this the content spread to the left and no matter what I tried with css I could not center it.

    paulwpxp

    @paulwp

    Font hero

    On a sidenote, your footer widget has a hard px width in it, because Twentytwelve is responsive, the width and margin should be set in % only.

    Also, 4 footer widgets must collapse in certain screenwidths, might be 2 widgets per row at 600px and 1 per row below 600px.

    I don’t mind moving the footer out of the page wrapper but when I did this the content spread to the left and no matter what I tried with css I could not center it.

    The outer div that holds all the footer widgets (and whatever you put in there), you just assign max-width:960px; along with margin:0 auto; which is the same thing that set to the main page itself.

    Great advice, I have fixed all of that. Thanks for your help on this, I was starting to lose the plot.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘[Resolved] Full width header/footer background colour’ is closed to new replies.