Home/ Questions/Q 6028995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T04:49:16+00:00

On this site: http://jumpthru.net/newsite/vision/ I am using CSS sprites for my navigation with PHP

  • 0

On this site:
http://jumpthru.net/newsite/vision/

I am using CSS sprites for my navigation with PHP else statements to show the active state for the current page. All of the pages are working properly except for the page that contains the loop / blog postings ( http://jumpthru.net/newsite/commentary/)

Do I need to call the php differently for this page?

The PHP :

<?php
if ( is_page('vision') ) { $current1 = 'visionside a'; }
elseif  ( is_page('team') ) { $current2 = 'teamside a'; }
elseif  ( is_page('commentary') ) { $current3 = 'blogside a'; }
elseif  ( is_page('organizations') ) { $current4 = 'orgside a'; }
?>

The CSS:

#sidebarnav ul#sidenav li.<?php echo $current1; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png)  0px -106px !important;

}

#sidebarnav ul#sidenav li.<?php echo $current2; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/team2.png)  0px -106px !important;

}

#sidebarnav ul#sidenav li.<?php echo $current3; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/content2.png)  0px -106px !important;

}

#sidebarnav ul#sidenav li.<?php echo $current4; ?> {
background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/org2.png)  0px -106px !important;

}

Any help would be greatly appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have a solution that is a bit different than what you are looking for, but is a much better solution to what you are doing.

    PHP:

    <?php 

if ( is_page('vision') ) 
  $page = 'vision';
elseif ( is_page('team') )
  $page = 'team';
elseif ( is_page('commentary') )
  $page = 'blog';
elseif  ( is_page('organizations') ) 
  $page = 'org';

?>

<body id="page-<?php echo $page; ?>">
...

    Note about above PHP: If you had a get_page_id() function, you could simplify this a lot more. by simply having <body id="page-<?php get_page_id(); ?>">

    HTML:

    <ul id="sidenav">
    <li class="visionside"><a href="#">...</a></li>
    <li class="teamside"><a href="#">...</a></li>
    <li class="blogside"><a href="#">...</a></li>
    <li class="orgside"><a href="#">...</a></li>
</ul>

    CSS:

    body#page-vision #sidenav li.visionside a,
#sidenav li.visionside a:hover {
   ...
}

    Note about above CSS: There are two lines listed above that you can style together – the current state, and the hover state. This will make the current state display when you hover over the nav, regardless of which nav is the “current” nav.

    Seeing that you’re interested in using CSS Sprites, I would definitely recommend that you read up on this article.

    • 0