Hi SPD,

you have few methods:

1. Every single page added to menu has its own unique class name in body class - so think how you can use it (!)
2. Every SPPB Page has Custom CSS field where you can use Custom CSS for that page only.
3. For every row you can add unique ID name that you can use inside Custom CSS.

Since I am not a proper web developer ....

Why not? The oldest webmaster I knew had 80 years, so I guess.. you still have a lots of time to learn many new things. As Arnold Schwarzenegger said in his famus speak "Every day spend 1h of learning new things..."

Heya Paul,

Thanks as always, based on your response I am guessing that using custom css class in that way is a viable approach. Cool.

Just to follow-up. If I used a custom class for an image add-on in my articles, if I needed 1 image in 1 article to have slight different values from those defined in my custom class... would setting them in the add-on itself override the custom css.

re: Arnie... a wiseman that one ;-) Cheers

Ok, I am running into a problem but it just might be my lack of css skills. Here is my custom class which I used in the Row Custom Class of the first row.

.mrc-row-first-not-last{ margin-top: 30px; }

My goal was to override the default class and margin-top property

sp-page-builder .page-content .sppb-section:first-child {

margin-top: 0;

}

As you can see by this image, row with red background https://drive.google.com/file/d/1Mf-WJewFGM-Z4kwalmBemBCimFpXxi9q/view?usp=sharing

It is being included in the html.. from Chrome Inspect <section id="section-id-1676481274003" class="sppb-section mrc-row-first-not-last">

Sorry for my ignorance Cheers

For example if for that section only.

#section-id-1676481274003 { margin-top: 0 !important; margin-bottom: 0 !important;}

or you can put custom, unique name for ID inside Row Options for example "red-box",

then CSS would be:

#red-box { margin-top: 0 !important; margin-bottom: 0 !important;}

2nd (mine) method is more recommended, gives you more flexibility.

And sorry, but we cannot teach CSS here - for obvious reasons. Books about CSS are almost in every language.

OK, this isn't about CSS.. Why would Section ID be Superior to CSS Class . Isn't the section just the row? Honest question, just tryoing to understand the difference. I have seacrh for Section ID in the docs but didn't come up with anything useful. I had planed to add a custom name so I could more easily identify them when Inspecting but hadn't thought to also use them as CSS Class name

Also, I see you used !Important, I had read that is not best practice. And to followup, if I used !Important, would that still allow me to change values in a single add-on, to margin-bottom = 30px, in the only instance I would need that setting to orverride the red-box class?

Sorry for the bother. Again if this stuff is in Doc please just let me know where Cheers

!Important - is used when you want to OVERRIDE settings from Addon, Row, Column

you can use Row class name or ID name - as you wish. In my projects I focus on ID Name, but you don't have to.

section-id-1676481274003

the number here is auto-generated after adding a new ROW, so each time is different, but class names are that same.

Ok, I think I get Section ID/CSS Class.

As for !Important.... so if I understand correctly, if I use the CSS Class/Section ID for ALL my article rows and use !Important I cannot override those class settings using the setting in individual Addons. I would need to create another custom class and also use !Important.

If this would be explain in a CSS Book I'm happy to go out and do some searching (just say so), I just don't know if this relates to how SP PB Pro builds the pages/articles or it relates to CSS in general Cheers