mirror of
https://github.com/zadam/trilium.git
synced 2025-10-27 00:06:30 +01:00
docs(guide): advanced CSS customisation
This commit is contained in:
Elian Doran
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;
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user