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
320
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
790
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
640
Product design through stories
tammielis
0
370
Other Decks in Education
See All in Education
KBS新事業創造体験2025_科目説明会
yasuchikawakayama
0
130
Introduction - Lecture 1 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
2.6k
生態系ウォーズ - ルールブック
yui_itoshima
1
300
Entrepreneurship minor course at HSE 2025
karlov
0
100
相互コミュニケーションの難しさ
masakiokuda
0
280
Human Perception and Cognition - Lecture 4 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
1.2k
Master of Applied Science & Engineering: Computer Science & Master of Science in Applied Informatics: Artificial Intelligence and Data Science
signer
PRO
0
840
質のよいアウトプットをできるようになるために~「読む・聞く、まとめる、言葉にする」を読んで~
amarelo_n24
0
280
2026 g0v 零時政府年會啟動提案 / g0v Summit 2026 Kickstart
rschiang
0
400
QR-koodit opetuksessa
matleenalaakso
0
1.7k
みんなのコードD&I推進レポート2025 テクノロジー分野のジェンダーギャップとその取り組みについて
codeforeveryone
0
310
データで見る赤ちゃんの成長
syuchimu
0
320
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.6k
Facilitating Awesome Meetings
lara
57
6.6k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Music & Morning Musume
bryan
46
6.9k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Site-Speed That Sticks
csswizardry
13
930
A Modern Web Designer's Workflow
chriscoyier
697
190k
Designing Experiences People Love
moore
142
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
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