Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Custom CSS and the editor
Slide 2
Slide 2 text
Custom CSS?
Slide 3
Slide 3 text
CSS?
Slide 4
Slide 4 text
CSS (Cascading style sheet)
Slide 5
Slide 5 text
!important
Slide 6
Slide 6 text
#id .class
Slide 7
Slide 7 text
.editor-styles-wrapper .wp-block-quote.is-large
Slide 8
Slide 8 text
Inspecting
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Custom CSS in WordPress
Slide 13
Slide 13 text
Adding to the customizer Using additional CSS, doesn’t change files
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Theme files in wp-admin Only if able to edit files, changes theme files
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Adding a stylesheet/editing Requires server access, changes files
Slide 18
Slide 18 text
Let’s create
Slide 19
Slide 19 text
Our starting point Twenty Twenty
Slide 20
Slide 20 text
1. Add a class to a block using additional CSS class field.
Slide 21
Slide 21 text
2. Create a custom style for an existing block class.
Slide 22
Slide 22 text
Add a class to blocks
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
BONUS POINTS… Check on smaller screen
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Creating a custom style
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Summary…
Slide 33
Slide 33 text
1. Find the element you want to style
Slide 34
Slide 34 text
2. Remember cascading
Slide 35
Slide 35 text
3. Use the additional css field
Slide 36
Slide 36 text
4. Always preview on smaller devices
Slide 37
Slide 37 text
5. For a quick, safe option outside of theme use ‘Additional CSS’ in the Customizer.
Slide 38
Slide 38 text
6. Have fun and experiment
Slide 39
Slide 39 text
Thank you