StackBlur backgrounds

theme-component

(Joe) #1

:warning: This is not supposed to be used as a theme by itself.

This is a theme component that’s supposed to handle the background only. It’s supposed to be incorporated into your theme design.


Repo: GitHub - hnb-ku/StackBlur-backgrounds-discourse-theme-component

This component uses Mario Klingemann’s StackBlur library (2kb gzipped - MIT license) to generate high scroll performance blurred backgrounds based on an image you select in a <canvas> element.

Examples: (these are compressed so they have artifacts - the backgrounds are smooth)

If I use this photo:

Then the resulting Discourse background would look like this:

And on mobile

More samples with other images:

The quality of the image you use does not really matter because the blur is very forgiving so I recommend highly compressed jpgs no larger than 1080p - All you want is the colors.


Installation

Install the repo as you would with any other theme component:

Once that’s done follow these steps:

1- Create a new theme
2- Name it whatever you want
3- Add this in the common header section:

<canvas 
id="background_b" 
data-src='BACKGROUND_URL_GOES_HERE'
data-blur="BLUR_AMOUNT" 
></canvas> 

4- Change BACKGROUND_URL_GOES HERE to the url of your image
(Has to be either hosted on your domain or on a domain with correct CORS set up)

5- Change BLUR_AMOUNT to the desired amount of blur (0 - 180) higher means more blur.

5- Add StackBlur backgrounds as a theme component under your newly created theme.


:warning: Important

The demo samples use the “Simple Dark” color scheme

You may have noticed the slight dark background behind the topic list.

This is not a part of the theme component

That is achieved with the the following CSS:

#main-outlet {
    background: rgba(0, 0, 0, .5);
    padding-left: 2em;
    padding-right: 2em;
}

Also, the default mobile theme adds a solid color background to the <body> element so you would need to remove that if you want the blurred background to show on mobiles. You can do that like so:

.mobile-view {
	body {
		background: none;
	}
}