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
270
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
700
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.2k
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
690
Opportunity of Open Source
tammielis
0
590
Product design through stories
tammielis
0
340
Other Decks in Education
See All in Education
ビジネススキル研修紹介(株式会社27th)
27th
PRO
1
830
AWS Well-Architected Labを活用してつよつよAWSエンジニアになろう!!! #jawsug_tokyo
masakiokuda
0
320
Ch4_-_Partie_2.pdf
bernhardsvt
0
110
Power Automate+ChatGPTを使ってエンジニア教育を改善してみた #RPALT
masakiokuda
0
160
Multimodal Interaction - Lecture 3 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.5k
Visualisation Techniques - Lecture 8 - Information Visualisation (4019538FNR)
signer
PRO
0
2.3k
Поступай в ТОГУ 2025
pnuslide
0
30k
家族をスクラムチームに! アジャイルで取り組む家事と育児 | Install Scrum to Family
coosuke
PRO
1
240
ハワイアン航空 ステータスへの道 #HAairstudy
maroon1st
0
130
SkimaTalk Teacher Guidelines
skimatalk
0
710k
中野区ミライ★ライター倶楽部presents『MINT』
nakamuramikumirai
0
990
SkimaTalk Tutorial for Corporate Customers
skimatalk
0
240
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
Building Your Own Lightsaber
phodgson
104
6.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
How GitHub (no longer) Works
holman
314
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
39
7.2k
Product Roadmaps are Hard
iamctodd
PRO
52
11k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Bash Introduction
62gerente
611
210k
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