• Hi,

    I wonder if to would be possible to ad different colors to the page title showing on the site menubar (css coding?)

    I have a link page and I would like it to show like:

    <span style=”color:#8ecf21;”>Green</span> Links

    instead of just the usual way.

    Is it possible ???

    Thank you

    Michael ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • How is your menu being displayed?

    You can have WP dynamically add span code before and after using ‘link_before’ or ‘link_after’.

    See here.

    Thread Starter Michael Johansen

    (@johanzen)

    <div id="top_navbar">
            <ul>
              <li><a href="<?php bloginfo('url'); ?>">Home</a></li>
              <?php wp_list_pages('title_li=&depth=1&exclude='); ?>
            </ul>
          </div>

    wordpress adds a definite class to the link of each page, for instance:
    .page-item-2 { … } /* item for Page ID 2 */

    you only need to find the id of your pages, best by looking at the html code of your page navigation of your site in your browser.

    If you are trying to only target the active menu item, then as alchymyth said, you can take advantage of this in which case you can do specific styling to that item only.

    If you want to dynamically add span tags before or after each menu item for some reason(this is inserted before or after the link text) then you can use:

    <?php wp_list_pages('link_before=<span style="color:#8ecf21;">&link_after=</span>&title_li=&depth=1&exclude='); ?>

    Also you can use wp_page_menu to have wp insert a home link for you.

    You don’t need to specify exclude= if there are no pages to exclude.

    Another option to just hard code the menu. It is just a list of links basically, just look at the source output code and copy that if you are unfamiliar with lists.

    Thread Starter Michael Johansen

    (@johanzen)

    I’m not sure you understand what I’m looking for after reading the suggested pages.

    I use the plugin “My Page Order” and would prefer to continue doing so if possible in connection with my color idea.

    The navigation bar is called by the following code:

    <div id="top_navbar">
            <ul>
              <li><a href="<?php bloginfo('url'); ?>">Home</a></li>
              <?php wp_list_pages('title_li=&depth=1&exclude='); ?>
            </ul>
          </div>

    The output looks like this:
    <li class="page_item page-item-63"><a href="https://www.my_site_com/links/" title="Green Links">Green Links</a></li>

    What I look for is that the word “Green” displays in green color but the word “Links” displays with the themes standard color.

    Would it be something like this?

    <div id="top_navbar">
            <ul>
              <li><a href="<?php bloginfo('url'); ?>">Home</a></li>
              <?php wp_list_pages('title_li=&depth=1&exclude=&link_before=<span>&link_after=</span>'); ?>
            </ul>
          </div>

    Again thank you so much for helping.

    Michael ??

    Oh sorry. I had a feeling I wasn’t getting it. That explains it much better.

    It is difficult to target exact words in a string like in this scenario. (Well, it is not that difficult, but more involved than you may want to tackle?)

    Using php or javascript can dynamically target[look for] words by means of regular expressions. Then you can specify certain actions based on “when/if” those items are found on your page.

    Thread Starter Michael Johansen

    (@johanzen)

    Both of you – Thank you so much. It’s been a great help.

    @racer x – actually your idea was very close to be the solution.

    I’ve used the following code in the header template:
    <?php wp_list_pages('title_li=&depth=1&exclude=&link_before=<span>&link_after=</span>'); ?>

    Then I edited the page title from the admin area to look like this:
    <span style="color:#8ecf21;font-style:italic;">Green</span> Links

    Works in both (the latest) Firefox as well as IE !!!

    GREAT!!! Feel free to have a look:
    https://www.freealternativeenergy.info

    The site is up now, but comes and goes as I work on it ??

    Again thank you so much – you have both been great help.

    Michael ??

    ha! Out of curiosity, I tried that exact thing you did above on one of my local installs and it showed up fine in the page, but the menu itself displayed the code!

    Thread Starter Michael Johansen

    (@johanzen)

    If any others should be interested into this (I admit) rather strange subject, I should perhaps mention, that I did edit the permalink to just “links”. I’m not sure if it will work if not.

    Also a quiet funny result is, that the title now shows in two colors EVERYWHERE – that including the admin area !?!

    Michael

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Mixed colors in menubar ??’ is closed to new replies.