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
760
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
750
Opportunity of Open Source
tammielis
0
620
Product design through stories
tammielis
0
360
Other Decks in Education
See All in Education
技術文章を書くための執筆技術と実践法(パラグラフライティング)
hisashiishihara
19
6.7k
技術勉強会 〜 OAuth & OIDC 入門編 / 20250528 OAuth and OIDC
oidfj
5
1.5k
Case Studies and Course Review - Lecture 12 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
Linuxのよく使うコマンドを解説
mickey_kubo
1
250
CHARMS-HP-Banner
weltraumreisende
0
430
自己紹介 / who-am-i
yasulab
PRO
3
5.3k
Data Management and Analytics Specialisation
signer
PRO
0
1.4k
Tutorial: Foundations of Blind Source Separation and Its Advances in Spatial Self-Supervised Learning
yoshipon
1
130
View Manipulation and Reduction - Lecture 9 - Information Visualisation (4019538FNR)
signer
PRO
1
2.1k
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
masakiokuda
2
350
ビジネスモデル理解
takenawa
0
11k
人になにかを教えるときに考えていること(2025-05版 / VRC-LT #18)
sksat
4
1.1k
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
Making Projects Easy
brettharned
117
6.3k
Statistics for Hackers
jakevdp
799
220k
The Language of Interfaces
destraynor
158
25k
Automating Front-end Workflow
addyosmani
1370
200k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
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