Plusieurs designs sur la même page

Publié le par Francisek

Niveaux: 

Pour faire suite à un article jeté à la poubelle, je vous propose aujourd'hui un autre commutateur de feuilles de styles, plus robuste et performant que l'ancien (très vieux) que je proposais dans les débuts de ce blog. Ce script vous permettra d'appliquer à votre page web un design en remplacement des styles CSS externes existants.

Installation

Avant de procéder à l'installation, assurez-vous que :

  • vous pouvez insérer du javascript dans votre page (pour les over-blog, le niveau Privilège est requis).
  • vous avez préparé vos feuilles de styles et les avez envoyées sur un espace web direct (pas de putfile).

Tout est bon ? alors alors allons-y ...

  1. Téléchargez mon script (change-cssv2.zip)
  2. Décompressez le zip et éditez le fichier change-css.js qui s'y trouve (faites-le glisser sur votre éditeur de texte favori):
    • Si tous vos CSS sont dans le même dossier, vous pouvez définir l'url de celui-ci dans la ligne :
      this.css_url = "http://www.monsite.com/dossiers_css/";

      (n'oubliez pas le / à la fin du dossier),

      sinon vous devrez spécifier l'url de chaque CSS dans le point suivant.
    • Pour chacun de vos CSS, ajoutez à la variable autant de lignes comme celle qui suit, séparée par des virgules :
      new C_FSK_Style("fichier.css", "Titre du design", "type de feuille ", "media concerné ")
      Par exemple :
      new C_FSK_Style("fichier1.css", "Titre du design 1", "alternate stylesheet", "all"),
      new C_FSK_Style("fichier2.css", "Titre du design 2", "alternate stylesheet", "all")

      Si vos CSS ne sont pas dans le même dossier, vous devrez en spécifier l'url dans le nom du fichier.
  3. [Edit 07/03/2006]
    Un paramètre supplémentaire du script permet par défaut de mémoriser le style choisi  par votre visiteur dans un cookie (cela permet d'appliquer ce style à chacune de ses visites.
    Vous pouvez désactiver cette option en modifiant la ligne:
    this.memoPrefs = true;
    en
    this.memoPrefs = false;

    [/Edit]
  4. Sauvegardez vos modifications et envoyez votre fichier change-css.js sur le serveur de votre hébergeur.
  5. Insérez dans votre page (dans l'entête de préférence), en mode source, la ligne :
    <script type="text/javascript" </script>

Utilisation

Pour changer de feuille de style, vous devez appeler une fonction javascript dans votre page.

Vous disposez de deux méthodes de changement de feuilles de style :

  • Par le numéro de feuille (0 pour la première, 1 pour la deuxième ...)
    La fonction à appeler est MesCSS.AfficheCSSNum(numéro de feuille);
  • Par le titre du design
    La fonction est alors MesCSS.AfficheCSSNom("nom du style");
    Attention, le nom du style doit être strictement identique à celui défini plus haut.

Par exemple, vous pouvez placer dans votre page un lien qui affichera la première feuille de style :

<a href="#" onclick="javascript:MesCSS.AfficheCSSNum(0);">Premier design</a>

Lorsque le visiteur clique sur ce lien, la feuille de style est chargée et appliquée. Toutes les autres feuilles de style sont désactivées.

 

Vous pouvez aussi placer un bouton qui affichera le design nommé Titre du design 2 :

<input type="button" value="Afficher le design 2" onclick="javascript:MesCSS.AfficheCSSNom('Titre du design 2');"/>

 

Vous pourrez proposer à vos visiteurs des styles multiples, des pages d'accueil personnalisées, etc ... Les applications de designs ne sont limitées que par votre imagination !

Par exemple, vous pouvez appliquer le style nommé "Accueil" pour votre page d'accueil et un style nommé "Articles" pour les pages d'articles en plaçant ces lignes à la fin du script:

if(document.URL.indexOf(".html") == -1) MesCSS.AfficheCSSNom("Accueil");
if(document.URL.indexOf("article") > -1) MesCSS.AfficheCSSNom("Article");


Mais vous pourrez aussi simplement proposer plusieurs designs à vos visiteurs (leur choix ne sera pas mémorisé).

Publié dans Outils divers

Commenter cet article

Céline en Chine 17/06/2007 08:21

Ok capiche :)
je vais devoir retoucher mon style Shanghai alors...

Merci de ta réponse !

Céline 20/05/2007 13:52

Salut Francisek, long time no news comme on dirait ici.

Je me remets un peu à mon blog, et j'ai été bien contente de voir que tu avais concocté une nouvelle version de ton alternateur de CSS.

Je l'ai donc mis à jour sur mon blog. Ca marche dans les grandes lignes, mais il y a un truc bizarre qui se produit sur mon blog (http://www.celine-en-chine.com):
quand on change de CSS, certaines parties ne sont pas modifiées, et s'affichent comme sur le précédent CSS, alors que les images de fond par exemple, ou bien la couleur du texte devrait être complètement différentes.

Aurais-tu une idée de la cause du phénomène ?

Pour tester, il faut aller tout en bas, dans la colonne de gauche, et cliquer sur les Pucca sur fond de couleur différents.
Ex: quand tu choisis le style bordeaux, le texte des articles devrait être blanc, mais il reste marron comme sur le design original.
De même, les images de fond sur les dates des articles par exemple ne devrait plus d'afficher.

Merci de script et de ton aide ! :)

Francisek 21/05/2007 20:20

Salut Céline,No news, good news come on dirait ailleurs ...Tout d'abord cet altérnateur est encore très perfectible (certains styles doivent être redéfinis s'ils sont présents dans une feuille altérnative sous peine d'être conservés par IE).Ton problème provient du fait que l'altérnateur ne désactive pas le CSS contenu dans ton CSS original (= celui défini dans ton admin). Du coup, ta couleur de police provient de ce CSS puisqu'il n'est pas redéfini dans le style shangaï.Si tu définis la couleur de texte dans ce style, tout devrait être normal.
 Amitiés

Claudine 18/11/2006 15:38

Héhé, ça fonctionne effectivement, mais il faut que j'affine mes Css maintenant !!
Sinon, dans l'exemple que tu donnes, ce sont bien des guillemets doubles et non des simples, et de plus, je m'étais grave mélangé dans le nom des éléments !!
Merci encore !...

Francisek 19/11/2006 20:43

 
Oui dans le dernier exemple, ce sont bien des guillemets doubles, mais cet exemple concerne une fonction à rajouter au script. Ca prête à confusion, en effet.

Claudine 18/11/2006 14:44

Euh... ben non, ça ne fonctionne pas ! Mais j'ai des doutes pour plusieurs choses : est-ce que le script change-css doit se trouver dans le même dossier que les différents Css ou au dessus ?
Je ne suis pas sûre non plus pour les liens que j'ai créés, je me mélange entre le nom du fichier Css et l'appellation du design....

Francisek 18/11/2006 15:24

Arf, j'étais encore sur le script de déroulement des modules !! Ton erreur vient des guillemets utilisés dans tes liens. Mets des guillemets simples ( ' ) au lieu des doubles ( " ) comme dans l'exemple. Si ça ne marche pas, ça permettra au moins d'y voir un peu plus clair.
 

Claudine 17/11/2006 14:27

Rrrr ! Décidément, sans toi, je n'arrive à rien... Si ça te dit de jeter un œil, pour détexter mon erreur.... Je te remercie d'avance ! ;-)

Francisek 18/11/2006 13:13

 
Quelle erreur ? Ca fonctionne, non ?