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
300

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
760
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
620
Product design through stories
Avatar for Tammie Lister tammielis
0
360

Other Decks in Education

See All in Education
​シリコンバレーでスタートアップを共同創業したファウンディングエンジニアとしての学び
Avatar for Tomoaki Imai tomoima525
1
430
質のよいアウトプットをできるようになるために～「読む・聞く、まとめる、言葉にする」を読んで～
Avatar for amarelo_n24 amarelo_n24
0
190
CHARMS-HP-Banner
Avatar for Rica weltraumreisende
0
540
2025年度春学期　統計学　第7回　データの関係を知る(2)ー回帰と決定係数 (2025. 5. 22)
Avatar for Akira Asano akiraasano
PRO
0
150
情報科学類で学べる専門科目38選
Avatar for Mutsuha Asada momeemt
0
560
マネジメント「される側」 こそ覚悟を決めろ
Avatar for Nao-RandD nao_randd
10
5.5k
[FUN Open Campus 2025] 何でもセンシングしていいですか？
Avatar for Shigemi ISHIDA pman0214
0
230
登壇未経験者のための登壇戦略～LTは設計が9割！！！～
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
3
630
Sponsor the Conference | VizChitra 2025
Avatar for VizChitra vizchitra
0
600
2025年度春学期　統計学　第9回　確からしさを記述する ー 確率 (2025. 6. 5)
Avatar for Akira Asano akiraasano
PRO
0
140
みんなのコードD&I推進レポート2025 テクノロジー分野のジェンダーギャップとその取り組みについて
Avatar for みんなのコード codeforeveryone
0
120
令和政経義塾第2期説明会
Avatar for 一般財団法人 nxji
0
140

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
Scaling GitHub
Avatar for Zach Holman holman
462
140k
Fireside Chat
Avatar for paigeccino paigeccino
39
3.6k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.7k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.6k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k

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