Premium Theme Support › Organic Themes › Connect

Different colors for page and sub-page titles

  • Author
    Posts
  • #109376
    equityproductions
    Member

    Hello,

    Is it possible to have different colors for the title of pages, sub-pages, sub-sub pages, etc… ?

    At least two different colors would be helpful.

    Say the main page is Photography, with Wildlife and Fashion as sub-pages (“sub-items” as in the menu nomenclature), I would like to use one color for “Photography” and another one for “Wildlife” and “Fashion”.

    Thanks.

    The blog I need help with is: (visible only to logged in users)

    #109499
    rezzap
    Staff

    Hello!

    I’m guessing you’re referring to the title in the menu, correct? You can target a specific menu item with an ID, but you’ll need to do so for each item individually to get the color to display here. For example:

    .menu-item-108 a {
    color: #FFF;
}

    Will change your current site’s ‘About’ item to white. You’ll need to use an inspector tool to find out the ID of each menu item and edit as required.

    Thanks!

    Rebecca

    #109513
    equityproductions
    Member
    Original poster

    It does not seem to work…

    #109515
    rezzap
    Staff

    Hello,

    This has changed the menu item of the About page for me. See here: https://www.dropbox.com/s/pklz84ixo70wdir/Screenshot%202017-04-18%2022.26.26.png?dl=0. Are you adjusting the ID to change other items?

    Thanks!

    R.

    #109517
    equityproductions
    Member
    Original poster

    Not as I am aware.
    I really don’t understand how you manage to get it.

    #109528
    rezzap
    Staff

    Hello,

    You’ll need to use an inspector tool, like Chrome’s Developer tools. Right click on the item you want to inspect and then select the ‘inspect’ option. You’ll see a window pop up in the bottom section as shown in the screenshot here: https://www.dropbox.com/s/qxsgaj1q0onuzux/Screenshot%202017-04-19%2014.18.06.png?dl=0. Use those items.

    You’ll need to add CSS for each item you want to show in a specific color with the ID for this item as provided above. If you need help finding the ID for a specific item, let me know which ones and I can help you with this.

    Thanks,

    Rebecca

    #109536
    equityproductions
    Member
    Original poster

    I know how to get the ID of an item but the color does not change when adding the code. I added the code you gave and for some reasons, it shows a different color on your screen but not on mine.

    #109541
    rezzap
    Staff

    Ah, looks like it’s working in Chrome but not Firefox. Try adding the important declaration:

    .menu-item-108 a {
    color: #FFF !important;
}

    Thanks!

    Rebecca

    #109547
    equityproductions
    Member
    Original poster

    Ah yes….always the browser issue.
    Works fine now in Firefox with the “Important” clause.
    Thanks a lot !

    #109548
    rezzap
    Staff

    Glad to hear! :)

    Cheers,

    Rebecca

  • The topic ‘Different colors for page and sub-page titles’ is closed to new replies.