I this is a really general question, but what would be the best way to go about allowing users to customize the color of their logged in profile? Should I put css the inline? Nnd can I store the color values in something like a the session so they do not have to be looked up everytime?
A:
The beauty of css is the separation of style and content. If there are multiple style elements I would use separate stylesheets and swap out the call to the css file in the head.
Gideon
2009-12-28 06:15:41
A:
I think the way I would personally do is this way:
- Segregate the base colors and the colors/styles that can be customized by a user.
- Make a set of customizable user themes into separate CSS files.
- Based on user selection; I can user javascript (or to have a more granular control, JQuery) to dynamically change the script tag to point to different css resource.
This would give user the power to customize the look and feel and you the segregation of content for better maintainability.
Hope it makes sense, and above all; I hope thats' what you were asking. Cheers
Priyank
2009-12-28 07:20:18
If you want I can post some code to change css resource dynamically. Let me know.
Priyank
2009-12-28 07:20:45
A:
You can go with it in this way:
First of all you need to divide the regions or widgets that you want to allow user to be able to customize. Then you will create CSS classes, 2,3 or more for each element (region/widget). Then you need to give UI to use/select the different themes, color schemes and remember them for each user/widget using profile or cookies.
TheVillageIdiot
2009-12-28 07:23:20
A:
If you will be selecting creating the themes and allowing the user to select them, the best way would be to create a common stylesheet with properties such as position, float etc. but none of the color related properties. Then create a second one with the color related properties -- you can create as many of these as necessary. You can them import them using:
<link rel="stylesheet" type="text/css" src="common.css" />
<link rel="stylesheet" type="text/css" src="skin-blue.css" />
In a cookie you could just store one value, eg 'skin=skin-blue' and just import the correct stylesheet in the RoR layout.
Another option would be to use the alternate stylesheets technique described at http://www.alistapart.com/articles/alternate/ - this is completely client side so you'll have less to do on the RoR side while still giving users the flexability you want.
nichromium
2009-12-28 12:53:55
But does the alternative stylesheets technique mean that I would have to load every potential css skin?
TenJack
2010-01-28 05:51:36
If I recall correctly, the stylesheet is not downloaded until the user selects it since the rel is set to "alternate stylesheet", but of course this is browser dependent.However, the technique does require you to put in a <link> element for each skin stylesheet.
nichromium
2010-02-08 11:42:47
A:
Add a class to the body or wrapper using jquery if on the fly or just with php:
<body id='foo' class='bar<?php echo $user_class ? " $user_class" : '';?>'>
And have your CSS like this
body#foo.embarrassing .someElement
{
background-color: hotpink;
}
A quick JQuery would something like this:
$('.hotPinkButton').click(function(e){
$('body').addClass('hotpink');
//you can also do a if ($("body").hasClass( <#String class#> ))
$('body').removeClass('coldpink');
});
Gazzer
2009-12-29 05:01:17