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
280
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
710
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
700
Opportunity of Open Source
tammielis
0
590
Product design through stories
tammielis
0
340
Other Decks in Education
See All in Education
(元)教育担当がお伝えする、若手社員が成長しまくるOJTポイント
masakiokuda
0
270
Dominus autem in templo sancto suo
cm_manaus
0
110
IMU-00 Pi
kanaya
0
280
HCL Domino 14.5 EAP2 Domino IQ について
harunakano
0
100
Why Did Douglass Change His Mind?
oripsolob
0
480
新人研修の課題と未来を考える
natsukokanda1225
0
1.6k
いにしえの国産データベース~桐~って知っていますか?
masakiokuda
2
140
家族をスクラムチームに! アジャイルで取り組む家事と育児 | Install Scrum to Family
coosuke
PRO
1
250
Are puppies a ranking factor?
jonoalderson
0
210
系統性を意識したプログラミング教育~ガチャを実装しよう~
asial_edu
0
330
SkimaTalk Tutorial for Corporate Customers
skimatalk
0
240
論文紹介のやり方 / How to review
kaityo256
PRO
15
79k
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Building Applications with DynamoDB
mza
94
6.3k
A better future with KSS
kneath
239
17k
Unsuck your backbone
ammeep
670
57k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
Docker and Python
trallard
44
3.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How to Think Like a Performance Engineer
csswizardry
23
1.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Raft: Consensus for Rubyists
vanstee
137
6.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
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