I run and actively develop a forum (which in itself runs on heavily modified SMF 1.1.16) – one feature I would like to add is the ability for the user to pick custom colours (say 2-4) from a widget in the corner of the page to customize the colours of the forum.
The HTML output of the forum is structured such that modifying the colours can be done with pure CSS, and I’m wondering what the right way to insert this CSS is.
The idea I had was that once the user saves their colour information, a piece of javascript would generate the necessary CSS and save it using HTML5 localStorage (probably using a polyfill library). Then, on $(document).ready(), we check for this CSS being present and if it is, we inject it into the page head.
Is this approach sensible? It’s easy to develop, but will it result in a flicker of the usual styling (given that pages are rather heavyweight) before custom styling is applied?
If so, is there a better way to do this completely client-side? I would rather not involve the server if at all possible, but if I must I can just have the server generate CSS files for every user who saves custom styling.
What’s the best approach?
I suggest you have a base style for the page first so that there won’t be FOUC. Then, have your JS load the custom styles, parse it, and apply it to the page afterwards. You could do a “fade-in change” (like fade in the background etc) so the styles won’t load like a snap.
You could also blank the page first, like set the body to
display:none, before you load the styles, then after the styles are applied, remove thedisplay:noneYou also have to note that local storage has it’s size limit. Don’t load too much. Consider looking for the LZW compression in JS. It might help.