Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Help applying unique CSS to different titles of blog posts??

  1. oscardaniels
    Member

    I would like to apply a unique style to the titles of my blog posts, based on the topic of the post. For example, the title of a post on economics might have a green background and the title of a post on politics might have a blue background. I know that I can apply the same CSS style to all of the <h2> blog titles by adjusting the #content .entry-title but that applies the style everywhere. Is it possible to vary the style of the blog titles for individual posts?

    I tried to access the html while editing the post to give the <h2> blog title a unique ID that I could then reference in the CSS, but I could only access the contents of the post and NOT the title of it. Bummer. If anyone has any CSS ninjitsu up their sleeve, I'd appreciate any advice. Thanks a bunch, Oscar

    If it matters I am using the 2010 theme.

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

  2. thesacredpath
    Member

    You would have to edit the CSS for each and every post you make and add a specific rule targeting that specific post by post ID.

  3. thesacredpath
    Member

    Why not just create different horizontal graphics that you can insert as necessary when you write the posts?

    Or create a series of thumbnail images to use at the beginning of each post.

  4. oscardaniels
    Member

    Thank you TheSacredPath.

    If there's no way to style each entry title individually, I will use your suggestion of a thumbnail/horizontal graphic below it. Thanks for thinking outside the box.

    I will eventually have such a wide variety of posts (I am designing an aggregating blog) that I would love to tip viewers off with a splash of color right in the title, or even before the title if I could, if the subject matter was something that interested them.

    It seems like I may not be able to do that, huh?

  5. thesacredpath
    Member

    Yes I gave you the solution. For each post, you have to add an individual rule to the CSS that targets the title on that particular post by post ID. Even if you were willing to do this, with each successive post you make and each addition to the CSS, the CSS file becomes larger, and takes longer to load which slows down your site.

    On a self-hosted site, if you had a good understanding of PHP script, you could hack the underlying theme files and then have the titles styled according to category. This is not possible here at wordpress.COM though.

  6. oscardaniels
    Member

    Sorry about that. I think my html/css inexperience is showing. I thought the only way to target the title would be to give each title a unique ID in the html of the post and then reference it in the global CSS, but you are saying that in WordPress there is a post ID that will enable me to apply CSS to a particular post and title but not globally. That's terrific. Please forgive me for being so ignorant, but could you post a little snippet of CSS as an example of applying a style to a particular post ID? I don't know exactly what that looks like.
    My pathetic attempt would look something like this `#post 123 {
    background-image: url(http://www.tizag.com/pics/cssT/smallPic.jpg);
    }`

    but I'm sure that's wrong

    (I have to head to bed, so I won't be able to respond again until morning, but I appreciate you bearing with me. )

  7. oscardaniels
    Member

    Also where is the post ID listed for a particular post? I didn't see it in the post edit page, but I might have just missed it.

  8. thesacredpath
    Member

    One word of warning: If you go down this road and if you change themes, all of this work of putting images in by post will be lost when you change themes. CSS is theme specific. Each author decides how they are going to do the markup (XHTML) and how they are going to organize and label the CSS.

    This puts the image to the left of the title on the latest post (non-repeating) and adds some padding so that the title is to the right of the image. It will do the same thing on the single-post page as well.

    #content #post-4 .entry-title {
background: url("http://www.tizag.com/pics/cssT/smallPic.jpg") no-repeat scroll 0 0 transparent;
}

#content #post-4 .entry-title a, #content #post-4 .entry-title {
padding-left: 40px;
}

  9. oscardaniels
    Member

    Thank you very much "The Sacred Path" for answering my questions so thoroughly. I can see what you're saying about the danger of my CSS ballooning in size if I apply style to every post. I will definitely have to test some of your recommended alternatives, before making a final decision. I'm grateful for your help. Thanks again,
    Oscar

  10. thesacredpath
    Member

    You are welcome.

  11. hallluke
    Member

    You could also do it by category, which seems a bit closer to the original request. The code would be similar but replace the #post-4 bit with .category-economics and then you only have to include rules for each category type you have.

  12. oscardaniels
    Member

    Thank you Hallluke for the tip on how to style categories. That solves my problem. I really appreciate it.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags