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
380
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
930
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
880
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
720
Product design through stories
Avatar for Tammie Lister tammielis
1
430

Other Decks in Education

See All in Education
2026年度春学期　統計学　第9回　確からしさを記述する ー 確率 (2026. 5. 28)
Avatar for Akira Asano akiraasano
PRO
0
130
Visionary Initiative: Future Intelligence 「未来の知性と社会の礎を築く」｜Science Tokyo（東京科学大学）
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
810
Lectura 1 (PIT : Python Basico)
Avatar for Abraham Zamudio robintux
0
380
現場最前線から教えるデータサイエンス１ -ITベンダーにおけるデータサイエンティスト-
Avatar for Hidetoshi Kawaguchi hidetoshikawaguchi
0
140
Center for Entrepreneurship Education | Science Tokyo (Institute of Science Tokyo)
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
110
[2026前期火５] 論理学（京都大学文学部 前期 第10回）「論理学の哲学——意味とは何か（Tonkと推論主義）」
Avatar for Shunsuke Yatabe yatabe
0
190
Catecismo 26 #1 - Aula inaugural
Avatar for Congregação Mariana da Imaculada Conceição e Santo Afonso de Ligório cm_manaus
0
200
焦燥を平穏に変えるエンジニアのための哲学
Avatar for nakamichi ichimichi
7
5.6k
Interaction - Lecture 10 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
2.7k
Modern Data Fetching Techniques in Angular
Avatar for Dhananjay Kumar debug_mode
0
230
[2026前期火５] 論理学（京都大学文学部 前期 第1回）「ハルシネーションを外部世界との対応を考えずに見分ける方法」
Avatar for Shunsuke Yatabe yatabe
0
1.2k
Catecismo 26 #2 - Do Credo; Introdução ao 1º artigo
Avatar for Congregação Mariana da Imaculada Conceição e Santo Afonso de Ligório cm_manaus
0
150

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
460
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
210
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
180
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
500
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.4k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
190
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
260
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
8
820

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