diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/1_Custom app-wide CSS_image.png b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/1_Custom app-wide CSS_image.png index 97b8fc11d..225fcc24f 100644 Binary files a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/1_Custom app-wide CSS_image.png and b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/1_Custom app-wide CSS_image.png differ diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/2_Custom app-wide CSS_image.png b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/2_Custom app-wide CSS_image.png index 582152fe7..97b8fc11d 100644 Binary files a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/2_Custom app-wide CSS_image.png and b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/2_Custom app-wide CSS_image.png differ diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/3_Custom app-wide CSS_image.png b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/3_Custom app-wide CSS_image.png new file mode 100644 index 000000000..582152fe7 Binary files /dev/null and b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/3_Custom app-wide CSS_image.png differ diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html index 8e27cd82b..0bcbfcd64 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Theme development/Custom app-wide CSS.html @@ -1,53 +1,92 @@

It is possible to provide a CSS file to be used regardless of the theme set by the user.

- - - - - - - - - - - - - - - - - - - - - -
- - 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. -
-
Generally it's a good idea to append !important for the styles - that are being changed, in order to prevent other
- +
+ + + + + + + + + + + + + + + + + + + + + +
  
+ + 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.  +
+
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.

For example, to change the font of the document from the one defined by the theme or the user to a serif one:

@media print {
-
 	body {
-
         --main-font-family: serif !important;
-
         --detail-font-family: var(--main-font-family) !important;
-
     }
-
+}
+

Per-workspace styles

+

When using Workspaces, + 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. +
  2. Anywhere in the note structure, create a CSS note with #appCss.
    3. +
+

Change the color of the icons in the Note Tree

.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

+
+ +
+
    +
  1. Insert an image in any note and take the URL of the image.
    2. +
  2. Use the following CSS, adjusting the background-image and width and height to + the desired values.
    3. +
.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;
 }
\ No newline at end of file diff --git a/docs/User Guide/!!!meta.json b/docs/User Guide/!!!meta.json index 792b0eb2c..9957ce34c 100644 --- a/docs/User Guide/!!!meta.json +++ b/docs/User Guide/!!!meta.json @@ -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" } ] } diff --git a/docs/User Guide/User Guide/Theme development/1_Custom app-wide CSS_image.png b/docs/User Guide/User Guide/Theme development/1_Custom app-wide CSS_image.png index 97b8fc11d..225fcc24f 100644 Binary files a/docs/User Guide/User Guide/Theme development/1_Custom app-wide CSS_image.png and b/docs/User Guide/User Guide/Theme development/1_Custom app-wide CSS_image.png differ diff --git a/docs/User Guide/User Guide/Theme development/2_Custom app-wide CSS_image.png b/docs/User Guide/User Guide/Theme development/2_Custom app-wide CSS_image.png index 582152fe7..97b8fc11d 100644 Binary files a/docs/User Guide/User Guide/Theme development/2_Custom app-wide CSS_image.png and b/docs/User Guide/User Guide/Theme development/2_Custom app-wide CSS_image.png differ diff --git a/docs/User Guide/User Guide/Theme development/3_Custom app-wide CSS_image.png b/docs/User Guide/User Guide/Theme development/3_Custom app-wide CSS_image.png new file mode 100644 index 000000000..582152fe7 Binary files /dev/null and b/docs/User Guide/User Guide/Theme development/3_Custom app-wide CSS_image.png differ diff --git a/docs/User Guide/User Guide/Theme development/Custom app-wide CSS.md b/docs/User Guide/User Guide/Theme development/Custom app-wide CSS.md index 945d499e3..6b000e307 100644 --- a/docs/User Guide/User Guide/Theme development/Custom app-wide CSS.md +++ b/docs/User Guide/User Guide/Theme development/Custom app-wide CSS.md @@ -4,14 +4,16 @@ It is possible to provide a CSS file to be used regardless of the theme set by t | | | | --- | --- | | ![](Custom%20app-wide%20CSS_image.png) | Start by creating a new note and changing the note type to CSS | -| ![](1_Custom%20app-wide%20CSS_image.png) | In the ribbon, press the “Owned Attributes” section and type `#appCss`. | -| ![](2_Custom%20app-wide%20CSS_image.png) | Type the desired CSS.

Generally it's a good idea to append `!important` for the styles that are being changed, in order to prevent other | +| ![](2_Custom%20app-wide%20CSS_image.png) | In the ribbon, press the “Owned Attributes” section and type `#appCss`. | +| ![](3_Custom%20app-wide%20CSS_image.png) | Type the desired CSS. 

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 Workspaces, 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 Note Tree + +``` +.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 + +
+ +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; } ``` \ No newline at end of file