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
750
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
610
Product design through stories
tammielis
0
360
Other Decks in Education
See All in Education
2025年度春学期 統計学 第6回 データの関係を知る(1)ー相関関係 (2025. 5. 15)
akiraasano
PRO
0
120
Avoin jakaminen ja Creative Commons -lisenssit
matleenalaakso
0
1.9k
今も熱いもの!魂を揺さぶる戦士の儀式:マオリ族のハカ
shubox
0
210
Pydantic(AI)とJSONの詳細解説
mickey_kubo
0
140
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
masakiokuda
2
330
Data Management and Analytics Specialisation
signer
PRO
0
1.4k
推しのコミュニティはなんぼあってもいい / Let's join a lot of communities.
kaga
2
1.8k
미국 교환학생 가서 무료 홈스테이 살면서 인턴 취업하기
maryang
0
110
Open Source Summit Japan 2025のボランティアをしませんか
kujiraitakahiro
0
740
Course Review - Lecture 12 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
検索/ディスプレイ/SNS
takenawa
0
8.1k
予習動画
takenawa
0
8.7k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
It's Worth the Effort
3n
185
28k
The Invisible Side of Design
smashingmag
301
51k
Six Lessons from altMBA
skipperchong
28
3.9k
Music & Morning Musume
bryan
46
6.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Writing Fast Ruby
sferik
628
62k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
4 Signs Your Business is Dying
shpigford
184
22k
Automating Front-end Workflow
addyosmani
1370
200k
Thoughts on Productivity
jonyablonski
69
4.7k
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