Changing Header Menu colors…

Hi Coleen,
Use FireFox and install the FireBug addon, load the page in FireFox and press Ctrl + F12, this will open FireBug in a new window, select the html tab and click on the active menu item, the css will be displayed in the right panel with the line number.

FireBug will show if it is overwritten somewhere with an inline, style=”color: #000″;

Another thing you could try is !important, that gives priority.

color: #ffffff !important;

HTH

David

I use Visual Studio to edit my HTML and CSS Code – I can run through the entire css and see that under the topmenu div there is no place where it is set to #000. Although, it is set to #000 in the footer (and I want it to be!) This should not affect the visited attributes in any place except the footer though! Could it be overwritten in the .php someplace? This just doesn’t make any sense.

Thanks for your help, it is very appreciated.

Coleen

Hi Coleen

Try adding the !important as above, the #000 was just an example of inline style.

Most theme developers will use FireBug to examine the website, if you post a live link to your website this is what we would use to find where the color is set.

It could be that something else is breaking the style, you may have a function to change the colors in the admin, then the style would be over written by a css from a sub folder, without looking it is hard to give a firm answer.

So one way is for you to use FireBug and investigate, the other is to add a link here to a website with the theme so we can look.

Hope this helps

David

Coleen,
When you say you have already changed the color, I downloaded and looked at the theme and by default the setting is white #ffffff in the /css/layout.css file.

div#topmenu li.current_page_item a:link,
div#topmenu li.current_page_item a:visited {
	color:#FFFFFF;
	font-weight:700;
}

To overide this do not do any changes in the layout.css file, even in the same file always add a new value after the one you want to change, in this case to the style.css

/*
Theme Name: Betround
Theme URI: https://www.toptut.com
Description: Great magazine style wordpress theme for sport betting blogs

Author: Lorelei
Author URI: https://www.toptut.com

*/

@import "css/layout.css";

/* change active color */
div#topmenu li.current_page_item a:link,
div#topmenu li.current_page_item a:visited {
	color:#f1f1f1;
}

WordPress will load the /css/layout.css file first, then the changed style from style.css will overide any values.

If you want just the link still white then just remove div#topmenu li.current_page_item a:link, from the example above.

@import "css/layout.css";

/* change active color */
div#topmenu li.current_page_item a:visited {
	color:#f1f1f1;
}

If you plan to do a lot of changes then look at using a child theme, if the original theme is updated by a new release then you will not lose any changes you have done.

HTH

David

Looking at the theme you are saying ‘visited’, which is already white, and you are saying ‘black’ which is the inactive state which is the ‘link’ which is as you say the block.

div#topmenu li a:link, div#topmenu li a:visited {
   color:#FFFFFF;
}

Reset the old value and add this to the style.css under the @imports

If you are not seeing the changes then it is because the stylesheet is in your temporary internet files, refresh your browser after changing the css with a ctrl + F5.

HTH

David

Tested and works in style.css

/*
Theme Name: Betround
Theme URI: https://www.toptut.com
Description: Great magazine style wordpress theme for sport betting blogs

Author: Lorelei
Author URI: https://www.toptut.com

*/

@import "css/layout.css";

div#topmenu li a:visited {
   color:#bbb;
}

div#topmenu li.current_page_item a:hover,
div#topmenu li a:hover {
   color:#ddd;
}

David

Hi David – thanks so much for all the advice, I was offline last night so didn’t try it all until just now, but you are right, it’s the page_item hover that is causing the issues. I used the firebug to track that down – thank you very much!

I have been developing in VB.Net and using HTML and CSS for years, but have never really tried my hand at PHP. I have a client that likes the Betround template and am in the process of customizing it for her, so my biggest issue has been where to find the CSS Div’s and classes that correspond to each section of the template. (I’m not a fan of using templates but I admit, they come in handy for things like comment blocks but are a real PITA for formatting issues – so far!)

I did change the page_item and it works! Thank you SO much! https://www.wedevelopwebs.com/wordpress/ This is the sample that I am working on. As you can see, I’ve already been able to change all the background colors, the images, etc. I’m just working on the pages now…

I do have another question on another subject (adding pages/items to the menu) should I start a new thread on that?

Thanks again!

Coleen

Hi Coleen,
It looks like the menu is just a basic ‘page menu’, add pages and they appear and not ‘version 3’ which you have control over, I am not sure how you would customize it.

The theme does not use the new features of ‘version 3’, so I would ask in another topic, or it may be better to ask the theme developers they may have a version 3 theme that gives more control.

HTH

David

Thanks so much David! I’ll start a new thread on it to go over what I’ve done and what hasn’t worked. Thanks again very much for your help ??

Coleen