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
310
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
1.1k
Global styles the story so far
tammielis
1
780
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.3k
Being Brave
tammielis
2
1.7k
Lessons from growing design in the open
tammielis
0
1.1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
770
Opportunity of Open Source
tammielis
0
630
Product design through stories
tammielis
0
360
Other Decks in Education
See All in Education
[Segah 2025] Gamified Interventions for Composting Behavior in the Workplace
ezefranca
0
150
Alumnote inc. Company Deck
yukinumata
0
2.7k
尊敬語「くださる」と謙譲語「いただく」の使い分け
hysmrk
0
100
授業レポート:共感と協調のリーダーシップ(2025年上期)
jibunal
0
110
ROSConJP 2025 発表スライド
f0reacharr
0
230
2025年度春学期 統計学 第13回 不確かな測定の不確かさを測る ー 不偏分散とt分布 (2025. 7. 3)
akiraasano
PRO
0
130
仮説の取扱説明書/User_Guide_to_a_Hypothesis
florets1
4
390
『会社を知ってもらう』から『安心して活躍してもらう』までの プロセスとフロー
sasakendayo
0
270
Transición del Management al Neuromanagement
jvpcubias
0
240
Ch1_-_Partie_1.pdf
bernhardsvt
0
400
生成AIとの付き合い方 / Generative AI and us
kaityo256
PRO
7
1.3k
Sanapilvet opetuksessa
matleenalaakso
0
33k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Designing for Performance
lara
610
69k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
The Cult of Friendly URLs
andyhume
79
6.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Optimizing for Happiness
mojombo
379
70k
Balancing Empowerment & Direction
lara
4
680
Large-scale JavaScript Application Architecture
addyosmani
514
110k
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