Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
CSS in the editor
Tammie Lister
September 30, 2020
Education
0
46
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
32
Global styles the story so far
tammielis
1
220
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
120
Being Brave
tammielis
1
210
Lessons from growing design in the open
tammielis
0
110
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
87
Opportunity of Open Source
tammielis
0
82
Product design through stories
tammielis
0
160
Other Decks in Education
See All in Education
Baparekraf Developer Day 2022 - Blockchain (Asih Karnengsih)
dicodingevent
0
520
2 Mirovaya
libshare
0
220
Tangible, Embedded and Embodied Interaction - Lecture 9 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
640
私の学振DC2体験談 (2021~2022年度 学振 DC2 採用) / JSPS DC Hosei Seminar 2023
shunk031
0
950
Baparekraf Developer Day 2022 - Back-End (Rendra Toro)
dicodingevent
0
500
Ruudunkaappausvideot ja Screencast-O-Maticilla tekstitys
matleenalaakso
0
13k
Baparekraf Developer Day 2022 - Back-End (Dimas Maulana Dwi Saputra)
dicodingevent
0
470
Machine Learning Training
marisakamozz
1
320
World War I and the Red Scare
oripsolob
0
660
Moodle 4.0 : les nouveautés avec Pimenko
pimenko
0
270
2022年度データアナリティクスII-第2回-20220418
trycycle
0
130
Media Literacy in the Age of Ferguson
oripsolob
0
160
Featured
See All Featured
Six Lessons from altMBA
skipperchong
14
1.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
23
15k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
BBQ
matthewcrist
74
7.9k
Automating Front-end Workflow
addyosmani
1351
200k
Ruby is Unlike a Banana
tanoku
91
9.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
14
36k
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