Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS in the editor
Search
Tammie Lister
September 30, 2020
Education
0
180
CSS in the editor
Workshop for WordPress
Tammie Lister
September 30, 2020
Tweet
Share
More Decks by Tammie Lister
See All by Tammie Lister
Growing the WordPress design system
tammielis
1
720
Global styles the story so far
tammielis
1
520
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
830
Being Brave
tammielis
2
1.3k
Lessons from growing design in the open
tammielis
0
740
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
480
Opportunity of Open Source
tammielis
0
450
Product design through stories
tammielis
0
240
Other Decks in Education
See All in Education
week2@tcue2024
nonxxxizm
0
830
世界の子音探訪記
jamashita
0
130
10分で日本史(試案)
hidekatsu_izuno
0
190
Data Representation - Lecture 3 - Information Visualisation (4019538FNR)
signer
PRO
1
1.7k
Родина моя Беларусь в лицах
programmer_sch2np
0
200
Sähköiset kyselyt, kokeet ja arviointi
matleenalaakso
1
16k
子どもたち創造的活動機会の必要性に関する提言/creativehub
codeforeveryone
0
430
Before You Create Something
nandenjin
0
150
LTをすべき100の理由
eltociear
1
310
Data Management and Analytics Specialisation
signer
PRO
0
1k
経験に複利を効かせろ!ふりかえり研修2024
pokotyamu
23
8.2k
CULTURA I VALORS
cumclavis
PRO
0
120
Featured
See All Featured
It's Worth the Effort
3n
180
27k
[RailsConf 2023] Rails as a piece of cake
palkan
29
4.1k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
84
45k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
A better future with KSS
kneath
231
16k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
The World Runs on Bad Software
bkeepers
PRO
61
6.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Being A Developer After 40
akosma
67
580k
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