23 replies to this topic

[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...menu-buttons/p1 Help!

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

[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.transitio...rg.uk/navbg.gif And the rollover colour is #f37a21 Thanks!

[Danny]

Hi Paul,

Can you test this for me please, add the code below to Platform Settings -- > Custom Code --> CSS Rules:

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

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.

[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'?

[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?

[Analog Drawings]

It's almost working, just getting some funny things happening with the rollover states, try clicking between pages...

[Danny]

Yeah, I just noticed that, can I ask you are you going to be adding any other menu items in the future ?

[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!

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

[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?

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

[Analog Drawings]

Have done this, added two pages under Welcome...

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

[Analog Drawings]

Hi Danny, Thanks heaps for your help, and totally fine to tweak the drop-down later. Speak soon...

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

[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

[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 ?

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

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