736 Followers
290 Following
jenn

Murder by Death

I read cozy and historical mysteries, a bit of Paranormal/UF, and to mix it up, I read science and gardening books on occasion.

Customized Blog Pages: Changing post fonts (and their color)

I'm re-posting this afresh because I've added the additional code to change the post's font color, per request. 

 

------------------------------------------------------------------------------

 

Did a little more poking around with blog settings and here's how to:

 

Change the font (and color) of your posts

 

This will change the font in the body of your posts on your blog page.

 

Please note that this won't change how anyone sees your posts from their own dashboard and that this relies on the font(s) you choose being available on everyone's computer.  That's why it's always good to list a few - if the first one isn't available on my computer, for instance, my web browser will try the next one in the list.

 

From the settings/blog page, choose "Customise" as per usual.

 

All the changes are made from the black bar on the left of this page; specifically, scroll down all the way to the bottom of the black frame and look for these two boxes:

 

 

Yours may or may not have any text in them - it doesn't matter.  We're going to be working inside the "Custom CSS" box.  Note: because this is confined to a very small space on the page, it can be tricky to work inside of it - I suggest using the arrow keys on your keyboard.  The mouse/scrolling works but it can be very frustrating.

 

Following is the text you'll paste into the "Custom CSS" box, but after pasting it in, you're going to change the font names, unless you want all the text on your posts to be in courier, which is ugly.  ;)

 

div.post-desc {
font-family: courier, monospace;
color: #ff0000;
}

 

Copy all three four of the above lines of text EXACTLY, and then paste it into the "Custom CSS" box.  If you miss a bracket or a semi-colon the whole thing falls apart.

 

Once it's pasted in, change courier, monospace to reflect the font faces you want to use. Some common examples, if you're doing this for the first time are:

 

Georgia, Times, serif

Verdana, Geneva, sans-serif

"Palatino Linotype", "Book Antiqua", Palatino, serif

 

Please note when a font's name is more than one word, you must use quotes around it, as the third example shows. You must use a comma between font names.  For more information about web-safe fonts see:

http://www.w3schools.com/cssref/css_websafe_fonts.asp

 

After you've changed the names of the fonts, select the color you'd like your font to be (make sure you keep the '#' before the color code).  There are heaps of HTML color pickers on the web, here's one:

http://www.w3schools.com/colors/colors_picker.asp

 

If you only want to change the font and not the color, remove the color: line so:

 

div.post-desc {
font-family: courier, monospace;
}

 

If you only want to change the color and not the font face, remove the font-family: line thus:

 

div.post-desc {
color: #ff0000;
}

 

Once you've changed those font names and/or color to reflect what you want, make sure that semi-colon is still there at the end of the last font.  Hugely important.

 

Hit "Save" at the top of the black frame.  Load your blog page and behold your new fonts.  If you regret your choices, go back to the Custom CSS window and change them. Save. Repeat as necessary.  Or just delete those three lines and go back to the defaults.

 

 

Now, I'm betting your next question might be "So, can I change my post titles too?"....

 

How to change your post titles:

 

Same place.  Same black bar, same Custom CSS box, same process.  Only these are the lines you'll start with:

 

h2.post-title {
font-family: monospace;
}

 

Again: copy/paste all three lines.  Change the font faces.  Make sure you don't accidentally delete that damn semi-colon. Save.  Rise and repeat as necessary.  Make sure you don't accidentally erase anything extra (like post-body stuff we did first) while you're doing this.

 

Changing your post title's color:

 

This turns out not to be as easy as it should be; I think I've found an error in BookLikes' stylesheet hierarchy, but I don't think anyone wants me going on about that.  What it boils down to is this: you can change your post title colors, but it's going to change the color of every link on your page.  That includes the sidebar links to your other pages and the tags at the bottom of each post. 

 

If you're ok with that (and as I tested this, I discovered I was) then you're going to add another section of script in the box:

 

a {
text-decoration: none;
color: #000000;
cursor: pointer;
}

 

Where 000000 = your chosen color (remember to keep the '#')

 

If you want to go whole hog and change the color of the links when someone hovers over them, add this:

 

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

 

038050 is the default hex color code for the green.  Change that to your color of choice.

 

Save, save, save.

 

Have fun.  :)