WordPress.org

1. omorchoe
   Member
   Posted 6 months ago #

   I am trying to make a custom menu (based on twentyeleven) with three stances: passive, hover & current page. I am using a single sprite graphic which is called up via css for all stances of the button graphics, which is why there are x/y coordinates for the background image. The first two stances work fine, but I can't seem to get the last one working. It should show a different background image (or to be more precise a different region of the sprite image) if it's on a particular site that has a specific title.

   I looked into the codex and found the
   if ( is_page('page_title') ) conditional here: http://codex.wordpress.org/Dynamic_Menu_Highlighting
   So I put the following into the header:
   

   <?php
   if ( is_page('page_title') ) { $current = 'menu-icon-01'; $xcord = '-202px'; $ycord = '144px';}
   elseif ( is_page('page_title2') ) { $current = 'menu-icon-02'; $xcord = '-303px'; $ycord = '144px';}
   elseif ( is_page('page_title3') ) { $current = 'menu-icon-03'; $xcord = '-404px'; $ycord = '144px';}
   elseif ( is_page('page_title4') ) { $current = 'menu-icon-04'; $xcord = '-505px'; $ycord = '144px';}
   elseif ( is_page('page_title5') ) { $current = 'menu-icon-05'; $xcord = '-808px'; $ycord = '-51px';}
   elseif ( is_page('page_title6') ) { $current = 'menu-icon-06'; $xcord = '-909px'; $ycord = '-144px';}
   ?>
   <style type="text/css">
   #<?php echo $current; ?> { background:url("./images/sprites.png") <?php echo $xcord; ?> <?php echo $ycord; ?> no-repeat; height: 30px; width: 100px }
   </style>

   and further down in the body in have the menu

   <ul id="menu-icon">
   <li id="menu-icon-01"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="*"><img src="./images/transparent.gif" width="100" height="30" alt="menu-home"></a></li>
   <li id="menu-icon-02"> <a href="*" title="*"><img src="./images/transparent.gif" width="100" height="30" alt="*"></a></li>
   <li id="menu-icon-05"> <a href="*" title="*"><img src="./images/transparent.gif" width="100" height="30"  alt="*"></a></li>
   <li id="menu-icon-04"> <a href="*" title="*"><img src="./images/transparent.gif" width="100" height="30" alt="*"></a></li>
   <li id="menu-icon-06"> <a href="*" title="*"><img src="./images/transparent.gif" width="100" height="30"></a></li>
   </ul>

   For some odd reason the php code does not produce any variables at all. Has anybody got an idea why that might be?
   And does if ( is_page('page_title') ) only work on pages, or would posts work too?

2. alchymyth
   The Sweeper
   Posted 6 months ago #

   For some odd reason the php code does not produce any variables at all

   have you checked the html code of your site in the browser to verify that?

   are you trying to style the background position of the list element or the background position of the link?
   where is the background image styled?

   without seeing this in your live site, it is difficult to make any useful suggestions.

3. omorchoe
   Member
   Posted 6 months ago #

   Yes, I checked the html source several times and it's just empty where the variable should show up.
   

   <style type="text/css">
   # { background:url("./images/sprites.png")   no-repeat; height: 30px; width: 100px }
   </style>

   I am trying to style the position of the background-image, so that the menu item looks different when you are on the page that menu item otherwise would lead to (If it should work, I will add some more variables and totally disable the button of the current page).
   The link itself is just a transparent gif, re-sized to the size of the button, which is just the background image, that changes if you hover over it with mouse.

   I am working on xampp and can't provide a live view.

   This would be an example of how the buttons are styled in the css:
   

   #menu-icon-01 { background:url("./images/sprites.png") -202px -113px no-repeat; height: 30px; width: 100px }
   #menu-icon-02 { background:url("./images/sprites.png") -303px -113px no-repeat; height: 30px; width: 100px }
   #menu-icon-03 { background:url("./images/sprites.png") -404px -113px no-repeat; height: 30px; width: 100px }
   
   #menu-icon-01 a:hover { background:url("./images/sprites.png") -202px -144px no-repeat; height: 30px; width: 100px }
   #menu-icon-02 a:hover { background:url("./images/sprites.png") -303px -144px no-repeat; height: 30px; width: 100px }
   #menu-icon-03 a:hover { background:url("./images/sprites.png") -404px -144px no-repeat; height: 30px; width: 100px }

Reply

You must log in to post.