Change the Heading and Navigation Button Font Colors in the Simplefolio Theme

Posted September 30th, 2011 by cdclocks@gmail.com

Since code is not my greatest strength, this one took me a while to figure out.  With some help from search engines, forums, and some awesome blogging friends, we found all the spots to change in the Simplefolio WordPress theme to change the colors of the Heading and Navigation Button fonts.  

With the instructions below, you should be able to change the heading and nav button font colors in minutes.

The default in the Simplefolio theme is a very cool steele blue-ish color that I actually really like, but for my new site, I needed the headings and nav buttons to be a red color to match the logo and banner images. 

(I used Paint Shop Pro to select the red color from the images and get the hex code, #ef2123.  You can also use several free tools online to select a color and get the corresponding hex code.  I kind of like the Hex Color Code Generator on www.2createawebsite.com.  They have a color wheel tool at the bottom that also provides complimentary colors.)

Change the Heading and Nav Button Font Colors in the Simplefolio Theme
In WordPress, go to the Dashboard and select Appearance>Editor.  The Stylesheet (style.css) usually displays by default.  If not, select it from the column on the right.
Find the following 4 pieces of code in style.css and change the hex code for the text colors.  In the example below, I’ve changed the code to ef2123 for a red color that matches my logo and banner images.
1.        ……..near the top………………………………………………..
a:link,a:visited,a:active {
        color:#ef2123;
        text-decoration:none;
    }
2.       …….about 35 lines lower………………………………………..
#header #pagenav {
            float:right;
        }                  
            /* Superfish – Menu Styles */
            .sf-menu, .sf-menu * {z-index: 9999999 !important;}
            .sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
            .sf-menu { margin-top:20px;}
            .sf-menu ul {position:absolute;top:-999em;width:10em; /* left offset of submenus need to match (see below) */}
            .sf-menu ul li {width:100%;}
            .sf-menu li:hover {visibility:inherit; /* fixes IE7 ‘sticky bug’ */}
            .sf-menu li {float:left;position:relative;}
            .sf-menu a {display:block;position:relative;}
            .sf-menu li:hover ul,.sf-menu li.sfHover ul {left:0;top:2.2em; /* match top ul list item height */z-index:99;}
            ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {top:-999em;}
            ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {left:12.8em; /* match ul width */top:0;}
            ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {top:-999em;}
            ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {left:10em; /* match ul width */top:0;}
            .sf-menu {float:left;margin-bottom:1em;}
            .sf-menu a {padding: 10px;text-decoration:none;}
            .sf-menu a, .sf-menu a:visited,.sf-menu a, .sf-menu a:link  { color: #ef2123; }
            .sf-menu li {font-size:18px;}
            .sf-menu li a:hover {border-bottom:1px solid #d2d2cf;outline:0;}
            .sf-menu li ul {background:#d2d2cf;border:1px solid #bbbbb8;opacity: .85;filter: alpha(opacity=85);    -ms-filter: “alpha(opacity=85)”;-khtml-opacity: .85;-moz-opacity: .85;}
            .sf-menu li ul li {font-size:14px;}
            .sf-menu li ul li a:link,.sf-menu li ul li a:visited { color:#454545;}
            .sf-menu li ul li a:hover {border:0;background:#fff;}
            .sf-menu li ul li ul { background-color:#e2e2e2; border:1px solid #d1d1cc;opacity: .85;filter: alpha(opacity=85);    -ms-filter: “alpha(opacity=85)”;-khtml-opacity: .85;-moz-opacity: .85;}
            .sf-menu li ul li ul li a:link,.sf-menu li ul li ul li a:visited { color:#000;}
            .sf-sub-indicator { padding:0; margin:0;}
3.       …….and a little less than half way down………………………
#main .container .content .title {
                    font-size:30px;
                    color:#ef2123;
                    margin-bottom:15px;
                }
4.        ……..a couple of lines lower……………………………………………………………….
#main .container .content h1,#main .container .content h2,#main .container .content h3,#main .container .content h4 {
                    color:#ef2123;
                    margin-bottom:15px;
                }

Make sure you click Update File to retain the changes.

Tagged and categorized as: online writing Comments Off on Change the Heading and Navigation Button Font Colors in the Simplefolio Theme

Comments are closed.