Custom CSS

Step 1: Add a Component

Click the bright green "+" in the top left corner and add a component to the page

‍

‍

‍

Step 2: Inspect the Page

Anywhere on your Flauntly page, right-click > inspect.

‍

‍

Step 3: Inspect the Component

Select the selector icon and then click on the component you would like to stylize.

‍

‍

Step 4: Copy the Component's Class Name

Click on the component. After the code is highlighted at the bottom for that selected component, double click the code and copy the info within the class parenthesis (class="copy-this-info")

‍

‍

Step 5: Within the Editor, go to Themes

Within your page editor, click on the Theme icon.

‍

‍

Step 6: Go to Custom CSS

Within the themes panel, click inside the Custom CSS field.

‍

‍

Step 7: Paste in the Class Name

Paste the class name inside the custom CSS field with this format:

‍

ex.
.paste-class-name-here {
background-color: blue;
color: yellow;
}

‍

ex.
.ql-align-center {
background-color: blue;
color: yellow;
}

*Don't forget the period "." before the pasted class name*

‍
‍

‍

‍

Step 8: Add !Important to the CSS Code to Force Stylization

Paste this inside the custom CSS field:

‍

.paste-class-name-here {
background-color: blue !important;
color: green !important;‍
}

‍

‍

*This step may be skipped if everything is already displaying as intended*

‍

‍

Step 9: You've Added Custom CSS!

Nice job! Next, research other CSS styles that interest you and alter your Flauntly page to suit your awesome aspirations.

‍

‍

‍