Docs

[nezzazvoni]

So close, but this highlights all elements in the column (all text fields), and I need individual field to be highlighted. Because the text field does not have any ID or Class field, I put individual text fields in separate Containers. I hope this should make the solution much easier – can you please show me how to highlight individual containers?

[Rad]

Hi there,

What fields? The grid column only contains image and text, hence, do you wish to apply it in the image?

Thanks!

[nezzazvoni]

Sorry, I may have described it in a bad way… What I would like to have is border/background change when cursor is over any element (consisting of Container and Text) in this grid-like setup. I have a series of similarly arranged images nad texts, and I would like to give user a hint, that it is clickable.

The original goal was to have the whole area (marked gold on picture) as active link, but this is not possible, according to your colleagues (if you know a way, please share the solution). So the second objective is to give user a hint, that the image and the text in that area (not the background) is active, that is why I need a border change/background color change as they scroll through the options.

What I was trying to communicate in my last post is, that I rearranged all of those individual text blocks (in the grid-like setup) to be inside individual Containers, because they were stacked on top of each other before – the previous setup and proposed css resulted in the whole column being highlighted with all of the text elements, an I need just one at the time to be highlighted.

To sum it up
Primary goal: to make a link over whole Container
Secondary goal: to have border around Container when mouse is over

Hope this explains it a little bit more.

[Nabeel A]

Hi again,

Please add the following code in your Customizer:

.page-id-2 #x-content-band-5 .x-column .x-container.max.width:hover {
    outline: 1px solid #eac706 !important;
}
.page-id-2 #x-content-band-5 .x-column .x-container.max.width {
    padding: 10px !important;
}
.page-id-2 #x-content-band-5 .x-column .x-container.max.width h4 {
    margin-top: 0 !important;
}

Let us know how this goes!

[nezzazvoni]

Superb! This is what I wanted all along! Can you please make it work on all tabs? Now it works only on the default one.

Also, can I make the inactive tabs selectors darker? There is almost no visible difference between active and inactive tabs.

Thanks a lot!

[Lely]

Hi There,

Please update above CSS to this:

.page-id-2 #x-content-band-5 .x-column .x-container.max.width:hover,
.page-id-2 #x-content-band-6 .x-column .x-container.max.width:hover,
.page-id-2 #x-content-band-7 .x-column .x-container.max.width:hover,
.page-id-2 #x-content-band-8 .x-column:hover {
    outline: dashed 2px #C99D51 !important;
    background-color: #F8F2E8;
}
.page-id-2 #x-content-band-5 .x-column .x-container.max.width {
    padding: 10px !important;
}
.page-id-2 #x-content-band-5 .x-column .x-container.max.width h4 {
    margin-top: 0 !important;
}
.vc_tta-color-white.vc_tta-style-flat .vc_tta-tab>a {
    background-color: #8e8787; /*To make inactive tab darker. Adjust to your preferred color*/
}

Hope this helps.

[Author]

Posts