This theme uses advanced critical path rendering techniques, edit with caution. The css is broken up into the above fold portion and settings saved in the customizer located/loaded in the document head and additional external style sheets are appended to the head with javascript in the footer of the document (preventing render blocking css files).
This theme is responsive and uses media queries in the CSS to target different size monitors and operating systems.
The HTML document links to a main CSS file called style.css inside the folder. The CSS document is broken into different sections using media queries.
There are three other CSS files linked; grid.css, font-content.min.css and font-awesome.min.css. There is also a CSS style sheet (ie.css) that only loads on older version of ie (ie8 and earlier).
We recommend you use a child theme or the customizer to store any Custom CSS you want to add and thus aviod overwriting your edits to the theme when updating. In the WordPress customizer select Custom CSS add your custom CSS and media queries and save.
If you would like to change any color, first make sure it’s not already available in the customizer settings. You can take advantage of the new CSS RGBA property. You may also use hex values or RGB instead of RGBA. This document takes advantage of new CSS3 features such as border-radius, box-sizing, transitions, opacity, boz-shadow etc.
Custom CSS Snippets:
There are times when you might want to add some custom CSS to your theme. Here are a couple handy examples to get you started.
Hide the “Posts Categorized” title on category pages:
body.archive h1.h2 span{display:none}
Search box change border color on hover
When using a white header you may want to have the border of the search box change color on hover:
#scms:hover{border-color: #004890}
Adjust height of the above-fold call to action button
Here’s one for adjusting the height of the above-fold call to action button so it fits the article header better (if you change the default font/size for the article header):
.widget_cta,.page_cta_top,.page_cta_center{line-height:54px!important}