Jump to content


Photo

Navigation button image background?


  • Please log in to reply
23 replies to this topic

#1 Analog Drawings

Analog Drawings

    Member

  • Members
  • 26 posts
  • LocationAustralia

Posted 20 September 2011 - 11:48 AM

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!

#2 Danny

Danny

    Is Awesome!

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

Posted 20 September 2011 - 12:57 PM

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.

#3 Analog Drawings

Analog Drawings

    Member

  • Members
  • 26 posts
  • LocationAustralia

Posted 20 September 2011 - 01:02 PM

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!

#4 Danny

Danny

    Is Awesome!

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

Posted 20 September 2011 - 01:39 PM

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.

#5 Analog Drawings

Analog Drawings

    Member

  • Members
  • 26 posts
  • LocationAustralia

Posted 20 September 2011 - 01:45 PM

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

#6 Danny

Danny

    Is Awesome!

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

Posted 20 September 2011 - 02:08 PM

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?

#7 Analog Drawings

Analog Drawings

    Member

  • Members
  • 26 posts
  • LocationAustralia

Posted 20 September 2011 - 02:17 PM

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

#8 Danny

Danny

    Is Awesome!

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

Posted 20 September 2011 - 02:24 PM

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

#9 Analog Drawings

Analog Drawings

    Member

  • Members
  • 26 posts
  • LocationAustralia

Posted 20 September 2011 - 02:26 PM

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!

#10 Danny

Danny

    Is Awesome!

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

Posted 20 September 2011 - 02:30 PM

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.

#11 Analog Drawings

Analog Drawings

    Member

  • Members
  • 26 posts
  • LocationAustralia

Posted 20 September 2011 - 02:36 PM

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?

#12 Danny

Danny

    Is Awesome!

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

Posted 20 September 2011 - 02:41 PM

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.

#13 Analog Drawings

Analog Drawings

    Member

  • Members
  • 26 posts
  • LocationAustralia

Posted 20 September 2011 - 02:59 PM

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

#14 Danny

Danny

    Is Awesome!

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

Posted 20 September 2011 - 04:38 PM

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.

#15 Analog Drawings

Analog Drawings

    Member

  • Members
  • 26 posts
  • LocationAustralia

Posted 20 September 2011 - 04:46 PM

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

#16 Danny

Danny

    Is Awesome!

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

Posted 20 September 2011 - 04:54 PM

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.

#17 Analog Drawings

Analog Drawings

    Member

  • Members
  • 26 posts
  • LocationAustralia

Posted 21 September 2011 - 09:23 AM

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

#18 Danny

Danny

    Is Awesome!

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

Posted 21 September 2011 - 09:29 AM

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 ?

#19 Analog Drawings

Analog Drawings

    Member

  • Members
  • 26 posts
  • LocationAustralia

Posted 21 September 2011 - 10:16 AM

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

#20 Danny

Danny

    Is Awesome!

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

Posted 21 September 2011 - 10:41 AM

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.