Archived topic

CCS to affect only one page

1 reply · Started by Ben on August 19, 2020

Viewing posts 1–2 of 2

August 19, 2020 at 6:08 am #1409346

Hey guys,

I've added in some css to to put a box shadow around some columns;

.gb-grid-wrapper > .gb-grid-column > .gb-container {
box-shadow: 0px 2px 16px 0px rgba(0,0,0,.1);
}

Works perfectly.

But it's affected the site globally. How can I affect just one page?

Thanks

Ben

August 19, 2020 at 7:10 am #1409436

Hi there,

each page has a unique ID that is displayed as a body class.
Find the ID of the page, by checking its URL in the editor.

Then you can add it to your CSS selector like so:

.page-id-44 .gb-grid-wrapper > .gb-grid-column > .gb-container {

Alternatively and more flexible method you can do this:

1. Select the Parent Grid(s) you want to apply the shadow to. Make sure you select the parent:

2. Once selected go to Settings sidebar > Advanced and add a Additional CSS class of: shadows

3. Then use this CSS selector:

.gb-grid-wrapper.shadows > .gb-grid-column > .gb-container {

This method i prefer as you can set it selectively

This archived topic is closed to new replies.