mirror of
https://github.com/zadam/trilium.git
synced 2025-10-19 14:49:01 +02:00
docs(guide): advanced CSS customisation
This commit is contained in:
Elian Doran
parent
ee8b41c81b
commit
713340a9ba
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 3.9 KiB |
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/3_Custom app-wide CSS_image.png
generated
vendored
Normal file
BIN
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/3_Custom app-wide CSS_image.png
generated
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
@ -1,53 +1,92 @@
|
||||
<p>It is possible to provide a CSS file to be used regardless of the theme
|
||||
set by the user.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="Custom app-wide CSS_image.png">
|
||||
</td>
|
||||
<td>Start by creating a new note and changing the note type to CSS</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="1_Custom app-wide CSS_image.png">
|
||||
</td>
|
||||
<td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="2_Custom app-wide CSS_image.png">
|
||||
</td>
|
||||
<td>Type the desired CSS.
|
||||
<br>
|
||||
<br>Generally it's a good idea to append <code>!important</code> for the styles
|
||||
that are being changed, in order to prevent other</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<figure class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="Custom app-wide CSS_image.png">
|
||||
</td>
|
||||
<td>Start by creating a new note and changing the note type to CSS</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="2_Custom app-wide CSS_image.png">
|
||||
</td>
|
||||
<td>In the ribbon, press the “Owned Attributes” section and type <code>#appCss</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="3_Custom app-wide CSS_image.png">
|
||||
</td>
|
||||
<td>Type the desired CSS.
|
||||
<br>
|
||||
<br>Generally it's a good idea to append <code>!important</code> for the styles
|
||||
that are being changed, in order to prevent other</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
<h2>Seeing the changes</h2>
|
||||
<p>Adding a new <em>app CSS note</em> or modifying an existing one does not
|
||||
immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh
|
||||
the page first.</p>
|
||||
<h2>Example use-case: customizing the printing stylesheet</h2>
|
||||
<h2>Sample use cases</h2>
|
||||
<h3>Customizing the printing stylesheet</h3>
|
||||
<p>When printing a document or exporting as PDF, it is possible to adjust
|
||||
the style by creating a CSS note that uses the <code>@media</code> selector.</p>
|
||||
<p>For example, to change the font of the document from the one defined by
|
||||
the theme or the user to a serif one:</p><pre><code class="language-text-x-trilium-auto">@media print {
|
||||
|
||||
body {
|
||||
|
||||
--main-font-family: serif !important;
|
||||
|
||||
--detail-font-family: var(--main-font-family) !important;
|
||||
|
||||
}
|
||||
|
||||
}</code></pre>
|
||||
<h3>Per-workspace styles</h3>
|
||||
<p>When using <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_9sRHySam5fXb">Workspaces</a>,
|
||||
it can be helpful to create a visual distinction between notes in different
|
||||
workspaces.</p>
|
||||
<p>To do so:</p>
|
||||
<ol>
|
||||
<li data-list-item-id="ebe7118e85ce0b3102e4333aef27c637d">In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with
|
||||
a value that uniquely identifies the workspace (say <code>my-workspace</code>).</li>
|
||||
<li
|
||||
data-list-item-id="e690ba825e168c5ec987f98c15f9b7a99">Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
|
||||
</ol>
|
||||
<h4>Change the color of the icons in the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a></h4><pre><code class="language-text-x-trilium-auto">.fancytree-node.my-workspace.fancytree-custom-icon {
|
||||
color: #ff0000;
|
||||
}</code></pre>
|
||||
<h4>Change the color of the note title and the icon</h4>
|
||||
<p>To change the color of the note title and the icon (above the content):</p><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .note-icon-widget button.note-icon,
|
||||
.note-split.my-workspace .note-title-widget input.note-title {
|
||||
color: #ff0000;
|
||||
}</code></pre>
|
||||
<h4>Add a watermark to the note content</h4>
|
||||
<figure class="image image-style-align-right image_resized" style="width:39.97%;">
|
||||
<img style="aspect-ratio:641/630;" src="1_Custom app-wide CSS_image.png"
|
||||
width="641" height="630">
|
||||
</figure>
|
||||
<ol>
|
||||
<li data-list-item-id="e9796dcbe19c3b9d39839533989b9e104">Insert an image in any note and take the URL of the image.</li>
|
||||
<li data-list-item-id="e8da975b80585c42193516ee5d8d8a56c">Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to
|
||||
the desired values.</li>
|
||||
</ol><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .scrolling-container:after {
|
||||
position: fixed;
|
||||
content: "";
|
||||
background-image: url("/api/attachments/Rvm3zJNITQI1/image/logo.png");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 237px;
|
||||
height: 44px;
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
opacity: 0.5;
|
||||
z-index: 0;
|
||||
}</code></pre>
|
||||
29
docs/User Guide/!!!meta.json
vendored
29
docs/User Guide/!!!meta.json
vendored
@ -9566,7 +9566,22 @@
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [],
|
||||
"attributes": [
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "9sRHySam5fXb",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "oPVyFC7WL2Lp",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
"dataFileName": "Custom app-wide CSS.md",
|
||||
"attachments": [
|
||||
@ -9579,7 +9594,7 @@
|
||||
"dataFileName": "Custom app-wide CSS_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "TIerrMjmeich",
|
||||
"attachmentId": "qBzZ9Qpxwoba",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
@ -9587,12 +9602,20 @@
|
||||
"dataFileName": "1_Custom app-wide CSS_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "YUrNq5vsCwHe",
|
||||
"attachmentId": "TIerrMjmeich",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "2_Custom app-wide CSS_image.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "YUrNq5vsCwHe",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "3_Custom app-wide CSS_image.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 3.9 KiB |
BIN
docs/User Guide/User Guide/Theme development/3_Custom app-wide CSS_image.png
vendored
Normal file
BIN
docs/User Guide/User Guide/Theme development/3_Custom app-wide CSS_image.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
@ -4,14 +4,16 @@ It is possible to provide a CSS file to be used regardless of the theme set by t
|
||||
| | |
|
||||
| --- | --- |
|
||||
|  | Start by creating a new note and changing the note type to CSS |
|
||||
|  | In the ribbon, press the “Owned Attributes” section and type `#appCss`. |
|
||||
|  | Type the desired CSS. <br> <br>Generally it's a good idea to append `!important` for the styles that are being changed, in order to prevent other |
|
||||
|  | In the ribbon, press the “Owned Attributes” section and type `#appCss`. |
|
||||
|  | Type the desired CSS. <br> <br>Generally it's a good idea to append `!important` for the styles that are being changed, in order to prevent other |
|
||||
|
||||
## Seeing the changes
|
||||
|
||||
Adding a new _app CSS note_ or modifying an existing one does not immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh the page first.
|
||||
|
||||
## Example use-case: customizing the printing stylesheet
|
||||
## Sample use cases
|
||||
|
||||
### Customizing the printing stylesheet
|
||||
|
||||
When printing a document or exporting as PDF, it is possible to adjust the style by creating a CSS note that uses the `@media` selector.
|
||||
|
||||
@ -19,14 +21,61 @@ For example, to change the font of the document from the one defined by the them
|
||||
|
||||
```
|
||||
@media print {
|
||||
|
||||
body {
|
||||
|
||||
--main-font-family: serif !important;
|
||||
|
||||
--detail-font-family: var(--main-font-family) !important;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
### Per-workspace styles
|
||||
|
||||
When using <a class="reference-link" href="../Basic%20Concepts%20and%20Features/Navigation/Workspaces.md">Workspaces</a>, it can be helpful to create a visual distinction between notes in different workspaces.
|
||||
|
||||
To do so:
|
||||
|
||||
1. In the note with `#workspace`, add an inheritable attribute `#cssClass(inheritable)` with a value that uniquely identifies the workspace (say `my-workspace`).
|
||||
2. Anywhere in the note structure, create a CSS note with `#appCss`.
|
||||
|
||||
#### Change the color of the icons in the <a class="reference-link" href="../Basic%20Concepts%20and%20Features/UI%20Elements/Note%20Tree.md">Note Tree</a>
|
||||
|
||||
```
|
||||
.fancytree-node.my-workspace.fancytree-custom-icon {
|
||||
color: #ff0000;
|
||||
}
|
||||
```
|
||||
|
||||
#### Change the color of the note title and the icon
|
||||
|
||||
To change the color of the note title and the icon (above the content):
|
||||
|
||||
```
|
||||
.note-split.my-workspace .note-icon-widget button.note-icon,
|
||||
.note-split.my-workspace .note-title-widget input.note-title {
|
||||
color: #ff0000;
|
||||
}
|
||||
```
|
||||
|
||||
#### Add a watermark to the note content
|
||||
|
||||
<figure class="image image-style-align-right image_resized" style="width:39.97%;"><img style="aspect-ratio:641/630;" src="1_Custom app-wide CSS_image.png" width="641" height="630"></figure>
|
||||
|
||||
1. Insert an image in any note and take the URL of the image.
|
||||
2. Use the following CSS, adjusting the `background-image` and `width` and `height` to the desired values.
|
||||
|
||||
```
|
||||
.note-split.my-workspace .scrolling-container:after {
|
||||
position: fixed;
|
||||
content: "";
|
||||
background-image: url("/api/attachments/Rvm3zJNITQI1/image/logo.png");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 237px;
|
||||
height: 44px;
|
||||
bottom: 1em;
|
||||
right: 1em;
|
||||
opacity: 0.5;
|
||||
z-index: 0;
|
||||
}
|
||||
```
|
||||
Loading…
x
Reference in New Issue
Block a user