Impressum

Images d’arrière plan et éléments graphiques de Sarka-SPIP sans toucher aux fichiers CSS

vendredi 2 mars 2012
par  François Daniel Giezendanner
popularité : 1%
3 votes

 Créer un thème

La version 3 de Sarka-SPIP permet d’utiliser des thèmes pour simplifier la personnalisation. Il est en outre aisé de créer des thèmes en utilisant la puissance de l’interface de configuration du squelette, sans écrire une ligne de code - ou presque - et en se consacrant uniquement au design.

Il est cependant recommandé de connaître a minima les propriétés CSS relatives aux images d’arrière plan dont vous trouverez un résumé dans l’article Config Sarka/styles - case propriétés des arrières-plan sur le site de Shizuka.

Les étapes de création d’un thème ont décrites dans l’article :

que vous êtes invités à lire avant de passer à la suite de cet article.


 Installation du kit de démarrage

Le but de ce kit est d’installer une ossature de base, répertoires et fichiers, constituant un thème vide mais fonctionnel, au sens de Zen Garden, et prêt à être personnalisé. Ce kit est à installer dans le dossier themes/.

Pour ce faire, sur la page Créer un thème, télécharger l’archive jointe sarkaspip_nomdutheme.zip et copiez la dans le répertoire themes/ et dézippez la. Ce dossier « theme/sarkaspip_nomdutheme/ » comprend les sous-dossiers et fichiers suivants :

/cfg/
/images/
/noisettes/
vignette.jpg
plugin.xml

Ensuite, renommer le dossier sarkaspip_nomdutheme/ en remplaçant « nomdutheme » par le nom de votre choix mais en laissant le préfixe « sarkaspip » pour bien identifier ces thèmes de ceux de ZPIP, par exemple.


 Définition des éléments graphiques du thème

La configuration du squelette

La première étape dans la construction graphique du thème consiste à utiliser l’outil de configuration du squelette. En effet, la base d’un thème Sarka-SPIP est constituée par le paramétrage des pages de configuration :

  • « Layout », « Bandeau » et « Pied de page », qui définissent l’agencement des zones du squelette ainsi que les blocs visibles dans chacune de ces zones
  • « Styles », qui définit couleurs, décorations et images de fond
  • « Coins arrondis », qui permet d’arrondir certains blocs sans utiliser les CSS. Néanmoins, il est recommandé de ne pas utiliser cette fonction sachant que la méthode choisie pose des problèmes sur certains navigateurs.

Seuls les éléments structurant ont un intérêt à être défini, comme le layout, l’affichage du bloc bandeau haut ou bandeau bas, l’affichage du pied de page...

Par contre, fixer le titre du site, l’affichage du menu des pages spéciales dans le bandeau, les informations du pied de page n’a aucun intérêt car les utilisateurs doivent avoir le choix de ces paramètres : il est donc conseillé de laisser les valeurs par défaut pour ces paramètres.

Ensuite, le plus gros du travail consiste à configurer les couleurs, les décorations et autres images de fond via la page de configuration « Styles ». Pour être prises en compte, les images de fond doivent être placées dans themes/nom_du_theme/images/.

Attention, n’oubliez pas de sauvegarder régulièrement vos modifications des pages de configuration - via la page de « Maintenance » - pour éviter de recommencer votre travail en cas de manipulation erronée.


 Le jeu d’icônes

Nous considérons ici l’étape qui consiste à adapter l’iconographie du squelette au thème : favicon, puces, boutons... Sarka-SPIP propose en standard un jeu d’icônes décliné dans 11 couleurs différentes : mais rien ne vous interdit d’en créer d’autres, voire de les proposer pour enrichir la collection actuelle.

Bien entendu, ces icônes doivent être déposés dans le dossier themes/nom_du_theme/images/.


 Images d’arrière plan

Nous reprenons ici les informations décrites dans les pages :

Pour profiter pleinement de cette option, vous pouvez installer le plugin « Palette » qui permet de visualiser les couleurs correspondant au code et afficher la roue chromatique pour sélectionner directement une couleur à la pipette.

PNG - 50.4 ko

Dans l’interface privée : faire Configurer Sarka-SPIP/style (Des nouvelles config peuvent être rajoutées dans les jours qui viennent donc les évolutions sont à suivre ...)

Outre le choix des couleurs qui ne nécessite pas beaucoup d’explications, il est également possible d’appliquer des images d’arrière plan dans ce cas mettre tout simplement le fichier correspondant dans le dossier images et cocher l’extension png,jpg ou gif correspondante

No Nom du fichier Bloc concerné, Emplacement
1 bg_site Fond général du site
2 bg_body Marges du site
3 bg_bandeau_haut Bandeau partie haute
4 bg_bandeau_bas Partie basse du bandeau ( là où s’insère le menu horizontal
5 bg_menu_horiz Menu horizontal du bandeau bas
6 bg_hover_menu_horiz Menu horizontal du bandeau bas au survol de la souris
7 bg_chemin Chemin
8 bg_pied_bas Pied de page
9 bg_noisette_titre Titre des noisettes
10 bg_hover_noisette_titre Titre des noisettes au survol de la souris
11 bg_noisette_soustitre Sous titre des noisettes
12 bg_hover_noisette_soustitre Sous titre des noisettes au survol de la souris
13 bg_menu Menu de navigation
14 bg_hover_menu Menu de navigation au survol de la souris
15 bg_extrait Extraits d’articles affichés dans les pages Sommaire, Rubrique... ou des listes de brèves ou de sites présents dans les pages Brève et Site
16 bg_edito Edito de bienvenue en page d’accueil
17 bg_une Article à la une en page d’accueil
18 bg_commentaire Commentaires d’articles affichés dans les pages article, formulaire de commentaire, pour les signatures des pétitions, pour la liste des articles syndiqués...
19 bg_arbre Listes arborescentes comme le plan du site ou l’agenda annuel
20 bg_planche Blocs de type planche affichés dans les pages Galerie et Herbier.
21 bg_carrousel Vignettes des albums quelque soit le style de présentation choisie
22 bg_hover_carrousel Vignettes des albums quelque soit le style de présentation choisie au survol de la souris
23 bg_form Formulaires affichés dans les pages Contact, Inscription, Post...

propriétés associées : Il n’est pas forcément utile de mettre quelque chose dans cette case.

Si on ne met rien ça prend les valeurs par défaut à savoir :

  • repeat : cad que si l’image est plus petite que le bloc elle va se répéter à la fois selon l’axe des x et des y donc si on ne souhaite qu’une seule image il faut mettre no-repeat
  • position : par défaut l’image part du bord supérieur gauche ( = coordonnées 0 0) de l’écran donc là on peut la décaler selon l’axe x et y , on peux aussi la centrer en marquant center ou la faire partir du bord droit en mettant right ou aussi mettre une valeur en pourcentage 25% 50% ça partira du quart gauche de la page et à partir du centre en hauteur.
  • attachement : par défaut c’est scroll - l’ image d’arrière plan défile en même temps que la page il y a aussi fixed , l’image ne bouge pas quand on scroll (enfin chez firefox, inopérant chez ie évidement ).

Il faut mettre toutes les propriétés à la queue leu leu avec juste un espace entre chaque.

donc par ex : avec no-repeat right bottom l’image ne se répète pas , elle part du bord inférieur et à partir du bord droit.

3 applications pratiques parmi les plus fréquentes

  1. application d’une image centrée en largeur et en hauteur (bien adapté pour le bandeau ) : center center no-repeat
  2. application d’une texture : repeat
  3. application d’un dégradé : repeat-x ou repeat-y pour un dégradé en hauteur ou en longueur.

(Il semblerait mais ça reste à vérifier que l’option compacter pose problème, décocher pendant les modifications)

Pour la décoration au survol des liens, les options possibles sont :

  • underline : souligné
  • none : rien
  • overline : souligné au dessus
  • line-through : barré
  • blink : clignote mais pas chez IE

et pour ceux qui veulent jeter un œil aux fichiers css : on retrouve les variables de la config de cette façon text-decoration : #CONFIG{sarkaspip_styles/td_lien, underline} correspondant par ex ici à la variable td_lien, la 2ème valeur (après la virgule) étant la valeur par défaut, donc ici souligné.

Sauvegarde des valeurs : elles sont sauvegardées dans un simple fichier texte stocké par défaut dans temp/cfg, il est donc conseillé d’en faire une copie de sauvegarde. Il devient alors possible de transférer rapidement les couleurs d’un site à un autre, de revenir en arrière si les nouvelles couleurs ne plaisent pas ...

Changement des icônes : mettre ses icônes dans themes/nom_du_theme/images/ : par exemple pour remplacer l’icône commentaire mettre le nouveau fichier nommé « article_commenter.gif » dans ce répertoire

Pour le plugin notation : les 3 images sont regroupées dans une seule qui s’appelle star.png dans le répertoire img_pack du plugin ; et c’est en jouant sur le décalage en hauteur que l’on affiche seulement la 1,2 ou 3ème image (au lieu d’avoir 3 images différentes).


 Personnalisation et/ou création d’un thème

Une fois les étapes susmentionnées bien comprises, vous pouvez prendre l’un des thèmes existants pour le personnaliser un en créer un nouveau à partir du kit bde démarrage « theme/sarkaspip_nomdutheme/ » .


Publications

Derniers articles publiés

Agenda

<<

2018

 

<<

Juin

 

Aujourd'hui

LuMaMeJeVeSaDi
28293031123
45678910
11121314151617
18192021222324
2526272829301
Aucun évènement à venir les 6 prochains mois

Météo

Ville(SZXX0013)

Conditions météo à 0h0
par weather.com®

Inconnu

°C


Inconnu
  • Vent :  km/h - N/D
  • Pression :  mbar tendance symbole
Prévisions >>


Annonces

Embed Twitter « responsive tools »

Pour le faire sur votre site


Embed Twitter « RWD »

Pour le faire sur votre site


Embed Twitter dans SPIP

Pour le faire sur votre site


Sites favoris


4 sites référencés dans ce secteur