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

CSS in the editor

Tammie Lister
September 30, 2020
Education
0
60

CSS in the editor

Workshop for WordPress

Tammie Lister

September 30, 2020
Tweet

More Decks by Tammie Lister

See All by Tammie Lister
Growing the WordPress design system
tammielis
1
210
Global styles the story so far
tammielis
1
280
Dropped stitches and tangled yarn - a call to simplify WordPress
tammielis
1
280
Being Brave
tammielis
2
510
Lessons from growing design in the open
tammielis
0
260
Thinking in patterns
tammielis
0
43
Design matters in open source
tammielis
1
230
Opportunity of Open Source
tammielis
0
190
Product design through stories
tammielis
0
180

Other Decks in Education

See All in Education
Sanapilvet opetuksessa
matleenalaakso
0
20k
【2022夏レポート】まなび場ぽろろ@北海道南幌町
ashitanoterakoya
0
160
Wikipedia概要説明 / About Wikipedia
barsaka2
0
460
Kullback-Leibler 距離のあれこれ / KL Divergence
kaityo256
PRO
0
360
JavaScript - Lecture 6 - Web Technologies (1019888BNR)
signer
PRO
0
1.3k
Web Application Frameworks - Lecture 4 - Web Technologies (1019888BNR)
signer
PRO
0
1.3k
oku-slide-20221115
okumakito
0
140
2122Top items
cbtlibrary
0
120
Rubyから広がるプログラミング入門教育〜小学校高学年向けプログラミング入門書『ユウと魔法のプログラミング・ノート』執筆から学んだこと〜
yotii23
2
360
「プログラミング的思考」から、「プログラミング」へ
asial_edu
0
260
アロマンティックアセクシャルによる恋愛解説 #1
umeta
0
410
Sähköiset kyselyt, kokeet ja arviointi
matleenalaakso
1
13k

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
23
4.4k
Building Adaptive Systems
keathley
25
1.3k
BBQ
matthewcrist
75
8.1k
Music & Morning Musume
bryan
36
4.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
8
1.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Scaling GitHub
holman
453
140k
Six Lessons from altMBA
skipperchong
15
1.6k
Happy Clients
brianwarren
89
5.7k
Designing Experiences People Love
moore
130
22k

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