CreatBot/CreatBotMainsail
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
702981e32423bf84de22f8337d9bdf6a6dc45bdd
CreatBotMainsail/docs/themes/custom-css.md
Paul Cutler 702981e324 docs: Review Themes Chapter in Documentation (#486) 
* Review Themes Chapter and fix typos, grammar and readability

Signed-off-by Paul Cutler paul@paulcutler.org
2022-01-19 22:45:23 +01:00

2.1 KiB
Raw Blame History

layout, title, parent, nav_order, permalink
layout title parent nav_order permalink
default Custom CSS Theming 30 /theming/custom-css

Custom CSS

The custom.css file allows you to customize the appearance of Mainsail without the need of rebuilding it. Place a file named custom.css in the .theme folder of your Mainsail installation and define your custom Cascading Style Sheets (CSS) rules inside the file.

file-screenshot

example result

Customizing the CSS

You need to be familiar with the CSS syntax to customize Mainsail. There are many resources available to learn CSS online, for example:

Finding the Element to Customize

You will need to use your browser's built in developer tools to find the element you want to customize. You can do this by clicking the "Developer Tools" button in the browser's toolbar or by right clicking on the page and choosing Inspect Element or press F12.

open dev-tools

  1. Activate the developer tools and inspector
  2. Select the desired element
  3. Find the selector
  4. Use the style editor to customize the element. Play around to find the style you like!

find element

fiddle

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

fiddle 2

Next copy it inside the "custom.css" file (you can keep everything or only what you have added)

example

NOTE: After saving, your browser may need a uncached reload to show the change. Visit Wikipedia to learn how.