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
710
Global styles the story so far
tammielis
1
510
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
820
Being Brave
tammielis
2
1.3k
Lessons from growing design in the open
tammielis
0
730
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
470
Opportunity of Open Source
tammielis
0
440
Product design through stories
tammielis
0
240
Other Decks in Education
See All in Education
Pre-enrollment Information for UTokyo International Students
utokyoissr2360
0
4.8k
6ヶ月間の授業でここまでできた。コンテスト参加に向けての授業内容と生徒の様子を紹介!
asial_corp
0
410
Monaca Educationを活用した課題解決型の探究学習の実践
asial_edu
0
210
執筆テーマの決め方
sapi_kawahara
1
190
Interactive Tabletops and Surfaces - Lecture 7 - Next Generation User Interfaces (4018166FNR)
signer
PRO
1
1.2k
人生の転機からチャンスを掴む「シュロスバーグの4Sモデル」/4s-models
yuko_yokouchi
3
780
前期教育実習事前指導0221
naradai
0
140
4 занятие. Разбор бизнес-моделей и метод красной нити #ideaNN 9.02.2024.
karlov
0
230
week2@tcue2024
nonxxxizm
0
830
Introduction - Lecture 1 - Advanced Topics in Big Data (4023256FNR)
signer
PRO
1
1.2k
Multimodal Interaction - Lecture 3 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.1k
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
signer
PRO
0
1.7k
Featured
See All Featured
Faster Mobile Websites
deanohume
300
30k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
Statistics for Hackers
jakevdp
790
220k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
36
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
Six Lessons from altMBA
skipperchong
22
3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
The World Runs on Bad Software
bkeepers
PRO
61
6.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