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
260
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
1k
Global styles the story so far
tammielis
1
690
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
1.2k
Being Brave
tammielis
2
1.5k
Lessons from growing design in the open
tammielis
0
1k
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
670
Opportunity of Open Source
tammielis
0
580
Product design through stories
tammielis
0
330
Other Decks in Education
See All in Education
Power Automate+ChatGPTを使ってエンジニア教育を改善してみた #RPALT
masakiokuda
0
140
Diseño de estrategia de analítica del aprendizaje en tu centro educativo.
tecuribarri
0
150
小学校プログラミング教育、次の5年に向けて 〜つくること・学ぶことの歓びへ〜 /NextGenerationOfProgrammingEducation
kiriem
2
360
ヘイトスピーチがある世界のコミュニケーション
ktanishima
0
930
Medidas en informática
irocho
0
1.1k
Human Perception and Colour Theory - Lecture 2 - Information Visualisation (4019538FNR)
signer
PRO
0
2.3k
AI 時代軟體工程師的持續升級
mosky
1
2.1k
1113
cbtlibrary
0
290
Logistique et supply chain : application au e-commerce
martine
0
130
HyRead2425
cbtlibrary
0
120
自己紹介 / who-am-i
yasulab
PRO
2
4.5k
The Prison Industrial Complex by Billy Dee
oripsolob
0
600
Featured
See All Featured
BBQ
matthewcrist
87
9.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Large-scale JavaScript Application Architecture
addyosmani
511
110k
A designer walks into a library…
pauljervisheath
205
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Ace a Technical Interview
jacobian
276
23k
Building Applications with DynamoDB
mza
93
6.2k
A better future with KSS
kneath
238
17k
Six Lessons from altMBA
skipperchong
27
3.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
440
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.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