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
320

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
790
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
770
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
640
Product design through stories
Avatar for Tammie Lister tammielis
0
370

Other Decks in Education

See All in Education
KBS新事業創造体験2025_科目説明会
Avatar for Yasuchika Wakayama yasuchikawakayama
0
130
Introduction - Lecture 1 - Human-Computer Interaction (1023841ANR)
Avatar for Beat Signer signer
PRO
0
2.6k
生態系ウォーズ　- ルールブック
Avatar for yui itoshima yui_itoshima
1
300
Entrepreneurship minor course at HSE 2025
Avatar for Alexey karlov
0
100
相互コミュニケーションの難しさ
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
280
Human Perception and Cognition - Lecture 4 - Human-Computer Interaction (1023841ANR)
Avatar for Beat Signer signer
PRO
0
1.2k
Master of Applied Science & Engineering: Computer Science & Master of Science in Applied Informatics: Artificial Intelligence and Data Science
Avatar for Beat Signer signer
PRO
0
840
質のよいアウトプットをできるようになるために～「読む・聞く、まとめる、言葉にする」を読んで～
Avatar for amarelo_n24 amarelo_n24
0
280
2026 g0v 零時政府年會啟動提案 / g0v Summit 2026 Kickstart
Avatar for Poren Chiang rschiang
0
400
QR-koodit opetuksessa
Avatar for Matleena Laakso matleenalaakso
0
1.7k
みんなのコードD&I推進レポート2025 テクノロジー分野のジェンダーギャップとその取り組みについて
Avatar for みんなのコード codeforeveryone
0
310
データで見る赤ちゃんの成長
Avatar for じゃらしまる syuchimu
0
320

Featured

See All Featured
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.6k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.6k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.9k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
7.9k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
49
51k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
930
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
33k

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