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
940
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
730
Product design through stories
Avatar for Tammie Lister tammielis
1
430

Other Decks in Education

See All in Education
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
180
学習者データを「見る」：外国語教師のためのデータの入力、分析、解釈方法
Avatar for Ken Urano uranoken
0
150
第2部-高校生とAI活用/high-school2026-2
Avatar for Oka Natsuki okana2ki
0
120
BITCOIN : Les fondamentaux !
Avatar for Renaud Lifchitz rlifchitz
0
220
JAWS-UG初心者支部#81 GWにEduJAWSと何か作ろうもくもく会！
Avatar for おーつき otsuki
0
170
[2026前期火５] 論理学（京都大学文学部 前期 第12回）「証明を走らせる：カリー・ハワード対応」
Avatar for Shunsuke Yatabe yatabe
0
250
Beyond the Prompt: Programming as a Pathway to Statistical Thinking
Avatar for Mine Cetinkaya-Rundel minecr
0
320
プロポーザルを書く技術とアンチパターン/proposal-writing-and-antipatterns
Avatar for moriyuya moriyuya
13
3.7k
マークシート試験のTeX言語を用いた自動採点について
Avatar for doratex doratex
0
620
2026年度春学期　統計学　第11回　分布の「型」を考える － 確率分布モデルと正規分布 (2026. 6. 11)
Avatar for Akira Asano akiraasano
PRO
0
160
FA26 CLU MS Clinical Psychology New Student Orientation
Avatar for Jamie D. Bedics, PHD, ABPP jdbedics
0
130
0526
Avatar for cbtlibrary cbtlibrary
0
220

Featured

See All Featured
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.3k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
200
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
10k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.7k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
460
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
PRO
1
1.5k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
450
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.4k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.8k
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
3
1.1k

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