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
300
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
760
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.3k
Being Brave
tammielis
2
1.6k
Lessons from growing design in the open
tammielis
0
1.1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
750
Opportunity of Open Source
tammielis
0
620
Product design through stories
tammielis
0
360
Other Decks in Education
See All in Education
Gaps in Therapy in IBD - IBDInnovate 2025 CCF
higgi13425
0
510
プレゼンテーション実践
takenawa
0
10k
生成AI
takenawa
0
11k
Pydantic(AI)とJSONの詳細解説
mickey_kubo
0
150
20250625_なんでもCopilot 一年の振り返り
ponponmikankan
0
290
2025年度春学期 統計学 第4回 データを「分布」で見る (2025. 5. 1)
akiraasano
PRO
0
150
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
signer
PRO
2
1.7k
理想の英語力に一直線!最高効率な英語学習のすゝめ
logica0419
6
310
OpenSourceSummitJapanを運営してみた話
kujiraitakahiro
0
750
データ分析
takenawa
0
11k
AIC 103 - Applications of Property Valuation: Essential Slides
rmccaic
0
280
AI for Learning
fonylew
0
170
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.7k
Faster Mobile Websites
deanohume
308
31k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Making Projects Easy
brettharned
117
6.3k
Code Review Best Practice
trishagee
69
19k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Agile that works and the tools we love
rasmusluckow
329
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
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