Need a jQuery plugin that modifies a CSS

Question

I'm trying to create a page that allows a user to change the "look and feel" of the site. I would like to use something similar to jQuery's ThemeRoller or FireFox's Developer Tool. I can't force the user to use Firefox and I don't need all the options that the ThemeRoller has. I'm really only looking for header, background, font size and font type.

Any suggestions?

Thanks

Answer 1

If your concern is transferring fewer/smaller files and you really want to avoid jQuery UI, it would be quite easy to develop a small jQuery plugin to modify background, font-size/type, and some header stuff.

Since you ask about jQuery specifically, I assume you have some experience working with it. Check out the plugin authoring documentation at http://docs.jquery.com/Plugins/Authoring

If you aren't worried about transferring fewer/smaller files, just use jQuery UI themeroller and ignore the features you don't want.

Answer 2

Try a Stylesheet Switcher, it can be as advanced as you want and this will give you a lot more control the simple Div targeting.

http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

Answer 3

I couldn't find a plugin that already did this. I used Brosho to give me a base starting point. Brosho basically set's "Brosho: css info" to the element using the attr method. Then scans the entire document for Brosho to create the CCS to export.

Answer 4

Store the user's style attributes in a datastore (cookie or server based). Then on each page of the site have something like the following if user's preferences are stored server-side:

$(document).ready(function() {
  $("h1").css('color','<% =UsersHeaderFontColor');
  $("body").css('color','<% =UsersBodyFontColor');
  $("body").css('font-size','<% =UsersFontSize');
  $("body").css('font-family','<% =UsersFontFamily');
});

If you want to get from a cookie, then there's a nice jquery cookie plugin that would allow you to set/get cookie name/value pairs.