CODEWITHSUNDEEP
csslayoutthemes
egervari
egervari

Reputation: 22512

What is the best way to have custom css styles to theme a layout?

Let's say we have a massive CSS file that is used to style the layout of an application. Now, we want to let users change the colours of the layout to personalize it. What is the best way to do this customization, like in terms of design and architecture? I'm looking for a solution that is pretty easy to implement and isn't very intrusive.

I also don't want to make the whole css file templated on the server if I don't have to. I'd like to keep it in my /css file if it's possible, without any server dependencies.

Ideally, I'd like to just override the styles in the default, but I don't think that's possible as it will probably erase the existing styles. Which means I'll have duplicate style information as I overwrite them... which is also bad. Duplication = bad.

I guess we can assume that there's some server object related their account that has several properties for various colours, like backgrounds, menu tabs, link colours, hovered versions, etc.

public class Theme {

    private String headerBackground = "#172636";
    private String displayName = "#ffffff";

    private String tabBackground = "#284767";
    private String tabText = displayName;
    private String hoverTabBackground = tabBackground;
    private String hoverTabText = tabText;
    private String selectedTabBackground = "#f5f5f5";
    private String selectedTabText = "#172636";

    private String tableHeaderBackground = headerBackground;
    private String tableHeaderText = displayName;
    private String tableSubHeaderBackground = tabBackground;
    private String tableSubHeaderText = displayName;
    private String hoverTableRowBackground = "#c0d2e4";

    private String link = "#4e6c92";

My best guess is to just serve the entire css file and have my MVC framework merge the Theme with the css text and than serve it out. Is this the best way? Will that force the browser to never cache it?

My application is using Spring/Hibernate, but I'm pretty sure any recommendations even if you don't use Java/Spring will be doable with these technologies.

Thanks for the help.

Upvotes: 1

Views: 261

Answers (2)

Niklas Wulff
Niklas Wulff

Reputation: 3524

Oh, nice take. But it's very important to apply some filtering to the strings that the user supplies, otherwise you are exposing your application to some serious code injection attacks!

Upvotes: 0

GlennG
GlennG

Reputation: 3000

Letting visitors/users customise their look & feel can be rather fraught. You will need to store the properties in their profile to persist that look & feel across browser sessions.

In essence this means serving up their custom CSS file which you render on demand. You could cache this on their client and use client-side JS to re-load this file when/if they change their LAF preferences.

One way is to link to their stylesheet like this:

<link type="text/css" rel="stylesheet" href="siteStyles.css" />
<link type="text/css" rel="stylesheet" 
      href="customStylesheet.jsp?userId=123123123" />

You'd need a fairly stand-alone application listener that simply loads their profile and (probably) populates a template file using string replacements (or whatever is best). You'll need to make sure the response mime-type is set to "text/css". The browser will do the rest.

To force the browser to re-load the CSS file, simply add some guff, such as a version number, to the querystring:

<link type="text/css" rel="stylesheet" 
   href="customStylesheet.jsp?userId=123123123&vn=123" />

Upvotes: 3

Related Questions