Cascading Style Sheet (CSS) is a way to define colors, fonts, and other attributes to your web site. WordPress themes rely heavily on CSS to format your content.

It is recommended that a Child theme is used, so when the theme author publishes an upgrade, your changes will remain intact.  The Child theme contains a file called style.css.  In this file you can override a particular section of the theme to make it match your particular color scheme.

This post document is specific to the Customizr Pro theme.  The Customizr Pro theme allows you to quickly make a multitude of changes to your layout, but the changes are in various sections of the Customize area. It is assumed that you are familiar with CSS.  if not, you will need to search the web if you want a deeper understanding what these snippets do.

By adding these snippets of CSS code to your styles.css file, you can make changes in only one place.

To make changes to the CSS file, go to Appearance / Editor.  You can copy then paste these snippets into your CSS file.

The links on each page and widget will take on the attributes set in this section.

/* Links in the pages */
a {
color: #006664;
text-decoration: none;
font-weight: bold;
font-size: small;
a:link, a:visited
color: #006664;
color: #00ccc9;
text-decoration: underline;

Both the header and footer's background colors and borders are changed.

/* Header and Footer Background */, footer#footer
background: #009997;
border-top: 5px solid #009997;
border-bottom: 5px solid #009997;

Lets also change the size and color of the Facebook Icon in the footer

footer#footer .colophon a.icon-facebook, a.icon-facebook
font-size: 2em;

This is in several sections.  

First you define the background color of the page.  This is the section between the header and the footer.

Next you define the text area of the page which includes the sidebars.

/* Background color of the body */
background: #80fffd;
background-image: none url("");
background-repeat: no-repeat;
background-position: center;
background-color: #e6ffff;
border-top: 15px solid #e6ffff;
border-bottom: 15px solid #e6ffff;
border-left: 15px solid #e6ffff;
border-right: 15px solid #e6ffff;

Pin It on Pinterest

Share This