Jump to content
Sign in to follow this  
timversnel

Adding a small image into the navbar

Recommended Posts

timversnel

fellow members of the pagelines community, I have a question regarding a customization of my WhiteHousePro3 blog. In the original WhiteHouse.gov website the home-button in the navbar is a small image (us flag), much like the special home-button on the iBlogPro navbar. Is there a way to add this feature into my WHP navbar? And if so, how do I do it. Thanks a lot! Tim

Share this post


Link to post
Share on other sites
cmunns

Bryan I think your confused on this one :) Are you using WP3.0 menus? If so you can create a special class for the Home Nav button. Then apply a text-indent to remove the link text out of sight...use a CSS background-image to that element to replace the text. Does that make sense?

Share this post


Link to post
Share on other sites
timversnel

I know the option to customize the homebutton from within the theme menu from my iBlog website, but WhiteHouse doesn't have that feature.. Adam, thanks that makes perfect sense although I'm pretty sure I won't be able to do that without any further help... Anyway I'll give it a shot and if it doesn't work I'll come back and kindly ask you for more specific instructions ;) Thanks guys! Tim

Share this post


Link to post
Share on other sites
timversnel

Nope, as expected I can't get it to work. In fact, I don't even know how to create that special class for the homebutton... Adam, would you please be so kind to give some more detailed instructions? Many thanks for your time! Tim

Share this post


Link to post
Share on other sites
bryan-hadaway

First, upload the image via your Media tab in WordPress and copy the URL. Then, paste the URL in the code below; imagehere, and then paste the entire code into Theme Options > Custom Code > Custom CSS: `#nav ul li .home{background:url('imagehere') center center no-repeat}` Thanks, Bryan

Share this post


Link to post
Share on other sites
cmunns

Sure thing. So if you assign a CSS class using the WP3.0 menus (u may have to go to screen options in the top right of wp-admin to toggle the CSS classes so they appear under each menu item) name the class "home-icon" Then add something like this to your APPEARANCE > CUSTOM CODE > CUSTOM CSS options ` #nav li.home-icon { background:URL('http://www.pagelines.com/demos/iblogpro/ wp-content/themes/iblogpro4/images/home-icon-trans.png') no-repeat center center; text-indent:-2000px; width:40px; } ` This will work for you using the image from the iblogpro demo as a hotlink. So just specify your own URL for the CSS (don't hotlink please)

Share this post


Link to post
Share on other sites
cmunns

FYI if you copy that code exactly make sure there are no spaces in the URL for the CSS. I put in a break so you could see all the code there :)

Share this post


Link to post
Share on other sites
timversnel

Fantastic! That works brilliantly, thanks so much. One last thing however, is that the flag disappears when the button is either pressed or hovered over. Is there a way to make the flag always visible (while the blue on the background becomes dark when pressed or hovered over)? Again, thanks so much for your time. Tim

Share this post


Link to post
Share on other sites
cmunns

yes, I may have to explicitly create a :hover rule for the CSS mentioned above. ` #nav li.home-icon a:hover { background:URL('http://www.pagelines.com/demos/iblogpro/ wp-content/themes/iblogpro4/images/home-icon-trans.png') no-repeat center center; text-indent:-2000px; width:40px; } ` I have the same code there so that it doesn't change when hovered, but I may have to see a link to your site to give you correct code if that doesn't work.

Share this post


Link to post
Share on other sites
timversnel

Again, thanks a lot. We're getting very close, but I'm afraid we're not there yet... ;) When I add the code you provided the flag does appear when hovering over the button, but it's not aligned with the flag that appears when the button is not pressed (i.e. when you're on a different page than the homepage). Here's a link to my website: http://www.timversnel.com. I can't thank you enough for all the time you've already taken to help me out. Tim

Share this post


Link to post
Share on other sites
cmunns

I think you need to add an `a` to the non hover element. So that first bit of code is now: ` #nav li.home-icon a { background:URL('http://www.pagelines.com/demos/iblogpro/ wp-content/themes/iblogpro4/images/home-icon-trans.png') no-repeat center center; text-indent:-2000px; width:40px; } ` Also, I think the width looks better at 85px if you want to cahnge it

Share this post


Link to post
Share on other sites
timversnel

Perfect! Adam you really have gone out of your way to help me out, thanks so much. With this level of service, be sure I'll warmly recommend Pagelines around my network. Best regards, Tim

Share this post


Link to post
Share on other sites
nrbeatty

Hi Adam or Tim, I've been following along here, but I've lost you in the end: * I created a custom nav for this purpose, which I wasn't previously taking advantage of. * I selected "CSS classes" from the screen options, so that's fine. * I copied the first initial bit of code Adam provided into the CSS class for "Home" and removed the space in the hotlink url. Before I go any further with the hover issue, I should stop here b/c I don't see any changes in the home button- it still says Home.. Can you post the full code in it's entirety (including the hover class), and I will post that into the CSS Class and try again? P.S. One thing that's confusing: under my list of pages to choose from, I have one called "Home" and another called "Home: Home." I assume this has to do with me having selected a static home page, but which one do I select for the custom menu? Thanks! I'm close... I think

Share this post


Link to post
Share on other sites
nrbeatty

Creating a home button that is an image: 1) Activate custom menus (Appearance > Menus >> Create one, and add the home page of course) 2) Within the Menus inteface, toggle-down the "screen options" menu in the upper-right corner, and make sure "CSS Classes" is checked. 3) Within the Menus interface, toggle-down your Home page box, and add "home-icon" (without quotes) to the "CSS Classes" field. 4) Go to WhiteHousePro(or other theme) > Theme Options > Custom Code > Custom CSS box, and paste the following code:

#nav li.home-icon a {
		background:URL('URLForYourHomeImage') no-repeat center center;
		text-indent:-2000px;
		width:40px;
		}
#nav li.home-icon a:hover {
		background:URL('URLForYourHomeImage') no-repeat center center;
		text-indent:-2000px;
		width:40px;
		}
		width:40px;
		}

As an example, the url 'http://www.pagelines.com/demos/iblogpro/wp-content/themes/iblogpro4/images/home-icon-trans.png' was provided, but don't hotlink this url off that server- use your own url. :) That's the full monty. (note: One tiny flaw: The background color of the Home button wasn't changing on hover, so I just made the hover image a different image with a different color...If that tiny edit was made to the hover class, it would be 100%)

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  

×