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
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
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
Lenguajes de Programacion (Ingresantes UNI 2026)
Avatar for Abraham Zamudio robintux
0
140
GitHubによるWebアプリケーションのデプロイ / 07-github-deploy
Avatar for kaityo256 kaityo256
PRO
1
200
Introduction - Lecture 1 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
5.3k
国際卓越研究大学計画｜Science Tokyo（東京科学大学）
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
49k
Gluon Recruit Deck
Avatar for Gluon gluon
0
160
2025-12-19-LT
Avatar for Shigeki Shoji takesection
0
120
Pen-based Interaction - Lecture 4 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.1k
Tangible, Embedded and Embodied Interaction - Lecture 7 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.1k
Information Architectures - Lecture 2 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
1
1.9k
Introduction - Lecture 1 - Advanced Topics in Big Data (4023256FNR)
Avatar for Beat Signer signer
PRO
2
2.3k
Analysis and Validation - Lecture 4 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
2.6k
Data Presentation - Lecture 5 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
3k

Featured

See All Featured
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.2k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
130
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
100
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
1
150
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.1k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
10k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k

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