Vous êtes ici : Accueil » INTERNET » SPIP » L’habillage css de spip

L’habillage css de spip


agrandir

Les feuilles de style permettent de centraliser et de gérer de manière beaucoup plus aisée les indications graphiques que l’on insérait traditionnellement dans le HTML. Elles s’écrivent dans un langage spécifique que l’on appelle le CSS. Comme vous le savez déjà, SPIP traite séparément le contenu de sa mise en page et son habillage graphique, les squelettes trient et affichent les contenus souhaités en pages HTML, dont l’habillage graphique est réalisé par des feuilles de style CSS, on y trouve pas seulement l’habillage mais aussi la mise en forme et ses couleurs.

Nous allons vous donner quelques astuces simple pour modfier les css a l’aide un théme pour en comprendre le principe. Chaque théme comporte un fichier appellés habillage.css c’est dans ce fichier qu’ils est indiqués toutes les mises en formes graphique mais également les couleurs. Nous prenons en exemple le théme HARVESTFIELD que vous trouverez sur notre liste de thémes proposées, en cliquant içi

Changer emplacement des logos : pour changer emplacement des logos reperez cette ligne et mettre left pour gauche et right pour droite a coter de float, puis dans margin c’est l’espacement du texte par rapport au logo vous pouvez donc agrandir ou éduire la valeur

 cartouche .spip_logos float : left ; margin-right : 20px

Changer la couleur du texte des articles : retrouver cette ligne et a color changer le code couleur pour une autre couleurs du texte. Pour changer la couleur de fond (en dehors de votre site), modifier le code couleur a coté de backgroud.

body
background : #FFF url(img/bg.jpg) repeat-y center top ;
font : 70%/1.5em Verdana, Tahoma, arial, sans-serif ;
color : #0b0909 ;
text-align : center ;

Changer la couleurs des liens  : nous allons changer la couleur des liens, a visiter ou a changer sa couleur dans habillage css trouver ses lignes, aidez vous du plugin palette de spip pour trouver le code couleur.

/* links */
a, a:visited
color : #0e0e0b ;
text-decoration : none ;

a:hover
color : #BE420D ;

text-decoration : underline

Changer les logos sommaire : Repérez bien cette ligne et remplacer la par celle ci, cela vous permettra de gérer les marges entre le logo des articles du sommaire. Toujours pareil (right pour droite et left pour gauche), changer le valeur margin pour espacement du logo par rapport au texte.

articles .spip_logos float : right ; margin-right : 8px ; margin-bottom : 14px ;

Changer le couleur bouton recherche et autres : pour changer la couleur du bouton de recherrche et son fond repérer cette ligne color correpond a la couleur du bouton et background la couleur de fond. cela changera également pour l’enssemble des boutons.

.formulaire_spip .boutons input,.formulaire_spip input.submit
font : bold 12px Arial, Sans-serif ;
height : 24px ;
margin : 0 ;
padding : 2px 3px ;
color : #FFF ;
background : #895915 ;
border : none ;

Changer les couleurs des chapo : les petites introductions des rubriques ou articles, vous pouvez changer le couleur du texte a cette ligne modifier le code couleur

.chapo margin-bottom : 1.50em ; line-height : 1.40em ; font-weight : bold ; color : #6e421b ;

Changer interlignage des articles, vous trouverez cette ligne en début du fichier css modifier la valeur pour augmenter et diminuer pour réduire l’interligne.

.texte line-height : 1.80em ;

Répérer les différentes partie du site pour les modifier : Le nom de la partie est toujours procéder de diése pour les affichages et modifications reperez les.

Header : la barre du haut de votre site
FOOTER : le pied de votre site
NAV : le menu en haut de navigation (réalisé avec plugin menu)
MAIN : le menu principal ou apparait les articles
SIDEBAR : menu de coté (gauche ou droit suivant paramètrage

Bientôt d’autres astuces pour modifier les habiullages.css revenez voir cette article réguliérement.

  • theme original
  • exemple du theme modifier
  • changement de la couleur de fond
  • Rechercher

    VOIR AUSSI