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
260
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
1k
Global styles the story so far
tammielis
1
690
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.2k
Being Brave
tammielis
2
1.5k
Lessons from growing design in the open
tammielis
0
1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
670
Opportunity of Open Source
tammielis
0
580
Product design through stories
tammielis
0
320
Other Decks in Education
See All in Education
お仕事図鑑pitchトーク
tetsuyaooooo
0
2.3k
Nodiレクチャー 「CGと数学」講義資料 2024/11/19
masatatsu
1
300
AWS Well-Architected Labを活用してつよつよAWSエンジニアになろう!!! #jawsug_tokyo
masakiokuda
0
290
Security, Privacy and Trust - Lecture 11 - Web Technologies (1019888BNR)
signer
PRO
0
2.7k
Semantic Web and Web 3.0 - Lecture 9 - Web Technologies (1019888BNR)
signer
PRO
2
2.7k
Ch4_-_Cours_2.pdf
bernhardsvt
0
120
(モブ)エンジニアが伝えるアウトプット活動のススメ!! #カンリーLT
masakiokuda
2
180
Bitcoin Lightning Network en pratique
rlifchitz
0
110
Sanapilvet opetuksessa
matleenalaakso
0
31k
Evaluation Methods - Lecture 6 - Human-Computer Interaction (1023841ANR)
signer
PRO
0
820
Introduction - Lecture 1 - Information Visualisation (4019538FNR)
signer
PRO
0
4.3k
新人研修の課題と未来を考える
natsukokanda1225
0
1.2k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Practical Orchestrator
shlominoach
186
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Producing Creativity
orderedlist
PRO
343
39k
Scaling GitHub
holman
459
140k
A designer walks into a library…
pauljervisheath
205
24k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Designing for Performance
lara
604
68k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
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