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
350

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
870
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.1k
Thinking in patterns
Avatar for Tammie Lister tammielis
0
43
Design matters in open source
Avatar for Tammie Lister tammielis
1
840
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
690
Product design through stories
Avatar for Tammie Lister tammielis
1
400

Other Decks in Education

See All in Education
1111
Avatar for cbtlibrary cbtlibrary
0
280
HCI Research Methods - Lecture 7 - Human-Computer Interaction (1023841ANR)
Avatar for Beat Signer signer
PRO
0
1.4k
高校数学とJulia言語
Avatar for Shimizu Dan shimizudan
0
130
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.3k
Use Cases and Course Review - Lecture 8 - Human-Computer Interaction (1023841ANR)
Avatar for Beat Signer signer
PRO
0
1.4k
令和エンジニアの学習法 〜 生成AIを使って挫折を回避する 〜
Avatar for Yuduru moriga_yuduru
0
270
心理学を学び活用することで偉大なスクラムマスターを目指す − 大学とコミュニティを組み合わせた学びの循環 / Becoming a great Scrum Master by learning and using psychology
Avatar for Satoshi Harada psj59129
1
1.9k
学習指導要領と解説に基づく学習内容の構造化の試み / Course of study Commentary LOD JAET 2025
Avatar for Masao Takaku masao
1
140
1125
Avatar for cbtlibrary cbtlibrary
0
190
The World That Saved Me: A Story of Community and Gratitude
Avatar for hashimo2 _hashimo2
4
540
コマンドラインを見直そう（1995年からタイムリープ）
Avatar for sapi_kawahara sapi_kawahara
0
690
地区危機管理委員会 出前セミナー「ロータリーにおける危機管理」：膳所 和彦 氏（国際ロータリー第2720地区 パストガバナー・日田ロータリークラブ・医療法人恒心会ぜぜ医院 理事長）:2720 Japan O.K. ロータリーEクラブ2026年2月16日卓話
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
1
580

Featured

See All Featured
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.3k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.3k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.3k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
230
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
120
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
260
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.1k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.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