$30 off During Our Annual Pro Sale. View Details »

CSS in the editor

Tammie Lister
September 30, 2020

CSS in the editor

Workshop for WordPress

Tammie Lister

September 30, 2020
Tweet

More Decks by Tammie Lister

Other Decks in Education

Transcript

  1. Custom CSS
    and the editor

    View Slide

  2. Custom CSS?

    View Slide

  3. CSS?

    View Slide

  4. CSS (Cascading style sheet)

    View Slide

  5. !important

    View Slide

  6. #id .class

    View Slide

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

    View Slide

  8. Inspecting

    View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. Custom CSS in WordPress

    View Slide

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

    View Slide

  14. View Slide

  15. Theme files in wp-admin
    Only if able to edit files, changes theme files

    View Slide

  16. View Slide

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

    View Slide

  18. Let’s create

    View Slide

  19. Our starting point
    Twenty Twenty

    View Slide

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

    View Slide

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

    View Slide

  22. Add a class to blocks

    View Slide

  23. View Slide

  24. View Slide

  25. BONUS POINTS…
    Check on smaller screen

    View Slide

  26. View Slide

  27. Creating a custom style

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. Summary…

    View Slide

  33. 1. Find the element you want to style

    View Slide

  34. 2. Remember cascading

    View Slide

  35. 3. Use the additional css field

    View Slide

  36. 4. Always preview on smaller devices

    View Slide

  37. 5. For a quick, safe option outside of
    theme use ‘Additional CSS’ in the
    Customizer.

    View Slide

  38. 6. Have fun and experiment

    View Slide

  39. Thank you

    View Slide