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
290
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
740
Opportunity of Open Source
tammielis
0
610
Product design through stories
tammielis
0
350
Other Decks in Education
See All in Education
OpenSourceSummitJapanを運営してみた話
kujiraitakahiro
0
710
計算情報学研究室 (数理情報学第7研究室)紹介スライド (2025)
tomonatu8
0
530
実務プログラム
takenawa
0
5.7k
Data Management and Analytics Specialisation
signer
PRO
0
1.4k
検索/ディスプレイ/SNS
takenawa
0
5.8k
Case Studies and Course Review - Lecture 12 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
JOAI2025講評 / joai2025-review
upura
0
160
Data Physicalisation - Lecture 9 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
440
サンキッズゾーン 春日井駅前 ご案内
sanyohomes
0
350
2025/06/05_読み漁り学習
nag8
0
140
2025年度春学期 統計学 第1回 イントロダクション (2025. 4. 10)
akiraasano
PRO
0
170
RELC_2025_KYI
otamayuzak
0
120
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Optimizing for Happiness
mojombo
379
70k
Site-Speed That Sticks
csswizardry
10
670
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Designing for Performance
lara
609
69k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
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