[Resolved] Background color in content template

[Author]

Posts

[antonioC-7]

Hello,

I've created a content template to show a view and list some elements in my site (Imagen-1.jpg). When I select a background color, this is selected equal for all the elements. In this case is red.

Is there a way of making this background color be different for every item? (Something like Imagen-2.jpg).

Thanks,

Antonio

[Nigel]

You'll need to apply some custom CSS for such a result.

In particular, you will likely want to employ the nth-child selector.

Here are some guides:
hidden link
hidden link
hidden link

There isn't an option to do it without using your own CSS rules.

[antonioC-7]

Hello Nigel,
The links you sent me are great. The information is very clear and the content is exactly what I need.
I’ve been working on this today, but I haven’t been able to implement what I want.
I’ve created a Content Template to display info from a CPT. I created a container to insert in it the View Loop. And in a second container the info to display. You can see it in the Image 1. What I want to change color is the background of the second container (in the green square, and in blue in the picture).
But I couldn’t make work :nth-child inside the loop. I know very little of CSS, but I tried with several classes (existing already in the style.css and others created ad hoc). Most of times it selected the “Fields and Text” of all the containers in the loop. I guess if the problem is that I can’t make the proper selection inside the loop.
Could you please provide me with extra guidance?
Thanks,
Antonio

[Nigel]

Hi Antonio

Exactly how you do it will depend a little on the details of your View, but in all cases involves looking at the generated markup and then working out which CSS selectors to use to target your content.

From your screenshot it looks like you would have chosen the grid layout option for the View output, then added a container to the View output, with the content inside.

So, I set up the same, to check what would be required.

In the settings for my container block I added a CSS class "colour" (so all the container blocks will have that class, which I can then use to target them).

In the screenshot you can see how the generated markup looks.

Because of displaying the results in a grid, each loop iteration appears inside a div with class tb-grid-column, so that is what I will actually have to use the nth-child selector with, knowing that inside of that is my container div with class of colour.

So my actual CSS looks like this:

.tb-grid-column:nth-child(4n) .colour{
    background-color: red;
}
.tb-grid-column:nth-child(4n+1) .colour{
    background-color: cyan;
}
.tb-grid-column:nth-child(4n+2) .colour{
    background-color: yellow;
}
.tb-grid-column:nth-child(4n+3) .colour{
    background-color: dark-grey;
    color: white;
}

(The colour pattern repeats after 4 items in this case. Note how I also change the font colour to white when using a black background.)

You need to add the CSS itself to the Custom JS and CSS section of the View block settings (you may need to use the block navigator at the top to select the outer View block).

[antonioC-7]

Thanks very much Nigel. Your last answer clarified everything and I have been able to implement what I needed. Thanks again.