Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support Blog roll header background color – Can I change it?

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #64588
    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

    #64668
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #64774
    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 🙂

    #64847
    Tom
    Lead Developer
    Lead Developer

    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 */
    }
    #64934
    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.

    #65499
    Tom
    Lead Developer
    Lead Developer

    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 */
    }
    #66483
    Tobias Hjorth

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

    #66529
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.