r/FrostTheme • u/Romejanic • Nov 24 '17
How to install Frost in your own subreddit
Hello all!
This will serve as a step-by-step guide to installing Frost on your own subreddit, and how to make modifications to it or your subreddit after you have installed it.
The first step for installation is getting the CSS and sprites of the subreddit and uploading them to your own. Both resources are linked here for download:
Paste the minified CSS into your subreddit's stylesheet. DO NOT PRESS SAVE!
Upload the spritesheet (or make your own overwriting the sprites). Make sure it's name on reddit is "spritesheet".
Choose a background image. Upload it to your stylesheet as "frost-bg".
Open your background image in an image editor (such as Photoshop, Paint.NET, GIMP, etc) and add a gaussian blur effect. A radius of about 10px is recommended.
Upload the blurred background image to your stylesheet as "frost-bg-blur".
Click "Save".
Refresh the page. The theme should be installed!
PLEASE NOTE: to avoid lag when using the subreddit, avoid uploading background images larger than 200KB and 1000x1000px. And unless transparency is absolutely necessary, upload your images to Reddit as JPEG.
After this process is complete, you may customise the CSS however you would like, adding your own flair to the frosted backgrounds provided by the theme. If you would like to change the tint color of the blurred background on elements such as comment bodies, link bodies, content panes, etc., simply change the background-color rule of the element's CSS. For example:
.content {
/*
Makes the tint colour a shade of red.
AN ALPHA OF < 1 IS REQUIRED! The more alpha, the less blurry!
*/
background-color: rgba(255,0,0,0.75);
}Hope this helps, if you have any questions please reply to this thread or send me a PM and I will do my best to answer any questions.
Enjoy the theme!
Romejanic
Edit: Thanks to /u/Tollas for pointing out that the theme is not entirely compatible with IE 10/11 or below, as one of the required CSS rules does not work properly. So if you (for some reason) still care about supporting Internet Explorer, in addition to the usual installation instructions, you should:
Create an additional image, which is the same as your blurred background, and add a white semi-translucent layer to it. Upload it to Reddit as "frost-bg-blur-ie".
Add this CSS under the normal, minified CSS.
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #header, .comment, .content[role=main], .drop-choices, .footer, .side { background: url(%%frost-bg-blur-ie%%) center top fixed; background-size: cover; padding: 5px; border-radius: 7px; } }
