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
〜AWS初心者向け〜 ベストプラクティスから学ぶ 「AWSセキュリティの高め方」
koheiyoshikawa
0
670
week3@tcue2024
nonxxxizm
0
630
week11_2024_.pdf
nonxxxizm
0
380
2024年度春学期 統計学 第5回 分布をまとめる (2024. 5. 9)
akiraasano
PRO
1
160
0521
cbtlibrary
0
110
Lecture on Management at Waseda University
tsogo817421
2
580
Droid Knights 2024 Accessibility in Android
nanamare
0
290
week10@tcue2024
nonxxxizm
0
370
week13@tcue2024
nonxxxizm
0
400
2024年度春学期 統計学 第6回 データの関係を知る(1) ー 相関関係 (2024. 5. 16)
akiraasano
PRO
0
150
プロダクト・エンジニア・QAE 3軸でのナレッジシェアのススメ
hinac0
1
520
#英語力ランキング批判:EF-EPI,TOEFLスコア,英語教育実施状況調査
terasawat
0
450
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Optimizing for Happiness
mojombo
373
69k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Adopting Sorbet at Scale
ufuk
71
8.8k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
Designing the Hi-DPI Web
ddemaree
276
34k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Infographics Made Easy
chrislema
238
18k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
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