back to Themify.me

Custom CSS Class

Custom CSS class is used by developers to write custom CSS to apply styling to specific elements that contains the CSS class name. The advantage of using custom class is when you update the CSS styling, it will apply to all elements that contain the target class name. You only need to write the custom CSS once, then it can be reused to as many elements as you want by adding the custom class name. 

Sample Usage

In this example, we will show how to make a few modules to have the same yellow background with black border and red font color without having to use the Styling Panel on individual modules. 

Step 1: Add the Custom CSS Class

  • In the module option, enter the Custom CSS Class: yellow-box
  • Click update. Save and close the builder

screenshot

Step 2:  Write the Custom CSS

  • On frontend, hover the Flow Menu > click Custom CSS (FYI: you may also access Custom CSS panel in backend WP-admin > Themify Flow > Custom CSS)
  • In the Custom CSS panel, write:

.yellow-box {
	background: yellow;
	border: solid 1px black;
	color: red;
}

screenshot

The basic CSS syntax is: add a period in front of the target class name, then wrap the properties with an opening and closing curly brackets, each property must ends with a semi-colon. You can learn more about CSS here

Reusable

Now you have the custom CSS rule ready, you can add the class name (which is ‘yellow-box’ in our example) to any module, row, template, and template part as you want.

screenshot

When you update the CSS (eg. change background color to purple), it will apply to all elements with the ‘yellow-box’ class. If you remove the custom CSS rule, the styling will be gone without breaking the site. NOTE: adding invalid CSS code can break the entire site styling. You can always undo by removing the custom CSS you added. 

Custom CSS Class can be added in:

You can add Custom CSS Class in th option lightbox of Module, Row, Template, and Template Part.

  • Module = the custom class will output in the main module <div> wrapper class attribute
  • Row = the custom class will output in the row <div> wrapper class attribute
  • Template = the custom class will output in the <body> class attribute
  • Template Part = the custom class will output in the template part <div> wrapper class attribute