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
320
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
790
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.3k
Being Brave
tammielis
2
1.7k
Lessons from growing design in the open
tammielis
0
1.1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
770
Opportunity of Open Source
tammielis
0
640
Product design through stories
tammielis
0
370
Other Decks in Education
See All in Education
Introduction - Lecture 1 - Web Technologies (1019888BNR)
signer
PRO
0
5.7k
Linguaxes de programación
irocho
0
290
Adobe Express
matleenalaakso
1
8k
Ch1_-_Partie_1.pdf
bernhardsvt
0
420
みんなのコードD&I推進レポート2025 テクノロジー分野のジェンダーギャップとその取り組みについて
codeforeveryone
0
300
the difficulty into words
ukky86
0
160
中間活動報告会 人材育成WG・技術サブWG / 20250808-oidfj-eduWG-techSWG
oidfj
0
750
今の私を形作る4つの要素と偶然の出会い(セレンディピティ)
mamohacy
2
110
Node-REDで広がるプログラミング教育の可能性
ueponx
0
150
自分だけの、誰も想像できないキャリアの育て方 〜偶然から始めるキャリアプラン〜 / Career planning starting by luckly v2
vtryo
1
240
American Airlines® USA Contact Numbers: The Ultimate 2025 Guide
lievliev
0
260
バケットポリシーの記述を誤りマネコンからS3バケットを操作できなくなりそうになった話
amarelo_n24
1
120
Featured
See All Featured
Being A Developer After 40
akosma
91
590k
The Cult of Friendly URLs
andyhume
79
6.6k
Side Projects
sachag
455
43k
4 Signs Your Business is Dying
shpigford
185
22k
Fireside Chat
paigeccino
41
3.7k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
GraphQLとの向き合い方2022年版
quramy
49
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Docker and Python
trallard
46
3.6k
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