Creating New Stylesheet Entries

[jimw00d]

Hi,

 

A:Hover defines the colour style used for mouse over links throughout the entire store. However I want to use different colours for links in different parts of the store. I have looked for many hours for the solution but I can't find anything remotely close. Is there a file that links the mouse over links to A:Hover? How would I go about breaking the relationship between links and A:Hover? Is it possible to create new entries in the stylesheet? How do you link text to the stylesheet?

 

Questions, questions, questions.

 

Any answers

 

Cheers

 

 

:blink:

[spax]

If you had single rule in your stylesheet for all links. i.e.

 

A {
 color: #000000;
 text-decoration: none;
}

A:hover {
 color: #AABBDD;
 text-decoration: underline;
}

 

Then all links would be black, with a bluey hover colour. However, also in your stylesheet, you have child rules that inherit from the parent, unless you state otherwise. i.e.

 

A.headerNavigation { 
 color: #ffffff; 
}

A.headerNavigation:hover {
 color: #ffffff;
}

 

These child rules have a link and hover colour of white but being as nothing else is attributed to them, they inherit the text decoration attributes of the parent rule.

If you haven't changed anything, look in your includes/header.php and you will see this code:

 

<a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>

 

Which apart from some php code, is a normal anchor. Within it you can see class="headerNavigation" and that is how you call a child class from the stylesheet. So in normal html, that anchor would look like:

 

<a href="account.php" class="headerNavigation">My Account</a>

 

Where you find an anchor, you can change the way it looks by either, changing the existing rule or, adding a new rule to the stylesheet and then calling it from the anchor.