How Can I Modify These Links?

[gjh42]

For the Shop Our Sale link, there is already a blank rule in stylesheet_module_tabs.css:

#moduleMenu span a:hover {}

Just add your color to that.

The link destination will have to be set in the custom javascript file for the mod.

[traytray]

Sorry to be so naive. For the following, I am looking to get a hover color for all three. Would I use the last one of the three listed and paste it to the bottom of the stylesheet? Do I just add the color # in the brackets? Don't I need to add the hover?


p+.navNextPrevList {}
p+.navNextPrevList+.navNextPrevList {}
p+.navNextPrevList+.navNextPrevList+.navNextPrevList {}

clueless~

[gjh42]

If you want the same styling for all three, just add a rule for

.navNextPrevList:hover {color: #aabbcc;}

pretty much anywhere in your stylesheet. A place where it is easy to find would be good, either with rules for similar/related elements or at the bottom of the stylesheet.

[traytray]

If you want the same styling for all three, just add a rule for

.navNextPrevList:hover {color: #aabbcc;}

pretty much anywhere in your stylesheet. A place where it is easy to find would be good, either with rules for similar/related elements or at the bottom of the stylesheet.

Entered:

.navNextPrevList:hover {color: #ed3a84;}

to bottom of stylesheet and still no hover color. Crazy how a simple thing like this causes so much frustration.

http://designerperfumesnob.authsafe....en-p-3613.html

[gjh42]

Okay, you want an image to change color on hover. CSS can't do that. It could switch the background-image to a different one, or shift it so that a differently-colored version comes into view, but it can't change a foreground image.

You have image buttons for the links, even though they are identical to what you would get with text.

[traytray]

I understand. I replaced an image with a different image and neither had the hover feature. I didn't realize I could use text. Would it then be able to get a hover color? If so, how would I change it to text?

[gjh42]

I investigated the long convoluted chain of button use, and there doesn't appear to be a way to just substitute text for the image.
You would need to edit /includes/templates/your_template/templates/tpl_product_next_previous.php in this area:

<p class="navNextPrevCounter"><?php echo (PREV_NEXT_PRODUCT); ?><?php echo ($position+1 . "/" . $counter); ?></p>
<div class="navNextPrevList"><a href="<?php echo zen_href_link(zen_get_info_page($previous), "cPath=$cPath&products_id=$previous"); ?>"><?php echo $previous_image . $previous_button; ?></a></div>

<div class="navNextPrevList"><a href="<?php echo zen_href_link(FILENAME_DEFAULT, "cPath=$cPath"); ?>"><?php echo zen_image_button(BUTTON_IMAGE_RETURN_TO_PROD_LIST, BUTTON_RETURN_TO_PROD_LIST_ALT); ?></a></div>

<div class="navNextPrevList"><a href="<?php echo zen_href_link(zen_get_info_page($next_item), "cPath=$cPath&products_id=$next_item"); ?>"><?php echo  $next_item_button . $next_item_image; ?></a></div>

Replace the
<?php echo $previous_image . $previous_button; ?>
and similar parts with the text you want. The quick and dirty way would be to put the text directly in the code; if you want to use the official method, or use multiple languages, you need to echo constants which you then define in a language file. You can use BUTTON_RETURN_TO_PROD_LIST_ALT, BUTTON_PREVIOUS_ALT and BUTTON_NEXT_ALT for the text (/includes/languages/english/button_names.php).

<p class="navNextPrevCounter"><?php echo (PREV_NEXT_PRODUCT); ?><?php echo ($position+1 . "/" . $counter); ?></p>
<div class="navNextPrevList"><a href="<?php echo zen_href_link(zen_get_info_page($previous), "cPath=$cPath&products_id=$previous"); ?>"><?php echo BUTTON_PREVIOUS_ALT; ?></a></div>

<div class="navNextPrevList"><a href="<?php echo zen_href_link(FILENAME_DEFAULT, "cPath=$cPath"); ?>"><?php echo BUTTON_RETURN_TO_PROD_LIST_ALT; ?></a></div>

<div class="navNextPrevList"><a href="<?php echo zen_href_link(zen_get_info_page($next_item), "cPath=$cPath&products_id=$next_item"); ?>"><?php echo  BUTTON_NEXT_ALT; ?></a></div>