Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Different Colors in menu


  #1  
Old Jul 17, 2013, 06:36 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
Hi,

I want to create (copy) this color menu: http://rightone.nl/ in 5 colors, I only care about the colors not the design or size of the menu, so just the default ATA menu but then with 5 different collors, the submenu has to be in the same color as the main menu, is this possible?

Thx a lot in advance!
  #2  
Old Jul 17, 2013, 06:50 AM
juggledad's Avatar
juggledad
 
23,655 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Sure, you just need to create a CSS selector for each menu using a unique identifier for each menu item.

It's firebug time!
  #3  
Old Jul 17, 2013, 06:51 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
I am very bad with CSS do you have an example? If this take you (extra) work I can donate
  #4  
Old Jul 17, 2013, 05:18 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
You can add your own special classes to the menu tabs in Appearance>Menus but giving you specifics is difficult as it depends on your implementation of the menu. To style like you want requires you use a code inspector like Firebug to determine the CSS. Giving you sample code could make things more confusing.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Jul 18, 2013, 03:25 AM
juggledad's Avatar
juggledad
 
23,655 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Here is some sample menu code taken from a home page

HTML Code:
menu2" class="clearfix rMenu-hor rMenu">
	<li class="page_item page-item-2 current_page_item">
		<a href="http://mydomain.com/"><span>Home</span></a>
	</li>
	<li class="page_item page-item-7">
		<a href="http://mydomain.com/business-support/"><span>Business Support</span></a>
	</li>
	<li class="page_item page-item-9">
		<a href="http://mydomain.com/tax-legal-advisory/"><span>Tax & legal advisory</span></a>
	</li>
	<li class="page_item page-item-11">
		<a href="http://mydomain.com/business-coaching/"><span>Business coaching</span></a>
	</li>
	<li class="page_item page-item-13">
		<a href="http://mydomain.com/education/"><span>Education</span></a>
	</li>
</ul></div>
Notice each <li> has a unique class like 'page-item-2' and 'page-item-11' You can use this to address each menu item separately.
here is an example to address the 'Business Support' menu item - add this to the CSS Inserts

HTML Code:
div#menu1 ul.rMenu li.page-item-7 a, 
div#menu1 ul.rMenu li.page-item-7 a:link, 
div#menu1 ul.rMenu li.page-item-7 a:active, 
div#menu1 ul.rMenu li.page-item-7 a:hover, 
div#menu1 ul.rMenu li.page-item-7 a:visited
{ background-color: #00ffff; }
now just duplicate this for the rest of the menu items. If you want the hover to be different, you need to split that css selector out from the rest.
  #6  
Old Jul 18, 2013, 03:27 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
This works like a charm, Thx a lot!!
  #7  
Old Jul 18, 2013, 03:35 AM
Ber|Art's Avatar
Ber|Art
 
198 posts · Oct 2009
Europe (NL) ber-art.nl Windows 7x64 WP 3.x Atahualpa 3.7.x
Send a message via Skype™ to Ber|Art
Donation is done! thx again

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
WP Toolbar menu/link colors Knut Sparhell Atahualpa 3 Wordpress theme 1 May 22, 2012 06:12 AM
[SOLVED] Page (menu 1) colors bswb97 Page & Category Menu Bars 2 Dec 11, 2010 11:46 PM
page menu bar colors wppg Header configuration & styling 4 Aug 13, 2010 09:28 AM
Dropdown Menu Colors - New Menu Builder scombridae1969 Page & Category Menu Bars 2 Aug 11, 2010 09:41 PM


All times are GMT -6. The time now is 08:34 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.