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
780
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
小学校女性教員向け プログラミング教育研修プログラム「SteP」の実践と課題
Avatar for みんなのコード codeforeveryone
0
140
H5P-työkalut
Avatar for Matleena Laakso matleenalaakso
4
40k
RSJ2025 ランチョンセミナー 一歩ずつ世界へ：学生・若手研究者のための等身大の国際化の始め方
Avatar for Tetsunari Inamura t_inamura
0
320
Linguaxes de programación
Avatar for i-rochiño irocho
0
300
社外コミュニティの歩き方
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
2
210
Design Guidelines and Models - Lecture 5 - Human-Computer Interaction (1023841ANR)
Avatar for Beat Signer signer
PRO
0
1.1k
生態系ウォーズ　- ルールブック
Avatar for yui itoshima yui_itoshima
1
300
JavaScript - Lecture 6 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3k
探査機自作ゼミ2025スライド
Avatar for sksat sksat
3
820
20250910_エンジニアの成長は自覚するところから_サポーターズ勉強会
Avatar for 森田　一平 ippei0923
0
310
Présentation_1ère_Spé_2025.pdf
Avatar for Monsieur Bernhard bernhardsvt
0
410
20250807_がんばらないコミュニティ運営
Avatar for ponponmikan ponponmikankan
0
190

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
272
21k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.2k
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
272
27k

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