Adjust Sitewide Background & Text Color/Size

Last Reviewed: 16-Dec-15 (3.4.16) 3.1-3.4.*

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

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

 

FONT CUSTOMIZER
*New* Take a look at this new Extension for the best user experience with Fonts
Font Customizer extension

29 thoughts on “Adjust Sitewide Background & Text Color/Size”

Comments are closed.