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
360

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
880
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
850
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
AIで日本はどう進化する？ 〜キミが生きる2035年の地図〜
Avatar for Zun Behoma behomazn
0
130
PE array testbench data order (data)
Avatar for SUNG, CHIN-CHENG songchch
0
100
Modelamiento Matematico (Ingresantes UNI 2026)
Avatar for Abraham Zamudio robintux
0
260
Introduction - Lecture 1 - Advanced Topics in Big Data (4023256FNR)
Avatar for Beat Signer signer
PRO
2
2.3k
Pen-based Interaction - Lecture 4 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.2k
環境・社会理工学院（建築学系）大学院説明会 2026｜東京科学大学（Science Tokyo）
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
840
Multimodal Interaction - Lecture 3 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.1k
高校数学とJulia言語
Avatar for Shimizu Dan shimizudan
0
140
Measuring what matters
Avatar for Jono Alderson jonoalderson
0
110
多様なメンター、多様な基準
Avatar for Yohei Yasukawa yasulab
6
20k
Blueprint for Strengthening Community Colleges Training Grant Success
Avatar for Territorium territorium
PRO
0
220
Chapitre_2_-_Partie_3.pdf
Avatar for Monsieur Bernhard bernhardsvt
0
210

Featured

See All Featured
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
96
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
340
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
140
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
310
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
120
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
160
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.4k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
330
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.2k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
190
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
470
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
290

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