How to customize Iconic One Free theme colors – 3 CSS edits

By | February 14, 2015

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:

  1. Changing the Iconic One menu color
  2. Changing the Iconic One search bar color
  3. 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.

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.

Accessing-stylesheet-css

Here you can make changes to the CSS (Cascading Style Sheet), which used to determine the look of your site.

Edit-WordPress-Stylesheet

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

Get Notepad++!

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.

1 – Change the Iconic One menu color

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.

To find any HTML color code, go to html-color-codes.info, or use the color codes and coversion tool on my website.

Changing the color of the currently selected menu item

For the small colored bar below the menu, change the hex code in Line 1529 of your stylesheet:

Iconic-one-menu-currently-selected-color

Change this line. Picture taken in Notepad++

In my case, this means I changed “background: none repeat scroll 0 0 #16A1E7;” to “background: none repeat scroll 0 0 #FF8000;”.

Changing the color of the menu item you hover over

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”

Iconic-one-menu-hover-over-color

Changing the color of the line below the menu bar

For the small colored bar below the menu, change the hex code in Line 1462:

Iconic-one-menu-bar-line-color

In my case, this means I changed “border-bottom: 5px solid #16A1E7;” to “border-bottom: 5px solid #FF8000;”.

The result:

Before: After:
Iconic-one-menu-bar-before Iconic-one-menu-bar-after

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.

Iconic-one-menu-search-bar-color

Change the hex code for the background in line 241. In my case, I changed it from #00A1E0 to #FF8000.

The result:

Before: After:
Iconic-one-search-bar-before Iconic-one-search-bar-after

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.

Iconic-one-widget-bar-color-before

CSS code before

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.

Iconic-one-widget-bar-color-edited-background-color

Changed widget title background color

Font size

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;”.

Iconic-one-widget-bar-color-edited-font-size

Changed widget title font size

Font color

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

Changed widget title font color

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.

Iconic-one-widget-bar-color-edited-font-weight

Changed widget title font weight

The result:

Before: After:
Iconic-one-widget-bars-before Iconic-one-widget-bars-after

Conclusion

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.

5 thoughts on “How to customize Iconic One Free theme colors – 3 CSS edits

  1. Evelyn

    I found you site, and I wanted to change the colors blue from my theme. I’m so excited that I did it. I have to thank you for your informative info. If I didn’t have your info, I wouldn’t have gotten it done. Thanks again. :)

    Reply
    1. GuidoGuido Post author

      Hey Evelyn, that’s awesome! Being able to make chances to the CSS is a great skill to have as blogger. The Iconic One theme is very popular, so customizing it a bit will really make your site stand out. Glad I could be of help :)

      Reply
  2. Rosangela Lemes

    Você é demais, estou procurando um blog que me ensine passo a passo e te encontrei.
    Já consegui fazer a mudança de cores, estou vibrando, você não tem noção com isso é importante para mim !!! Muito Feliz, parabéns por compartilhar seus conhecimentos de forma simples e completa. Vou continuar com as minhas personificações com sua ajuda. Obrigado

    Reply
    1. GuidoGuido Post author

      You’re welcome, Rosangela!

      (Had to use a Google translator to read your comment, as I don’t speak Portuguese)

      Reply
  3. Widi

    HI Guido,

    I stumbled on your site whie browsing.
    I use Iconic one for my website. I’ve tried to customize it by following your instructions, but it didn’t work. I have no idea why. Do ou have any sugestions? Thanks

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*