Currently Reading

The Long Winter
Cherry Jones, Laura Ingalls Wilder
The Inner Life of Cats: The Science and Secrets of Our Mysterious Feline Companions
Thomas McNamee, Bob Reed
Collection: The Tailor of Panama / Our Game / The Night Manager
John le Carré
The Inner Life of Cats: The Science and Secrets of Our Mysterious Feline Companions
Thomas McNamee
Sherlock Holmes: The Definitive Collection
Arthur Conan Doyle, Stephen Fry
The Woman In White
Wilkie Collins
Merlin Trilogy
Mary Stewart
Progress: 340/928 pages
The Adventures of Sherlock Holmes
Arthur Conan Doyle

Recently Added

The Long Winter - Cherry Jones, Laura Ingalls Wilder
The Little Book of Christmas Memories - Various Authors
The Bone Witch - Rin Chupeco
"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!):



.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








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?









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)