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
370
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
910
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
870
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
710
Product design through stories
Avatar for Tammie Lister tammielis
1
410

Other Decks in Education

See All in Education
Lenguajes de Programacion (Ingresantes UNI 2026)
Avatar for Abraham Zamudio robintux
0
180
Curso de Consagração ao Sagrado Coração de Jesus - O Sagrado Coração na História (Aula 01)
Avatar for Congregação Mariana da Imaculada Conceição e Santo Afonso de Ligório cm_manaus
0
180
勝手にCULTIBASE で広げよう、探究の輪！ - CULTIVAL 2026
Avatar for Hiroshi SAKAI hiroc_sk
1
200
Populism, Post-Liberalism & Climate Change
Avatar for Vikash Yadav vyadav
0
170
Interaction - Lecture 10 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
2.6k
2026年度春学期　統計学　第3回　クロス集計と感度・特異度，データの可視化 (2026. 4. 23)
Avatar for Akira Asano akiraasano
PRO
0
130
「機械学習と因果推論」入門 ③ 漸近効率な推定量と二重機械学習
Avatar for MasaKat0 masakat0
0
640
吉祥寺.pmは1つじゃない
— 複数イベント並走運営の12年 —
Avatar for Magnolia.K magnolia
0
960
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
2
2.3k
0513
Avatar for cbtlibrary cbtlibrary
0
170
Course Review - Lecture 13 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2.6k
偶然のチャンスを掴みに行けるのは君だ！
Avatar for ことみん / kotomin_m kotomin_m
2
110

Featured

See All Featured
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
710
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.2k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
190
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
310
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.6k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
190
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.9k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k

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