Add Custom CSS

Home / Add Custom CSS

There are 3 ways to add your custom CSS:

1) Use Visual Composer custom CSS feature

2) Add your custom CSS to Theme Option > Custom CSS & JS > Custom CSS

Note 1: The area allows you to use SCSS syntax. Below is a list of some SCSS variable you can use:

  • $cortana-primary-color: get primary color value (in section Color of Theme Options).
  • $cortana-secondary-color: get secondary color value.
  • $cortana-text-color: get text color value.
  • $cortana-meta-text-color: get meta text color value.
  • $cortana-border-color: get border color value.
  • $cortana-primary-font: get primary font value (in section Typography of Theme Options).
  • $cortana-secondary-font: get secondary font value.
  • $cortana-third-font: get third font value.

Note 2: your CSS code you have added to there only affect any pages that use the current preset. For example. if you add your CSS code to preset Default Preset and homepage 11 use preset HP 11 Preset, the code will not apply to homepage 11.

3) Use Floral child theme and add custom CSS to style.css of the child theme

Note: As I have mentioned in this post: , you have to active child theme before importing theme demo.  If you import the demo first, please don’t active child theme (this case you have to do either method 1 or method 2 above to add your CSS), or you have to: use plugin WordPress Database Reset to reset your database, active the child theme, then import the demo.

To add your CSS to the child theme, you can see below: