Adding Custom CSS

Sharaf

• April 09, 2020 20:23

Hi,

This might be a noob question, I'm new to WP (hate it), and would like to add custom CSS, I've already added a css class to brizy elements, but I don't know where to define the class.

 

Thank you

0

• 

  Alex

  • April 10, 2020 12:40

  Hi,

  it will be difficult if you hate it :). 

  In Brizy builder you can add the CSS code directly in the element settings: https://jmp.sh/cwqLy4F Also, you can use element instead of a custom class.

   

  0
• 

  Marco Michely

  • April 10, 2020 15:18
  • Edited

  Maybe you just need a good CSS editor for WordPress. There are a lot, here is a selection of 5.4 tested ones:

  • https://wordpress.org/plugins/so-css/
  • https://wordpress.org/plugins/yellow-pencil-visual-theme-customizer/
  • https://wordpress.org/plugins/custom-css-pro/
  • https://wordpress.org/plugins/live-css-js-code-editor/
  • https://wordpress.org/plugins/microthemer/

  0
• 

  Sharaf

  • April 10, 2020 16:16

  Hello Alex, Marco,

  Thanks a lot for your help, I don't see the custom css that you see, here is what I see: https://www.screencast.com/t/ZOSZTV40RFp

   

  I'd rather avoid plugins as I've always had headache with them, I will try consciously to love WP :D

  Another question: would it be possible to add custom Javascript using Brizy

  0
• 

  Marco Michely

  • April 10, 2020 16:45
  • Edited

  Hi Sharaf,

  are you using brizy free?

  Anyway, here's how you would do it with the Plugin "Live CSS JS Code Editor:

  1. Install https://wordpress.org/plugins/live-css-js-code-editor/
  2. Add your custom css class in the class field you see in Brizy, for example "my-class" (classname without a dot at the beginning). Save the work.
  3. Go to the WordPress Customizer (Admin Navigation: "Appearance" / "Customize").
  4. You will find a new Link named "Live Code Editor", click on it
  5. Then click "CSS Code"
  6. Add your css code and see changes live on your web page.

  As you may have seen with the "Live CSS JS Code Editor" you also can add custom JavaScript.

  Screenshot: https://f001.backblazeb2.com/file/mwe-sharing/Screen-Shot-2020-04-10-18-42-32-Kopie-1586537004#14a1de7ce84543b6a4b95509ba6f8b6c156ff1967865c884b4853e6cb46746ea

   

  0
• 

  Marco Michely

  • April 10, 2020 16:48
  • Edited

  > I'd rather avoid plugins as I've always had headache with them, I will try consciously to love WP :D

  I understand that. It is good practice to use as few as possible.
  At this time Brizy do not has a dedicated function for global css styling. In Brizy (Pro) you can add css just to specific elements.

  Edit:
  Okay you could add a sort of (page-)global styling to one element on your page. It can be helpful some times, but often not.

  Screenshot: https://f001.backblazeb2.com/file/mwe-sharing/Screen-Shot-2020-04-10-18-47-13-1586537248#06609a6dec2df762766cc5726baad5585638146f0e83662cccda0a2f3f966f0b

  0
• 

  Sharaf

  • April 12, 2020 12:31

  Thanks a lot Marco for your help.

  0
• 

  Alex

  • April 14, 2020 10:54

  Hi guys,

  Thank you Marco for sharing and for your time.

  @Sharaf You don't see "Custom CSS" option because you don't have Brizy PRO. This is a pro option. But, you can add the css class to the element and then add the required CSS code elsewhere.

  If you want to add Custom CSS and don't want to use an external plugin you can add the code to style.css file from your child theme or to Appearance -> Customize -> Additional CSS. This is a default WordPress option: https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

  0
• 

  Marco Michely

  • April 14, 2020 14:18

  Hi Alex,

  Appearance -> Customize -> Additional CSS is not available if you use the "Brizy Starter Theme", maybe this should be added?

  0
• 

  Alex

  • April 15, 2020 12:19

  Hi Marco,

  this is a WordPress feature and Brizy Starter Theme doesn't affect it: https://jmp.sh/5QSrFfd You probably have a plugin that hides this option.

  0
• 

  Marco Michely

  • April 15, 2020 13:11

  Hi Alex, thanks. I will double check this.

  0

Please sign in to leave a comment.