[Resolved] Add custom CSS to view loop container

[Author]

Posts

[ioannaS]

Hello. I have created a view to use for my archive pages. Everything works well but I'd like to add some hover effects. I don't know how to do it and I don't want to mess up the view. I want to apply the same design to other views I'll be creating.

1. Inside the loop item, I have created a container and in this container I have added all the other elements. I'd like to change the box shadow settings of the container on hover (both horizontal and vertical from 0 to 5) and I'd like to set a smooth transition of 0.3s.

2. I have chosen to display the featured image as a container background as I wanted a custom field to be displayed inside the content. I'd like to add an overlay hover effect (overlay colour #000, opacity 0.2, transition duration: 0.3s).

3. I'd like to have equal heights for all loop containers. I followed this (https://toolset.com/forums/topic/toolset-blocks-loop-style-grid-equal-heights/) but it didn't seem to work for me.

How can I do it?

No, I haven't found any related documentation.

Website link: hidden link

Thank you for your help.

[Nigel]

Hi there

Where Toolset doesn't include settings out of the box for CSS features such as those you are describing you will need to determine and add the necessary CSS yourself.

For 1. you can add border shadows to blocks including the Container block, but not specifically as a hover style, so that is something you will have to add manually.

In the block settings for the Container block you can add a class that will be added to all of the container divs in your View output, and then target that class with the styles you require. (In the screenshot I'm adding a class loop-container.)

You can add the style rules to your child theme's stylesheets, or to the Custom CSS section of your View, but personally I find the easiest way to add such CSS and to see it where it will be applied is to add a Custom HTML block to your page with the style definitions inside style tags, e.g.

<style>
.loop-container:hover {
  // styles
}
</style>

(Be sure to add this outside the View loop so that it is only added to the page once.)

You can do something similar for 2 (being sure to add a specific class to the container you are targeting).

For 3, if you are using a Container block inside the loop output to wrap all of its blocks then you probably need to add a height declaration for the container, too.

Something like

.tb-grid .tb-grid-column,
.tb-grid .tb-grid-column .wpv-block-loop-item,
.loop-container {
    height: 100%;
}

(Assuming you added a class "loop-container" to your container, as per my example.)

[ioannaS]

I'll try to figure it out. Thank you.