我这是一个非常普遍的问题,但是允许用户自定义其登录配置文件颜色的最佳方法是什么?我应该把css放在内联吗?Nnd 我可以将颜色值存储在会话之类的东西中,这样就不必每次都查找它们了吗?
5 回答
CSS 的美妙之处在于样式和内容的分离。如果有多个样式元素,我会使用单独的样式表并在头部换出对 css 文件的调用。
如果您将选择创建主题并允许用户选择它们,最好的方法是创建一个通用样式表,其中包含位置、浮动等属性,但没有与颜色相关的属性。然后使用与颜色相关的属性创建第二个 - 您可以根据需要创建任意数量的这些属性。您可以使用它们导入它们:
<link rel="stylesheet" type="text/css" src="common.css" />
<link rel="stylesheet" type="text/css" src="skin-blue.css" />
在 cookie 中,您可以只存储一个值,例如“skin=skin-blue”,然后在 RoR 布局中导入正确的样式表。
另一种选择是使用http://www.alistapart.com/articles/alternate/中描述的备用样式表技术- 这完全是客户端,因此您在 RoR 端可以做的事情更少,同时仍然为用户提供灵活性你要。
我认为我个人会这样做的方式是这样的:
- 分离基本颜色和可由用户自定义的颜色/样式。
- 将一组可自定义的用户主题制作成单独的 CSS 文件。
- 基于用户选择;我可以使用 javascript(或者更精细的控件,JQuery)来动态更改脚本标记以指向不同的 css 资源。
这将使用户能够自定义外观和感觉,并且您可以分离内容以获得更好的可维护性。
希望这是有道理的,最重要的是;我希望这就是你要问的。干杯
您可以通过以下方式使用它:
首先,您需要划分您希望允许用户能够自定义的区域或小部件。然后,您将为每个元素(区域/小部件)创建 2,3 个或更多的 CSS 类。然后,您需要让 UI 使用/选择不同的主题、配色方案,并使用配置文件或 cookie 为每个用户/小部件记住它们。
如果在运行中或仅使用 php,则使用 jquery 将类添加到正文或包装器:
<body id='foo' class='bar<?php echo $user_class ? " $user_class" : '';?>'>
让你的 CSS 像这样
body#foo.embarrassing .someElement
{
background-color: hotpink;
}
一个快速的 JQuery 会是这样的:
$('.hotPinkButton').click(function(e){
$('body').addClass('hotpink');
//you can also do a if ($("body").hasClass( <#String class#> ))
$('body').removeClass('coldpink');
});