Links- Change Style

Drupal Links - How to Change Style and Colour

This is another quickie Drupal tutorial. Again, more of a pointer than a full blown step-by-step guide. Even though I have changed the default styling for the links on a Drupal site before, I still have to think and search to try and find it each time. So this quick Drupal pointer is as much for me as you.

You might just want to check my Drupal specifications to make sure we are on the same page and that this Drupal tutorial is relevant to you.

General Links on your Drupal Site

When I mention links, I am talking about the styling for <a href=...> HTML tag.

So assuming you are using a subZen theme and you have the html-elements.css file in your subZenTheme folder (of each Drupal site), then that is the css file you need to access to change the styling for the all the links - including hover, active, visited links.

The specific styling class you might be looking for will be:

a:link
a:visited
a:hover
a:focus
a:active

If you don't have the html-elements.css in your subZenTheme folder, then use the original that came with your Zen downloaded/extracted files. You can find a copy of that in the /zen/zen/ folder. Make a copy and paste that into your subZenTheme folder, make desired changes, upload.

Primary and Secondary Links

Drupal has, what they call 'Primary' and 'Secondary' links. They usually appear at the top bar. This image shows where they are (but with lots of styling in place, but you get the idea of what I mean. Don't you?).

Now if you wanted to style these links, you need your subZenTheme.css file.
And you would be looking for related variations of these css classes:
#secondary li a or
#primary li a

Short and sweet Drupal tutorial done. Hope that helps!