Foundation: Create a White Background

Support Area Forums Foundation Foundation: Create a White Background

This topic contains 2 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
URL to the page in question: http://www.usafraa.org
  • Author
    Posts
  • #37756

    Karen Gordon
    Participant

    Due to the dark color of the web background, the text cannot be read. I would like to change ONLY the page background to white, but NOT the header section.

    I currently have it set to a forum response solution that shows the custom CSS. How can I remove the white from the header and footer sections?

    Thanks,
    Karen

    #37759

    Bill Robbins
    Moderator

    Hi Karen,

    That is an excellent question. The simplest way to go about that would be to apply the same background to the header that we do to the site background. That way we can still apply a background to the “wrapper” so that it covers all the content, but the header will appear to have the same background as the main site background. I would change the CSS in your Custom CSS so it is like this:

    
    #wrap {
    	background-color: #fff;
    }
    
    @media only screen and (min-width: 1024px) {
    
    	#wrap {
    		width: 1020px;
    		padding-left: 30px;
    		padding-right: 30px;
    	}
    
    }
    
    @media only screen and (min-width: 768px) and (max-width: 1023px) {
    	
    	#wrap { 
    		width: 760px;
    		padding-left: 10px;
    		padding-right: 10px;
    	}
    
    }
    
    @media only screen and (max-width: 767px) {
    
    	#wrap {
    		width: 100%;
    		padding-left: 5%;
    		padding-right: 5%;
    	}	
    	
    }
    
    #header {
    	background-image: url(http://usafraa.org/wordpress/wp-content/uploads/back.png);
    	margin-left: -30px;
    	margin-right: -30px;
    }
    

    and see how that works for you. If you run into any questions or trouble, let me know.

    Thanks,
    Bill

    #37766

    Bill Robbins
    Moderator

    Good question. With the tagline added in, we have some “floats” that will need to be cleared to keep them from interfering them with what’s below. Try adding this to your Custom CSS too:

    
    #tagline,
    #logo {
    	float: none;
    }
    
    #header #tagline h2,
    #header #tagline p {
    	margin-top: 6px;
    	margin-bottom: 6px;
    }
    

    See if that doesn’t do the trick at removing that space. If you run into trouble, let me know.

    Glad you’re enjoying the themes 🙂

    Bill

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

The topic ‘Foundation: Create a White Background’ is closed to new replies.