Pro Yearly is on sale from $80 to $50! »

CSS in the editor

D36d2c1821af9249b69ff7f5ed60529b?s=47 Tammie Lister
September 30, 2020

CSS in the editor

Workshop for WordPress

D36d2c1821af9249b69ff7f5ed60529b?s=128

Tammie Lister

September 30, 2020
Tweet

Transcript

  1. Custom CSS and the editor

  2. Custom CSS?

  3. CSS?

  4. CSS (Cascading style sheet)

  5. !important

  6. #id .class

  7. .editor-styles-wrapper .wp-block-quote.is-large

  8. Inspecting

  9. None
  10. None
  11. None
  12. Custom CSS in WordPress

  13. Adding to the customizer Using additional CSS, doesn’t change files

  14. None
  15. Theme files in wp-admin Only if able to edit files,

    changes theme files
  16. None
  17. Adding a stylesheet/editing Requires server access, changes files

  18. Let’s create

  19. Our starting point Twenty Twenty

  20. 1. Add a class to a block using additional CSS

    class field.
  21. 2. Create a custom style for an existing block class.

  22. Add a class to blocks

  23. None
  24. None
  25. BONUS POINTS… Check on smaller screen

  26. None
  27. Creating a custom style

  28. None
  29. None
  30. None
  31. None
  32. Summary…

  33. 1. Find the element you want to style

  34. 2. Remember cascading

  35. 3. Use the additional css field

  36. 4. Always preview on smaller devices

  37. 5. For a quick, safe option outside of theme use

    ‘Additional CSS’ in the Customizer.
  38. 6. Have fun and experiment

  39. Thank you