Themis-Athena's Garden of Books

 

On a page of my shelf I had this:

 

 

And I wanted something like this (second one is what happens when you hover your mouse over it):

 

 

Or at least this (once again the second one has cursor hovering over):

 

 

I've actually been debating myself for quite a while whether to do this one (yes, I have long and interesting conversations with myself. I also talk to inanimate objects. Deal with it.) Some people will probably find it useful, but making tutorials is why I haven't customized my page yet. I'm just writing damn tutorials in what little of free time I have, damn it!

 

But since I'm putting a code in place, I might as well share while I'm at it.

 

Exact colours aren't what's important here, the principal is. What you do with this information is your choice.

 

How do we do change link colour?

 

We need to create a new html class. Don't worry, just copy this (!!!WARNING!!! - maintain this order: link-> visited -> hover -> active; Hover must come after visited!):

 

THIS IS THE CODE YOU'LL NEED. THIS IS THE ONE YOU'LL LATER CUSTOMIZE;

.wtf a:link {
  text-decoration: none;
  color: gray;
  font-weight: bold;
  background-color: none
}

.wtf a:visited {
  text-decoration: none;
  color: gray;
  font-weight: bold;
  background-color: none
}

.wtf a:hover {
  text-decoration: none;
  color: white;
  font-weight: bold;
  background-color: none;
}

.wtf a:active {
  text-decoration: none;
  color: gray;
  font-weight: bold;

  background-color: none;
}

 

*Yes, I've named my class "wtf", because that's easy to remember and short. You have a problem with that?

 

*Keep an eye on a period in the beginning of each line.

 

 

And post it there (before <*/style> closes)

 

 

 

Congratulations! You've just created your own class!

 

Now let's apply it:

 

 

BAM! Save and you're done!

 

 

That's where you customize (make any changes you'd like):

 

Once you save they'll be applied to your class (you can use the same class in as many places as you want - that's why CSS is so useful)

 

 

text-decoration: could be none/overline/linet-hrough/underline/blink

 

background: color/none/url(picture - we've done this before...)

 

font-weight: normal/bold

 

Those were the most basic commands for link customization.

 

 

If you don't want to define certain things, you don't need the particular command at all:

 

.wtf a:link {
  color: gray;
  font-weight: bold;
} */would work too

 

 

 

 

 

Also:

 

a:link -> defines an active link

 

a:hover -> when you put cursor over it

 

a:visited -> a visited link

 

a:active -> supposedly that's what it looks like when you click it... (as far as I could see it does nothing)

 

 

Don't forget to save.

 

*Side note/disclaimer: changing other links on your blog usting this method could be problematic because of pre-existing classes. Maybe I'll do a separate tutorial about it...

 

Do you want a tutorial for those?

 

 

O hell, bonus round. Here's the code:

 

a.shelf-order-desc {
    color: white;
}

a.shelf-order-normal {
    color: #AAAAAA;
}


a.shelf-order-asc {
    color: white;
}

 

 

Once again apply before <*/style>

 

You wonder where I got those crazy code ideas?

 

Here: