Merge remote-tracking branch 'origin/master'

This commit is contained in:
Stefan Dej 2021-02-20 21:37:12 +01:00
commit ac24c8a47a
8 changed files with 45 additions and 4 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

View File

@ -6,11 +6,49 @@ nav_order: 99
permalink: /customizing/custom-css permalink: /customizing/custom-css
--- ---
## Custom-CSS ## Custom-CSS
The custom.css file allows you to customize the appearance of Mainsail The custom.css file allows you to customize the appearance of Mainsail
without the need of rebuilding it. All you need to do is to place a file without the need of rebuilding it. All you need to do is to place a file
named "custom.css" into the configuration directory ".theme" and define named "custom.css" into the configuration directory ".theme" and define
your css rules in there. your css rules in there.
![screenshot](../assets/img/customizing/screenshot-custom-css.png) ![file-screenshot](../assets/img/customizing/screenshot-custom-css.png "custom.css file")
![example result](../assets/img/customizing/screenshot-custom-css-example-result.png "custom.css result")
### How to CSS
You need to be familiar with the CSS (**C**ascading **S**tyle **S**heets) syntax.
There are many resources to learn CSS online, for example:
- https://www.w3schools.com/css/default.asp
#### find the Element selector (example based on Chrome Browser)
Use your browser's built-in developer tools to find the right selector of the element you want to add your own flair to.
Open the developer tools:
right click anywhere on the page and select "inspect" (or F12 on the keyboard)
![open dev-tools](../assets/img/customizing/screenshot-custom-css-inspect.png "open dev-tools")
1. Activate the "inspector"
2. Select the desired element
3. Find the selector
4. Use the style editor and fiddle arround
![find element](../assets/img/customizing/screenshot-custom-css-find-element.png "find the right element")
![fiddle](../assets/img/customizing/screenshot-custom-css-fiddle.png "fiddle")
When you have achieved your desired appearance copy the full "section" including selector and curly braces
![fiddle 2](../assets/img/customizing/screenshot-custom-css-fiddle-2.png "fiddle 2")
Then copy it to the "custom.css" file (you can keep everything or only what you have added)
![example](../assets/img/customizing/screenshot-custom-css-example.png "custom.css example")
NOTE: After saving, your browser may need a uncached reload to show the change (https://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache#Bypassing_cache)

View File

@ -48,8 +48,11 @@ trusted_clients:
2a02:810d:9340:33f6::/64 2a02:810d:9340:33f6::/64
[update_manager] [update_manager]
client_repo: meteyou/mainsail
client_path: ~/mainsail [update_manager client mainsail]
type: web
repo: meteyou/mainsail
path: ~/mainsail
``` ```
> 🔥 **trusted_clients - read carefully** 🔥 > 🔥 **trusted_clients - read carefully** 🔥