CSS Custom Theme
In Short
1: Create custom.css
- Create file named
custom.css
- Place it right next to
dendron.yml
file (at workspace level).
2: Modify Dendron Yaml
For Preview
preview:
theme: custom
For Publishing
publishing:
theme: custom
Dendron Doc
My CSS Snapshot
From My CSS Snapshot
Go to text ā
Could be behind the latest. But a pretty good starting point to try CSS custom theme out.
Refer to parent not CSS Custom Theme for links on how to use this.
:root {
--my-margin-top: 5px;
--my-margin-bottom: 5px;
--my-central-thought-font-size: 1.5em;
}
/*--------------------------------------------------------------------------------*/
/* ELEMENT OVERRIDES */
h1{
text-align: center;
}
h2{
font-weight: 300;
}
summary {
font-size: 1.1em;
}
/*noinspection CssUnresolvedCustomProperty*/
details[open].bordered-when-open {
border: 2px solid black;
padding: 10px;
margin-top: var(--my-margin-top);
margin-bottom: var(--my-margin-bottom);
border-radius: 5px;
}
/*--------------------------------------------------------------------------------*/
/* CLASSES */
.centered {
text-align: center;
}
/*noinspection CssUnresolvedCustomProperty*/
.bordered {
border: 2px solid black;
padding: 10px;
margin-top: var(--my-margin-top);
margin-bottom: var(--my-margin-bottom);
border-radius: 5px;
}
/*noinspection CssUnresolvedCustomProperty*/
.central-thought {
font-family: Papyrus, fantasy;
font-size: var(--my-central-thought-font-size);
font-style: italic;
font-weight: bold;
margin-top: var(--my-margin-top);
margin-bottom: var(--my-margin-bottom);
}
/*noinspection CssUnresolvedCustomProperty*/
.central-thought-centered {
text-align: center;
font-family: Papyrus, fantasy;
font-size: var(--my-central-thought-font-size);
font-style: italic;
font-weight: bold;
margin-top: var(--my-margin-top);
margin-bottom: var(--my-margin-bottom);
}
Children
Backlinks