Theming - Zen

Theming

←5 / 30→

1) Where to put your CSSURL copied

Folder-level CSS (scoped)URL copied

Place a custom.css or style.css in any content folder to style the rendered post area for that folder and its subfolders.

Vyasa wraps that CSS inside a scoped selector:

Copied

#main-content.section-your-folder { ... }

This is for selectors that conceptually belong to the post content: headings, paragraphs, tables, images, code blocks, callouts, and other markdown output.

Back to doc view

2	✦
3	✦ > 1) Where to put your CSS
4	✦ > 1) Where to put your CSS > Root-level CSS (site-wide)
5	✦ > 1) Where to put your CSS > Folder-level CSS (scoped)
6	✦ > 1) Where to put your CSS > Folder-level global CSS
7	✦ > 1) Where to put your CSS > Example mental model
8	✦ > 2a) Built-in previous/next navigation
9	✦ > 2) How to find the section scope class
10	✦ > 3) DOM map (what you can target)
11	✦ > 3) DOM map (what you can target) > How to find selectors for obscure elements
12	✦ > 3) DOM map (what you can target) > What to do after you find a selector
13	✦ > 3) DOM map (what you can target) > Page structure
14	✦ > 3) DOM map (what you can target) > Sidebars
15	✦ > 3) DOM map (what you can target) > Mobile panels
16	✦ > 3) DOM map (what you can target) > Markdown content
17	✦ > 4) Global theming (background, typography, links)
18	✦ > 5) Navbar and footer
19	✦ > 6) Sidebars and TOC
20	✦ > 7) Code blocks and inline code
21	✦ > 8) Mermaid diagrams
22	✦ > 9) Footnotes / sidenotes
23	✦ > 10) Tabs
24	✦ > 11) Images and media
25	✦ > 12) Change behavior (JS + HTML)
26	✦ > 12) Change behavior (JS + HTML) > Option A: Custom JS
27	✦ > 12) Change behavior (JS + HTML) > Option B: Inline HTML/JS in Markdown
28	✦ > 13) Advanced: change the HTML structure
29	✦ > 14) Troubleshooting