diff --git a/docs/User Guide/!!!meta.json b/docs/User Guide/!!!meta.json index 712fd5beb..047f6c807 100644 --- a/docs/User Guide/!!!meta.json +++ b/docs/User Guide/!!!meta.json @@ -4742,6 +4742,14 @@ "position": 10, "dataFileName": "10_Geo map_image.png" }, + { + "attachmentId": "IeXU8SLZU7Oz", + "title": "image.jpg", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "Geo map_image.jpg" + }, { "attachmentId": "Mx2xwNIk76ZS", "title": "image.png", @@ -5111,6 +5119,62 @@ "format": "markdown", "dataFileName": "Creating a custom theme.md", "attachments": [ + { + "attachmentId": "3kOhtnQHT9w0", + "title": "5_Creating%20a%20custom%20theme_im.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "Creating a custom theme_5_.png" + }, + { + "attachmentId": "7M6PnFYlxR2t", + "title": "3_Creating a custom theme_im.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "Creating a custom theme_3_.png" + }, + { + "attachmentId": "hJc5fBNfSLoY", + "title": "Creating a custom theme_im.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "Creating a custom theme_Cr.png" + }, + { + "attachmentId": "j3OaGihW6eg3", + "title": "1_Creating a custom theme_im.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "Creating a custom theme_1_.png" + }, + { + "attachmentId": "LCQ6zvUbvXQr", + "title": "4_Creating a custom theme_im.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "Creating a custom theme_4_.png" + }, + { + "attachmentId": "mY5EGlN7TO6I", + "title": "5_Creating a custom theme_im.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "1_Creating a custom theme_5_.png" + }, + { + "attachmentId": "TMHEj1M3XFGO", + "title": "2_Creating a custom theme_im.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "Creating a custom theme_2_.png" + }, { "attachmentId": "yJVfT7rjp4tI", "title": "image.png", @@ -6887,28 +6951,28 @@ { "type": "relation", "name": "internalLink", - "value": "KSZ04uQ2D1St", + "value": "_optionsTextNotes", "isInheritable": false, "position": 10 }, { "type": "relation", "name": "internalLink", - "value": "_optionsTextNotes", + "value": "_optionsCodeNotes", "isInheritable": false, "position": 20 }, { "type": "relation", "name": "internalLink", - "value": "MI26XDLSAlCD", + "value": "KSZ04uQ2D1St", "isInheritable": false, "position": 30 }, { "type": "relation", "name": "internalLink", - "value": "_optionsCodeNotes", + "value": "MI26XDLSAlCD", "isInheritable": false, "position": 40 }, diff --git a/docs/User Guide/User Guide/Theme development/1_Creating a custom theme_5_.png b/docs/User Guide/User Guide/Theme development/1_Creating a custom theme_5_.png new file mode 100644 index 000000000..f2e63f1ec Binary files /dev/null and b/docs/User Guide/User Guide/Theme development/1_Creating a custom theme_5_.png differ diff --git a/docs/User Guide/User Guide/Theme development/Creating a custom theme.md b/docs/User Guide/User Guide/Theme development/Creating a custom theme.md index d3d2fdca8..bc88acf63 100644 --- a/docs/User Guide/User Guide/Theme development/Creating a custom theme.md +++ b/docs/User Guide/User Guide/Theme development/Creating a custom theme.md @@ -5,15 +5,15 @@ Organization is an important aspect of managing a knowledge base. When developin As such, the first step is to create a new note to gather all the themes. -!\[\](4\_Creating%20a custom theme\_im.png) +![](1_Creating%20a%20custom%20theme_5_.png) ## Step 2. Create the theme | | | | --- | --- | -| ![](Creating%20a%20custom%20theme_im.png) | Themes are code notes with a special attribute. Start by creating a new code note. | -| !\[\](Creating%20a%20custom theme\_im.png) | Then change the note type to a CSS code. | -| !\[\](5\_Creating%20a%20custom theme\_im.png) | In the _Owned Attributes_ section define the `#appTheme` attribute to point to any desired name. This is the name that will show up in the appearance section in settings. | +| ![](Creating%20a%20custom%20theme_3_.png) | Themes are code notes with a special attribute. Start by creating a new code note. | +| ![](Creating%20a%20custom%20theme_1_.png) | Then change the note type to a CSS code. | +| ![](Creating%20a%20custom%20theme_Cr.png) | In the _Owned Attributes_ section define the `#appTheme` attribute to point to any desired name. This is the name that will show up in the appearance section in settings. | ## Step 3. Define the theme's CSS @@ -31,11 +31,11 @@ To alter the different variables of the theme: Refresh the application (Ctrl+Shift+R is a good way to do so) and go to settings. You should see the newly created theme: -!\[\](1\_Creating%20a%20custom theme\_im.png) +![](Creating%20a%20custom%20theme_2_.png) Afterwards the application will refresh itself with the new theme: -!\[\](3\_Creating%20a%20custom theme\_im.png) +![](Creating%20a%20custom%20theme_4_.png) Do note that the theme will be based off of the legacy theme. To override that and base the theme on the new TriliumNext theme, see: [Theme base (legacy vs. next)](Customize%20the%20Next%20theme.md) diff --git a/docs/User Guide/User Guide/Theme development/Creating a custom theme_1_.png b/docs/User Guide/User Guide/Theme development/Creating a custom theme_1_.png new file mode 100644 index 000000000..81a9d35c8 Binary files /dev/null and b/docs/User Guide/User Guide/Theme development/Creating a custom theme_1_.png differ diff --git a/docs/User Guide/User Guide/Theme development/Creating a custom theme_2_.png b/docs/User Guide/User Guide/Theme development/Creating a custom theme_2_.png new file mode 100644 index 000000000..d35262149 Binary files /dev/null and b/docs/User Guide/User Guide/Theme development/Creating a custom theme_2_.png differ diff --git a/docs/User Guide/User Guide/Theme development/Creating a custom theme_3_.png b/docs/User Guide/User Guide/Theme development/Creating a custom theme_3_.png new file mode 100644 index 000000000..743d51c8f Binary files /dev/null and b/docs/User Guide/User Guide/Theme development/Creating a custom theme_3_.png differ diff --git a/docs/User Guide/User Guide/Theme development/Creating a custom theme_4_.png b/docs/User Guide/User Guide/Theme development/Creating a custom theme_4_.png new file mode 100644 index 000000000..4f9583c7b Binary files /dev/null and b/docs/User Guide/User Guide/Theme development/Creating a custom theme_4_.png differ diff --git a/docs/User Guide/User Guide/Theme development/Creating a custom theme_5_.png b/docs/User Guide/User Guide/Theme development/Creating a custom theme_5_.png new file mode 100644 index 000000000..f2e63f1ec Binary files /dev/null and b/docs/User Guide/User Guide/Theme development/Creating a custom theme_5_.png differ diff --git a/docs/User Guide/User Guide/Theme development/Creating a custom theme_Cr.png b/docs/User Guide/User Guide/Theme development/Creating a custom theme_Cr.png new file mode 100644 index 000000000..94afbf424 Binary files /dev/null and b/docs/User Guide/User Guide/Theme development/Creating a custom theme_Cr.png differ diff --git a/src/public/app/doc_notes/en/User Guide/!!!meta.json b/src/public/app/doc_notes/en/User Guide/!!!meta.json index b51ff2969..b1974eaa4 100644 --- a/src/public/app/doc_notes/en/User Guide/!!!meta.json +++ b/src/public/app/doc_notes/en/User Guide/!!!meta.json @@ -4742,6 +4742,14 @@ "position": 10, "dataFileName": "10_Geo map_image.png" }, + { + "attachmentId": "IeXU8SLZU7Oz", + "title": "image.jpg", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "Geo map_image.jpg" + }, { "attachmentId": "Mx2xwNIk76ZS", "title": "image.png", @@ -5111,6 +5119,62 @@ "format": "html", "dataFileName": "Creating a custom theme.html", "attachments": [ + { + "attachmentId": "3kOhtnQHT9w0", + "title": "5_Creating%20a%20custom%20theme_im.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "Creating a custom theme_5_.png" + }, + { + "attachmentId": "7M6PnFYlxR2t", + "title": "3_Creating a custom theme_im.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "Creating a custom theme_3_.png" + }, + { + "attachmentId": "hJc5fBNfSLoY", + "title": "Creating a custom theme_im.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "Creating a custom theme_Cr.png" + }, + { + "attachmentId": "j3OaGihW6eg3", + "title": "1_Creating a custom theme_im.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "Creating a custom theme_1_.png" + }, + { + "attachmentId": "LCQ6zvUbvXQr", + "title": "4_Creating a custom theme_im.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "Creating a custom theme_4_.png" + }, + { + "attachmentId": "mY5EGlN7TO6I", + "title": "5_Creating a custom theme_im.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "1_Creating a custom theme_5_.png" + }, + { + "attachmentId": "TMHEj1M3XFGO", + "title": "2_Creating a custom theme_im.png", + "role": "image", + "mime": "image/jpg", + "position": 10, + "dataFileName": "Creating a custom theme_2_.png" + }, { "attachmentId": "yJVfT7rjp4tI", "title": "image.png", @@ -6887,28 +6951,28 @@ { "type": "relation", "name": "internalLink", - "value": "KSZ04uQ2D1St", + "value": "_optionsTextNotes", "isInheritable": false, "position": 10 }, { "type": "relation", "name": "internalLink", - "value": "_optionsTextNotes", + "value": "_optionsCodeNotes", "isInheritable": false, "position": 20 }, { "type": "relation", "name": "internalLink", - "value": "MI26XDLSAlCD", + "value": "KSZ04uQ2D1St", "isInheritable": false, "position": 30 }, { "type": "relation", "name": "internalLink", - "value": "_optionsCodeNotes", + "value": "MI26XDLSAlCD", "isInheritable": false, "position": 40 }, diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/1_Creating a custom theme_5_.png b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/1_Creating a custom theme_5_.png new file mode 100644 index 000000000..f2e63f1ec Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/1_Creating a custom theme_5_.png differ diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html index 4804ec856..b4e9cb7bc 100644 --- a/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html +++ b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme.html @@ -18,37 +18,53 @@ developing a new theme or importing an existing one it's a good idea to keep them into one place.

As such, the first step is to create a new note to gather all the themes.

-

![](4_Creating%20a custom theme_im.png)

+

+ +

Step 2. Create the theme

- - - - - - - - - - - - - - - - - - - - - -
- - Themes are code notes with a special attribute. Start by creating a new - code note.
![](Creating%20a%20custom theme_im.png)Then change the note type to a CSS code.
![](5_Creating%20a%20custom theme_im.png)In the Owned Attributes section define the #appTheme attribute - to point to any desired name. This is the name that will show up in the - appearance section in settings.
- -

Step 3. Define the theme's CSS

+
+ + + + + + + + + + + + + + + + + + + + + +
  
+
+ +
+ 		Themes are code notes with a special attribute. Start by creating a new + code note.
+
+ +
+ 		Then change the note type to a CSS code.
+
+ +
+ 		In the Owned Attributes section define the #appTheme attribute + to point to any desired name. This is the name that will show up in the + appearance section in settings.
+
+

Step 3. Define the theme's CSS

As a very simple example we will change the background color of the launcher pane to a shade of blue.

To alter the different variables of the theme:

:root {
@@ -57,9 +73,13 @@
         
Step 4. Activating the theme

         
Refresh the application (Ctrl+Shift+R is a good way to do so) and go to
           settings. You should see the newly created theme:

-        
![](1_Creating%20a%20custom theme_im.png)

+        

+          
+        

         
Afterwards the application will refresh itself with the new theme:

-        
![](3_Creating%20a%20custom theme_im.png)

+        

+          
+        

         
Do note that the theme will be based off of the legacy theme. To override
           that and base the theme on the new TriliumNext theme, see: Theme base (legacy vs. next)
         

diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_1_.png b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_1_.png
new file mode 100644
index 000000000..81a9d35c8
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_1_.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_2_.png b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_2_.png
new file mode 100644
index 000000000..d35262149
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_2_.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_3_.png b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_3_.png
new file mode 100644
index 000000000..743d51c8f
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_3_.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_4_.png b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_4_.png
new file mode 100644
index 000000000..4f9583c7b
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_4_.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_5_.png b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_5_.png
new file mode 100644
index 000000000..f2e63f1ec
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_5_.png differ
diff --git a/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_Cr.png b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_Cr.png
new file mode 100644
index 000000000..94afbf424
Binary files /dev/null and b/src/public/app/doc_notes/en/User Guide/User Guide/Theme development/Creating a custom theme_Cr.png differ