WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Color of menu text (10 posts)

  1. farouchia
    Member
    Posted 4 years ago #

    I have 2 pages that need to look different in the menu.
    While all my menu elements text is black, I'd need those 2 page menu text to be of different colors.

    Ex. :
    Our(blue) services(red)

    Is there a way to do this with CSS? Can someone help me with this?

    Thank you so much!

  2. xdesi
    Member
    Posted 4 years ago #

    Yes do you have a link, or post up the HTML code for your menu, and if possible how are you outputting the menu, manually or using a WP function?

    The basic idea is
    1. Finding or adding a class to these menu items
    2. Adding to your CSS something like:

    .classname {color:blue;}
    .classname2{color:red;}
  3. farouchia
    Member
    Posted 4 years ago #

    Hello xdesi,

    Thinking about it, wouldn't it be simplier to make the color text an image and simply put the image on the tabs? I don't know...

    I already created a new page template. So now I guess I would have to change the class of the navbar and add the pic in the style.css?

    I would need help to know how to write that is my page template, what to put instead of

    <ul id="nav">
    			<li><a href="<?php echo get_option('home'); ?>"><?php _e("Home", 'studiopress'); ?></a></li>
    			<?php wp_list_pages('title_li=&depth=4&sort_column=menu_order'); ?>
    		</ul>

    and also how to add that to my style.css file.

    Thank you so much!

  4. xdesi
    Member
    Posted 4 years ago #

    If you click View Source in your browser on your page, you should see that it adds classes for each item in the list, you can find the class relating to the one you want to change the look of.

    Post up the HTML source of the menu if you are still struggling.

  5. farouchia
    Member
    Posted 4 years ago #

    OK. Here is my code from the header...

    <div id="navbar">
    
    	<div id="navbarleft">
    		<ul id="nav">
    			<li><a href="<?php echo get_option('home'); ?>"><?php _e("Home", 'studiopress'); ?></a></li>
    			<?php wp_list_pages('title_li=&depth=4&sort_column=menu_order'); ?>
    		</ul>
    	</div>
  6. farouchia
    Member
    Posted 4 years ago #

    I created a new navbar-color in my style.css

    I put <div id="navbar-color"> in a new header that I called header-color

    This hearder is called in the page template this way :

    <?php
    /*
    Template Name: page-withcolors
    */
    ?>
    <?php get_header(); ?>
    
    <div id="content">

    I don't know how to call the new header instead...

    I am desperate.

  7. xdesi
    Member
    Posted 4 years ago #

    You don't need to call a new header, the only changes you need to make is to add 2 lines to your CSS stylesheet.

    Add this to it:

    .page-item-2{color:red;}
    .page-item-3{color:blue;}

    Change 2 and 3 to the Page ID's of the pages you wanted to change the text color for in the menu.

  8. farouchia
    Member
    Posted 4 years ago #

    I did it and unfortunately no change. Would it depend on my theme?

    Do I have to put the 2 css lines to a specific place in my style.css file?

  9. farouchia
    Member
    Posted 4 years ago #

    Oh, and like in my example mentioned above, I need 2 colors per tab. That is why I thought that using an image would be simplier... :

    Ex. :
    Our(blue) services(red)

  10. farouchia
    Member
    Posted 4 years ago #

    xdesi, you will not guess how I succeeded at last in doing this!

    I tried to use HTML in the title page field! And it worked! I personally new some code could work, but I did not know about colors etc. And I did not like the look of the text so, still using HTML, I simply put the code for the image in the title field.

    A joke! :)))) After hours trying to find something much more complicated.

    Anyway thatnk you very much for your help xdesi! :)

Topic Closed

This topic has been closed to new replies.

About this Topic