Skip to main content

Divi Community (FREE)

Style Guide

Hi Mak

Thank you for being so supportive in the community. The last Video Style Guild that you posted

You used fluent snippets in the demonstration to change the primary and secondary colours.

You didn’t explain or demonstrate where you got the CSS codes to input the new HSL values. I am looking at this for someone with little to no experience who may be looking at that video and thinking the CSS is pre-populated in Fluent Snippets.

I'm sorry if you have already explained this in a previous video.    

  • 1 like
  • 2 comments

Mak .

Hello Andrew. You're right, here is the code below.

:root {

/ Font Families /
--font-primary: 'Poppins', sans-serif;
--font-secondary: 'Inter', sans-serif;
--font-tertiary: 'Montserrat', sans-serif;

/ Primary Color Tokens /
--pri-h: 207;
--pri-s: 77%;

/ Accent Color Tokens /
--acc-h: 10;
--acc-s: 94%;

/ Status Variables /
--success: hsl(120, 100%, 69%);
--warning: hsl(61, 100%, 48%);
--error: hsl(0, 100%, 71%);
--info: hsl(217, 100%, 76%);
}

Robert Nitrio

Andrew,
The CSS code for the site can be found in the style.css file at Appearance > Theme File Editor. If you view that file you will see these entries near the beginning of the file. The code that Mak provided above has a Status Variables section that is not in the style.css file that is part of SiteKrafter 6.2.0, but I think it is a good addition.