Jump to content

Creating a black layout container with white text

Rob Bedeaux

Recommended Posts

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' 


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


As always handle custom code with care!

Rob Bedeaux (he/him/his)
Director, Partnerships & Symphony Marketing
E rob.bedeaux@nbcuni.com


Link to comment
Share on other sites

  • 3 months later...


This topic is now archived and is closed to further replies.

  • Create New...