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
미국 교환학생 가서 무료 홈스테이 살면서 인턴 취업하기
maryang
0
110
ふりかえり研修2025
pokotyamu
0
1.3k
2025/06/05_読み漁り学習
nag8
0
160
Gamified Interventions for Composting Behavior: A Case Study Using the Gamiflow Framework in a Workplace Setting
ezefranca
1
150
American Airlines® USA Contact Numbers: The Ultimate 2025 Guide
lievliev
0
240
Open Source Summit Japan 2025のボランティアをしませんか
kujiraitakahiro
0
740
検索/ディスプレイ/SNS
takenawa
0
8k
View Manipulation and Reduction - Lecture 9 - Information Visualisation (4019538FNR)
signer
PRO
1
2.1k
Webリテラシー基礎
takenawa
0
8k
『会社を知ってもらう』から『安心して活躍してもらう』までの プロセスとフロー
sasakendayo
0
240
SkimaTalk Introduction for Students
skimatalk
0
390
新卒研修に仕掛ける 学びのサイクル / Implementing Learning Cycles in New Graduate Training
takashi_toyosaki
1
180
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Documentation Writing (for coders)
carmenintech
72
4.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Writing Fast Ruby
sferik
628
62k
Embracing the Ebb and Flow
colly
86
4.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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