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
160
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
690
Global styles the story so far
tammielis
1
500
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
800
Being Brave
tammielis
2
1.3k
Lessons from growing design in the open
tammielis
0
710
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
460
Opportunity of Open Source
tammielis
0
440
Product design through stories
tammielis
0
240
Other Decks in Education
See All in Education
Tangible, Embedded and Embodied Interaction - Lecture 9 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.2k
TCA Practice in 5 min
d_date
1
580
Best Wedding day perfume
vicjon
0
260
LightSail2324
cbtlibrary
0
130
Human Perception and Colour Theory - Lecture 2 - Information Visualisation (4019538FNR)
signer
PRO
0
1.7k
Avoin jakaminen ja Creative Commons -lisenssit
matleenalaakso
0
1.1k
人生の転機からチャンスを掴む「シュロスバーグの4Sモデル」/4s-models
yuko_yokouchi
2
720
week3@tcue2024
nonxxxizm
0
470
Copilotとして理解する生成AI利用の基本
gmoriki
0
140
自己紹介 / who-am-i
yasulab
2
3.1k
View Manipulation and Reduction - Lecture 9 - Information Visualisation (4019538FNR)
signer
PRO
0
1.4k
Multimodal Interaction - Lecture 3 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.1k
Featured
See All Featured
A Philosophy of Restraint
colly
197
16k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Gamification - CAS2011
davidbonilla
76
4.6k
KATA
mclloyd
15
12k
The Mythical Team-Month
searls
216
42k
The Pragmatic Product Professional
lauravandoore
25
5.8k
GitHub's CSS Performance
jonrohan
1025
450k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Designing the Hi-DPI Web
ddemaree
276
33k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
What the flash - Photography Introduction
edds
64
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
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