7827

Currently Reading

Sherlock Holmes: The Definitive Collection
Arthur Conan Doyle, Stephen Fry
Merlin Trilogy
Mary Stewart
Progress: 340/928 pages
Owen: Book One of the Tudor Trilogy
Tony Riches
The Adventures of Sherlock Holmes
Arthur Conan Doyle

Recently Added

Farewell, My Lovely - Elliott Gould, Raymond Chandler
The Long Goodbye - Raymond Chandler, Full Cast, Toby Stephens
The High Window: A BBC Full-Cast Radio Drama - Raymond Chandler, Toby Stevens, Full Cast
"You only live once, but if you do it right, once is enough." ― Mae West


"The man who does not read has no advantage over the man who cannot read." ― Mark Twain


"Women and cats will do as they please, and men and dogs should relax and get used to the idea." ― Robert A. Heinlein


"Always be a first rate version of yourself and not a second rate version of someone else." ― Judy Garland
Find me elsewhere:
My Leafmarks Profile
Project Hamlet

'Reactive' links - round links on your 'shelf' page (different look for different 'state of link') (Reblogged from Anna)

 

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:

 

 

 

 

 

 

Source: http://anhec.booklikes.com/post/461024/-reactive-links-more-on-link-customization-round-links-on-your-shelf-page-
Reblogged from AnHeC (I'm too fucking busy and vice versa)