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

CSS in the editor

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Tammie Lister Tammie Lister
September 30, 2020
Education
370
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
910
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
870
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
710
Product design through stories
Avatar for Tammie Lister tammielis
1
420

Other Decks in Education

See All in Education
「機械学習と因果推論」入門 ⑤ 因果効果推定の一般化
Avatar for MasaKat0 masakat0
0
100
AI時代において英語学習は本当に必要？ ~未経験からのバイリンガルキャリアの始め方を教えます~
Avatar for Kenta Suzuki kekekenta
0
190
2026年度春学期　統計学　第6回　データの関係を知る（１）ー 相関関係 (2026. 5. 14)
Avatar for Akira Asano akiraasano
PRO
0
110
アラムコSTEAMチャレンジ　実践報告書
Avatar for みんなのコード codeforeveryone
0
120
Lectura 2 (PIT : Python Basico)
Avatar for Abraham Zamudio robintux
0
350
偶然のチャンスを掴みに行けるのは君だ！
Avatar for ことみん / kotomin_m kotomin_m
2
110
Managing Complexity: India’s Semiconductor Ambitions & New Industrial Policy
Avatar for Vikash Yadav vyadav
0
170
!コスパよくインターンに受かる方法！
Avatar for るりいろぼうや ruribou
0
250
SL AMIGOS 教育格差と私たちの取り組み - スリランカの支援学校への支援プロジェクト：リシンドゥ リオ 氏 （別府溝部学園短期大学 ビジネス観光コース 留学生):2720 Japan O.K. ロータリーEクラブ2026年4月6日卓話
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
610
AWS Certified Generative AI Developer - Professional Beta 不合格体験記
Avatar for amarelo_n24 amarelo_n24
1
310
Catecismo 26 #1 - Aula inaugural
Avatar for Congregação Mariana da Imaculada Conceição e Santo Afonso de Ligório cm_manaus
0
160
Visualisation Techniques - Lecture 8 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
3.1k

Featured

See All Featured
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
400
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
370
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.3k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
13k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
480
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
300

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