CSS query with Andreas09 (custom link problem)

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
pangoken
Regular
Posts: 5
Joined: Thu Nov 02, 2006 9:20 pm
Location: Luton, UK
Contact:

CSS query with Andreas09 (custom link problem)

Post by pangoken »

Hello all

I am using the Andreas09 template & want to tweak it a little to show links in entries by default as blue. I have added a class a.leehlink as below:

a.leehlink {text-decoration:underline; color:#0000FF;}
a.leehlink:hover{background: gold;}
a.leehlink:visited{color:#808080;}

When I create a new link in an entry, as below, the link itself is still coloured grey and bold, but it does show the underline and the gold background specified above.

<a class="leehlink" title="Lee's Homepage" href="http://www.pangoken.com/">Link to pangoken.com</a>

I am fairly new to html & CSS (so please be gentle :) ) but i can't seem to locate where this grey colour is pulling from?

Can anyone help?

Thank you

Lee
carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

Post by carl_galloway »

Hi Lee,

You've done well to reach this point, certainly your concept was sound, we just need to make some style name changes to get this working. CSS can be tricky, and because of its cascading nature we sometimes need to be quite explicit.

I've tested some changes that I think you could add to your stylesheet which will mean you don't even need to add the leehlink class to your entry links.

Open style.css, remove your leehlink styles, and replace them with this;

Code: Select all

.serendipity_entry_body a, .serendipity_entry_extended a {text-decoration:underline; color:#0000FF;}
.serendipity_entry_body a:hover, .serendipity_entry_extended a:hover {background: gold;}
.serendipity_entry_body a:visited, .serendipity_entry_extended a:visited {color:#808080;}
Next, scroll to the top of style.css, and find the a and a:hover classes. They should be immediately under /****** General Styles ******/. Now replace those with this;

Code: Select all

a, .serendipity_entry_body a.continue_reading {color:#505050; 
   font-weight:bold; 
   text-decoration:none; }
a:hover, .serendipity_entry_body a.continue_reading:hover {color:#808080;  
   text-decoration:underline; }
These change mean that every link within the entry body or extended entry will be styled the way you want to be, but the continue reading link will stay grey (which I think is desirable).

Hope that helps,

Carl
pangoken
Regular
Posts: 5
Joined: Thu Nov 02, 2006 9:20 pm
Location: Luton, UK
Contact:

Post by pangoken »

Thanks Carl

That worked a treat. Great template BTW

Lee
Post Reply