|
|
| Author |
Message |
|
altair |
Posted: Sun 23 Sep 2007 - 08:16 Post subject: [Tuto] Sélecteur de Styles |
 |
|
Titre: Sélecteur de Styles
Version: 1.0
Auteur: altair
Contact Auteur: Messagerie privé
Source: recherches divers, ici et là et ailleurs.
Description: Sélecteur de style qui permet de changer l'apparence du forum en basculant entre la feuille de style par défaut et des feuilles de styles alternatives
Avantages: possibilité de changer les dimensions, positionnement, couleurs, taille, police, image de fond, etc.
Niveau d'installation: difficile
Temps d'installation: 15 min
Nombre de template(s) à modifier : 1
Fonctionne sur les thèmes : Tous
Test(s) effectué(s) sur :Xooit, Phpbb,
Compatible avec : Firefox, Internet Explorer...
Défaut(s) : à signaler
Exemple(s) : http://exprim.xooit.info voir le menu déroulant en haut
Allez dans votre Panneau d'administration, ensuite l'onglet Thème, puis Modifier les templates
I. Insérer le code de sélection
Ouvrez overall_header.tpl
Cherchez - Code: Sélectionner - Agrandir
</head>
Ajoutez avant
- Code: Sélectionner - Agrandir
<script type="text/javascript">
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);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
</script>
Sauvegardez et fermez
II. Ajoutez des feuilles de style alternatives
Choisir l'une des deux options suivantes :
Utilisez la feuille de style de votre thème de test yyyy.css
Personnalisez la feuille de style si besoin
Recopier son adresse url à partir de overall_header.tpl du thème de test
Faites une copie de la feuille de style de votre thème normale xxxx.css
Téléchargez et Sauvegardez sous un nouveau nom (exemple : style-2.css)
Personnalisez la nouvelle feuille de style (modifiez les dimensions, couleurs, tailles... )
Hébergez la feuille de style (par exemple ICI ou là)
récupérer son adresse url
Inserez l'adresse url de la feuille de style alternative dans le code suivant à la place de yyyy.css
- Code: Sélectionner - Agrandir
<link rel="alternate stylesheet" href="yyyy.css" type="text/css" title="style-2">
Ouvrez overall_header.tpl
Recherchez : le code de la feuille de style par défaut
- Code: Sélectionner - Agrandir
<link rel="stylesheet" href="xxxx.css" type="text/css">
Ajoutez un titre à la fonction, par exemple: title="style-1"
- Code: Sélectionner - Agrandir
<link rel="stylesheet" href="xxxx.css" type="text/css" title="style-1">
Ajoutez successivement après : le ou les codes des feuilles de style alternative
- Code: Sélectionner - Agrandir
<link rel="alternate stylesheet" href="yyyy.css" type="text/css" title="style-2">
Vous pouvez répéter la même opération pour avoir successivement :
- Code: Sélectionner - Agrandir
<link rel="stylesheet" href="xxxx.css" type="text/css" title="style-1">
<link rel="alternate stylesheet" href="yyyy.css" type="text/css" title="style-2">
<link rel="alternate stylesheet" href="zzzz.css" type="text/css" title="style-3">
Sauvegardez et fermez
III. Ajouter un menu déroulant (liste à choix multiples)
Cherchez dans overall_header.tpl
- Code: Sélectionner - Agrandir
<body>
Ajoutez après
- Code: Sélectionner - Agrandir
<center><form style="display: inline; margin:0;">
<select onchange="setActiveStyleSheet(this.options[this.selectedIndex].value);">
<option>Choisir un Style</option>
<option value="style-1"> Style par défaut </option>
<option value="style-2"> Style 2 </option>
<option value="style-3"> Style 3 </option></select>
</form></center>
Vou pouvez aussi utiliser de simples liens pour changer de styles
- Code: Sélectionner - Agrandir
<a href="#" onclick="setActiveStyleSheet('style-1'); return false;">style 1</a>
<a href="#" onclick="setActiveStyleSheet('style-2'); return false;">style 2</a>
<a href="#" onclick="setActiveStyleSheet('style-3'); return false;">style 3</a>
Sauvegardez et fermez
Vous pouvez remplacer 'Style par défaut', 'Style 2', 'Style 3'... par les noms que vous voulez
Vous pouvez placer le menu déroulant où vous voulez dans overall_header.tpl ou overall_footer.tpl
Si vous ajoutez un nouveau style vous devez lui ajouter un nouveau choix dans la liste déroulante
| Quote: | | <link rel="alternate stylesheet" href="vvvv.css" type="text/css" title="style-x"> |
| Quote: | | <option value="style-x"> Style x </option> |
pour changer le thème sélectionné par défaut, ajoutez y "selected" comme suit :
- Code: Sélectionner - Agrandir
<option value="style-3" selected> Style 3 </option>
Ensuite libre à vous de personnaliser chaque style à volonté, en vous basant sur les autres tutos des feuilles de style
vous pouvez par exemple avoir un style large pour les résolutions élevés et un autre réduit pour les faibles résolutions d'écran
vous pouvez avoir un style avec une taille de police plus grande pour personnes malvoyantes
vous pouvez mettre des images de fond différentes....
Deuxième méthode :
Cherchez et ajoutez ce qui est en rouge
| Quote: | | <!--link rel="stylesheet" href="xxxx.css" type="text/css"--> |
si la feuille de style est incluse dans overall_header.tpl
Cherchez et ajoutez ce qui est en rouge
Ajoutez le code ci-dessous avant </head>
Remplacez ce qui en rouge par les adresses exactes des feuilles de style
| Quote: | <script type="text/javascript">
if(document.cookie.indexOf('style=1')>=0)
document.write('<link rel="stylesheet" type="text/css" href="xxxx.css">\n');
else if (document.cookie.indexOf('style=2')>=0)
document.write('<link rel="stylesheet" type="text/css" href="yyyy.css">\n');
else if (document.cookie.indexOf('style=3')>=0)
document.write('<link rel="stylesheet" type="text/css" href="zzzz.css">\n');
else document.write('<link rel="stylesheet" type="text/css" href="xxxx.css">\n');
function chooseStyle (newstyle){
var expdate = new Date();
expdate.setTime(expdate.getTime() + (1000*3600*24*365));
document.cookie = 'style=' + newstyle + '; expires=' + expdate.toGMTString() + '; path=/';
self.location = self.location;
}
</script> |
Ajoutez après <body>
| Quote: | <center><form style="display: inline; margin:0;">
<select onchange="chooseStyle(this.options[this.selectedIndex].value);">
<option>Choisir un Style</option>
<option value="1">Style 1</option>
<option value="2">Style 2</option>
<option value="3">Style 3</option></select>
</form></center> |
Sauvegardez et fermez
Afin d'assortir la couleur de la publicité avec chaque style
Utilisez une pipette pour sélectionner la couleur dominante autour de la bannière
Cherchez et remplacez ce qui en rouge par le nouveau code couleur
| Quote: | body {
background-color: #ECF0F6; |
répétez la même opération avec chaque feuille de style
Ajouter ce qui est en rouge dans le code de la liste déroulante
code de la première méthode
| Quote: | | <select onchange="setActiveStyleSheet(this.options[this.selectedIndex].value);window.location.href=window.location.href"> |
code de la deuxième méthode
| Quote: | | <select onchange="chooseStyle(this.options[this.selectedIndex].value);window.location.href=window.location.href"> |
cela permet de rafraichir la page, et donc de synchroniser la couleur de la pub avec le nouveau style
Fin du Tuto _______________________

Last edited by altair on Thu 22 Nov 2007 - 11:46; edited 5 times in total
|
|
| Membre |

|
 Offline |
Joined: 14 Dec 2006
Posts: 388
Niveau: Point(s): 611 Moyenne: 1.57
|
 |
|
 |
|
D-war |
Posted: Sun 23 Sep 2007 - 09:05 Post subject: [Tuto] Sélecteur de Styles |
 |
|
J'ai pas compris le II Faut placer sa ou ? et comment la personnalisé ?
Comment savoir quelle et notre feuille de style? y'en na 2
Quelle URL ? ( Option1 )
comment mettre plusieurs style, vue qu'on n'a qu'une feuille de style...?!
J'ai pas trop compris....  _______________________ Guild Wars le Forum !
Astuces'Lords
Inscrivez-vous dessus !
Guild Wars : Vos Quêtes ! Vos alliances ! votre Guilde !
Recherche :1 Pubeur [URGENT]
|
|
| Membre |

|
 Offline |
Joined: 20 Feb 2007
Posts: 655
Niveau: Point(s): 402 Moyenne: 0.61
|
 |
|
 |
|
altair |
|
| Membre |

|
 Offline |
Joined: 14 Dec 2006
Posts: 388
Niveau: Point(s): 611 Moyenne: 1.57
|
 |
|
 |
|
D-war |
Posted: Sun 23 Sep 2007 - 09:52 Post subject: [Tuto] Sélecteur de Styles |
 |
|
Je comprend pas... Gas man pourra me le faire ?
SV¨P j'ai réussi que la première partis de ton tuto... _______________________ Guild Wars le Forum !
Astuces'Lords
Inscrivez-vous dessus !
Guild Wars : Vos Quêtes ! Vos alliances ! votre Guilde !
Recherche :1 Pubeur [URGENT]
|
|
| Membre |

|
 Offline |
Joined: 20 Feb 2007
Posts: 655
Niveau: Point(s): 402 Moyenne: 0.61
|
 |
|
 |
|
themalin |
|
| Membre |

|
 Online |
Joined: 19 Apr 2006
Posts: 43,079
Point(s): 42,558 Moyenne: 0.99 Trophées: 
|
 |
|
 |
|
biloute54 |
Posted: Sun 23 Sep 2007 - 20:56 Post subject: [Tuto] Sélecteur de Styles |
 |
|
Bonjour,
trés bon tuto, merci beaucoup car cela manquait sur xooit.

|
|
| Membre |

|
 Offline |
Joined: 03 Jun 2007
Posts: 110
Point(s): 100 Moyenne: 0.91
|
 |
|
 |
|
biloute54 |
Posted: Sat 29 Sep 2007 - 22:11 Post subject: [Tuto] Sélecteur de Styles |
 |
|
Bonsoir,
Peut t'on consevoir un code pour enregistrer définitivement les changements de styles.
Une fois le style choisi, un bouton enregistrer pour le conserver même aprés avoir quitter le forum.
Merci par avance.

|
|
| Membre |

|
 Offline |
Joined: 03 Jun 2007
Posts: 110
Point(s): 100 Moyenne: 0.91
|
 |
|
 |
|
altair |
|
| Membre |

|
 Offline |
Joined: 14 Dec 2006
Posts: 388
Niveau: Point(s): 611 Moyenne: 1.57
|
 |
|
 |
|
dragonnair |
Posted: Sun 30 Sep 2007 - 12:44 Post subject: [Tuto] Sélecteur de Styles |
 |
|
Bonjour,
J'adore ce tuto etje me demandais si on ne pouvait pas ainsi, mettre deux ou trois themes differents.... moi j'ai essaye et ca m' juste change le fond 
|
|
| Membre |

|
Offline |
Joined: 22 Jul 2007
Posts: 15
Niveau: Point(s): 29 Moyenne: 1.93
|
 |
|
 |
|
Arlem2 |
Posted: Sun 30 Sep 2007 - 14:13 Post subject: [Tuto] Sélecteur de Styles |
 |
|
Ouah pas mal. _______________________
|
|
| Membre |

|
 Offline |
Joined: 26 Jun 2006
Posts: 6,237
Point(s): 4,102 Moyenne: 0.66 Trophées: 
|
 |
|
 |
|
themalin |
Posted: Sun 30 Sep 2007 - 17:20 Post subject: [Tuto] Sélecteur de Styles |
 |
|
| dragonnair wrote: |
Bonjour,
J'adore ce tuto etje me demandais si on ne pouvait pas ainsi, mettre deux ou trois themes differents.... moi j'ai essaye et ca m' juste change le fond
|
bonjour
non tu peux juste modifier le thème que tu as mis _______________________
|
|
| Membre |

|
 Online |
Joined: 19 Apr 2006
Posts: 43,079
Point(s): 42,558 Moyenne: 0.99 Trophées: 
|
 |
|
 |
|
Arlem2 |
Posted: Mon 1 Oct 2007 - 17:42 Post subject: [Tuto] Sélecteur de Styles |
 |
|
Mais en modifiant les feuilles de style tu peux modifier les fomes et les couleurs donc pas très difficile de faire deux thème vraiments différents. _______________________
|
|
| Membre |

|
 Offline |
Joined: 26 Jun 2006
Posts: 6,237
Point(s): 4,102 Moyenne: 0.66 Trophées: 
|
 |
|
 |
|
Dany59 |
Posted: Tue 23 Oct 2007 - 21:43 Post subject: [Tuto] Sélecteur de Styles |
 |
|
Bonsoir tout le monde
Alors Altair, comme tu me l'as demandé, je fais un essai
- Code: Sélectionner - Agrandir
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
{META}
{NAV_LINKS}
<title>- {SITENAME} .::. {PAGE_TITLE}</title>
<link rel="stylesheet" href="http://img10.xooimage.com/files/m/y/mylgrimoire-343e1.css" type="text/css" />
<style type="text/css">
<!--
TH { background-image: url(http://img9.xooimage.com/files/c/e/cellpic3-343de.gif) }
TD.cat { background-image: url(http://img.xooimage.com/files/) }
TD.rowpic { background-image: url(http://img.xooimage.com/files/); background-repeat: repeat-y }
TD.catHead,TD.catSides,TD.catLeft,TD.catRight,TD.catBottom { background-image: url(http://img.xooimage.com/files/) }
-->
</style>
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
if ( {PRIVATE_MESSAGE_NEW_FLAG} )
{
window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
}
//-->
</script>
<!-- END switch_enable_pm_popup -->
</head>
<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<a name="top">[/url]
<table width="100%" cellspacing="0" cellpadding="30" border="0" align="center">
<tr>
<td class="bodyline2" width="30" align="left"><span class="gensmall">[img]http://img1.xooimage.com/files/_/ti/_-2f2a.gif[/img]</span></td>
<td class="bodyline" align="right"><table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" width="100%" valign="middle">[img]http://img4.xooimage.com/files/s/p/spacer3-343e2.gif[/img]<span class="maintitle">{SITENAME}</span>[img]http://img4.xooimage.com/files/s/p/spacer3-343e2.gif[/img]
<span class="gen">{SITE_DESCRIPTION}
</span>
<table cellspacing="0" cellpadding="5" border="0">
<tr>
<td align="center" valign="top" nowrap="nowrap"><span class="mainmenu"> [url=http://{u_faq}/][img]http://img8.xooimage.com/files/i/c/icon_mini-343df.gif[/img][/url]{L_FAQ} [url=http://{u_search}/][img]http://img8.xooimage.com/files/i/c/icon_mini-343df.gif[/img][/url]{L_SEARCH} [url=http://{u_memberlist}/][img]http://img8.xooimage.com/files/i/c/icon_mini-343df.gif[/img][/url]{L_MEMBERLIST} [url=http://{u_group_cp}/][img]http://img8.xooimage.com/files/i/c/icon_mini-343df.gif[/img][/url]{L_USERGROUPS} </span></td>
</tr>
<tr>
<td height="25" align="center" valign="top" nowrap="nowrap">
<!-- BEGIN switch_user_logged_out -->
<span class="mainmenu"> [url=http://{u_register}/][img]http://img8.xooimage.com/files/i/c/icon_mini-343df.gif[/img][/url]{L_REGISTER}</span>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
<span class="mainmenu"> [url=http://{u_profile}/][img]http://img8.xooimage.com/files/i/c/icon_mini-343df.gif[/img][/url]{L_PROFILE} [url=http://{u_privatemsgs}/][img]http://img8.xooimage.com/files/i/c/icon_mini-343df.gif[/img][/url]{PRIVATE_MESSAGE_INFO}</span>
<!-- END switch_user_logged_in -->
<span class="mainmenu"> [url=http://{u_login_logout}/][img]http://img8.xooimage.com/files/i/c/icon_mini-343df.gif[/img][/url]{L_LOGIN_LOGOUT} </span>
</td>
</tr>
</table></td>
</tr>
</table>
Dis moi, pourquoi les images apparaissent-elles dans le script? _______________________ Dany
Last edited by Dany59 on Wed 24 Oct 2007 - 06:39; edited 1 time in total
|
|
| Membre |

|
 Offline |
Joined: 23 Sep 2007
Posts: 25
Point(s): 20 Moyenne: 0.80
|
 |
|
 |
|
altair |
Posted: Tue 23 Oct 2007 - 23:47 Post subject: [Tuto] Sélecteur de Styles |
 |
|
Bonsoir
il faut mettre le code entre les balises [code] et [/code] sinon il s'altère
non pas ceux la <code> et </code>
c'est pour cela que des images apparaissent dans le code
mais pour l'instant c'est bon, je vais me baser sur le code que tu viens de poster _______________________

|
|
| Membre |

|
 Offline |
Joined: 14 Dec 2006
Posts: 388
Niveau: Point(s): 611 Moyenne: 1.57
|
 |
|
 |
|
Dany59 |
Posted: Wed 24 Oct 2007 - 06:43 Post subject: [Tuto] Sélecteur de Styles |
 |
|
OK c'est corrigé
j'en ai profité pour ajouter la fonction "spoiler" car sinon le message est bien long et il sera plus simple pour toi de le copier/coller si necessaire
merci d'avance de ton aide
bonne journée _______________________ Dany
|
|
| Membre |

|
 Offline |
Joined: 23 Sep 2007
Posts: 25
Point(s): 20 Moyenne: 0.80
|
 |
|
 |
|