CSS

Cascading Style Sheet  (CSS) is a way to define colors, fonts, and other attributes to your web site.  This file will override the default settings and the settings you painstakingly took to tweak the individual setting using the customize section.

It is recommended that a Child theme is used, so when the theme author publishes an upgrade, your changes will remain intact.  It is also 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.

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

Here we will inspect each section of the 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;
}
a:hover,
a:focus
{
color: #00ccc9;
text-decoration: underline;
}

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

/* Header and Footer Background */
header.tc-header, 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
{
color:#3B5998;
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 */
body
{
background: #80fffd;
background-image: none url("http://cmc.mareworks.com/wp-content/uploads/2015/09/WheatBackground.jpg");
background-repeat: no-repeat;
background-position: center;
}
#main-wrapper
{
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