CSS in the editor

Workshop for WordPress

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
12. Custom CSS in WordPress
13. Adding to the customizer Using additional CSS, doesn’t change files
15. Theme files in wp-admin Only if able to edit files, changes theme files
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
25. BONUS POINTS… Check on smaller screen
27. Creating a custom style
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