Creating a black layout container with white text

[Rob Bedeaux]

Wouldn't it be nice to be able to take a section of your page and make it stand out from the rest? One way to do this is to make the background of the layout container a different color thant the rest of the containers on the page. In this code sample, it will create a black layout container for white text (thanks Sam Slagle!). Just place this code in the page header and then make sure you put the class name 'black' in the layout container 'CSS Class' 

 

<style>
/* Black Elements */
.black.layoutContainer {
    margin-left: -15px;
    margin-right: -15px;
    background-color: #000000;
    color: #fff;
}
.black {
     background-color: #000000;
     color: #fff;
}
.black h1, .black h2, .black h3, .black h4, .black  h5, .black h6 {
    color: #ffffff
}
</style>

 

As always handle custom code with care!

[Bryan Hopper]

Rob - How would you go about changing the color of the container? Or add a background image with some transparency? Always looking to customize!

 

Thanks

[docnzok]

Good One Rob!!!

 

Here's an example of a container with #003264 (Blue) background.