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
0
310

CSS in the editor

Workshop for WordPress

Avatar for Tammie Lister

Tammie Lister

September 30, 2020
Tweet

More Decks by Tammie Lister

See All by Tammie Lister
Growing the WordPress design system
Avatar for Tammie Lister tammielis
1
1.1k
Global styles the story so far
Avatar for Tammie Lister tammielis
1
770
Dropped stitches and tangled yarn - a call to simplify WordPress
Avatar for Tammie Lister tammielis
1
1.3k
Being Brave
Avatar for Tammie Lister tammielis
2
1.7k
Lessons from growing design in the open
Avatar for Tammie Lister tammielis
0
1.1k
Thinking in patterns
Avatar for Tammie Lister tammielis
0
43
Design matters in open source
Avatar for Tammie Lister tammielis
1
760
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
630
Product design through stories
Avatar for Tammie Lister tammielis
0
360

Other Decks in Education

See All in Education
Pydantic(AI)とJSONの詳細解説
Avatar for MIKIO KUBO mickey_kubo
0
190
新卒研修に仕掛ける 学びのサイクル / Implementing Learning Cycles in New Graduate Training
Avatar for takashi takashi_toyosaki
1
220
OpenSourceSummitJapanを運営してみた話
Avatar for Kujiraitakahiro kujiraitakahiro
0
790
AI for Learning
Avatar for Kamolphan Liwprasert fonylew
0
180
Técnicas y Tecnología para la Investigación Neurocientífica en el Neuromanagement
Avatar for José Vicente Pérez Cubias jvpcubias
0
120
20250830_MIEE祭_会社員視点での学びのヒント
Avatar for ponponmikan ponponmikankan
1
150
AIの時代こそ、考える知的学習術
Avatar for YUM3 yum3
2
190
OJTに夢を見すぎていませんか？ ロールプレイ研修の試行錯誤/tryanderror-in-roleplaying-training
Avatar for takipone takipone
1
220
2025年度春学期　統計学　第8回　演習(1) 問題に対する答案の書き方（講義前配付用） (2025. 5. 29)
Avatar for Akira Asano akiraasano
PRO
0
140
生態系ウォーズ　- ルールブック
Avatar for yui itoshima yui_itoshima
1
250
マネジメント「される側」 こそ覚悟を決めろ
Avatar for Nao-RandD nao_randd
10
5.5k
2025年度春学期　統計学　第14回　分布についての仮説を検証する ー 仮説検定（１） (2025. 7. 10)
Avatar for Akira Asano akiraasano
PRO
0
140

Featured

See All Featured
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Code Review Best Practice
Avatar for Trisha Gee trishagee
70
19k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
1.1k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.9k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
302
21k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
525
40k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
520

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