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
290

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
740
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.6k
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
740
Opportunity of Open Source
Avatar for Tammie Lister tammielis
0
610
Product design through stories
Avatar for Tammie Lister tammielis
0
350

Other Decks in Education

See All in Education
マネジメント「される側」 こそ覚悟を決めろ
Avatar for Nao-RandD nao_randd
10
5.3k
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
Avatar for モブエンジニア masakiokuda
2
290
技術文章を書くための執筆技術と実践法（パラグラフライティング）
Avatar for Hisashi Ishihara hisashiishihara
18
6.4k
実務プログラム
Avatar for リスナビ takenawa
0
3.3k
演習問題
Avatar for リスナビ takenawa
0
3.3k
SkimaTalk Teacher Guidelines Summary
Avatar for SkimaTalk skimatalk
0
780k
新卒研修に仕掛ける 学びのサイクル / Implementing Learning Cycles in New Graduate Training
Avatar for takashi takashi_toyosaki
1
130
View Manipulation and Reduction - Lecture 9 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2k
プログラミング教育する大学、ZEN大学
Avatar for Soichiro Yoshimura sifue
1
520
ANS-C01_２回不合格から合格までの道程
Avatar for amarelo_n24 amarelo_n24
1
230
Data Presentation - Lecture 5 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
2.5k
Human-AI Interaction - Lecture 11 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
440

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
92
6.1k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
32
2.3k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
31
990
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.3k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.4k

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