Permalink
Browse files

Added doucmentation on changing fonts

Completes documentation part for BookStackApp/BookStack#423.
  • Loading branch information...
ssddanbrown committed Aug 26, 2017
1 parent 50cd408 commit 7700091580e945b59dddab88c35ec9354b71bdf8
Showing with 34 additions and 1 deletion.
  1. +34 −1 content/docs/admin/visual-customisation.md
@@ -1,7 +1,7 @@
+++
title = "Customising BookStack"
description = "Changing the colors, logo and styles of BookStack to suit your needs"
date = "2017-01-01"
date = "2017-08-22"
type = "admin-docs"
+++
@@ -10,6 +10,39 @@ Changing the app name will simply update the name displayed in the header and br
Changing the logo updates the logo shown in the header. This can be removed if you only want to display the chosen name.
Changing the app color will update the color of the header, links and the majority of buttons within the system.
### Changing Fonts
To change fonts you can make use of the 'Custom HTML head content' setting to add some CSS to alter fonts used.
Copy the code below and alter the font names to your desired fonts. Then paste this into the 'Custom HTML head content' box
in the admin settings of BookStack.
```html
<style>
body, button, input, select, label, textarea {
font-family: "Roboto", sans-serif;
}
.Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
font-family: monospace;
}
</style>
```
Here's an example of using the 'Lato' font from [Google Web Fonts](https://fonts.google.com):
```html
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<style>
body, button, input, select, label, textarea {
font-family: 'Lato', sans-serif;
}
.Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
font-family: monospace;
}
</style>
```
Note that this won't change anything in the settings screen for stability purposes.
### Further Customisation
If you need to customise BookStack further to the given controls in the settings area you can make use of the 'Custom HTML head content' setting. Using this you can add in any custom JavaScript or CSS content to override default BookStack functionality and styles.

0 comments on commit 7700091

Please sign in to comment.