WordPress.org

Ready to get started?Download WordPress

Forums

Multi-color Website Title (11 posts)

  1. Maltese Historic Pipe Organs
    Member
    Posted 1 year ago #

    I would like help with creating a multi-color title for my website. I have downloaded WP Title 2 v3.6 (as was suggested in one post) and don't know how to proceed.

    my site: mhpo.info
    title: Maltese Historic Pipe Organs

    I'd like to make the title look like this:
    Mal = white
    tese = red
    Historic = Green
    Pipe Organs = Gold

    Furthermore, is there any reference in order to know which code is for which color?

    Regards
    Mark

  2. Andrew
    Forum moderator
    Posted 1 year ago #

  3. Maltese Historic Pipe Organs
    Member
    Posted 1 year ago #

    Wow.... thanks for that link. Bookmarked! ;-)

    Now.... how to insert the codes into WordPress.... :-/

  4. Maltese Historic Pipe Organs
    Member
    Posted 1 year ago #

    What code should I insert and where?

    Does this make any sense?
    <span>Mal</span>
    span { color: #FFFFFF; }
    <span>tese</span>
    span { color: #FF0000; }
    <span>Historic</span>
    span { color: #00CC00; }
    <span>Pipe Organs</span>
    span { color: #B88A00; }

  5. Andrew
    Forum moderator
    Posted 1 year ago #

    span:first-child {
     color: #fff;
    }
    
    span:nth-of-type(2) {
     color: #FF0000;
    }
    
    span:nth-of-type(3) {
     color: #00CC00;
    }
    
    span:last-child {
     color: #B88A00;
    }
  6. Maltese Historic Pipe Organs
    Member
    Posted 1 year ago #

    So if I understand this correctly:
    span:Mal {
    color: #FFFFFF;
    }
    span:tese {
    color: #FF0000;
    }
    span:Historic {
    color: #00CC00;
    }
    span:Pipe Organs {
    color: #B88A00;
    }

    Now where should this go?

    Sorry to ask so many questions. I've been trying to unravel the mysteries of such coding only since a couple days, literally!

  7. Andrew
    Forum moderator
    Posted 1 year ago #

    nth-of-type, first-child and last-child are all part of CSS:

    nth-of-type:
    http://www.w3schools.com/cssref/sel_nth-of-type.asp

    first-child:
    http://www.w3schools.com/cssref/sel_firstchild.asp

    last-child:
    http://www.w3schools.com/cssref/sel_last-child.asp

  8. Andrew
    Forum moderator
    Posted 1 year ago #

    Now where should this go?

    Install this Custom CSS Manager plugin http://wordpress.org/plugins/custom-css-manager-plugin

    Then use its "CSS Code" section of the dashboard to hold your CSS modifications.

  9. Maltese Historic Pipe Organs
    Member
    Posted 1 year ago #

    Now I am completely lost! I still cannot understand the meaning of all these children! Though the links may be excellent references, one has to understand what it all means. It's like looking at an electronic circuit. Unless one knows what the symbols represent, one won't be getting very far!

  10. Andrew
    Forum moderator
    Posted 1 year ago #

    You may need the support of a CSS forum, like http://csscreator.com/

  11. Maltese Historic Pipe Organs
    Member
    Posted 1 year ago #

    Thanks. Your help was much appreciated.

Topic Closed

This topic has been closed to new replies.

About this Topic