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
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
観察、仮説、実行、検証、計画、提案を一年で3000回トレーニングする方法/3000 Thinking Loops in 365 Days
Avatar for moriyuya moriyuya
4
370
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
2
2.3k
Dashboards - Lecture 11 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2.8k
[2026前期火５] 論理学（京都大学文学部 前期 第6回）「かつとまたはの規則」
Avatar for Shunsuke Yatabe yatabe
0
450
JAWS-UG初心者支部#81 GWにEduJAWSと何か作ろうもくもく会！
Avatar for おーつき otsuki
0
160
教育現場から見た Ruby on Rails
Avatar for YassLab yasslab
PRO
0
230
sepm-training-sample
Avatar for 株式会社レヴィ levii
0
110
[2026前期火５] 論理学（京都大学文学部 前期 第4回）「 ならば（→）の導入と証明ネット」
Avatar for Shunsuke Yatabe yatabe
0
520
Beyond the Prompt: Programming as a Pathway to Statistical Thinking
Avatar for Mine Cetinkaya-Rundel minecr
0
310
【セーフィー】テクニカルライティング&コミュニケーション実践講座（26新卒エンジニア向け研修資料）
Avatar for 山崎麻衣子 ymzaki_m4
0
280
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
1.1k
Throw Yourself In! - How I've learned English and What I'm Facing
Avatar for Takeshi "George" Matsuda georgeorge
1
210

Featured

See All Featured
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.7k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
290
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.2k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.1k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
210
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
520
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
380
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
480
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
23k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
330
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.3k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k

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