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
200
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
820
Global styles the story so far
tammielis
1
570
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
950
Being Brave
tammielis
2
1.4k
Lessons from growing design in the open
tammielis
0
830
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
530
Opportunity of Open Source
tammielis
0
490
Product design through stories
tammielis
0
260
Other Decks in Education
See All in Education
LINE ミニアプリ開発のメリットとキャッチアップ方法
junghyeonjae
0
480
Цифровые финансы - магистерская программа Финэка МГИМО 2024 г.
niellony
0
400
世界の子音探訪記
jamashita
0
230
week15@tcue2024
nonxxxizm
0
380
Contentless Marketing
jonoalderson
0
880
Ch9_-_Partie_1.pdf
bernhardsvt
0
100
2024年度春学期 統計学 第2回 統計資料の収集と読み方 (2024. 4. 18)
akiraasano
PRO
0
110
制限ボルツマンマシンの話 / Introduction of RBM
kaityo256
PRO
3
600
week12@tcue2024
nonxxxizm
0
530
week13@tcue2024
nonxxxizm
0
400
2023年度「生成AI100校プロジェクト」 実践報告書/The 2023 "Generative AI 100 Schools Project" Practical Report
codeforeveryone
0
1.1k
自己紹介 / who-am-i
yasulab
2
3.6k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Become a Pro
speakerdeck
PRO
15
4.8k
Bash Introduction
62gerente
607
210k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Building Applications with DynamoDB
mza
89
5.8k
Docker and Python
trallard
37
2.9k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
How to train your dragon (web standard)
notwaldorf
79
5.5k
GitHub's CSS Performance
jonrohan
1026
450k
Atom: Resistance is Futile
akmur
261
25k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
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