[Resolved] Blog roll header background color – Can I change it?

[Tobias Hjorth]

Hi all

I have a question that puzzles me. Is it possible to change the post header background color on each and every single post on the blog roll?

Thanks

[Tom]

Hi Tobias,

You can accomplish this using CSS.

Each post has a unique ID which you can find by inspecting the “article” element using Chrome’s developer tools (inspect element).

Once you find the unique ID, you can use it in the CSS to apply specific attributes to each post.

Let me know if this makes sense or not 🙂

[Tobias Hjorth]

Hi Tom

Thanks again for your prompt answer!
I don’t mean to sound lazy but I really do not know how to code CSS. Although I think I can find each ID they all have to be the same – Not too sure really..

I know this is probably besides what you would call regular support for your theme so if anyone could chime in on what I should write if I would like the background color to be #222222 and the headline to White #ffffff what would I add in CSS?

Again thank a million to Tom and anyone looking 🙂

[Tom]

I misunderstood your question – I thought you wanted to single out specific posts.

If you want to do this to all posts, you can do something like this:

article.post .entry-header {
      background: #222;
      padding: 20px;
}

article.post .entry-header h2 a,
article.post .entry-header h2 a:visited {
      color: #FFF;
}

article.post .entry-header h2 a:hover {
      color: #fafafa; /* color on mouseover */
}

[Tobias Hjorth]

Thank million Tom that’s exactly what I’m looking for. Now if it possible can I have the now grey header without margin to the sides and top? If I remove content margins it does that but also remove margins for the rest of each and every post.

If I were to do same the on the Widget boxes am I right in just replaceing the above article.post with article.widget and copy anything else?

Again you’re a great help and this is by far the greatest WP theme.

[Tom]

You can work against the content padding like this:

article.post .entry-header {
      margin: -40px -40px 20px -40px;
}

That assumes your content padding is set to 40px.

Widgets don’t have the same headers – you can alter that like this:

.widget-title {
      /* stuff in here */
}

[Tobias Hjorth]

Thanks Again Tom. That is exactly what I wanted. 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts