Sélecteur de style

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Sélecteur de style

Message par Ea le Jeu 7 Juil 2011 - 12:38

Sélecteur de style

Objet du tutoriel

    Il ne s'agit pas d'un changement complet de thème, mais de la possibilité pour les utilisateurs d'un choix entre plusieurs fichiers CSS différents.


Portée des changements possibles par du CSS

    Tout le style ( couleurs, police, marges, tailles, images de fond, ... ) mais pas les images mises en "dur" ( enfin en bidouillant un petit peu il y moyen de remplacer la plupart des images par des images de fond et donc pouvoir les modifier avec du CSS ).


Installation du sélecteur de style

    Il faut mettre ce code javascript ici sur toutes les pages ( voir les codes javascript ).

    Dans ce code il faut juste modifier la partie :

    Code:
    addstyle("Style 1","http://lien_d'un_fichier_css");
    addstyle("Style 2","http://lien_d'un_fichier_css");
    Le premier paramètre est le "nom" qu'on verra dans la liste déroulante, le second paramètre est l'adresse du fichier CSS qui sera utilisé si le style est choisi.

Tester du code CSS

    Pour arriver à des résultats que vous souhaitez pour vos différentes feuilles CSS, voilà une astuce ici montrant quelques moyens de le faire.

Héberger des feuilles CSS

    Une fois qu'on a nos codes de feuille CSS il faut les héberger. Pour ce faire il y a plusieurs méthodes :

    • Un hébergeur de fichier à accès direct permettant d'héberger du CSS : par exemple archive-host et peut-être en trouverez-vous d'autres ^^.

    • Un espace perso ( souvent disponible avec votre FAI/ISP ) où vous pouvez mettre des fichier par logiciel FTP ou par l'interface fournie par le fournisseur.

    • Ne pas uploader la feuille mais mettre directement la donnée : pour ce faire, il faut encoder en base 64 votre feuille ( par exemple "img {display:none;}" donne "aW1nIHtkaXNwbGF5Om5vbmU7fQ==", ensuite à la place de l'adresse il faudra mettre "data:text/css;base64," puis la donnée encodée en base 64 donc pour l'exemple "data:text/css;base64,aW1nIHtkaXNwbGF5Om5vbmU7fQ==" ). Cette méthode n'est pas à utiliser pour plus d'une centaine de caractère.

Exemple vidéo



Ea
Aidactif
Aidactif

Messages : 23424
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum