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
290
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
730
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
720
Opportunity of Open Source
tammielis
0
600
Product design through stories
tammielis
0
350
Other Decks in Education
See All in Education
技術勉強会 〜 OAuth & OIDC 入門編 / 20250528 OAuth and OIDC
oidfj
4
890
Padlet opetuksessa
matleenalaakso
4
14k
SkimaTalk Teacher Guidelines Summary
skimatalk
0
770k
Common STIs in London: Symptoms, Risks & Prevention
medicaldental
0
130
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
signer
PRO
0
2.3k
Avoin jakaminen ja Creative Commons -lisenssit
matleenalaakso
0
1.9k
生成AIとの上手な付き合い方【公開版】/ How to Get Along Well with Generative AI (Public Version)
handlename
0
410
IMU-00 Pi
kanaya
0
350
女子商アプリ開発の軌跡
asial_edu
0
380
系統性を意識したプログラミング教育~ガチャを実装しよう~
asial_edu
0
390
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
signer
PRO
2
1.7k
データ分析
takenawa
0
670
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Writing Fast Ruby
sferik
628
61k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
Stop Working from a Prison Cell
hatefulcrawdad
269
20k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Invisible Side of Design
smashingmag
299
50k
A better future with KSS
kneath
239
17k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Faster Mobile Websites
deanohume
307
31k
Building an army of robots
kneath
306
45k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
KATA
mclloyd
29
14k
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