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
The Art of Note Taking
kanaya
1
140
生成AIとの上手な付き合い方【公開版】/ How to Get Along Well with Generative AI (Public Version)
handlename
0
500
2025年度春学期 統計学 第3回 クロス集計と感度・特異度,データの可視化 (2025. 4. 24)
akiraasano
PRO
0
140
Case Studies and Course Review - Lecture 12 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
今も熱いもの!魂を揺さぶる戦士の儀式:マオリ族のハカ
shubox
0
210
著作権と授業に関する出前講習会/dme-2025-05-01
gnutar
0
200
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
signer
PRO
1
2.1k
SkimaTalk Tutorial for Corporate Customers
skimatalk
0
290
技術勉強会 〜 OAuth & OIDC 入門編 / 20250528 OAuth and OIDC
oidfj
5
1.3k
CHARMS-HP-Banner
weltraumreisende
0
250
SkimaTalk Teacher Guidelines Summary
skimatalk
0
800k
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
3
560
Featured
See All Featured
Visualization
eitanlees
146
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
A Tale of Four Properties
chriscoyier
160
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Building an army of robots
kneath
306
45k
Automating Front-end Workflow
addyosmani
1370
200k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
It's Worth the Effort
3n
185
28k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Why Our Code Smells
bkeepers
PRO
336
57k
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