WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
[resolved] Full width header/footer background colour (15 posts)

  1. hazelfader
    Member
    Posted 1 year ago #

    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.

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    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.

  3. hazelfader
    Member
    Posted 1 year ago #

    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.

  4. paulwpxp
    Font hero
    Posted 1 year ago #

  5. hazelfader
    Member
    Posted 1 year ago #

    Thanks I followed that and that pushed it full width

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  7. hazelfader
    Member
    Posted 1 year ago #

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

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

  9. paulwpxp
    Font hero
    Posted 1 year ago #

    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.

  10. hazelfader
    Member
    Posted 1 year ago #

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

  11. hazelfader
    Member
    Posted 1 year ago #

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

  12. paulwpxp
    Font hero
    Posted 1 year ago #

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

  13. hazelfader
    Member
    Posted 1 year ago #

    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.

  14. paulwpxp
    Font hero
    Posted 1 year ago #

    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.

  15. hazelfader
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic