Jump to content


Photo
- - - - -

iBlogpro5 customized home button


  • Please log in to reply
19 replies to this topic

#1 WebIT

WebIT

    Super Member

  • Members
  • 232 posts
  • LocationCape Cod
  • Country: Country Flag

Posted 13 April 2012 - 12:56 PM

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; }

#2 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 13 April 2012 - 02:27 PM

You can try using:

Please Login or Register to see this Hidden Content


Make sure you've downloaded

Please Login or Register to see this Hidden Content

and check out

Please Login or Register to see this Hidden Content

to figure out the answers to CSS questions like these.

#3 WebIT

WebIT

    Super Member

  • Members
  • 232 posts
  • LocationCape Cod
  • Country: Country Flag

Posted 13 April 2012 - 08:11 PM

tried that and seems to be no difference

#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 April 2012 - 08:54 PM

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

Please Login or Register to see this Hidden Content

for additional selector information.

#5 WebIT

WebIT

    Super Member

  • Members
  • 232 posts
  • LocationCape Cod
  • Country: Country Flag

Posted 13 April 2012 - 10:12 PM

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

Please Login or Register to see this Hidden Content

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.

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 14 April 2012 - 02:29 PM

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:

Please Login or Register to see this Hidden Content

(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.

#7 WebIT

WebIT

    Super Member

  • Members
  • 232 posts
  • LocationCape Cod
  • Country: Country Flag

Posted 15 April 2012 - 10:02 PM

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:

Please Login or Register to see this Hidden Content

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; }

#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 15064 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 16 April 2012 - 08:36 AM

Hi, What behaviour are you trying to accomplish ?

#9 WebIT

WebIT

    Super Member

  • Members
  • 232 posts
  • LocationCape Cod
  • Country: Country Flag

Posted 17 April 2012 - 03:09 PM

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

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 18 April 2012 - 02:22 AM

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

#11 WebIT

WebIT

    Super Member

  • Members
  • 232 posts
  • LocationCape Cod
  • Country: Country Flag

Posted 20 April 2012 - 01:58 PM

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.

#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 20 April 2012 - 02:54 PM

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.

Please Login or Register to see this Hidden Content



#13 WebIT

WebIT

    Super Member

  • Members
  • 232 posts
  • LocationCape Cod
  • Country: Country Flag

Posted 21 April 2012 - 12:52 PM

thanks i'll try to figure that out.

#14 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 21 April 2012 - 03:57 PM

Do you need further assistance with anything else?

#15 WebIT

WebIT

    Super Member

  • Members
  • 232 posts
  • LocationCape Cod
  • Country: Country Flag

Posted 21 April 2012 - 04:22 PM

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.

#16 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 21 April 2012 - 04:39 PM

Maybe try something like this (this should change "current state" page menu items):

Please Login or Register to see this Hidden Content



#17 WebIT

WebIT

    Super Member

  • Members
  • 232 posts
  • LocationCape Cod
  • Country: Country Flag

Posted 21 April 2012 - 07:18 PM

still looks the same :(

#18 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 21 April 2012 - 07:47 PM

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:

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content

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:

Please Login or Register to see this Hidden Content



#19 WebIT

WebIT

    Super Member

  • Members
  • 232 posts
  • LocationCape Cod
  • Country: Country Flag

Posted 23 April 2012 - 12:58 AM

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; }

#20 Danny

Danny

    Is Awesome!

  • Moderators
  • 15064 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 April 2012 - 01:10 PM

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