#navEZPagesTop active link color

[HelenSama]

I have specified #navEZPagesTop a:hover { color: blue;}
#navEZPagesTop a:active { color: blue; } at the bottom of the stylesheet and the hover specification works, the active one doesn't.

Here is the site I am working on http://peterfasano.com/zen/ and I would like to have the navEZPagesTop link for the current or active page highlighted to indicate where you are in the site. I appreciate any help, have looked in the forum as I thought there must be something about this, but haven't found it.

[haredo]

He,
Working great in firefox, When I hover they change to blue

[HelenSama]

Yes, the hovering is working, but not the active....when you click on whatever link and go to a specific page, the link for that page should be highlighted in blue, and it isn't. I can't figure out why not....

[haredo]

Helen,
how about #navEZPagesTop a:visited

Or,
#navEZPagesTop A:active {background: #FFCC00; text-decoration: none}

[Pink]

So you still didn't get the a:active to work as it should. Got the same problem.

[Pink]

The problem is, that a:active doesn't work the way you think.
a:active just lights up at the moment you click the link.

You would have to change the CSS-class of the link that corresponds to the page you have loaded!

[Pink]

You would have to edit the file tpl_ezpages_bar_header.php in includes\templates\YOUR_TEMPLATE\templates in order to generate the link with the correct CSS-class.

Example: Add this after the last include, after line 18.

<?php 
$akt_seite= htmlspecialchars('http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']);
?>

This code will tell your php-script, which page is loaded by the client.

Then you have to find the line, where the links are generated and add a if-statement for the class="xxx". The if-statement will compare the actualy loaded page with the url in the link.

Example:

  <div <?php if($akt_seite != $var_linksList[$i]['link']) echo 'class="topLink"'; else echo 'class="topLinkActive"'; ?> ><a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a></div>

The original code would create a <ul> and <li>, I do use <div>, but you should be able to integrate this with <ul><li> too.

Well, this way you can now create the two needed CSS classes. Example: .topLink a{color: grey;} and .topLinkActive a{color: blue;} -> for <ul><li> figure it out by yourself.

I guess that I will have to edit other files too, as there are links generated in other places too. But now you know how to do this.

[Pink]

On your page [http://peterfasano.com/zen/] you do not even use <ul><li> but just the <a herf..>.

So, add the if-statement into this like <a href=.. class=...>...</a>

[Pink]

That is what I needed:

<?php
/**
 * Page Template
 *
 * Displays EZ-Pages Header-Bar content.<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_ezpages_bar_header.php 3377 2006-04-05 04:43:11Z ajeh $
 */

  /**
   * require code to show EZ-Pages list
   */
  include(DIR_WS_MODULES . zen_get_module_directory('ezpages_bar_header.php'));
?>



<?php 
/* aktuelle seitenURL auslesen, um die class der aktiven SeitenLinks zu ändern */
$akt_seite= htmlspecialchars('http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']);
//htmlspecialchars needet because of & or &amp;
//echo $akt_seite;
?>



<?php // tht fix für startseite ?>
<div <?php if(($akt_seite == HTTP_SERVER.DIR_WS_CATALOG.'index.php') || ($akt_seite == HTTP_SERVER.DIR_WS_CATALOG)) echo 'class="startseiteLinkActive"'; else echo 'class="startseiteLink"'; ?> >
    <?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a>
</div>

<?php if (sizeof($var_linksList) >= 1) { ?>

<?php for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {  ?>
  <div <?php if($akt_seite != $var_linksList[$i]['link']) echo 'class="topLink"'; else echo 'class="topLinkActive"'; ?> ><a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a></div>
<?php } // end FOR loop ?>


<?php // tht fix für anmelden abmelden usw ?>
<?php if ($_SESSION['customer_id']) { ?>
    <div <?php if($akt_seite != zen_href_link(FILENAME_LOGOFF, '', 'SSL')) echo 'class="topLink"'; else echo 'class="topLinkActive"'; ?> ><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></div>
<!--    <div <?php if($akt_seite != zen_href_link(FILENAME_ACCOUNT, '', 'SSL')) echo 'class="topLink"'; else echo 'class="topLinkActive"'; ?> ><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></div> -->
<?php
      } else {
        if (STORE_STATUS == '0') {
?>
    <div <?php if($akt_seite != zen_href_link(FILENAME_LOGIN, '', 'SSL')) echo 'class="topLink"'; else echo 'class="topLinkActive"'; ?> ><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></div>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
    <div <?php if($akt_seite != zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL')) echo 'class="topLink"'; else echo 'class="topLinkActive"'; ?> ><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></div>
    <div <?php if($akt_seite != zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) echo 'class="topLink"'; else echo 'class="topLinkActive"'; ?> ><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></div>
<?php }?>
<?php } ?>
<div class="topLinkEnd"></div>

[HelenSama]

Thanks, I'm going to read through all the posts again and see if I can get it to work tomorrow, I'll let you know -