如何应用可切换的主题，如twitter？

我是一名初级程序员，一名大学生，对设计知之甚少。我正在开发一个微博客网站，如twitter，我想使用twitter等预加载的样式（或主题），我看到网页的页面源代码具有相同的功能，他们似乎并不使用不同的CSS文件我不明白。我的问题是，我如何将这个应用到我的网站？请从基本描述，因为我对这个东西没有太多的知识！在此先感谢。如何应用可切换的主题，如twitter？

来源

2013-02-16 bunty

好吧，首先你需要给你的用户做一些改变的能力。让我们说你已经有了。

你将需要的是一个基本的CSS文件，其中包含所有的规则和样式，除了你允许用户指定的规则和样式（或者有一些默认值）。

用户指定规则后，生成一个css文件，将其存储在他们的用户文件夹（或数据库，但我不建议这么做），然后加载该css文件，除了你有基本的css文件，何时有人登录到用户的配置文件中。

来源

2013-02-16 13:55:13 Aviatrix

非常感谢您的努力......！ – bunty 2013-02-16 14:24:08

您可能会有一个中心CSS文件来定义一堆不会改变的东西，然后是一个提供“主题”的辅助CSS文件。您将拥有几个辅助文件，每个主题一个。在构建页面时，只包含一个link元素用于其中一个文件。

如果您想允许即时更改主题，可以通过更改link元素的href来实现。

因此，举例来说，如果我们假设一个link这样的：

<link id="themeStyle" href="green.css" rel="stylesheet">

那么这个代码改变它：

document.getElementById("themeStyle").href = "blue.css":

完整的示例：Live Copy | Source

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
    <link id="themeStyle" href="/acofoy/1" rel="stylesheet"> 
</head> 
<body> 
    <div id="group"> 
    <div><label><input name="theme" type="radio" value="1" checked>Green</label></div> 
    <div><label><input name="theme" type="radio" value="2">Blue</label></div> 
    <div><label><input name="theme" type="radio" value="3">Red</label></div> 
    </div> 
</body> 
</html>

的JavaScript：

(function() { 

    var buttons = document.getElementById("group").getElementsByTagName("input"); 
    var index; 

    for (index = 0; index < buttons.length; ++index) { 
    buttons[index].onclick = setStyle; 
    } 

    function setStyle() { 
    document.getElementById("themeStyle").href = "/acofoy/" + this.value; 
    } 

})();

注：我使用的值数，而不是因为我用JSBin名。在现实生活中，当然，我会使用名称（green.css，blue.css，red.css等）。

来源

2013-02-16 13:55:28

非常感谢Crowder先生。我感谢您的帮助。 – bunty 2013-02-16 14:32:50

@bunty：不客气！很高兴这有帮助。 – 2013-02-16 14:35:15

如何应用可切换的主题，如twitter？

回答

相关问题