Adjust Sitewide Background & Text Color/Size

After frequent requests in the Forum, I’m adding to this early Snippet with details on how to adjust the background color of every item in Customizr. I’ll use ‘pink’ to emphasise what you will need to change when you use the code (unless you’re a lady who loves pink!)

This focuses on solid colors only

Step 1 – Main body/containers

/* START OF Adjust Sitewide Background & Text Color/Size */
/* Change the (pink) body background */
body {
background:         none repeat scroll 0 0 pink; /* Change pink */
color:              #5A5A5A;              /* Default Text Color */
padding-bottom:     0px;
}
/* Change the central wrapper background */
#main-wrapper {
margin-top:         0px ;
margin-bottom:      0px ;
background-color:   pink ;               /* Change pink */
border:             2px solid red ;      /* Delete if no border needed */
}
.container[role="main"] {
background-color:   pink ;               /* Change pink */
}
/* END OF Adjust Sitewide Background & Text Color/Size */

Step 2 – Header/Navbar

/* START OF Adjust Sitewide Background & Text Color/Size */
/* Change the Header background */
header.tc-header, .navbar-wrapper,
.sticky-enabled header.tc-header   {
background-color:   pink;                /* Change pink */
}
/* Adjust the Header */
header.tc-header {
/* Adjust the (red) top border style/color */     
border-top:         10px solid red;
/* Adjust the (green) bottom border style/color */              
border-bottom:      10px solid green;             
}
/* Change the Navbar background */
.navbar-inner {
background-color:   pink;               /* Change pink */
background-image:   linear-gradient(to bottom, pink, pink); /* Change pink */
background-repeat:  repeat-x;
border: 1px solid   pink;               /* Change pink */
border-radius:      4px;
box-shadow:         0 1px 4px rgba(0, 0, 0, 0.067);
}
/* END OF Adjust Sitewide Background & Text Color/Size */

Step 3 – Slider

/* START OF Adjust Sitewide Background & Text Color/Size */
/* Optional - Remove Grey Bar above Slider */
.tc-header  {
border-bottom:      none;
}
/* END OF Adjust Sitewide Background & Text Color/Size */

Step 4 – Featured Pages

/* START OF Adjust Sitewide Background & Text Color/Size */
/* Fix the White Rectangles (including FPU extension) */
.round-div, [class*=span] .widget-front .round-div {
border-color:      pink;    /* Change pink */
}
/* END OF Adjust Sitewide Background & Text Color/Size */

Step 5 – Pages/Posts

/* START OF Adjust Sitewide Background & Text Color/Size */
/* No code needed */
/* END OF Adjust Sitewide Background & Text Color/Size */

Step 6 – Press Customizr Footer

/* START OF Adjust Sitewide Background & Text Color/Size */
/* Change the Footer background */
footer#footer .colophon   {
background-color:   pink;                /* Change pink */
}
/* Optional - Remove Grey Bar above Footer */
footer#footer {
  border-top:       none;
}
/* END OF Adjust Sitewide Background & Text Color/Size */

Step 7 – Widgets Footer

/* START OF Adjust Sitewide Background & Text Color/Size */
footer#footer, .footer-widgets   {
  background: none repeat scroll 0 0 pink; /* Change pink */
}
/* END OF Adjust Sitewide Background & Text Color/Size */

Step 8 – Adjust sitewide fonts size/color

/* START OF Adjust Sitewide Background & Text Color/Size */
body {
/* Adjust sitewide (#5A5A5A) text color */    
color:              #5A5A5A;
/* Adjust sitewide (1.2em) text size */    
font-size:          1.2em;
/* Adjust sitewide (Open Sans) font family */    
font-family:        Open Sans;
/* Adjust sitewide text alignment */
text-align:         left; /* left|right|center|justify */
}/* END OF Adjust Sitewide Background & Text Color/Size */