Background color for each article

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    look at the <body> tag on each page.

    This is the one for the page you linked:

    <body id="tracks" class="archive category category-leaders category-3 ct-body not-front standard">

    Each page/post is assigned a unique class that you can use to target specific CSS elements

    If I go to a specific post linked on that page, I see
    <body id="tracks" class="single single-post postid-32 single-format-standard ct-body singular singular-post singular-post-32 not-front standard">

    So you can use .postid-32 to specifiy a particular page within your CSS

    for example

    body { background: #somecolor; }
    .postid-32 body { background: #someotheroclor; }

    Thread Starter jogospa

    (@jogospa)

    I don’t want to target the specific post numbers as many will be added over time, so this why I would like to use CSS.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    don’t want to target the specific post numbers as many will be added over time, so this why I would like to use CSS.

    You *are* using CSS

    Do you mean you want different colors based on the posts on the archive page? So the first one is always blue, the second green, etc. regardless of the post?

    If so, there’s a cool CSS thing called “nth of type” and “nth of class”. I think this is the solution for what you want to do.

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

    Thread Starter jogospa

    (@jogospa)

    I try to code like this:

    //.sticky-post:nth-of-type(3n+1) {
    background: white;
    }
    .sticky-post:nth-of-type(3n+2) {
    background: black;
    }
    .sticky-post:nth-of-type(3n+3) {
    background:#903;
    }//

    but it doesn’t work, do you know what i do wrong?

    I’m sorry but I’m pretty new for coding.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Background color for each article’ is closed to new replies.