How to change widget colour and font titles.

You’ve got a stray closing bracket on line 44 of your custom CSS plugin. If you remove that bracket, you should be good to go.

Thank you stephencottontail! It worked.

The only trouble now is how do I keep the line breaks between all the widgets after changing the font. Its the little lines that go through the titles of the widgets.

Remove this line from your custom CSS:

background: url("images/border.png") repeat-x 0 11px;

You’ve already got that line in your theme’s stylesheet, so it’s redundant.

stephencottontail your a rockstar!

Now lastly, do you see how it says “follow me” and the me is in a different font and its in that mint colour? How do I change the font and colour for the word ‘me’?

In theme options I have ‘the colour of the ribbon and various accents’ set to baby blue (and I have disabled the ribbons) and the ‘general colour scheme’ also set to baby blue.

The color of the “me” can be set in Dashboard > Theme Options > Basic Settings > Accent Color, but if you don’t like any of those colors you could use some more custom CSS. Try replacing the code you’ve been using with this:

.widget-title {
	font-size: 17px;
	font-family: 'Caviar Dreams', sans-serif;
	text-transform: lowercase;
}

.widget-title em {
	color: #404040 !important;
	font-size: 17px;
	font-family: 'Caviar Dreams', sans-serif;
	padding: 0;
}

Once again stephencottontail you rock. Fixed my problem.

I’m going to keep asking questions related to font and colour since your so helpful!

So now I would like to change the font and increase the size of the lettering in the navigation bar. Is there a code that I can put into my custom CSS editor to do so? The ‘Home’ button within the navigation bar still has that mint colour from the basic settings accent colour options that I would also like to change to be black.

Is that possible or is that something that I can’t tamper with?

Try this CSS:

nav#main-nav > ul > li > a {
	color: #ffc0fe !important;
	font-size: 1.2em;
	font-family: "Palatino", serif;
}
nav#main-nav > ul > li > a:hover {
	color: #ffc0fe !important;
}

This will work for “web safe” fonts (fonts like Times, Arial, Helvetica, etc., that are installed on many computers by default). If you’re trying to use a more exotic font, it’s a bit more complicated.