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
180
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
720
Global styles the story so far
tammielis
1
520
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
830
Being Brave
tammielis
2
1.3k
Lessons from growing design in the open
tammielis
0
740
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
480
Opportunity of Open Source
tammielis
0
450
Product design through stories
tammielis
0
240
Other Decks in Education
See All in Education
墓までもっていくはずだった話
takuro_nakajima
PRO
0
1.7k
10分で日本史(試案)
hidekatsu_izuno
0
180
@ngrx/signals
yannickbaron
0
200
2024年度春学期 統計学 第1回 イントロダクションー統計的なものの見方・考え方について (2024. 4. 11)
akiraasano
PRO
1
120
生成AIを活用できる大学教職員になる-基本と実践-
gmoriki
0
330
心房細動週間ポスター(2024年3月6日)
japanstrokeassociation
0
300
Project Sprint 学生版(入門編)
copilot
PRO
0
240
Educación digital en la adolescencia
gonz1ale1
0
130
H5P-työkalut
matleenalaakso
3
33k
パフォーマンス・チューニング入門
oracle4engineer
PRO
2
820
Introduction - Lecture 1 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
3.1k
Course Review - Lecture 12 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.3k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
133
6.3k
Designing with Data
zakiwarfel
96
4.8k
Why Our Code Smells
bkeepers
PRO
331
56k
Clear Off the Table
cherdarchuk
86
310k
Building Applications with DynamoDB
mza
88
5.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
The Pragmatic Product Professional
lauravandoore
26
5.9k
Into the Great Unknown - MozCon
thekraken
15
1.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
4 Signs Your Business is Dying
shpigford
176
21k
Being A Developer After 40
akosma
67
580k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
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