Skip to content

Custom Themes

Jump to bottom Edit New page
stellarpower edited this page May 11, 2024 · 15 revisions

SnappyMail does support custom CSS themes.

The place where the theme should be is [root]/themes where [root] is the root of your SnappyMail installation (see below for Nextcloud).

So if you have something like /home/webmail/public_html/snappymail/v/0.0.0/ The custom themes should be in /home/webmail/public_html/themes/.

In there create a theme folder with file styles.css.
Like: [root]/themes/[themename]/styles.css.
You can copy the content of https://github.com/the-djmaze/snappymail/blob/master/snappymail/v/0.0.0/themes/example.css as a start for your custom theme. Or copy from https://github.com/the-djmaze/snappymail/blob/master/snappymail/v/0.0.0/themes/Default/styles.css

You can also use images like:

	--main-bg-image: url("images/background.jpg");

And store the image as [root]/themes/[themename]/images/background.jpg

Every other modification of the SnappyMail UI that can't be done in CSS has to be realized with a plugin. Plugins allow you for example to inject JS Code at the right time. Have a look at the Developer Documentation for more information about this topic.

Add a custom image to the login page

Rainloop had "premium features" like branding options. If you would like to use your company logo on the login page you can create your own custom theme and add something like this to your .css file:

#V-Login .descWrapper {
	background: url('/path/to/custom/logo.png');
	overflow: hidden;
	text-indent: -100em;
}

Problems with caching

Because SnappyMail caches your images and stylesheet, you need to clear up caches to be able to see changes immediately after editing styles.css as well as any other resources of your custom theme. Example if you are using apache:

rm -rf /home/webmail/public_html/data/_data_/_default_/cache && apachectl reload

Nextcloud

Place your custom theme at /var/www/html/themes/{YOUR_THEME}/snappymail/

snappymail folder should contain

style.css
preview.png

In the admin settings of snappymail, and in a user's settings_local, you can refer to this theme as YOUR_THEME@custom

Read https://github.com/the-djmaze/snappymail/issues/875, https://github.com/the-djmaze/snappymail/pull/629#issuecomment-1752025230

Modify HTML templates

This is not possible due to how templates are created and your theme will crash when there are modifications in the core.

Instead, you could write a plugin/extension that modifies templates using the JavaScript rl-view-model.create event. For examples you can look at the:

Add a custom footer
Add a custom sidebar
Clone this wiki locally