BookStack Code Mirror - website/blob - content/docs/admin/visual-customisation.md

 1 +++
 2 title = "Customising Visuals"
 3 description = "Changing the colors, logo and styles of BookStack to suit your needs"
 4 date = "2017-08-22"
 5 type = "admin-doc"
 6 +++
 7
 8 You may find you want to customise BookStack to use custom branding or you may just not like the default blue theme. Customising the branding of BookStack is super simple and can be done through the settings interface under 'App Settings'. Here you can change the application name, logo and the core colours used.
 9 Changing the app name will simply update the name displayed in the header and browser tab.
 10 Changing the logo updates the logo shown in the header. This can be removed if you only want to display the chosen name.
 11 Changing the app color will update the color of the header, links and the majority of buttons within the system.
 12
 13 ### Changing Fonts
 14
 15 To change fonts you can make use of the 'Custom HTML head content' setting to add some CSS to alter fonts used.
 16 Copy the code below and alter the font names to your desired fonts. Then paste this into the 'Custom HTML head content' box
 17 in the admin settings of BookStack.
 18
 19 ```html
 20 <style>
 21 body, button, input, select, label, textarea {
 22   font-family: "Roboto", sans-serif;
 23 }
 24 .Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
 25   font-family: monospace;
 26 }
 27 </style>
 28 ```
 29
 30 Here's an example of using the 'Lato' font from [Google Web Fonts](https://fonts.google.com):
 31
 32 ```html
 33 <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 34 <style>
 35 body, button, input, select, label, textarea {
 36   font-family: 'Lato', sans-serif;
 37 }
 38 .Codemirror, pre, #markdown-editor-input, .editor-toolbar, .code-base {
 39   font-family: monospace;
 40 }
 41 </style>
 42 ```
 43
 44 Note that this won't change anything in the settings screen for stability purposes.
 45
 46 ### Changing Code Block Themes
 47
 48 When inserting code into a page or when using the Markdown editor, the text you enter is highlighted by a default codemirror colour scheme.
 49 If you'd prefer a different colour scheme for code blocks this can be overridden. BookStack uses CodeMirror to render code blocks. You can [try out different themes here](https://codemirror.net/demo/theme.html#base16-light). Once you've chosen a theme note down the name.
 50
 51 In BookStack settings, Find the 'Custom HTML head content' setting and add the following code:
 52
 53 ```html
 54 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/theme/cobalt.min.css"/>
 55 <script>window.codeTheme='cobalt';</script>
 56 ```
 57
 58 In the above example we are setting the theme to `cobalt`. Change `cobalt` to the name of your desired theme on both of the above lines.
 59 The first lines adds the required theme styles, Fetched from [cdnjs](https://cdnjs.com/) whom generously host all CodeMirror files.
 60 The second line then sets the theme name which will be picked up when code blocks are rendered.
 61
 62 ### Default Book View
 63
 64 By default the `/books` page displays your books as a list. Users can change this option to list or grid view but if you'd like to set the default for public viewers or new users you can add the following to your `.env` file:
 65
 66 ```bash
 67 # Show grid view by default
 68 APP_VIEWS_BOOKS=grid
 69
 70 # Show list view by default
 71 APP_VIEWS_BOOKS=list
 72 ```
 73
 74 ### Further Customisation
 75
 76 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.
 77
 78 [View the Hacking BookStack](/docs/admin/hacking-bookstack/) page for more advanced ways to achieve deeper customisation.