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
0
340

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
860
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.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
830
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
680
Product design through stories
Avatar for Tammie Lister tammielis
1
390

Other Decks in Education

See All in Education
1202
Avatar for cbtlibrary cbtlibrary
0
210
渡辺研Slackの使い方 / Slack Local Rule
Avatar for kaityo256 kaityo256
PRO
10
11k
心理学を学び活用することで偉大なスクラムマスターを目指す − 大学とコミュニティを組み合わせた学びの循環 / Becoming a great Scrum Master by learning and using psychology
Avatar for Satoshi Harada psj59129
1
1.7k
SJRC 2526
Avatar for cbtlibrary cbtlibrary
0
200
TypeScript初心者向け完全ガイド
Avatar for MIKIO KUBO mickey_kubo
1
130
10分で学ぶ すてきなモナド
Avatar for soukouki soukouki
1
150
Padlet opetuksessa
Avatar for Matleena Laakso matleenalaakso
10
15k
HyRead2526
Avatar for cbtlibrary cbtlibrary
0
200
卒論の書き方 / Happy Writing
Avatar for kaityo256 kaityo256
PRO
54
28k
TinyGoをWebブラウザで動かすための方法+アルファ_20260201
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
2
230
外国籍エンジニアの挑戦・新卒半年後、気づきと成長の物語
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
740
JavaScript - Lecture 6 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.1k

Featured

See All Featured
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.5k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.6k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
2
250
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
130
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.7k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
1.9k
Design in an AI World
Avatar for tapps tapps
0
150
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
110
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k

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