0

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?

danbo
  • 246
  • 1
  • 3
  • 6

1 Answers1

1

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 the display:none

You 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.

Community
  • 1
  • 1
Joseph
  • 117,725
  • 30
  • 181
  • 234
  • 1
    The display: none sounds perhaps a little drastic but is a clever way of ensuring the user sees nothing before their colours are applied. Fades can mostly be done with CSS animations, but I'm thinking that could get really distracting since most users move through pages extremely quickly. But the main question I'm asking here is whether that "snap" will exist, and will it apply quickly enough to not be noticeable? What's the earliest point in the loading/rendering of a page I could inject the CSS into the head at? – danbo May 08 '12 at 10:35
  • @danny It's ideal that all styled be parsed before the body tag gets parsed. I suggest you do this custom style loader in the head. – Joseph May 08 '12 at 11:00