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

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
760
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
760
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
620
Product design through stories
Avatar for Tammie Lister tammielis
0
360

Other Decks in Education

See All in Education
（キラキラ）人事教育担当のつらみ～教育担当として知っておくポイント～
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
130
Case Studies and Course Review - Lecture 12 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2.1k
仮説の取扱説明書/User_Guide_to_a_Hypothesis
Avatar for florets1 florets1
4
340
2025/06/05_読み漁り学習
Avatar for Ken Nagamine nag8
0
190
万博非公式マップとFOSS4G
Avatar for K.Sakanoshita barsaka2
0
910
『会社を知ってもらう』から『安心して活躍してもらう』までの プロセスとフロー
Avatar for sasakendayo sasakendayo
0
250
Transición del Management al Neuromanagement
Avatar for José Vicente Pérez Cubias jvpcubias
0
160
OpenSourceSummitJapanを運営してみた話
Avatar for Kujiraitakahiro kujiraitakahiro
0
770
予習動画
Avatar for リスナビ takenawa
0
15k
Pydantic(AI)とJSONの詳細解説
Avatar for MIKIO KUBO mickey_kubo
0
170
日本の教育の未来 を考える テクノロジーは教育をどのように変えるのか
Avatar for Kazuki Maeda kzkmaeda
1
230
モンテカルロ法(3) 発展的アルゴリズム / Simulation 04
Avatar for kaityo256 kaityo256
PRO
8
1.4k

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.8k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.8k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
890
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k

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