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
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
950
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
890
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
740
Product design through stories
Avatar for Tammie Lister tammielis
1
440

Other Decks in Education

See All in Education
Examen de Selectividad. Geografía julio 2026 (Convocatoria Extraordinaria). UCLM
Avatar for Juan Martín Martín juanmartin2026
1
12k
人間のために、人間と共に働く時代の終わりの始まり
Avatar for Frieve-A frievea
0
140
AIってなぁに？
Avatar for 太田賢一 kenichiota0711
0
700
Πλουτοκρατία: Η Τυραννία του Μαμμωνά και η Μεταανθρώπινη Δουλεία
Avatar for Amethystos amethyst1
0
290
AI-Based Speaking Assessment of a Short-Term Study Abroad Program
Avatar for Ken Urano uranoken
0
440
0526
Avatar for cbtlibrary cbtlibrary
0
250
Visionary Initiative: Materials-Positive Society — Evolving “Things,” empowering a positive society | Science Tokyo
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
200
遊ぶかね欲しさの犯行（ルビ：労働）です
Avatar for ShirayanagiRyuji shirayanagiryuji
0
240
Adobe Express
Avatar for Matleena Laakso matleenalaakso
2
8.3k
Gitがない時代 インターネットがない時代の 開発話
Avatar for sapi_kawahara sapi_kawahara
0
370
Soluciones al examen de Geografía 2026. JUNIO (Convocatoria Ordinaria)
Avatar for Juan Martín Martín juanmartin2026
1
9.1k
Visionary Initiative: Future Intelligence — Laying the foundations for the future of science, intelligence, and society | Science Tokyo
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
250

Featured

See All Featured
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.3k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.8k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.7k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
201
75k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
550
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
480
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
250
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
510

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