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
HyRead2425
cbtlibrary
0
120
プログラミング基礎#4(名古屋造形大学)
yusk1450
PRO
0
120
開発終了後こそ成長のチャンス!プロダクト運用を見送った先のアクションプラン
ohmori_yusuke
2
300
1106
cbtlibrary
0
450
ワクワク発見資料
akenohoshi
0
170
生成AIと歩むこれからの大学
gmoriki
0
950
(元)教育担当がお伝えする、若手社員が成長しまくるOJTポイント
masakiokuda
0
160
付箋を使ったカラオケでワイワイしましょう / Scrum Fest Okinawa 2024
bonbon0605
0
140
2024年度秋学期 統計学 第12回 分布の平均を推測する - 区間推定 (2024. 12. 11)
akiraasano
PRO
0
120
Image compression
hachama
0
390
Introduction - Lecture 1 - Advanced Topics in Big Data (4023256FNR)
signer
PRO
1
1.7k
Why Did Douglass Change His Mind?
oripsolob
0
350
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.6k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
A Tale of Four Properties
chriscoyier
158
23k
Thoughts on Productivity
jonyablonski
69
4.5k
Into the Great Unknown - MozCon
thekraken
35
1.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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