Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS in the editor

D36d2c1821af9249b69ff7f5ed60529b?s=47 Tammie Lister
September 30, 2020
Education
0
46

CSS in the editor

Workshop for WordPress

D36d2c1821af9249b69ff7f5ed60529b?s=128

Tammie Lister

September 30, 2020
Tweet

More Decks by Tammie Lister

See All by Tammie Lister
Growing the WordPress design system
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
32
Global styles the story so far
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
220
Dropped stitches and tangled yarn - a call to simplify WordPress
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
120
Being Brave
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
210
Lessons from growing design in the open
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
110
Thinking in patterns
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
43
Design matters in open source
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
1
87
Opportunity of Open Source
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
82
Product design through stories
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
0
160

Other Decks in Education

See All in Education
Baparekraf Developer Day 2022 - Blockchain (Asih Karnengsih)
349a7f52975989094c75c055f9f6ba25?s=48 dicodingevent
0
520
2 Mirovaya
E7961c4316256ebd3a2354fa73876bf6?s=48 libshare
0
220
Tangible, Embedded and Embodied Interaction - Lecture 9 - Next Generation User Interfaces (4018166FNR)
1135dc242dcff3b90ae46fc586ff4da8?s=48 signer
PRO
0
640
私の学振DC2体験談 (2021~2022年度 学振 DC2 採用) / JSPS DC Hosei Seminar 2023
5bea5748e87ba7a12c2f4a8595672366?s=48 shunk031
0
950
Baparekraf Developer Day 2022 - Back-End (Rendra Toro)
349a7f52975989094c75c055f9f6ba25?s=48 dicodingevent
0
500
Ruudunkaappausvideot ja Screencast-O-Maticilla tekstitys
18cdb6f294c8cb10a46167e462c2a51f?s=48 matleenalaakso
0
13k
Baparekraf Developer Day 2022 - Back-End (Dimas Maulana Dwi Saputra)
349a7f52975989094c75c055f9f6ba25?s=48 dicodingevent
0
470
Machine Learning Training
0d53016abcff5177475e210c6c480ff1?s=48 marisakamozz
1
320
World War I and the Red Scare
9d495f5d79fbbc9ddf3100da74f986c9?s=48 oripsolob
0
660
Moodle 4.0 : les nouveautés avec Pimenko
14b832a45ca90251ff3a52ac1daaed99?s=48 pimenko
0
270
2022年度データアナリティクスII-第2回-20220418
059fb717431a8cd2b509ffebc57d905a?s=48 trycycle
0
130
Media Literacy in the Age of Ferguson
9d495f5d79fbbc9ddf3100da74f986c9?s=48 oripsolob
0
160

Featured

See All Featured
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.4k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
E425fe9f170efa0dfaf8ab69d7107418?s=48 aki_i
23
15k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
27
1.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
5b9fe87ec1faa67a4599782930f45ec9?s=48 sstephenson
151
13k
5 minutes of I Can Smell Your CMS
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k
Imperfection Machines: The Place of Print at Facebook
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
12k
The MySQL Ecosystem @ GitHub 2015
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
11k
BBQ
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
74
7.9k
Automating Front-end Workflow
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k
Ruby is Unlike a Banana
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
9.2k
The Illustrated Children's Guide to Kubernetes
0438ae60cde4c7add6f9da48f28c15cc?s=48 chrisshort
14
36k

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