Joomla Templates Club 406,261 posts

[maisha Friend maishaJoin date: September 2008Posts: 8Downloads:0Uploads:1 Thanks: 2]

#135707

The text colors for the secondary navigation are not consistent and sometimes appear the same color as the background so the text disappears.

First: text colors are grey on green background. Visit this page and mouse over Green Technologies in the main nav, then Products, then Green DCV. When you get to Green DCV the Products text turns grey – it should be white.
http://starfire.websitewelcome.com/~cemtrex/

Second: Text colors are green on green background. Visit this page and mouse over Green Technologies in the main nav, then Products. Products text turns green – it should again be white.
http://starfire.websitewelcome.com/~cemtrex/index.php?option=com_content&view=article&id=3&Itemid=3

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#280472

Hi maisha !
You can fix it following way below :
Open bluegreen.css file in templates/jaolivine/css/colors folder, find following code section at about line 138 :


#ja-cssmenu ul li a.active:hover,
#ja-cssmenu ul li a.active:active,
#ja-cssmenu ul li a.active:focus {
color:#669933;
}


change to :


#ja-cssmenu ul li a.active:hover,
#ja-cssmenu ul li a.active:active,
#ja-cssmenu ul li a.active:focus {
}


1 user says Thank You to Sherlock for this useful post

1. maisha

[maisha Friend maishaJoin date: September 2008Posts: 8Downloads:0Uploads:1 Thanks: 2]

#280534

Hello – thanks for your suggestion.

I’ve just made that revision and it seems to have had no affect. Also would that address both problems?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#280605

Hi maisha !
You can send FTP account via pm for me, i will fix it for you !

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#280627

maisha;92544Hello – thanks for your suggestion.

I’ve just made that revision and it seems to have had no affect. Also would that address both problems?

Did you clear your browser cache before checking?

[maisha Friend maishaJoin date: September 2008Posts: 8Downloads:0Uploads:1 Thanks: 2]

#280649

Yes – tried clearing the cache and it does not help. Thanks & hainn84 I will PM you.

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#280652

Find in ja.cssmenu.css (line 134)

#ja-cssmenu li ul a {
color:#666666;
font-size:85%;
font-weight:bold;
text-transform:none;
}

change to…

#ja-cssmenu li ul a {color:#FFFFFF;
font-size:85%;
font-weight:bold;
text-transform:none;
}


Don’t forget to refresh cache to see changes.

[maisha Friend maishaJoin date: September 2008Posts: 8Downloads:0Uploads:1 Thanks: 2]

#280709

The code in my template is much longer:

#ja-cssmenu li ul a {
border-right: none;
margin: 0;
padding: 7px 10px;
height: auto;
background: none !important;
font-weight: bold;
# the secondary menu picks up the grey color from here and doesn’t change it
color: #666666;
text-transform: none;
font-size: 85%;
}

Of course if I replace all of that it breaks the design. If I simply add your code afterwards or just change the #666666 to #ffffff, it changes *all* of the secondary, tertiary etc. navigation to white which means the text is white on a white background much of the time.

Unfortunately the demo does not display what happens when there’s tertiary navigation. It seems like there’s a bug in the template/css that the css needs separate classes for moused over secondary, tertiary etc. menu items so that they can be a color separate from other navigation states.

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#280716

maisha;92754The code in my template is much longer:

I took the code from your website!

It’s different now though coz you’ve changed it.

[maisha Friend maishaJoin date: September 2008Posts: 8Downloads:0Uploads:1 Thanks: 2]

#280727

Hi Scotty,

I really appreciate your help so I want to make sure we’re on the same page! I went into the file and just located the code at line 134 which seemed to match your description. The code was just as appeared above before I applied any changes. I’m not really a css pro so I wouldn’t have made such extensive changes to the css code. Perhaps I was looking in the wrong file? The file I viewed was templates/jaolivine/ja_menus/ja_cssmenu/ja.cssmenu.css.

So does that mean your ja.cssmenu.css file doesn’t have the same code as mine?

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#280741

I don’t have a code. The code i got is from http://starfire.websitewelcome.com/~cemtrex/templates/jaolivine/ja_menus/ja_cssmenu/ja.cssmenu.css. Sorry I must have made a mistake when grabbing it.

First: text colors are grey on green background.

Visit this page and mouse over Green Technologies in the main nav, then Products, then Green DCV. When you get to Green DCV the Products text turns grey – it should be white

No it shouldn’t. Well…. it should but it isn’t. The styling for a menu link is grey for normal and white for hovered and focused.

The way that this menu option is designed ( and on all JA templates) is to keep the hovered states on the background when you move on to a submenu item but not the text colour. There for the menu background stays green but the text turns back to grey as you are no longer hovering on it.

Second: Text colors are green on green background. Visit this page and mouse over Green Technologies in the main nav, then Products. Products text turns green – it should again be white.
http://starfire.websitewelcome.com/~…&id=3&Itemid=3

This is related to the problem above where the active link colour is the same as the hover background colour. Once you move onto a submenu the active link turns back to active normal (green) and the background colour keeps the hovered colour (also green).

Both of these problems are easily solved but it just means you will have to use more colours in your menu like dark and bright green instead of the one green colour.

[Author]

Posts