> blog notes

publié le 18 février 2015 - modifié le 2 août 2019 3505 lectures Par où commencer.

Personnaliser un site en SPIP

Spip offre la possibilité de mettre en ligne un site web dynamique en peu de temps et y écrire des articles, gérer les commentaires... sans connaitre le HTML ni le CSS. Mais l’habillage par défaut de type blog peut ne pas correspondre à vos besoins, alors "re-designer" Spip pour l’ adapter devient une nécessité ...

Il faudra juste passer un peu de temps sur les nouvelles feuilles de style de votre site... , elles permettront par exemple de définir la couleur du fond de toutes les pages du site, l’apparence (le mise en forme) de vos textes ou le type de police etc, tout ça de façon centralisée.

La CSS, pour commencer a personnaliser l’habillage d’un site

CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui permet de définir l’aspect (la forme) de votre site.
Pour débuter voici quelques ressources http://www.cssdebutant.com/, css.mammouthland ,
Puis pour aller plus loin :www.alsacreations.com/tuto/liste/2-css.html, http://www.pompage.net/

Et l’habillage graphique de Spip dans tout ça... J’y viens, j’y viens...

Personnalisons l’habillage graphique de Spip

L’astuce pour les débutants, est de copier le fichier de style par défaut de SPIP (layout.css pour SPIP3, habillage.css pour SPIP2) rangé dans le répertoire "squelettes_dist"
Créer un nouveau répertoire à la racine du site, au même niveau que "squelettes_dist" nommerez-le "squelettes"

Avec un SPIP3 :

dans ce nouveau répertoire créer un sous-répertoire nommer-le "css" et coller y le fichier "layout.css". L’idéal pour ne pas s’embrouiller est de le renommer en "monstyleamoi.css" par exemple

Ensuite il vous reste à appeler cette feuille de style perso dans l’entête de votre squelette de la façon suivante :

Dans le sous répertoire "inclure" du répertoire "squelettes_dist", copier "head.html"
retournez dans "squelettes" créez le sous répertoire "inclure" et collez-y ce nouveau fichier, ouvrez-le et modifier la ligne 26

[(#REM) 3. Vos feuilles de style pour l'habillage du site ]

[<link rel="stylesheet" href="(#CHEMIN{css/style.css}|direction_css)" type="text/css" />]

[<link rel="stylesheet" href="(#CHEMIN{css/monstyleamoi.css}|direction_css)" type="text/css" />]

Avec un SPIP2 :

coller le fichier "habillage.css" dans le nouveau répertoire "squelettes".
copier "inc-head.html" et coller le directement dans le répertoire "squelettes".
ouvrir et modifier la ligne 29 de "inc-head.html"

[(#REM) Feuille de style personnalisee pour surcharger les precedentes

        A noter par defaut cette css n'existe pas

]

[<link rel="stylesheet" href="(#CHEMIN{monstyleamoi.css}|direction_css)" type="text/css" media="all" />]

Et pour voir le fruit de notre travail,

nous allons personnalisez la page sommaire du site

dans "squelettes_dist" copier "sommaire.html" et le coller dans "squelettes"
Maintenant ouvrez "monstyleamoi.css" et amusez vous !

Par exemple pour modifier la couleur de fond de toutes vos pages d’un seul coup,
pour SPIP3, à la ligne 9, pour SPIP2 ligne 65, modifiez le code hexadécimal "#FFF"qui correspond au blanc par un beige "#E2E0DC" et supprimer "url(img/background.png)"(spip3)

code original :body { text-align: center; background: #FFF url(img/background.png); border-top: 5px solid; }

code modifié :body { text-align: center; background: #E2E0DC; border-top: 5px solid; }

Je vous renvoie sur le site de Spip.net pour apprendre à réaliser votre premier squelette http://www.spip.net/fr_article879.html
Spécial débutant :http://contrib.spip.net/Mes-premieres-boucles-special-debutants,
Des Boucles et encore des boucles... http://www.bouclespip.biz.nf/