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
310
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
770
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
760
Opportunity of Open Source
tammielis
0
630
Product design through stories
tammielis
0
360
Other Decks in Education
See All in Education
Common STIs in London: Symptoms, Risks & Prevention
medicaldental
0
140
20250910_エンジニアの成長は自覚するところから_サポーターズ勉強会
ippei0923
0
240
AI for Learning
fonylew
0
180
Linuxのよく使うコマンドを解説
mickey_kubo
1
270
【Discordアカウント作成ガイド】
ainischool
0
120
『会社を知ってもらう』から『安心して活躍してもらう』までの プロセスとフロー
sasakendayo
0
260
大学院進学について(2025年度版)
imash
0
120
20250807_がんばらないコミュニティ運営
ponponmikankan
0
170
Master of Applied Science & Engineering: Computer Science & Master of Science in Applied Informatics: Artificial Intelligence and Data Science
signer
PRO
0
780
核燃料政策を問う─英国の決断と日本
hide2kano
0
180
Alumnote inc. Company Deck
yukinumata
0
2.1k
Técnicas y Tecnología para la Investigación Neurocientífica en el Neuromanagement
jvpcubias
0
130
Featured
See All Featured
Fireside Chat
paigeccino
39
3.6k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Git: the NoSQL Database
bkeepers
PRO
431
66k
We Have a Design System, Now What?
morganepeng
53
7.8k
Producing Creativity
orderedlist
PRO
347
40k
A designer walks into a library…
pauljervisheath
207
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Making Projects Easy
brettharned
117
6.4k
The Invisible Side of Design
smashingmag
301
51k
Optimizing for Happiness
mojombo
379
70k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
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