Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS in the editor

Avatar for Tammie Lister Tammie Lister
September 30, 2020
Education
360
0

CSS in the editor

Workshop for WordPress

Avatar for Tammie Lister

Tammie Lister

September 30, 2020

More Decks by Tammie Lister

See All by Tammie Lister
Growing the WordPress design system
Avatar for Tammie Lister tammielis
1
1.2k
Global styles the story so far
Avatar for Tammie Lister tammielis
1
890
Dropped stitches and tangled yarn - a call to simplify WordPress
Avatar for Tammie Lister tammielis
1
1.4k
Being Brave
Avatar for Tammie Lister tammielis
2
1.8k
Lessons from growing design in the open
Avatar for Tammie Lister tammielis
0
1.2k
Thinking in patterns
Avatar for Tammie Lister tammielis
0
43
Design matters in open source
Avatar for Tammie Lister tammielis
1
850
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
700
Product design through stories
Avatar for Tammie Lister tammielis
1
410

Other Decks in Education

See All in Education
小さなまちで始める デジタル創作の居場所〜すべての子どもが創造的に未来を描ける社会へ〜
Avatar for みんなのコード codeforeveryone
0
410
勝手にCULTIBASE で広げよう、探究の輪！ - CULTIVAL 2026
Avatar for Hiroshi SAKAI hiroc_sk
1
150
理工学系 第1回大学院説明会2026｜東京科学大学（Science Tokyo）
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
1
1.4k
Sponsorship 2026 | VizChitra
Avatar for VizChitra vizchitra
2
230
Human Perception and Colour Theory - Lecture 2 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
3.1k
Data Representation - Lecture 3 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2.9k
Gitの中身 / 03-a-git-internals
Avatar for kaityo256 kaityo256
PRO
0
180
共感から、つくる: 変わり続ける自分と、誰かのための創造
Avatar for Mick Etoh micknerd
1
310
Science Tokyo国際卓越研究大学計画_202604
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
1.3k
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
2.9k
Padlet opetuksessa
Avatar for Matleena Laakso matleenalaakso
12
15k
✅ レポート採点基準 / How Your Reports Are Assessed
Avatar for YassLab yasslab
PRO
0
320

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.5k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.4k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
140
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
150
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.4k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
570
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
190

Transcript

  1. Custom CSS and the editor

  2. Custom CSS?

  3. CSS?

  4. CSS (Cascading style sheet)

  5. !important

  6. #id .class

  7. .editor-styles-wrapper .wp-block-quote.is-large

  8. Inspecting

  9. None
  10. None
  11. None

  12. Custom CSS in WordPress

  13. Adding to the customizer Using additional CSS, doesn’t change files

  14. None

  15. Theme files in wp-admin Only if able to edit files,

    changes theme files
  16. None

  17. Adding a stylesheet/editing Requires server access, changes files

  18. Let’s create

  19. Our starting point Twenty Twenty

  20. 1. Add a class to a block using additional CSS

    class field.

  21. 2. Create a custom style for an existing block class.

  22. Add a class to blocks

  23. None
  24. None

  25. BONUS POINTS… Check on smaller screen

  26. None

  27. Creating a custom style

  28. None
  29. None
  30. None
  31. None

  32. Summary…

  33. 1. Find the element you want to style

  34. 2. Remember cascading

  35. 3. Use the additional css field

  36. 4. Always preview on smaller devices

  37. 5. For a quick, safe option outside of theme use

    ‘Additional CSS’ in the Customizer.

  38. 6. Have fun and experiment

  39. Thank you