Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
CSS in the editor
Tammie Lister
September 30, 2020
Education
0
21
CSS in the editor
Workshop for WordPress
Tammie Lister
September 30, 2020
Tweet
Share
More Decks by Tammie Lister
See All by Tammie Lister
tammielis
1
86
tammielis
1
27
tammielis
1
79
tammielis
0
88
tammielis
0
43
tammielis
1
57
tammielis
0
39
tammielis
0
83
tammielis
0
15
Other Decks in Education
See All in Education
kaityo256
6
4.2k
willmaehon
0
220
szabadhegyiadmin
0
170
kaityo256
165
220k
tradeglobalmarket
0
100
coderdojojapan
5
2.8k
shuseitoda
0
120
edulead
0
210
willmaehon
0
330
tibbelit
0
430
sapi_kawahara
0
300
2720japanoke
0
480
Featured
See All Featured
tenderlove
53
3.5k
ufuk
56
5.4k
jensimmons
207
10k
ddemaree
273
31k
samanthasiow
56
6.3k
cherdarchuk
71
260k
tmm1
61
9.2k
revolveconf
200
9.7k
brad_frost
157
6.4k
swwweet
206
6.9k
davidbonilla
70
3.6k
roundedbygravity
242
21k
Transcript
Custom CSS and the editor
Custom CSS?
CSS?
CSS (Cascading style sheet)
!important
#id .class
.editor-styles-wrapper .wp-block-quote.is-large
Inspecting
None
None
None
Custom CSS in WordPress
Adding to the customizer Using additional CSS, doesn’t change files
None
Theme files in wp-admin Only if able to edit files,
changes theme files
None
Adding a stylesheet/editing Requires server access, changes files
Let’s create
Our starting point Twenty Twenty
1. Add a class to a block using additional CSS
class field.
2. Create a custom style for an existing block class.
Add a class to blocks
None
None
BONUS POINTS… Check on smaller screen
None
Creating a custom style
None
None
None
None
Summary…
1. Find the element you want to style
2. Remember cascading
3. Use the additional css field
4. Always preview on smaller devices
5. For a quick, safe option outside of theme use
‘Additional CSS’ in the Customizer.
6. Have fun and experiment
Thank you