Comment appliquer un thème commutable comme Twitter?

Je suis un programmeur débutant, un étudiant avec peu de connaissances sur la conception. Je développe un site de microblogging comme Twitter et je veux utiliser des styles préchargés (ou des thèmes) comme twitter, j'ai vu la page source d'un site web avec les mêmes caractéristiques, ils ne semblent pas utiliser des fichiers CSS différents Je ne comprends pas bien. Ma question est, comment puis-je l'appliquer à mon site Web? S'il vous plaît décrire de base car je n'ai pas beaucoup de connaissances sur ces choses! Merci d'avance!Comment appliquer un thème commutable comme Twitter?

Source

2013-02-16 bunty

Eh bien, d'abord, vous devrez donner à vos utilisateurs la possibilité de faire des changements. Disons que vous avez déjà cela.

Ce dont vous aurez besoin, c'est d'un fichier CSS de base qui a toutes les règles et tous les styles sauf ceux que vous autorisez vos utilisateurs à spécifier (ou dont ils ont des valeurs par défaut). Après qu'un utilisateur spécifie les règles, générez un fichier CSS, stockez-le dans son dossier utilisateur (ou une base de données, mais je ne le recommande pas), puis chargez ce CSS en plus du fichier CSS de base que vous avez, quelqu'un se connecte dans le profil de l'utilisateur.

Source

2013-02-16 13:55:13 Aviatrix

merci beaucoup pour votre effort ...! – bunty

Vous aurez probablement un fichier CSS central définissant un tas de choses qui ne changent pas, puis un fichier CSS secondaire qui fournit le "thème". Vous aurez plusieurs de ces fichiers secondaires, un pour chaque thème. Lors de la création de votre page, vous incluez uniquement un élément link pour l'un de ces fichiers.

Si vous souhaitez autoriser le changement de thèmes à la volée, vous pouvez le faire en changeant le href de cet élément link.

Ainsi par exemple, si l'on suppose un link comme ceci:

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

Ensuite ce code le change:

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

Exemple complet: 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; 
    } 

})();

Note: je les numéros pour les valeurs plutôt que des noms parce que j'utilisais JSBin. Dans la vraie vie, bien sûr, j'utiliserais des noms (green.css, blue.css, red.css, etc.).

Source

2013-02-16 13:55:28

merci beaucoup M. Crowder. J'apprécie ton aide. – bunty

@bunty: De rien! Content que cela ait aidé. –

Comment appliquer un thème commutable comme Twitter?

Répondre

Questions connexes