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
170
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
700
Global styles the story so far
tammielis
1
510
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
810
Being Brave
tammielis
2
1.3k
Lessons from growing design in the open
tammielis
0
720
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
460
Opportunity of Open Source
tammielis
0
440
Product design through stories
tammielis
0
240
Other Decks in Education
See All in Education
心房細動週間ポスター(2024年3月6日)
japanstrokeassociation
0
260
View Manipulation and Reduction - Lecture 9 - Information Visualisation (4019538FNR)
signer
PRO
1
1.4k
スクフェスの学びにチームを惹き込め! 社内同時視聴会のすゝめ!
pokotyamu
0
750
Microsoft Office 365
matleenalaakso
0
1.5k
生成AIを活用できる大学教職員になる-基本と実践-
gmoriki
0
310
千葉県印西市立・原山小学校における新たな学び「情報探究の時間」実践報告』
codeforeveryone
1
730
Interaction - Lecture 10 - Information Visualisation (4019538FNR)
signer
PRO
0
1.3k
Monaca Educationを活用した課題解決型の探究学習の実践
asial_edu
0
210
phygital__le_magasin_augmenté.pdf
martine
0
2.6k
「小・中・高等学校における情報教育の体系的な学習を目指したカリキュラムモデル基本方針」
codeforeveryone
0
1.4k
D&I推進レポート〜テクノロジー分野のジェンダーギャップとその取り組みについて〜
codeforeveryone
1
970
Data Presentation - Lecture 5 - Information Visualisation (4019538FNR)
signer
PRO
0
1.8k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Design by the Numbers
sachag
274
18k
Navigating Team Friction
lara
179
13k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Faster Mobile Websites
deanohume
300
30k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
The Mythical Team-Month
searls
216
42k
Web development in the modern age
philhawksworth
203
10k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Teambox: Starting and Learning
jrom
128
8.4k
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