Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

more than one colour for title font?

  1. brinded
    Member

    I'd like to be able to use more than one colour for my title font - for example, a three word title in which the first two words are red, and the last word is blue. Currently using CSS as below.

    'Edit Page' allows for this within a page, only I don't know how to do so for title, or if that's even possible?

    .entry-title {
    font-family: Lucida;
    color: green;
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    line-height: 1.1;
    }

    The blog I need help with is brinded.wordpress.com.

  2. timethief
    Member

    from the blog: there be all sorts of blather about what goes on the screen of the laptop if I can ever get it formatted using wordpress which as far as I can tell is going to take a very, very long time.

    Are you aware of the responsive width themes we have and what responsive width means?

    Responsive width means the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading. See here http://theme.wordpress.com/themes/features/responsive-width/

  3. brinded
    Member

    timethief,

    Thanks for your response, although I'm not sure it addresses the question.

    I am aware of responsive width and its uses, but how does that pertain to using multiple colours as opposed to a single colour in font used for title?

  4. brinded
    Member

    still stuck on this multi-coloured title font question - afraid timethief's digression may have sunk me. any ideas?

    thanks

  5. justpi
    Member

    You can do this in at least two different ways. Do you want it for the front page only or for many pages?

  6. brinded
    Member

    hi justpi,

    many pages, please.

  7. justpi
    Member

    Then (assuming you want the same two colors for all the pages) it's easier to hide the actual page titles, enter each title in the content of the page as an h2, style the h2 anyway you like in the CSS editor (including the principal color), and change the color of the last word in the Text editor.
    In other words, set .entry-title to display:none, set whatever rules you need for .entry-content h2, and format the bogus title in the content this way:
    <h2>WORD WORD <span style="color:#123456;">WORD</span></h2>

    Or, better, create a class for that color - call it, say, "altercolor".
    In that case, add this in the CSS editor as well:

    .altercolor {
    color:#123456;
}

    And write the titles this way:
    <h2>Bogus page <span class="altercolor">title</span></h2>

  8. justpi
    Member

    PS Please don't forget that CSS questions should be posted in the CSS forum, not the Support forum.

  9. justpi
    Member

    PS2 "WORD WORD WORD" vs "Bogus page title" doesn't signify anything, of course: I just changed the first example and forgot to change the second...

  10. brinded
    Member

    thanks again justpi,

    makes sense and I'm getting that to work.

    out of curiosity, is there a method for changing colors in the formal title entry (as opposed to work around using content)?

    p.s. CSS forum noted - sorry, mind slipped.

  11. justpi
    Member

    You're welcome.
    Yes, as I said in my first reply I thought of two ways. The other way would be to remove the last word from the actual title and add it as differently colored content in the CSS editor:

    .page-id-789 .entry-title:after {
content: " whatever";
color: #123456;
}

    You'd have to add this again and again, with different id numbers and different whatevers, so it's not very practical if the pages are many.

  12. brinded
    Member

    justpi,

    I like that - very helpful and will be useful at a later point. For time being, I think the easiest way to achieve the multi-colored title is within content section. I've done this as you will be able to see. Trouble is, even with site title and page title hidden, I can't get the new title to go to the top of page. Any ideas?

  13. brinded
    Member

    thread is getting a bit long in the tooth, and has digressed a little, so I'll repost in CSS forum.
    thanks.

  14. justpi
    Member

    I'll repost in CSS forum.

    This thread now is in the CSS forum!

  15. justpi
    Member

    even with site title and page title hidden, I can't get the new title to go to the top of page.

    That's because the site header is in the way. Add:

    #header {
display: none;
}

    Reminding you that you'll be able to answer such questions yourself if you learn to examine your pages via Firebug.

  16. brinded
    Member

    justpi,

    thank you - your suggestion works perfectly, again.

    Meanwhile, I've got Firebug up and running, but must confess it's baffling me. So much code that's unrecognisable and I suspect redundant since I've tried to reduce site to basics. Will keep studying and try to learn more.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags