Theming, Logo

With BNote 3.3.0 we introduce themes. Themes are coloring your BNote to fit your band's style. Furthermore you are able to change the BNote logo in a configurative way.

Colors / Themes

How do I change the theme of my BNote installation?

1. Make sure you are running BNote 3.3.0 or later and you have your BNote/config/config.xml updated properly (Theme and Logo tags added) if you migrated from a version below BNote 3.3.0.
2. Open BNote/config/config.xml and change the <Theme>default</Theme> line to one of the available themes. In the beginning we offer: default, green, red, orange, dark

How do I create my own theme?

1. Open BNote/style/css in your file explorer/browser
2. Copy the folder default and name it how you want to name your theme, e.g. "myband".
3. Open the colors.less file and change the HEX color codes to your needs.
4. Install less using npm (Installation Guide).
5. Go to BNote/style/css/myband and run lessc bnote.less > bnote.css.
6. Please make sure to run this every time you update BNote.

Logo

The requirements for to put your own logo in BNote are:

• your logo file should have a height of 44px
• please use PNG or JPG as a file format
• if possible, use a transparent background so it fits with the theme colors

How do I change the logo?

1. Copy your logo file in BNote/style/images.
2. For compatibility, please make sure your filename only contains alphanumeric characters, - and _. Do not use spaces or other special characters.
3. Open BNote/config/config.xml and change the <Logo>...</Logo> line to the name of your logo file.