Themis-Athena's Garden of Books

Prepare yourselves my elves! For I’m going to tell you how to change colour of text on your site. Everywhere. Including links and comment section.

 

 

*It’s probably not the easiest way of doing it, but it will work.

 

If you’re anything like me, you want to have a daaaark background. I just love it. So white fonts to go with it would be lovely. Well, we’re going to get some.

 

The most basic and easy way to change font color would be: font color=”color’s name” /font

 

 

 

 

That’s an awesome and easy way to change font color. But it will not affect links, or scripts… SO we’ll need to do a bit more.

 

But first things first. Let’s start with getting a dark background:

 

 

 

 

Beautiful. Now we can’t see anything. It’s time to make changes, because that’s just sad.

 

Go to settings -> blog tab -> customize -> edit html

 

 

First, we want to change the left side – our menu and what’s below it. Find the right part of the code. Put the first segment of our font colour changing code under the highlighted part of the code (since I’ve already modified my code, I have followers counter below, ignore it. Blue highlight is the way you find that spot).

 

 

We want the code to end after our menu (so close the font marker before the highlighted part)

 

 

If you save, you’ll see this:

 

 

 

It’s something, but not enough, so we move on to the second part – customizing link colour. (There will be lots of ‘paste’ action, since links have a defined style, and we need to change each and every specimen, but it’s fairly easy (copy and paste paste paste paste). I don't like messing with CSS styles, so that's the way I do it. Feel free to experiment.)

 

Search for ‘href’ in your code and modify links you want modified.

 

code needed: style="color: white" (*pay attention to quotation marks, if you miss one it will mess up your design)

 

Let’s start with ‘blog’ and ‘shelf’ links.

 

 

 

 

It worked! Now find all ‘href’ you want to change and put this code there.  Pay close attention to quotation marks!

 

Next two href’s will be timeline and a (?) page href? You wonder what the circled one does? It makes sure that all pages you add to the menu (using settings -> pages -> add page) will be that colour too! (If you haven't added any pages yet go and write your profile. Do it for my sake. I don't like following strangers)

 

So we get this:

 

 

 

Let’s move on to the next link ( I lived book counter alone and didn’t change it! You could, if you wanted to. Feeling frisky? Go ahead, make the number neon pink! Go on! It'll be fun *whispers*):

 

 

 

 

We need to change ‘favourite books’ and ‘recently added’:

 

 

The easiest way to do it, is use the search bar and type ‘href’. (if you don't know what I'm talking about click on html code then press ctrl+f)

 

 

 

All of that should give us this:

 

 

That were all links I had. If you have more, find them and modify accordingly. 

 

 

That is my front page done. But I want to change my comment section too (that one will be cool, took me 20 minutes to find… pesky little code *mutters*)

 

Find this long piece of code (it should extend beyond the margins)

 

 

 

 

In this line of code find ‘color=333333’

 

 

Change those six three-s to six F-s

 

 

If you save, your comments will be like this:

 

 

Yeah! But it’s not the end. A few more cosmetic changes, and we’ll be done

 

 

That’s not cool:

 

 

 

 

(apart form one piece of code I’ve changed earlier, it’s all invisible)

 

This code:

 

 

will give us:

 

 

And this:

 

 

Will result in this:

 

 

 

But since those were icons, you can only see numbers, not pictures, and that is a very sad thing too. But fear not! We can give it a piece of white background and voila! (when you're at it erase the font change, if you did one... white on white doesn't show too well. Or make the font blue, or green or something)

 

 

Before, you had there ‘div class=”….”

I kicked it out and changed ‘class’ for ‘style’. And chose my background colour. Now I end up with this (sorry, I forgot to print screen before changing 'class' to 'style'… but this is what you’ll have)

 

 

 

Not the prettiest thing in the world but hey, it’s something!

 

 

Want more tutorials? Any questions? Ask, because I have no idea what you’d find useful!

 

* I apologize for all grammatical mistakes. I'm very busy and very tired :C And that is a third sad thing in this post. Unfortunately there is no simple code to fix it.