Need help with Nav and home button rollover

[interfuel 0]

If I'm understanding the question correctly, you want to have a roll-over button state for the "home" icon in the nav? I've created an enhancement to this theme that works for me. In addition, I've added a "selected page" state that shows the home icon button "on" when viewing the home page. This is the icon with the house image that indicates "home," like this: First you need to create the "hover" and "selected" states for the "home" icon button. I use the same state for "hover" and "selected" and called it "home-icon-trans_hover.png" and placed it in iblogpro4_dev/images/ Next, you need to modify the page iblogpro4_dev/library/_nav.php as follows: Replace this code:

<ul class="fix homebutton">

 	<li class="page_item navfirst">

		< a class="home" href="<?php echo get_option('home'); ?>/" title="<?php _e('Home',TDOMAIN);?>" style="background-image: url('<?php e_pagelines('nav_home_image', THEME_IMAGES.'/home-icon-trans.png');?>');">

			<?php _e('Home',TDOMAIN);?>	

		< /a>

	< /li>

< /ul>

with this:

<ul class="fix homebutton">

	<?php if (is_page('Home')) { ?>

	<li id="menu-item-home" class="page_item navfirst menu-item-home">

	<?php } else { ?>

	<li class="page_item navfirst">

	<?php } ?>

		<!-- < a class="home" href="<?php echo get_option('home'); ?>/" title="<?php _e('Home',TDOMAIN);?>" style="background-image: url('<?php e_pagelines('nav_home_image', THEME_IMAGES.'/home-icon-trans.png');?>');"> -->

		< a class="home" href="<?php echo get_option('home'); ?>/" title="<?php _e('Home',TDOMAIN);?>">

			<?php _e('Home',TDOMAIN);?>

		< /a>

	< /li>

< /ul>

Next, I made the following changes to iblogpro4_dev/css/theme.css (I suppose you could probably put the code in custom.css too). Separate out these rules:

#wrapper #nav ul.homebutton li a.home, #wrapper #nav ul.homebutton li a.home:hover{

	background-color: transparent;

	background-position:  21px 5px;

	background-repeat: no-repeat;

	text-indent: -300em;

	width: 25px;

	border-left: none;

	position:relative;

	z-index: 10;

	padding: 9px 22px 9px 20px;

}
	
	

Like this, adding the appropriate background image for the hover and non-hover states:

#wrapper #nav ul.homebutton li a.home {

	background-color: transparent;

	background-image: url(../images/home-icon-trans.png);

	background-repeat: no-repeat;

	background-position:  21px 5px;

	background-repeat: no-repeat;

	text-indent: -300em;

	width: 25px;

	border-left: none;

	position:relative;

	z-index: 10;

	padding: 9px 22px 9px 20px;

}

#wrapper #nav ul.homebutton li a.home:hover {

	/* background-color: transparent; */

	background-image: url(../images/home-icon-trans_hover.png);

	background-repeat: no-repeat;

	background-position:  0 0; /* 21px 5px; */

	background-repeat: no-repeat;

	text-indent: -300em;

	width: 25px;

	border-left: none;

	position:relative;

	z-index: 10;

	padding: 9px 22px 9px 20px;

}

Last, add this rule for the "selected" page state so that button shows "on" when viewing the home page:

#nav ul.homebutton li.menu-item-home {

	background-image: url(../images/home-icon-trans_hover.png);

	background-repeat: no-repeat;

	background-position:  0 0;

}

I make no warranties about this, but it works for my purposes. Comments welcomed if anyone sees issues. Frank

[Kate 3]

Thanks for your input Frank...