Merge remote-tracking branch 'origin/master'
This commit is contained in:
commit
ac24c8a47a
Binary file not shown.
After Width: | Height: | Size: 14 KiB |
BIN
docs/assets/img/customizing/screenshot-custom-css-example.png
Normal file
BIN
docs/assets/img/customizing/screenshot-custom-css-example.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.1 KiB |
BIN
docs/assets/img/customizing/screenshot-custom-css-fiddle-2.png
Normal file
BIN
docs/assets/img/customizing/screenshot-custom-css-fiddle-2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.0 KiB |
BIN
docs/assets/img/customizing/screenshot-custom-css-fiddle.png
Normal file
BIN
docs/assets/img/customizing/screenshot-custom-css-fiddle.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
After Width: | Height: | Size: 54 KiB |
BIN
docs/assets/img/customizing/screenshot-custom-css-inspect.png
Normal file
BIN
docs/assets/img/customizing/screenshot-custom-css-inspect.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 28 KiB |
@ -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.
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
|
||||||
|
### 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)
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
1. Activate the "inspector"
|
||||||
|
2. Select the desired element
|
||||||
|
3. Find the selector
|
||||||
|
4. Use the style editor and fiddle arround
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
When you have achieved your desired appearance copy the full "section" including selector and curly braces
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
Then copy it to the "custom.css" file (you can keep everything or only what you have added)
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
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)
|
||||||
|
@ -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** 🔥
|
||||||
|
Loading…
x
Reference in New Issue
Block a user