CSS in the editor

Workshop for WordPress

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