Skip Navigation

[Resolved] Applying a CSS class to a View Loop

This support ticket is created 2 years, 7 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

Tagged: 

This topic contains 4 replies, has 2 voices.

Last updated by russellH-3 2 years, 7 months ago.

Assigned support staff: Shane.

Author
Posts
#1605513

Tell us what you are trying to do?
Apply a background color to a View block on a Content Template, but not a second View block in the same template. Because these two blocks have the same CSS classes, it's hard to pinpoint one in my stylesheet.

When I go to the Content Template and try to edit the View, there's no Advanced sidebar panel in which to apply a custom CSS class. There is a 'Custom CSS and JS' panel, but when I write in 'background-color: #4B4B4B;' it seems to have no effect.

These two View blocks have unique IDs, but this ID will change on each page where my Content Template is used; so using the ID doesn't seem to be a solution.

Is there any documentation that you are following?
No

Is there a similar example that we can see?
Front end page where the Content Template and 2 View blocks are is here:
hidden link

The View blocks are the boxes with grey backgrounds. I'd like only the top one to have that grey background. The CSS rule I'm using is:

.graduate .js-wpv-loop-wrapper {
background-color: #4B4B4B;
}

What is the link to your site?
hidden link

Thanks!

#1606025

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Russel,

Thank you for getting in touch.

You should be able to use the nth-child selector to resolve this.
hidden link

Try the following.

.js-wpv-loop-wrapper:nth-child(1){
background-color: #4B4B4B;

}

Please let me know if this helps.

Thanks,
Shane

#1606823

Hey Shane:

Ah, I didn't think of using :nth-child. Good suggestion. I did apply that rule, however, and it's still not working. I think it's because I have two separate View blocks so each of them contain a .js-wpv-loop-wrapper that would be considered the first one within them.

I've tried other variations to pinpoint that first View block:

.graduate .js-wpv-view-layout:nth-child(1) .js-wpv-loop-wrapper {
background-color: #4B4B4B;
}
.graduate .js-wpv-view-layout:nth-child(1)>.js-wpv-loop-wrapper {
background-color: #4B4B4B;
}

and

.graduate .js-wpv-view-layout:nth-child(1)>.js-wpv-loop-wrapper:nth-child(1) {
background-color: #4B4B4B;
}

… but no luck. The two blocks are still both grey, as before:

hidden link

Is there any other way to write that CSS rule? Thanks for your help so far.

Kind regards, Russell

#1607239

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Russell,

There is also the first-of-type selector that you can make use of.
hidden link

This one works without having to be in a shared div, so it should just target the first instance of the class . Also remember that the .js-wpv-loop-wrapper is shared by both views, so if you add the

Please let me know if this helps.

Thanks,
Shane

#1607999

Thanks Shane:

I didn't know about first-of-type, so that's handy to have. I tried and a number of variations but it didn't work. I ended up putting the second View block in a Group block, and gave that Group block a CSS class. That helped create the hook I needed to fix my issue.

But thanks for all your help and have a good weekend.

Kind regards, Russell