Jump to content
Sign in to follow this  
Analog Drawings

Navigation button image background?

Recommended Posts

Analog Drawings

Hello, I'm trying to make some nice gradient buttons instead of the default buttons, after going through the forum looking for an answer I'm still stumped! All I need to do is put a gradient image behind the buttons with a 1 pixel divider and another colour (orange) as the rollover. Here's the site as it is now: http://www.transitioninstitute.org.uk/ I want it to be something similar to this: http://66.40.29.164/~wpsaudio/ - there is a discussion about this site I tried following but I couldn't get it to work on my site: http://www.pagelines.com/forum/discussion/13036/how-to-add-menu-buttons/p1 Help!

Share this post


Link to post
Share on other sites
Danny
Hi Paul, Are you looking to have a similar style to wpsaudio site you linked and also what colors do you want in the gradient? Reply with the colors and I'll see if I can help.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Analog Drawings
Hi Danny, Yes, a similar style to the wpsaudio site, with the dividers between menu items. The gradient for the background is this: http://www.transitioninstitute.org.uk/navbg.gif And the rollover colour is #f37a21 Thanks!

Share this post


Link to post
Share on other sites
Danny
Hi Paul, Can you test this for me please, add the code below to Platform Settings -- > Custom Code --> CSS Rules: [code]/* NAVIGATION */ #nav_row.main_nav, ul.sf-menu ul li { background: transparent !important; } #primary-nav ul.main-nav { background: #a4a09a; /* Old browsers */ background: -moz-linear-gradient(top, #a4a09a 0%, #857e78 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4a09a), color-stop(100%,#857e78)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a4a09a 0%,#857e78 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a4a09a 0%,#857e78 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #a4a09a 0%,#857e78 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4a09a', endColorstr='#857e78',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #a4a09a 0%,#857e78 100%); /* W3C */ border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border: 0 none !important; width: auto; } .main_nav li { background: transparent !important; border-right: 1px solid #FFFFFF; } .page-item-19 a, .page-item-19 a:active { background: #F57921 !important; border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; -webkit-border-radius: 6px 0 0 6px; } .page-item-62 a, .page-item-62 a:active, .page-item-62 a:hover { background: #F57921 !important; border-radius: 0px 6px 6px 0px; -moz-border-radius: 0px 6px 6px 0px; -webkit-border-radius: 0px 6px 6px 0px; } .main-nav li a { color: #FFFFFF !important; font-size: 0.85em; } #footer .page-item-19 a, .page-item-19 a:active { background: transparent !important; border-radius: 0 !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; } #nav_row.main_nav, ul.sf-menu ul li { border: 0 none !important; } [/code] I did the gradient via CSS rather than the image, if you prefer to use the image, I can change that for you. **EDIT: Made a few changes, as there were some minor errors, please replace all the code again.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Analog Drawings
Genius! I have updated the site, looks great. Can we have one pixel white dividers between the menu items? Plus is there a way for the gradient to only be the width of the menu items? So it would stop just after 'Sign Up'?

Share this post


Link to post
Share on other sites
Danny
Hi Paul, I have updated the code in my previous post, can you replace all the code you added with the new version please and let me know if there are any errors?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Analog Drawings
It's almost working, just getting some funny things happening with the rollover states, try clicking between pages...

Share this post


Link to post
Share on other sites
Danny
Yeah, I just noticed that, can I ask you are you going to be adding any other menu items in the future ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Analog Drawings
Yeah, there will be a few more added in the future, plus there will be drop-down navigation menu items required too... should have mentioned that earlier sorry!

Share this post


Link to post
Share on other sites
Danny
OK, would it be possible to add these menu items as well as the drop down now so we can get it working 100% and then there's no need for you to get assistance in the near future.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Analog Drawings
That might be tricky as the new menu items are not ready, plus more will added over time. And some menu items might change over time, be deleted or moved. Will this affect the way this menu has been built?

Share this post


Link to post
Share on other sites
Danny
OK thats not a problem, but would it be possible as a test to add a simple drop down to one of your menu items? Once this is done, I can show you how to add css to any new menu items you add in the future.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Analog Drawings
Have done this, added two pages under Welcome...

Share this post


Link to post
Share on other sites
Danny
Hi Paul, OK I have now added the code to your site and it looks fine as far as I can see, there is a slight issue with the drop down but I will sort this later on if thats OK.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Analog Drawings
Hi Danny, Thanks heaps for your help, and totally fine to tweak the drop-down later. Speak soon...

Share this post


Link to post
Share on other sites
Danny
Paul, I have fixed the drop down issue now :) Also, for the future, I would recommend getting Firebug, this will help when or if you add new menu items.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Analog Drawings
Hi Danny, Thanks for your help on this, it looks and works great. I have got Firebug (not used it too much though), what is the procedure for adding new pages and sub-pages? Cheers

Share this post


Link to post
Share on other sites
Danny
Hi Paul, I'm sorry but I don't fully understand what you mean. Do you mean adding pages and sub pages to your menu or adding new page/sub pages to your custom css ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Analog Drawings
Sorry, I mean adding new pages to the custom css, you will see I have added a Contact page, I see I need to tweak the custom css as the divider looks a bit funny...

Share this post


Link to post
Share on other sites
Danny
Hi Paul, Yeah I see what you mean, the reason its doing that is because I thought the about us was going to be the last page and thats why I asked if you were going to add any new menu items in the future. But not to worry, if you go to the CSS and find the part that says /* Signup */ you should see the following code menu-item-72, all you need to do is change the id from 72 to 326. So it looks like this menu-item-326, so change all instances of menu-item-72 to menu-item-326 and it should be fine.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Analog Drawings
Hi Danny, Great, that worked, I presume the 326 is the distance to the end of the menu items?

Share this post


Link to post
Share on other sites
Danny
Hi Paul, No 326 is the menu id for contact us. Whenever you create a menu item it is given a unique ID. That's why I said you should try to get used to working with firebug, as it makes it easy to find out the menu id and style it on the fly. You can also goto the Menu Options page in wp-admin and if you hover your mouse over the arrow, it should show the menu ID too.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Analog Drawings
Ah, I see, I'll let you know how I get on when I add new pages. Thanks again for your work on this, very appreciated!

Share this post


Link to post
Share on other sites
Danny
No problem Paul. Glad you got it working, goodjob!

Please search our forums, before posting!

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  

×