Classes – Greenshift

Eerst Global classes

Global classes zijn beschikbaar in elke post.

Ze staan ook in het Stylebook van het FSE thema.

Global classes zijn beperkt tot het blok of element waarvoor ze gemaakt zijn (tekst, knoppen, afbeelding, etc.)

Elke global class kan worden voorzien van ‘subselectors’, zoals ::before, ::after, a:hover, img, etc.

Global classes de eigenschappen in de rij die zichtbaar wordt als de class actief is:

Lettertype
Kleur
Size
Bold e.d.
Letter case
Text decoration
Padding en margin
Border
Shadow
Size
CSS transitions
Postition
Layout
Effects
Responsive
Alles ook in hover en actief condition
Per device

Als je wilt dat de global class eerder ingegeven waarden van een tekstblock overschrijft, moet de class ‘higher specificity’ hebben (prioriteit).

Wat wordt niet doorgegeven via een global class:

Alles wat niet in die rij staat, zoals:

H1, H2, H3, etc.

Heading met Global class headingH2

Heading block van Greenshift

Text advanced block met class headingH2. De kleur en het corps worden overgenomen.

Text advanced met class…

Heading block van Greenshift

Global classes work on images too

Note: the outline is still not correct at the radius of the corners.

Height or width
Cover, etc.
Border
Effects such as opacity
Much more

The image below has a border created with the “normal” settings. That works fine, unlike the class settings.

Greenlight image block on Greenshift theme (contain and cover) = works perfectly. This block doesn’t work on the 2025 theme either.

Global class bij kolom

Padding en margin
Tekst eigenschappen (paragraaf tekst, niet heading)
De row en de columns kunnen een eigen class krijgen

tekst in kolom met css

tekst

Bugs?

Hide class without removal: How to activate it again? Clicking again doesn’t work. The only way I found is removing the class, and then removing the classic class in the Advanced / class section and save. Then: start all over.

Classic class

De Classic class, is de class die WordPress standaard al heeft. Die pas je weliswaar toe in een Greenshift block (of elke andere), maar de instellingen ervan niet.

GreenShift – Page-Building Gutenberg Blocks

The same Section advanced (background black) as used in the footer in pattern, but placed in the page itself.

Greenshift LLC

This is the footer part. Created in the Pattern template: