Les tutoriels de Jardinamel

Personnalisation du CSS du skin Chameleon

Tutoriel réalisé par Danamel le 22/01/2010

Pour voir la version imprimable faites -> Fichier -> Aperçu avant impression
Pour imprimer cliquez ci-contre

Le skin Chameleon offre déjà beaucoup de possibilités de personnalisation avec ses nombreux styles et sous-styles. Chaque style ou sous-style impose une couleur pour l'ensemble des textes et bordures et si pour le texte, la police et sa taille peuvent être déterminés dans l'onglet "Design", cela agit globalement.

Mais certains utilisateurs aimeraient personnaliser encore davantage leurs albums en faisant des modifications de couleurs des bordures et de couleurs et de taille des textes qui ne sont pas réalisables directement depuis l'interface.

C'est réalisable, mais pour cela il faut modifier manuellement le CSS de l'album réalisé.
Ou bien, ce qui est préférable, modifier directement le fichier css du sous-style utilisé avant de faire l'album.
Cette solution offre l'avantage en cas de modification de l'album de ne pas avoir besoin de refaire toutes les modifications.

Le but de ce tutoriel est de vous expliquer comment procéder en vous indiquant sur quelle partie de l'album chaque propriété de balise agit.

En css il y a 3 éléments différents :

Des noms de balises : exemple body, image, title...
Des propriétés CSS : par exemple color, font-size...
Les valeurs : à chaque propriété on doit indiquer une valeur.

Pour la couleur des textes il faut agir sur la valeur de la propriété color
Pour la taille des textes il faut agir sur la valeur de la propriété font-size
Pour le type de police des textes il faut agir sur la valeur de la propriété font-family
Pour la couleur des bordures il faut agir sur les valeurs de la propriété border

Après ce préambule voyons le css étape par étape.

Première chose, trouver le css.
Dans le cas de modification une fois l'album ralisé, celui-ci se trouve dans le dossier "res" du dossier "album" de votre album. En ouvrant ce dossier "res" vous allez trouver un fichier styles.css. C'est ce fichier qu'il faut modifier pour le personnalisé.
Dans le cas de modification avant de réalisé l'album, vous trouverez le fichier css du style dans le dossier styles de Chameleon et pour certains également dans le dossier substyles.

Vous pouvez ouvrir ce ou ces fichiers avec le bloc-notes de Windows mais je vous conseille d'utiliser Notepad++ que vous pouvez télécharger ICI
Celui-ci colore le code ce qui est plus clair pour effectuer les modifications.
Pendant que nous sommes dans les logiciels utiles, pour changer les couleurs un autre petit logiciel bien pratique pour avoir le code de la couleur choisie.
C'est "La boîte à couleur" que vous pouvez télécharger ICI

REMARQUE 1 : A chaque mise à jour de votre album soit pour ajout ou soit pour retrait de photos, même si vous conservez les paramètres, le fichier styles.css sera refait avec les réglages de départ et vous perdrez toutes vos modifications. Donc pour éviter cela, il faut sauvegarder votre fichier modifié dans un dossier de votre choix et après une mise à jour de l'album, remplacer le fichier styles.css par celui que vous avez sauvegardé au préalable.

REMARQUE 2 : Attention quand même de ne pas multiplier les couleurs et veillez à ce quelles s'harmonisent avec votre style. Pour la taille des textes, il faut faire attention pour le titre de l'album car le texte s'affiche sur une image dont la hauteur est fixe.

Balise body

Pour cette balise qui détermine l'apparence de l'ensemble de la page d'album, pour la modification de la propriété background vous pouvez vous reporter au tutoriel Trucs et Astuces jAlbum et Chameleon

body {
    font-family: Verdana, Arial, sans-serif; (Type de police - sélectionné dans l'onglet Design de préférence)
    font-size: 20px; (Taille de la police)
    color: #FFCC88; (Couleur de la police)
    margin: 0px; (Ne pas changer)
    padding: 0px; (Ne pas changer)
    background: #000000 url(bg.gif) repeat-x; (Voir ci-dessus)
}

Balise a

Cette balise agit sur la couleur des liens de l'ensemble de la page sauf sur le titre de l'album. Vous pouvez donner une couleur différente pour les liens normaux, visités ou au survol de la souris.

a:link { (Lien normal)
    text-decoration: none; (Ne pas changer)
    color: #FF9900; (Couleur de la police)
}
a:visited { (Lien visité)
    text-decoration: none; (Ne pas changer)
    color: #FF9900; (Couleur de la police)
}
a:hover { (Lien au survol de la souris)
    text-decoration: none; (Ne pas changer)
    color: #ffffff; (Couleur de la police)
}

Balise current

Cette balise agit sur la couleur du texte et du fond du numéro de la page d'index active si vous avez plusieurs pages évidemment.

.current {
    font-weight: bold; (Texte en gras)
    color: #FFCC88; (Couleur du numéro de la page active)
    background-color: #886622; (Couleur de fond du numéro de la page active)
}

Balise cthumb

Cette balise agit sur les vignettes de la page diaporama pour les styles n'utilisant pas d'images comme fond. (black par exemple)

.cthumb {
background-color: #886622; (Couleur du fond)
border: 1px solid #555555; (Epaisseur et couleur de la bordure)
}

Balise thumb

Cette balise agit sur les vignettes de la page d'index pour les styles n'utilisant pas d'images comme fond. (black par exemple)

.thumb {
background-color: #333333; (Couleur du fond)
border: 1px solid #555555; (Epaisseur et couleur de la bordure)
}

Balise image

Cette balise agit sur la bordure des vignettes de la page d'index. Normalement réglable depuis l'interface donc ne pas toucher sauf si vous voulez différencier avec les vignettes du diaporama.

.image { border: 1px solid #aaaaaa;} (Bordure - épaisseur, pleine, couleur)
a:link .image { border-color: #aaaaaa;} (Couleur bordure normale)
a:visited .image { border-color: #aaaaaa;} (Couleur bordure image vue)
a:hover .image { border-color: #ffffff;} (Couleur bordure au survol de la souris)

Balise mthumb

Cette balise agit sur la bordure des vignettes du diaporama. Normalement réglable depuis l'interface donc ne pas toucher sauf si vous voulez différencier avec les vignettes de la page d'index.

.mthumb { border: 1px solid #aaaaaa;} (Bordure - épaisseur, pleine, couleur)
a:link .mthumb { border-color: #aaaaaa;} (Couleur bordure normale)
a:visited .mthumb { border-color: #aaaaaa;} (Couleur bordure image vue)
a:hover .mthumb { border-color: #ffffff;} (Couleur bordure au survol de la souris)

Balise slideImage

Cette balise agit sur la bordure des images du diaporama. Normalement réglable depuis l'interface donc ne pas changer.

.slideImage { border: 8px solid #ffffff;} (Bordure - épaisseur, pleine, couleur) (Ne pas changer)
a:link .slideImage { border-color: #ffffff;} (Ne pas changer)
a:visited .slideImage { border-color: #ffffff;} (Ne pas changer)

Balise title

Cette balise agit sur la taille, la couleur et le gras du texte de l'ensemble du titre de l'album et ses sous-albums. Vous pouvez donner une couleur différente pour les liens normaux, visités ou au survol de la souris.

.title { (Titre de l'album ou sous-album actif)
    font-size: 100%; (Taille du texte en % de la taille indiquée dans l'interface)
    font-weight: bold; (Texte en gras)
    color: #000000; (Couleur du texte)
}
.title a:link { (Titre album lien retour au niveau supérieur)
    text-decoration: none; (Ne pas changer)
    color: #000000; (Couleur du texte)
}
.title a:visited { (Titre album niveau supérieur visité)
    text-decoration: none; (Couleur bordure au survol de la souris)
    color: #000000; (Couleur du texte)
}
.title a:hover { (Titre album au survol de la souris)
    text-decoration: none;     color: #008000; (Couleur du texte)
}

Balise infotable

Cette balise agit sur l'épaisseur, le type et la couleur des bordures périphériques et intérieures des tables contenant les textes au-dessus et au-desssous des index et des images.

.infotable { (Bordure périphérique des tables)
    border: 1px solid #665522; (Epaisseur et couleur bordure)
    border-collapse: collapse; (Type de bordure) (Ne pas changer)
}
.infotable td { (Bordure intérieure des tables)
    border: 1px solid #665522; (Epaisseur et couleur bordure)
}
.infotable table { (Ensemble de la page)
    border-collapse: separate; ( Type de bordure) (Ne pas changer)
}
.infotable table td { (Ensemble de la page)
    border: 0px; (Ne pas changer)
}

Balise dirname

Cette balise agit sur le texte du titre des sous-albums sur les pages d'index principaux.

.dirname {
    font-size: 100%; (Taille du texte en % de la taille indiquée dans l'interface)
    font-weight: bold; (Texte en gras)
    color: #FFCC88; (Couleur du texte)
}

Balise comment

Cette balise agit sur le texte des commentaires de l'image.

.comment {
    color: #FFCC88; (Couleur du texte)
    font-weight: bold; (Texte en gras)
    font-size: 100%; (Taille du texte en % de la taille indiquée dans l'interface)
}

Balise smalltxt

Cette balise agit sur le texte de la table de navigation des pages de l'index et sur le titre de l'mage mais pas les commentaires.

.smalltxt {
color: #997722; (Couleur du texte)
font-size: 90%; (Taille du texte en % de la taille indiquée dans l'interface)
}

Balise xsmalltxt

Cette balise agit sur le texte de la table d'info (Nbre d'image, dernière mise à jour, etc) sous image et index.

.xsmalltxt {
color: #997722; (Couleur du texte)
font-size: 80%; (Taille du texte en % de la taille indiquée dans l'interface)
}

Balise newlabel

Malgré une recherche dans mes différents albums, je n'ai pas trouvé l'usage de cette balise. Si quelqu'un trouve, je mettrai à jour ce tuto.

.newlabel {
    font-size: 70%; (Taille du texte en % de la taille indiquée dans l'interface)
    font-weight: bold; (Texte en gras)
    color: #EEEEEE; (Couleur du texte)
    background-color: #FF4400; (Couleur du fond)
}