简体繁体 English

可定制的CSS

[英]Customizable CSS

原文 2017-05-10 03:04:32 3 1 css/ user-interface/ client/ customization

I would like to create a website that would allow the client to log in to an admin page which would allow them to customize their site, such as their site's background color etc. Is there is a way to permanently change the CSS of the UI of the website without directly accessing the CSS file? 我想创建一个允许客户端登录到管理页面的网站，该页面将允许他们自定义其网站，例如网站的背景颜色等。是否可以永久更改UI的CSS网站而不直接访问CSS文件？ Essentially allowing a non-programmer to customize their own styles. 本质上允许非程序员自定义自己的样式。

1 个解决方案

If you're doing a custom development, let's say you want to customize things like: font size, UI colors, page width, etc... the way to go would be something like: 如果您要进行自定义开发，则假设您要自定义诸如字体大小，UI颜色，页面宽度等之类的内容。

Having a UI (at the backend) for all customizable things... that way user doesn't have to touch code, just select things, like filling a form. 具有用于所有可自定义内容的UI（在后端）...这样，用户不必触摸代码，只需选择诸如填写表单之类的内容即可。
With that information stored at the database, you will generate CSS styles accordingly, for instance, if you have a setting for "header background color" (with a nice color picker), you will generate a style like #header { background-color: #000 } (let's say that user selected black). 将这些信息存储在数据库中后，您将相应地生成CSS样式，例如，如果您设置了“标题背景颜色”（带有漂亮的颜色选择器），则将生成类似#header { background-color: #000 } （假设用户选择了黑色）。
You have here two options: putting all styles inside a <style> tag at the <head> , or using a separate stylesheet (which I'd recommend, for good practices sake), if you do a separate stylesheet, you'll have to write the file at the filesystem, and be sure of: custom stylesheet loads after the site stylesheet (or write all styles with greater specificity ). 您有两个选择：将所有样式放在<head>的<style>标记内，或使用单独的样式表（为方便起见，建议使用此样式表），如果执行单独的样式表，则以便将文件写入文件系统，并确保：自定义样式表在网站样式表之后加载（或以更高的特异性编写所有样式）。

That way you're not modifying permanently the site stylesheet, but adding an additional style layer which will override the default styling. 这样，您就不会永久修改网站样式表，而是添加了一个额外的样式层，它将覆盖默认样式。

Now, if you want to go on deep waters, I'd recommend to work with sass ... you could set a on-server sass compiling environment, and, when user selects modifications, you just modify the variables on the sass, and re-generate the CSS which will be loaded at the site. 现在，如果您想深入研究，我建议使用sass ...您可以设置服务器上的 sass编译环境，并且当用户选择修改时，您只需修改sass上的变量，然后重新生成将在站点加载的CSS。

Hope this helps. 希望这可以帮助。