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
280
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
710
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.2k
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
710
Opportunity of Open Source
tammielis
0
600
Product design through stories
tammielis
0
350
Other Decks in Education
See All in Education
2025年度春学期 統計学 第2回 統計資料の収集と読み方(講義前配付用) (2025. 4. 17)
akiraasano
PRO
0
100
ThingLink
matleenalaakso
28
4k
SkimaTalk Teacher Guidelines Summary
skimatalk
0
740k
家族をスクラムチームに! アジャイルで取り組む家事と育児 | Install Scrum to Family
coosuke
PRO
1
260
Info Session MSc Computer Science & MSc Applied Informatics
signer
PRO
0
140
R6愛南町事前復興フォーラムリーフレット
bousaichiribu
0
280
Information Architectures - Lecture 2 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.5k
Visualisation Techniques - Lecture 8 - Information Visualisation (4019538FNR)
signer
PRO
0
2.3k
Padlet opetuksessa
matleenalaakso
4
14k
ハワイアン航空 ステータスへの道 #HAairstudy
maroon1st
0
150
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
signer
PRO
2
1.7k
Interactive Tabletops and Surfaces - Lecture 5 - Next Generation User Interfaces (4018166FNR)
signer
PRO
1
1.6k
Featured
See All Featured
Speed Design
sergeychernyshev
29
920
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
The Cost Of JavaScript in 2023
addyosmani
49
7.8k
GraphQLとの向き合い方2022年版
quramy
46
14k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Navigating Team Friction
lara
185
15k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Thoughts on Productivity
jonyablonski
69
4.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
A better future with KSS
kneath
239
17k
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