如何應用可切換的主題，如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？

回答

相關問題