$30 off During Our Annual Pro Sale. View Details »

CSS in the editor

Avatar for Tammie Lister Tammie Lister
September 30, 2020
Education
0
330

CSS in the editor

Workshop for WordPress

Avatar for Tammie Lister

Tammie Lister

September 30, 2020
Tweet

More Decks by Tammie Lister

See All by Tammie Lister
Growing the WordPress design system
Avatar for Tammie Lister tammielis
1
1.1k
Global styles the story so far
Avatar for Tammie Lister tammielis
1
820
Dropped stitches and tangled yarn - a call to simplify WordPress
Avatar for Tammie Lister tammielis
1
1.3k
Being Brave
Avatar for Tammie Lister tammielis
2
1.7k
Lessons from growing design in the open
Avatar for Tammie Lister tammielis
0
1.1k
Thinking in patterns
Avatar for Tammie Lister tammielis
0
43
Design matters in open source
Avatar for Tammie Lister tammielis
1
800
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
660
Product design through stories
Avatar for Tammie Lister tammielis
0
380

Other Decks in Education

See All in Education
2025年度伊藤正彦ゼミ紹介
Avatar for imash imash
0
130
Introdución ás redes
Avatar for i-rochiño irocho
0
510
Use Cases and Course Review - Lecture 8 - Human-Computer Interaction (1023841ANR)
Avatar for Beat Signer signer
PRO
0
1.3k
AIを使って最新研究 について調べて発表しよ う!
Avatar for MIKIO KUBO mickey_kubo
4
170
GOVERNOR ADDRESS：2025年9月29日合同公式訪問例会：2720 Japan O.K. ロータリーEクラブ、2025年10月6日卓話：藤田 千克由 氏（国際ロータリー第2720地区 2025－2026年度 ガバナー・大分中央ロータリークラブ・大分トキハタクシー（株）顧問）
Avatar for 2720 Japan O.K. ロータリーEクラブ 2720japanoke
0
710
卒論の書き方 / Happy Writing
Avatar for kaityo256 kaityo256
PRO
50
26k
Software
Avatar for i-rochiño irocho
0
650
CSS3 and Responsive Web Design - Lecture 5 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
1
3k
Réaliser un diagnostic externe
Avatar for FOURNIER martine
0
810
令和エンジニアの学習法 〜 生成AIを使って挫折を回避する 〜
Avatar for Yuduru moriga_yuduru
0
160
1021
Avatar for cbtlibrary cbtlibrary
0
370
ThingLink
Avatar for Matleena Laakso matleenalaakso
28
4.2k

Featured

See All Featured
Navigating Team Friction
Avatar for Lara Hogan lara
191
16k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.3k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
54k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k

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