chore(docs): update with deterministic order
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 8.6 KiB |
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 8.8 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 69 KiB |
@@ -1,19 +1,19 @@
|
||||
# Creating a custom theme
|
||||
# Creating a custom theme
|
||||
## Step 1. Find a place to place the themes
|
||||
|
||||
Organization is an important aspect of managing a knowledge base. When 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. |
|
||||
|  | 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. |
|
||||
| --- | --- |
|
||||
|  | 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
|
||||
|
||||
@@ -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)
|
||||
|
||||
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)](Customize%20the%20Next%20theme.md)
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 26 KiB |
@@ -3,9 +3,9 @@ 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 |
|
||||
|  | 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 |
|
||||
|
||||
## Seeing the changes
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 12 KiB |