Forum Support

Shape 5
July 30, 2021, 07:40:45 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Modify color of top/main menu, without modifying things globally  (Read 341 times)
bollinger
Jr. Member
**
Offline Offline

Posts: 92



« on: March 17, 2016, 05:21:09 PM »

Hi, our template would like to primarily utilize green (#006633) but as you can see from the screenshot-when we implement all green on the template background, it makes the words hardly legible upon roll over (when viewing the top/main menu).

Can we do a CSS override for just the menu item at the top so it is always white, and not that dark green? This will make things more legible for the user. Smiley

http://enmu.edu/alumni-foundation/

Matthew
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: March 18, 2016, 07:20:37 AM »

Hello,

You would have to modify the template's index.php file and just above the </style> closing tag add:

#s5_nav li a:hover {
color:#000FFF !important;
}

Change the hex color as desired.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
bollinger
Jr. Member
**
Offline Offline

Posts: 92



« Reply #2 on: March 18, 2016, 08:29:57 AM »

I added the code snippet but I am still not seeing the changes? See attachment.

Matthew
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 on: March 18, 2016, 09:21:54 AM »

Hello,

Try changing it to this:

#s5_nav li a:hover, #s5_nav li span:hover {
color:#000FFF !important;
}
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
bollinger
Jr. Member
**
Offline Offline

Posts: 92



« Reply #4 on: March 18, 2016, 10:24:30 AM »

It is working, but still sort of funny in process. Go to the URL for a test drive and I think you will know what I am talking about...

For example, when hovering on sub menu items it is green again. Also, when that particular page is live, it is green again. Smiley

Can you advise further?
Logged
bollinger
Jr. Member
**
Offline Offline

Posts: 92



« Reply #5 on: March 18, 2016, 10:25:01 AM »

http://enmu.edu/alumni-foundation/
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #6 on: March 18, 2016, 12:31:08 PM »

Hello,

You probably need this as well:

#s5_nav li.mainMenuParentBtnFocused, #s5_nav li.active:hover {
color:#FFFFFF !important;
}
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
bollinger
Jr. Member
**
Offline Offline

Posts: 92



« Reply #7 on: March 18, 2016, 01:32:33 PM »

Hmmmm...still acting funny.  Any further advice?

M
Logged
bollinger
Jr. Member
**
Offline Offline

Posts: 92



« Reply #8 on: March 18, 2016, 01:35:37 PM »

Here is an example link that looks funny. The contact button that is still green...

http://enmu.edu/alumni-foundation/content/contact
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #9 on: March 19, 2016, 09:30:00 AM »

Hello,

This would work for that:

#s5_nav li.active span, #s5_nav li.active a {
color:#FFFFFF !important;
}

You can also use Firebug to identify the classes being used on these areas if you run into other areas that need adjusted.
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.