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
290
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
750
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.3k
Being Brave
tammielis
2
1.6k
Lessons from growing design in the open
tammielis
0
1.1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
740
Opportunity of Open Source
tammielis
0
610
Product design through stories
tammielis
0
350
Other Decks in Education
See All in Education
Pythonパッケージ管理 [uv] 完全入門
mickey_kubo
20
13k
OpenSourceSummitJapanを運営してみた話
kujiraitakahiro
0
700
今も熱いもの!魂を揺さぶる戦士の儀式:マオリ族のハカ
shubox
0
210
新卒交流ワークショップ
pokotyamu
0
400
技術文章を書くための執筆技術と実践法(パラグラフライティング)
hisashiishihara
18
6.5k
技術勉強会 〜 OAuth & OIDC 入門編 / 20250528 OAuth and OIDC
oidfj
5
1.2k
OpenRobomaster 中国のロボットコンテスト 日本連携の可能性
takasumasakazu
0
440
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
signer
PRO
2
1.7k
Open Source Summit Japan 2025のボランティアをしませんか
kujiraitakahiro
0
690
AIC 103 - Applications of Property Valuation: Essential Slides
rmccaic
0
190
予習動画
takenawa
0
4.4k
JOAI2025講評 / joai2025-review
upura
0
150
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Faster Mobile Websites
deanohume
307
31k
Typedesign – Prime Four
hannesfritz
42
2.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Optimizing for Happiness
mojombo
379
70k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Thoughts on Productivity
jonyablonski
69
4.7k
The Invisible Side of Design
smashingmag
299
51k
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