Change color text sidebar and menu

Hi, Chris:

I’ll walk you through how to change the text color on your sidebar, and then you should be able to do the same for any other element on your web site. That is, I could just give you the CSS rules to plug into Custom CSS Manager, but then you wouldn’t learn anything, and you would be forever posting messages about how to change this and that. You sound like a smart girl, so instead of giving you a fish, I will teach you to fish. And don’t be intimidated by this lengthy post, it just comes down to figuring out what rules are currently in place for a particular element, then writing your own rule to override the existing rule.

You mentioned that you downloaded Custom CSS Manager, but it doesn’t look like you’ve installed or activated it, yet. You actually don’t have to download plugins, you can install them directly from the WordPress admin dashboard. Go to Plugins > Add New. In the Search field, type in Custom CSS Manager and click the Search Plugins button. The Custom CSS Manager should be the first plugin listed. Click the Install now link, then after it is done with the installation, click the Activate link. You will now have a menu item under Appearance called Custom CSS Manager, which you will use to enter your custom CSS.

You will now learn how to use a web debugging tool to examine your web site. The two most popular ones are Firebug, which is a free extension for Firefox, and Chrome Developer Tools (or DevTools for short), which already comes built in with Chrome. In my example below, I will be using Chrome’s DevTools.

Open up your site in Chrome. Since we want to make a change to the sidebar, click on the + sign so the sidebar is displayed. You’ll see that there are actually a number of different elements on the sidebar. There are the widget titles, like What are you looking for?, What’s new?, etc. There is the text inside the widget, and then there’s a “post date” for the text in some of the widgets. Let’s change the color of the widget titles first.

Move your mouse over the title What you’ve might missed out on, right-click the title, and select Inspect element from the bottom of the pop-up menu. The Chrome DevTools will now open up at the bottom of your browser window.

In the left pane is a listing of page’s web elements, in a layout that shows the structure of the page. The element that you are inspecting should be highlighted, and looks like this:

<h1 class="widget-title">What you’ve might missed out on</h1>

A few things to note:

1. The title is created using an H1 “tag.” H1 stands for Heading 1. A “tag” is a way of specifying a web element in HTML, and they are always place inside angled brackets like this: <h1>. Most (but not all) tags require an opening tag and a closing tag, with the stuff that is affected by the tag in-between. In this case, What you’ve might missed out on is surrounded by an opening <h1> tag and a closing </h1> tag.
2. This particular element has a class assigned to it called widget-title. Classes are used to target CSS rules to elements that have the same purpose or function. For example, we could write a CSS rule which turns the color of all H1 elements to blue, but that would affect all H1 elements and not just the H1 elements which are used for widget titles. For many themes, including Spun, H1 tags are used for the site title as well as page titles.
3. Besides classes, another attribute that is commonly used for CSS purposes is an ID. If you look in the left pane of DevTools, just above the line for the widget title is a line that looks like this:

   <aside id="recent-posts-3" class="widget widget_recent_entries">

   This aside element has an ID of recent-posts-3 assigned to it. In a properly constructed web page, IDs are supposed to be unique. That is, there will not be another element on this page that has an ID of recent-posts-3. This allows you to target one specific element on your page with a CSS rule.

In the right pane is a listing that shows all of the CSS rules which affect the highlighted element. The first rule looks like this:

.widget-title {
   font-size: 24px;
   font-size: 2.4rem;
   margin: 0 0 .5em 0;
}

The second rule underneath looks like this:

h1 {
   font-size: 32px;
   font-size: 3.2rem;
   line-height: 1em;
}

A CSS rule is divided into two parts, the selector, which is outside of the braces, and the properties, which are inside the braces. For the first rule, .widget-title would be the selector. The period at the beginning of .widget-title means this is a class name. If an ID were being referenced, then there would be a pound sign (#) at the beginning of the ID name in the selector. Element tags (like h1) are just plain.

There are three properities in the first rule: two font-size properties, and a margin property. The properties are made up of a property name, a colon (:), then a value, and the property ends with a semi-colon. When you look at the properties for that first rule using DevTools, note that the first font-size property is struck through. The way that CSS works is that if you have identical properties within the same rule, then the latter property takes precedence over any earlier ones. So the value of 2.4rem will be in effect instead of the value of 24px.

If you look at the properties of the second rule (for h1), you’ll see that both font-size properties are struck out. That’s because there is an identical font-size property in the rule for .widget-title above. So how does the browser know which property to use if different rules contain the same property? It’s all based on something called CSS specificity. In short, a selector will have a certain score, or weight, based upon the components which are used to make it up. The rules for calculating this score says that element tags (like h1) have a weight (or score) of 1, classes have a weight of 10, and IDs have a weight of 100. The way that CSS works is that for rules which have identical properties, the properties from the rule which has the higher specificity will be used over rules which have a lower specificity.

If any of the above is confusing, just remember that DevTools automatically sorts the CSS rules in the right pane based upon the specificity of the selectors, so the rules at the top will have precedence over the rules at the bottom. And the properties which are in effect are all of those which are not struck out, so DevTools makes it easy to see what properties effect the elements that you see.

So let’s change the color of the widget titles. You can see that the top-most rule already targets widget titles through the class .widget-title, so all you need to do is write your own rule using the same selector.

Open up Custom CSS Manager and copy & paste this rule into it:

.widget-title {
   color: #cc99ff;
}

The property for text color is called color. This rule sets the color of the widget titles to the same violet color as the site title (which I discovered by “inspecting” it). Save the CSS, refresh your site, then inspect one of the widget titles, and you should see your new rule at the very top of the right pane.

One nice thing about using DevTools is that you can change properties interactively and see those changes immediately in your browser. For example, click on #cc99ff; in the color property for the first rule and change it to #ffff00;. Now your widget titles change to yellow (although temporarily). Changing values this way allow you to experiment with different values before you set them permanently using Custom CSS Manager.

There’s a color picker here that you can use to figure out what HTML code to use for the color property.

You should probably learn some basics of HTML and CSS, so you understand what the different CSS properties are that you can change. Here is a good HTML tutorial and a good CSS tutorial. Let me know if you have any questions. Or, if you would rather just have me throw you more fish, I can do that as well.