Highlight the Current Page with CSS

[FoodDudes]

I want to highlight the current page in my ezpages navigation bar. I was looking around in the threads and I haven't found anything. If anybody could help that would be great. Here is a link to the css code I am using for my ezpages header navigation bar. There is also a picture of the tab highlight in black when active or after being clicked.

http://matthewjamestaylor.com/blog/b...rowser-support

Thanks in advance.

[rstevenson]

CSS has no way of knowing where it is located relative to other pages on your site. Only a scripting language can do that.

Rob

[gjh42]

EZ-Page Improved TOC does this for the table of contents on the page, and the logic could be adapted to work for other ez-page-related displays. It would not be a case of just dropping the code in somewhere, though; it would need to be tailored to the relevant files.

It might be simpler to use different logic, like a test for

if ($current_page_base='page' and $_GET['id']=(whatever ezp no is being processed) ) {
  $ezpage_current_classname = 'current';
} 

and then insert
class="<?php echo $ezpage_current_classname?>"
in the link output.

[gjh42]

It only takes one line added to /includes/modules/your_template/ezpages_bar_header.php:

      $page_query_list_header[$rows]['link'] .= ($current_page_base == 'page' and $page_query_list_header[$rows]['id'] == $_GET['id'])? ' class="current"': ' class="notCurrent"';//gjh42 20091017 

<?php
/**
 * ezpages_bar_header - used to display links to EZ-Pages content horizontally as a header element
 *
 * @package templateSystem
 * @copyright Copyright 2003-2007 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: ezpages_bar_header.php 6021 2007-03-17 16:34:19Z ajeh $ gjh42 20091017 test - add current/noncurrent classnames
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
$zco_notifier->notify('NOTIFY_START_EZPAGES_HEADERBAR');

// test if bar should display:
if (EZPAGES_STATUS_HEADER == '1' or (EZPAGES_STATUS_HEADER == '2' and (strstr(EXCLUDE_ADMIN_IP_FOR_MAINTENANCE, $_SERVER['REMOTE_ADDR'])))) {
  if (isset($var_linksList)) {
    unset($var_linksList);
  }
  $page_query = $db->Execute("select * from " . TABLE_EZPAGES . " where status_header = 1 and header_sort_order > 0 order by header_sort_order, pages_title");
  if ($page_query->RecordCount()>0) {
    $rows = 0;
    while (!$page_query->EOF) {
      $rows++;
      $page_query_list_header[$rows]['id'] = $page_query->fields['pages_id'];
      $page_query_list_header[$rows]['name'] = $page_query->fields['pages_title'];
      $page_query_list_header[$rows]['altURL'] = '';

      // if altURL is specified, check to see if it starts with "http", and if so, create direct URL, otherwise use a zen href link
      switch (true) {
        // external link new window or same window
        case ($page_query->fields['alt_url_external'] != ''):
        $page_query_list_header[$rows]['altURL']  = $page_query->fields['alt_url_external'];
        break;
        // internal link new window
        case ($page_query->fields['alt_url'] != '' and $page_query->fields['page_open_new_window'] == '1'):
        $page_query_list_header[$rows]['altURL']  = (substr($page_query->fields['alt_url'],0,4) == 'http') ?
        $page_query->fields['alt_url'] :
        ($page_query->fields['alt_url']=='' ? '' : zen_href_link($page_query->fields['alt_url'], '', ($page_query->fields['page_is_ssl']=='0' ? 'NONSSL' : 'SSL'), true, true, true));
        break;
        // internal link same window
        case ($page_query->fields['alt_url'] != '' and $page_query->fields['page_open_new_window'] == '0'):
        $page_query_list_header[$rows]['altURL']  = (substr($page_query->fields['alt_url'],0,4) == 'http') ?
        $page_query->fields['alt_url'] :
        ($page_query->fields['alt_url']=='' ? '' : zen_href_link($page_query->fields['alt_url'], '', ($page_query->fields['page_is_ssl']=='0' ? 'NONSSL' : 'SSL'), true, true, true));
        break;
      }
      
      // if altURL is specified, use it; otherwise, use EZPage ID to create link
      $page_query_list_header[$rows]['link'] = ($page_query_list_header[$rows]['altURL'] =='') ?
      zen_href_link(FILENAME_EZPAGES, 'id=' . $page_query->fields['pages_id'] . ($page_query->fields['toc_chapter'] > 0 ? '&chapter=' . $page_query->fields['toc_chapter'] : ''), ($page_query->fields['page_is_ssl']=='0' ? 'NONSSL' : 'SSL')) :
      $page_query_list_header[$rows]['altURL'];
      $page_query_list_header[$rows]['link'] .= ($page_query->fields['page_open_new_window'] == '1' ? '" target="_blank' : '');
      $page_query_list_header[$rows]['link'] .= ($current_page_base == 'page' and $page_query_list_header[$rows]['id'] == $_GET['id'])? ' class="current"': ' class="notCurrent"';//gjh42 20091017
      $page_query->MoveNext();
    }

    $var_linksList = $page_query_list_header;
  }
} // display

$zco_notifier->notify('NOTIFY_END_EZPAGES_HEADERBAR');
?>

[FoodDudes]

I can't seem to get it to work. After adding $page_query_list_header[$rows]['link'] .= ($current_page_base == 'page' and $page_query_list_header[$rows]['id'] == $_GET['id'])? ' class="current"': ' class="notCurrent"';//gjh42 20091017, what do I need to change in my css to show the current page and highlighted. My stylesheet is below:

#navEZPagesTop {
float:left;
width:100%;
margin: 176px 0 0 0;
overflow:hidden;
position:relative;
}
#navEZPagesTop ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#navEZPagesTop ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#navEZPagesTop ul li a {
display:block;
margin:0 0 0 1px;
padding:7px 15px;
background:url(../images/bg_navtop.png) repeat;
color:#fff;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
}
#navEZPagesTop ul li a:hover {
padding:9px 15px;
background:#cc6633;
color:#fff;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
}
#navEZPagesTop ul li a.active,
#navEZPagesTop ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}

[gjh42]

You can add the "current" and "notCurrent" classnames to the link styling. After this rule, add specific rules for the "current" differences. The rest of the links will keep the basic styling, so you probably don't need to mention .notCurrent.

#navEZPagesTop ul li a {
display:block;
margin:0 0 0 1px;
padding:7px 15px;
background:url(../images/bg_navtop.png) repeat;
color:#fff;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
}

#navEZPagesTop ul li a.current {
    /*only use the properties you want different from the rest*/
    background:url(../images/bg_navtop.png) repeat;
    color:#fff;
    font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    text-decoration:none;
    }

Do the same for the :hover and :active rules, like this:

#navEZPagesTop ul li a.current:hover {etc.

[kmbi]

Hi.
I need something similar but I use internal links in EZ pages header too, linked to category page index.php?main_page=index&cPath=1.
I must add a piece of code here

// internal link same window
        case ($page_query->fields['alt_url'] != '' and $page_query->fields['page_open_new_window'] == '0'):
        $page_query_list_header[$rows]['altURL']  = (substr($page_query->fields['alt_url'],0,4) == 'http') ?
        $page_query->fields['alt_url'] :
        ($page_query->fields['alt_url']=='' ? '' : zen_href_link($page_query->fields['alt_url'], '', ($page_query->fields['page_is_ssl']=='0' ? 'NONSSL' : 'SSL'), true, true, true));
		break;
      }

Any ideas?

[gjh42]

Actually, you can add the test for internal link/current page to the same statement that tests for current ez-page. That statement happens after the link is made up from whatever type it is, internal or ez-page.

You would extend the ternary operator with a test for $current_page_base being contained in the internal link string; I would have to look at it a bit to get the best method.

[hcb39]

Glenn, I appreciate all of the information that you've provided. Unfortunately, I am not versed in PHP and my CSS is a little rusty (though I have much less problem with it). I just want my category links on the left nav to stay cream (the hover color) when you are on the page.

I saw the PHP code above, but I wasn't sure where exactly I insert it.

I'm also trying to figure out what exactly in my CSS I need to change.

#navEZPagesTOC ul li a {
	color: #3300FF;
	text-decoration: none;
	}
	
#navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
	color: #FF0000;
	}

#navEZPagesTOCWrapper {
	font-weight: bold;
	float: right;
	height: 1%;
	border: 1px solid #000000;
	}

#navEZPagesTOC ul {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	line-height: 1.5em;
	}

#navEZPagesTOC ul li {
	white-space: nowrap;
	}

#navEZPagesTOC ul li a {
	padding: 0em 0.5em;
	margin: 0;
	}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #9a9a9a;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	width: 100%;
	}

#navMain ul, #navSupp ul, #navCatTabs ul  {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	text-align: center;
	line-height: 1.5em;
	}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;
	}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #ffffff;
	white-space: nowrap;
	}

I am so sorry to be asking all of these questions, but this is truly becoming a bigger headache than expected and I really want to just finish this. Any assistance (from anyone!!!!) would be greatly appreciated. If I need to provide any more information, I certainly will.

The site is http://h o l l i b m e d i a . c o m/lee-test

HB

[gjh42]

This tests for $current_page_base being contained in the alternate URL:

or (strpos($page_query_list_header[$rows]['altURL'], $current_page_base, 10) != 0)

It starts at character 10 so that "index.php" in the URL is not confused with the current page "index".

It might not work correctly in all possible cases as is, and may need more specification or verification.

      $page_query_list_header[$rows]['link'] .= (($current_page_base == 'page' and $page_query_list_header[$rows]['id'] == $_GET['id']) or (strpos($page_query_list_header[$rows]['altURL'], $current_page_base, 10) != 0))? ' class="current"': ' class="notCurrent"';//gjh42 20091203 

I added another layer of parentheses to the whole thing to ensure correct sequencing.
Let me know how it works.