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
310
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
780
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
630
Product design through stories
tammielis
0
360
Other Decks in Education
See All in Education
令和政経義塾第2期説明会
nxji
0
240
2025年度春学期 統計学 第13回 不確かな測定の不確かさを測る ー 不偏分散とt分布 (2025. 7. 3)
akiraasano
PRO
0
130
仮説の取扱説明書/User_Guide_to_a_Hypothesis
florets1
4
390
SISTEMA DE MEMORIA Y SU IMPACTO EN LAS DECISIONES.
jvpcubias
0
180
万博マニアックマップを支えるオープンデータとその裏側
barsaka2
0
870
みんなのコードD&I推進レポート2025 テクノロジー分野のジェンダーギャップとその取り組みについて
codeforeveryone
0
270
Ch1_-_Partie_1.pdf
bernhardsvt
0
400
Adobe Express
matleenalaakso
1
8k
Web Application Frameworks - Lecture 3 - Web Technologies (1019888BNR)
signer
PRO
0
3k
中間活動報告会 人材育成WG・技術サブWG / 20250808-oidfj-eduWG-techSWG
oidfj
0
720
中央教育審議会 教育課程企画特別部会 情報・技術ワーキンググループに向けた提言 ー次期学習指導要領での情報活用能力の抜本的向上に向けてー
codeforeveryone
0
300
American Airlines® USA Contact Numbers: The Ultimate 2025 Guide
lievliev
0
260
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
Automating Front-end Workflow
addyosmani
1371
200k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
What's in a price? How to price your products and services
michaelherold
246
12k
The World Runs on Bad Software
bkeepers
PRO
71
11k
How to Ace a Technical Interview
jacobian
280
24k
How to Think Like a Performance Engineer
csswizardry
27
2k
How STYLIGHT went responsive
nonsquared
100
5.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Building Adaptive Systems
keathley
43
2.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
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