WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Changing Header Menu colors... (10 posts)

  1. Coleen
    Member
    Posted 3 years ago #

    I have been searching high and low through the css of the Betround theme for the "Visited" menu formatting. I tought I found it and made the changes I wanted to it, but when I upload the css file and run my page, the changes for the topmuenu visisted do not work! Here is the css I found:

    div#topmenu li a:link, div#topmenu li a:visited
    {
    color: #FFFFFF;
    font-weight: 700;
    font-style: italic;
    }
    and

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

    As you can see, I have already changed the color for both of these, and yet, when I go back to view my page - even after clearing my cache, it still shows the visited links in black instead of in white or gray as I have changed them.

    Any hep on this would be MUCH appreciated! Is there somewhere else (like in the .php code) that I need to change these colors? This SHOULD e simple...

    TIA

    Coleen

  2. Digital Raindrops
    Member
    Posted 3 years ago #

    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

  3. Coleen
    Member
    Posted 3 years ago #

    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

  4. Digital Raindrops
    Member
    Posted 3 years ago #

    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

  5. Digital Raindrops
    Member
    Posted 3 years ago #

    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: http://www.toptut.com
    Description: Great magazine style wordpress theme for sport betting blogs
    
    Author: Lorelei
    Author URI: http://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

  6. Digital Raindrops
    Member
    Posted 3 years ago #

    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

  7. Digital Raindrops
    Member
    Posted 3 years ago #

    Tested and works in style.css

    /*
    Theme Name: Betround
    Theme URI: http://www.toptut.com
    Description: Great magazine style wordpress theme for sport betting blogs
    
    Author: Lorelei
    Author URI: http://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

  8. Coleen
    Member
    Posted 3 years ago #

    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! http://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

  9. Digital Raindrops
    Member
    Posted 3 years ago #

    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

  10. Coleen
    Member
    Posted 3 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags