Gokool
Site/blog
114 messages
|
posté le 2008-12-16 à 11:21:42
C' est possible.
Voici comment procéder:
En premier lieu, il va falloir créer plusieurs designs pour votre site web. Vous pouvez simplement changer les couleurs. Donc, vous aurez plusieurs feuilles de styles CSS. Par exemple : rouge.css, noir.css, et bleu.css. Dans ce tuto, nous allons voir comment les visiteurs pourront choisir le design de votre site !
Ce que nous allons faire, en résumé:
Vous allez tout d'abord créer quelques designs pour votre site web
Créer une page "design.js" avec le code JavaScript que nous allons voir
Créer une page "options.html" où les visiteurs choisiront le design du site
Intégrer à l'endroit souhaité dans "options.html" le code formulaire pour que les visiteurs choisissent le design
Intégrer en haut de "options.html" les codes pour les links
Tout transférer avec un logiciel FTP ou sur un service FTP en ligne, IFrance par exemple: http://web.ifrance.com/
A présent détaillons tout cela:
1)
Créer une page "design.js" qui retiendra le design choisit par le visiteur
Maintenant que vous savez ce que nous allons faire, commençons par créer une page qui permettra de mémoriser quel est le design choisit par le visiteur. Ainsi toutes les pages de votre site aura le design que le visiteur aura choisi !
Pour créer cette page, "design.js", il faut aller dans votre éditeur de texte et intégrer ce code JavaScript dans votre page nommée "design.js":
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")
&& !a.disabled) return a.getAttribute("title");
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
document.getElementById('button_skin_ok').style.display = 'none';
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
2) Créer une page "options.html" où les visiteurs choisiront le design du site
Biensur vous n'êtes pas obligé de créer une page "options.html". Vous pouvez intégrer l'option du choix du design dans un menu (comme je l'ai fait) ou n'importe où.
Prenons comme exemple que mes feuilles de style s'appellent "rouge.css", "noir.css" et mon design par défaut qui se nomme "design.css".
On intègre dans la page option ce code en forme formulaire :
<form id="skin_change" action="?">
<label for="skin">Changer de design</label><br/>
<!-- Légende pour le formulaire -->
<select id="skin" onchange="setActiveStyleSheet(this.form.skin.options[this.form.skin.selectedIndex].value)">
<option value="rouge">Super design rouge</option>
<!-- Remplacer "rouge" par la valeur de votre design -->
<option value="noir">Très beau design noir</option>
<!-- Remplacer "noir" par la valeur de votre design -->
<option value="sombre">Le design par défaut</option>
<!-- Remplacer "sombre" par la valeur de votre design -->
</select>
<input type="submit" id="button_skin_ok" value="OK" />
</form>
3) Intégrer en haut de "options.html" les codes pour les links
Il faudra remplacer les valeurs pour les designs en fonctions des votre et du code suivant que l'on intègre en haut de toute les pages de votre site au niveau des balises <link> entre les balises <head> et </head> :
<link rel="stylesheet" media="screen" type="text/css" title="sombre" href="design.css" />
<!-- Le design par défaut. Remplacer dans title="sombre" par votre valeur
et "design.css" par votre feuille de style -->
<link rel="alternate stylesheet" media="screen" type="text/css" title="rouge" href="rouge.css" />
<!-- Remplacer title="rouge" par votre valeur et "rouge.css" par votre feuille de style -->
<link rel="alternate stylesheet" media="screen" type="text/css" title="noir" href="noir.css" />
<!-- Remplacer dans title="noir" par votre valeur et "rouge.css" par votre feuille de style -->
<script type="text/javascript" src="design.js"></script>
Il faut intégrer ce code dans toutes les pages de votre site.
Vous remarquerez que les valeurs des designs du code se retrouvent dans les valeurs du code en forme de formulaire. Il faut donc faire attention à ne pas se tromper !
4) Dernière étape : Maintenant que tout est au point, il faut transférer tout votre site avec votre logiciel FTP !
Comme FTP ou hébergeur gratuit, vous pouvez comme je l' ai fait utiliser: http://web.ifrance.com/
Il ne faut pas oublier la page "design.js".
Voilà ^^ Bonne chance à tous ! 
Dernière modification le 17-12-2008 à 18:41:35
|
... PRIVATE
Fred, 
pour ton blog, pour le desingn, c'est super mais je reste classique(c'est l'age,) 
tu as gagné un vote pour le concours, Bonnes Fêtes 
(Ah moi aussi je suis Balance. Suny
|
Espace de gestion
|
Annuaire des blogs