In this article I’ll demonstrate how to make 3 different edits to the Iconic One free theme by editing the stylesheet.css. These three are most common edits I see people asking about, and will therefore demonstrate in this article:
- Changing the Iconic One menu color
- Changing the Iconic One search bar color
- Changing the widget title bar and text color
The Pro version of this theme (read my review here) allows you to do the first two of these edits without changing any code. With the free theme however, you’ll have to edit some code in your stylesheet.css file.
Table of Contents
- How to make stylesheet edits
- Before you get started
- 1 – Change the Iconic One menu color
- 2 – Change the search bar color
- 3 – Change the widget title bar and text
How to make stylesheet edits
To get to your stylesheet.css; log in to your WordPress site. From here, hover over ‘Appearance’, and click ‘Editor’ to access your stylesheet.
Here you can make changes to the CSS (Cascading Style Sheet), which used to determine the look of your site.
When you’re done making your edits, simply click the ‘Update File’ button to update your stylesheet, to have the changes take effect.
Before you get started
I highly recommend installing Notepad++, and copy your stylesheet here. Notepad++ allows you to see line numbers, which I’ll be referring to. Sadly, there is still no plugin to show line numbers in WordPress itself (yet).
Obviously, you’ll have to copy the stylesheet back to your stylesteet.css in WordPress, and click ‘Update File’.
Make a backup!
Before you start, I also recommend you make a backup of the original stylesheet, by simply copying the entire stylesheet and saving it in a document on your computer.
To do this quickly, click anywhere on the stylesheet, then use Ctrl+A to select all, then Ctrl+C to copy, and paste it (Ctrl+V) in notepad, and save the file.
Let’s say you want your menu bar to be orange instead of the standard light-blue. The current color, light blue, has hex code #16A1E7 , the color of orange I’m going to use in this example is #FF8000.
For the small colored bar below the menu, change the hex code in Line 1529 of your stylesheet:
In my case, this means I changed “background: none repeat scroll 0 0 #16A1E7;” to “background: none repeat scroll 0 0 #FF8000;”.
When you hover over a menu item in the Iconic One theme, the menu item lights up in the default light blue color. You can change this by editing the hex color in Line 555.
To go with my orange design, I changed this from “background:#00A1EO” to “background:#FF8000”
For the small colored bar below the menu, change the hex code in Line 1462:
In my case, this means I changed “border-bottom: 5px solid #16A1E7;” to “border-bottom: 5px solid #FF8000;”.
2 – Change the search bar color
To make the search bar go with the new menu bar color, we’ll have to change the color of that too.
Change the hex code for the background in line 241. In my case, I changed it from #00A1E0 to #FF8000.
3 – Change the widget title bar and text
The CSS code for the Iconic One widget title bar is located at line 582-585 of your stylesheet.
Title bar color
In my example, I want the widget title bars to go with the search bar and the menu bar. To change to color of the widget title bar, edit the hex color in Line 583.
You can also change the font site. In my case, I want a slightly smaller font, so I change the font size by editing Line 584 to “font-size: 14px;”.
To change the text color from the default, you have to add a line. In my case, I want the text color to be white instead of grey. You can do so by adding a line of code. In my case, I want the text to be white. You can do so by adding a line that says: “color: #FFFFFF;”. Also, I want the text to be bold. Y
Text: bold, underline, italics.
If you want to make the font bold, add a line that says: “font-weight: bold;”, for underline, add “text-decoration: underline;”, and for “font-style: italic;”. In my example I make the font bold.
You now know how to make 3 specific edits, to make your Iconic One theme look more unique. There are, of course, a lot more things you can edit than what I showed in this article. An upcoming article will go into editing any part of your theme.
Note: when updating your theme, the changes to your stylesheet.css will be lost!
Therefore, make sure you save your edited stylesheet, so you can quickly restore it after updating your theme. There is a way to make sure your stylesheet will stay intact during updates; using a Child theme.
Looking to upgrade to Iconic One Pro, and unlock more features? Check out the Pro theme here.