Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
390
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
970
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.9k
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
910
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
760
Product design through stories
Avatar for Tammie Lister tammielis
1
460

Other Decks in Education

See All in Education
2026年度秋学期　統計学　第5回　分布をまとめるー記述統計量（平均・分散など） (2026. 10. 27)
Avatar for Akira Asano akiraasano
PRO
0
210
Sekolah Sabat - Triwulan 4 2026 - Pelajaran 1
Avatar for Adam hiola
0
13k
Liburd and Stoll Farrell "Copyright Essentials From A to AI: A 2026 NISO Training Series, Session Three: Exceptions for Libraries"
Avatar for National Information Standards Organization baltimoreniso
0
130
AIができることを人はなぜ学ぶのか ― 専門性を育て、AIと学び続ける大学へ
Avatar for gmoriki | 森木銀河 gmoriki
0
190
Liburd and Stoll Farrell "Copyright Essentials From A to AI: A 2026 NISO Training Series, Session One: Foundations & Frameworks of Copyright"
Avatar for National Information Standards Organization baltimoreniso
0
140
The Dirty Dozen: 12 gala mistakes you don’t know you’re making
Avatar for Auctria auctria
PRO
0
260
【2028卒向け：デザイナー就活講座】キャリアスタートセミナー_Designer Lab_長谷部 航平
Avatar for ko hasebe koheihasebe
0
220
Liburd and Stoll Farrell "Copyright Essentials From A to AI: A 2026 NISO Training Series, Session Five: Open Movements & Author Rights"
Avatar for National Information Standards Organization baltimoreniso
0
130
パラグラフから始めるアカデミック・ライティング
Avatar for Seitaro Iwama neuroiwm
3
2.8k
Invest Early, Build Together
Avatar for Mebane Rash rashwhitman
0
990
Dronegeografía innovación didáctica y fotogrametría 3D para la enseñanza de la geografía local y la ciudadaniía activa
Avatar for Juan Martín Martín juanmartin2026
0
60k
HCI and Interaction Design - Lecture 2 - Human-Computer Interaction (1023841ANR)
Avatar for Beat Signer signer
PRO
0
2k

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
480
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
290
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.6k
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
3
940
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
3
800
Building an army of robots
Avatar for Kyle Neath kneath
307
47k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
68
60k

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