• 0
Sign in to follow this  
Followers 0

iBlogpro5 customized home button

Question

Posted · Report post

I have a customized home button and have created this according to other posts in the forum using code below. I would like the button to not appear darker (selected) when on the home page. /* Home Button */ .main_nav ul li.menu-item-1157 a { background: url('http://www.k95k.com/wp-content/uploads/2012/04/dog-house-icon-trans.png') transparent no-repeat 15px 4px !important; width: 30px; }

Share this post


Link to post
Share on other sites

19 answers to this question

  • 0

Posted · Report post

You can try using: [code].main_nav li.current-menu-item a { box-shadow: 0 0 0; }[/code] Make sure you've downloaded [url="http://www.getfirebug.com"]Firebug for Firefox[/url] and check out [url="http://www.w3schools.com/"]W3 Schools[/url] to figure out the answers to CSS questions like these.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

tried that and seems to be no difference

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay, I think you need to add additional things to your menu's CSS. For example, the "Active" state could have a different background color for that particular menu item. See http://www.w3schools.com/cssref/sel_active.asp for additional selector information.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

what a great tutorial thanks! the problem here is i'd like to have my site which i'm in the process of upgrading from iblog4 to 5 have a functioning home button with the same look and feel of that in 4. Not sure why that aspect was abandoned, but we are pretty close to the desired look. another user has done what i hope to accomplish [url="here"]http://www.honeymp3.com/[/url] and i replicates his code from the forum, but my home button is darker. I can't use a solid color as suggested in the w3schools article because this is a picture file. any help is appreciated.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm sorry. I presumed you'd know, since you did so well with other CSS that the link I provided earlier was just an example. You can use images in place of colors as you would in other backgrounds. You can see some examples of active state in many of the menus found here: http://www.cssplay.co.uk/menus/ (view page source to see the CSS code). In a nutshell, for each of the selectors shown at W3Schools, you can have a different image and depending on action, a different image will show. This is essentially how people create menus with image roll-over effects. I hope this helps. If it does, please accept an answer.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

ok, i'm sorry, but i do need my hand held on this one. so using iblogpro5, could you provide the code to accomplish a home button behavior like this: http://www.honeymp3.com/ Do I add something like this for that item: .main_nav li a { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: -moz-use-text-color #444444 -moz-use-text-color -moz-use-text-color; border-style: none solid none none; border-width: medium 1px medium medium; box-shadow: 0 0 5px #888888 inset; color: #EEEEEE; text-shadow: 0 -1px 0 #000000; }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, What behaviour are you trying to accomplish ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'd like this iBlogpro5 nav menu k95k.com to look and behave like my iBlogpro4 nav menu capek9cardio.com.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

So essentially, you would like to take off the white hover on k95k.com?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

yes. text color needs to be readable also on pulldown title ie k95k.com >> 2012 Race >> 2012 Sponsors. Title 2012 Race turns white with white bg. And home button is still darker on home page. I'd like it to have no shadow and be the same grey as if unselected.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

As I pointed out earlier in this topic, your CSS code lacks any "active state" controls. As a result, in active state, the CSS is defaulting to the basic color for the menu, which is a light color (not sure if it's white or a light grey). Similarly, with the Home icon, you need to create a home icon for active state too. Just as with solid colors, you can use an image for various states. I'd suggest reading much more of that tutorial. When you finally add a customized active state with a different color, it will appear properly for your text, and when you add an image for active state, you'll get the contrast you're looking for. Unfortunately, there's little more we can do with this issue until you implement that active state in your CSS. As you know, we don't provide the customizations here. If you need the assistance of one of our Pros, please feel free to seek their assistance. http://www.pagelines.com/pros

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

thanks i'll try to figure that out.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Do you need further assistance with anything else?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

yes. i am trying to find examples of the hover state that would get me to define the background of the pull downs and one a bit of code to make the home button stay as it did in iblogpro4 with no change in appearance when visited. So far in the w3schools.com i have found this: a:link {color:#0099ff;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#339933;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */ which is nice to know and understand, but I need something similar for the pull down settings.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Maybe try something like this (this should change "current state" page menu items): [code]ul#menu-top li.current_page_item a {box-shadow: 0 0 0;}[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

still looks the same :(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay. Putting this whole thing together may take some creative puzzle solutions. You're going to take a piece here, a piece there and sooner or later, this whole thing is going to take on a clear view. Let's go back to the last item you listed above a:active... Instead of using color alone, you can also add a background, as you'd find in this: http://www.w3schools.com/css/css_background.asp That talks about body, but the CSS selector doesn't matter provided you can take an action there. So lets also go back to the last grouping in this one: http://www.w3schools.com/css/css_link.asp where you'll see background-color used. Well, if you can make a background color happen on active state, you can also do a background image. This isn't active but hover, but you should view source to see how this one handles it: http://www.cssplay.co.uk/menus/magnifier.html

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Home button fixed. Thanks guys. Here's the coding: /* Home Button No Shadow */ .main_nav ul li.menu-item-1157 a { background: url('http://www.k95k.com/wp-content/uploads/2012/04/dog-house-icon-trans.png') transparent no-repeat 15px 4px !important; width: 30px; box-shadow: 0 0 0; }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, Thanks for informing us that the issue is now resolved. We really appreciate it!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0