How to Change the Link Colors in the Sugar and Spice Theme

If you want a free theme, one of the nicest once for WordPress right now is Sugar and Spice. However, one problem with it is that it can be difficult to customize. I FINALLY figured out how to change the link colors in the Sugar and Spice theme, though, and I’m here to explain it!

First, if you’re new to Sugar and Spice, there are some built-in theme colors. To find those, go to your WordPress Dashboard, hover over Appearance and click on Theme Options. Under Basic Settings, you should see Color Scheme, a drop-down, and then Accent Color and another drop-down. And that’s how you change the theme colors. 😛

The colors are limited, though. So if you want custom colors like I did, you’ll have to delve into CSS. It’s MUCH easier than you’d think, though. You don’t even need to touch your stylesheet.

First, download and install the plugin Simple Custom CSS. What this plugin does is it lets you change the CSS without worrying about screwing up. In my experience, if I enter bad CSS, all it does it…nothing. It doesn’t show what I changed. So if you want to make small changes to your stylesheet, this is the way to do it. (For large changes, like the ones I’ve made, you should consider creating a child theme.)

Once you’ve installed and activated the plugin, go to Appearance and Custom CSS. You should see a large text box. It will either be empty or it will have a short description of what it does. Feel free to delete the description if you want.

Now, all you need to do is add a little code.

Changing All Colors

If you want to change all of your links so they’re exactly the same, you can use this code that Beth from Living with Beth sent me:

a, a:hover, a:visited, a:active { font-weight:normal; /* make all links appears normal instead of bold */ }
a { color: #cb2931 !important; /* color of links */ }
a:hover { color: #918986 !important; /* color of links when hover mouse over */ }
a:active { color: #cb2931 !important; /* color of links when active */ }
a:visited { color: #cb2931 !important; /* color of links after user has visited it */ }
a:hover { color: #918986 !important; /* color of links after user has visited it */ }

Changing Individual Colors

I wanted my menu to be a different color than the rest of my site’s links, so here’s how I did it. Insert this code:

/*LINK COLORS*/

#sidebar a {
text-decoration: none;
color: #cb2931;
}

#sidebar a:hover {
text-decoration: none;
color:#918986;
}

#main a {
text-decoration: none;
color: #cb2931;
}

#main a:hover {
text-decoration: none;
color:#918986;
}

#prefooter a {
text-decoration: none;
color: #cb2931;
}

#prefooter a:hover {
text-decoration: none;
color:#918986;
}

#footer a {
text-decoration: none;
color: #cb2931;
}

#footer a:hover {
text-decoration: none;
color:#918986;
}

It will look like this in the plugin:

As you can see, there are two different versions of each link (indicated by the number sign)–a regular version and a “hover” version. The first one is what the link looks like when it’s just sitting on your site, untouched. Mine is red (which is indicated by using the hex code #cb2931). The other is the hover color, or the color it changes to when your mouse is on it (mine is grey, which is indicated with the code #918986).

The beauty of using this code is that you can make all of the colors different.

In order to change these colors, all you do is change the hex codes. You can change them to whatever you want. If you don’t know your color’s hex code, you can use this tutorial on figuring it out. If you don’t have a color chosen, here is a list of currently popular colors with their hex codes.

Now, save that CSS. If you refresh your site, you’ll notice that your menu hasn’t been changed. This is because I didn’t use CSS to change the menu. I tried, but I couldn’t find the notation within the code. And the Sugar and Spice Support Forums are extremely unhelpful (the designer never actually meant for us to customize the theme, it seems).

Changing the Menu Colors

To change my menu, I installed the plugin Max Mega Menu. This allows you to change the style of a menu without ever touching CSS. You can add a background color (you can even make it transparent), change the hover colors, etc.

Just go to Appearance and click on Max Mega Menu. Then click on Theme Editor.

This plugin can be weird about the name you choose for your menu’s theme name. I picked many that it didn’t like, so I called it “Sugar and Spice Child Theme” and it accepted. So my advice is to just pick the name of the theme you’re currently using.

The only settings I needed to change were the ones under Menu Bar (I changed the background and I set the alignment to “Center”) and Top Level Menus (I changed the “Font” and “Font (Hover)” sections. I also added a check mark next to “Highlight Current Item”). Then I scrolled down and changed Flyout Menus, which controls how your drop-down menu looks.

Play around with the settings and see what works for your site!

The final thing I did, to make the menu bar the same width as the rest of my site, is add this code to the CSS Editor at the bottom of the page:

#{$wrap} {
width: 1050px; /** width in pixels or percent **/
margin: 0 auto; /** center align menu **/

It looks like this:

You will want to change your width, since mine isn’t the standard for Sugar and Spice. I changed the width of my whole site a couple months ago.

Getting Rid of the Ribbon

One more thing you can do if you want, that isn’t worth writing a whole post about, is getting rid of the ribbon. You can’t change the ribbon color because it’s an image. So I found it easier to just remove it.

I did that by going back to my Custom CSS plugin and adding this code:

/* REMOVE RIBBON */

body #nav-wrapper .ribbon-left,
body #nav-wrapper .ribbon-right {
background-image: none;
}

Original Colors

If, for some reason, you need the hex codes for the theme’s color choices, I’ve listed them below:

Baby Blue: #a7dbd8
Emerald: #36ab8a
Green: #97c379
Mint: #9ed6bb
Orange: #f66b40
Peach: #f9aa89
Pink: #f8afb8
Red: #f03b42
Violet: #bb86b4
Yellow: #fff568

That’s it!

Is there anything you want to do with Sugar & Spice that you’ve had trouble figuring out? Let me know in the comments and I’ll consider writing a tutorial (assuming it’s something I’ve figured out how to do!).