• .

    Plugin Piwik
    Un plugin pour intégrer piwik dans spip ou plutôt de quoi vous dispenser d’inserer le code pour permettre de gérer les stats de votre site avec piwik. Evidement premiére étape a faire transférer piwik (...)

  • .

    Plugin Twitter
    Un plugin spip pour twitter, ce plug est trés appréciable, en effet vous aller pouvoir configurer votre compte twitter sous spip, vous aller pouvoir non seulement afficher vos messages mais aussi (...)

  • .

    Plugin Anything Slider
    Ce Plugin Adapté pour spip va vous permettra d’afficher du contenu animé ou pas, avec des fléches de navigations (suivant, précédent) ou pas, et des boutons personnalisé ou pas , c’est vous qui décidé. (...)

  • .

    Fonctionnement une boucle
    Comment fonctionne une boucle spip simple sans mise en page et sans résultat complexe., tout d’abord la programmation sous spip n’est pas si complexe que cela en a l’air, c’est déja une simple (...)

  • .

    Spip Vs Wordpress
    Si nous devriez comparer SPIP a WORDPRESS qui devrions nous dire, quel est vraiment la meilleur solution. Nous allons vous répondre aprés avoir testés Wordpress et utilisateur de spip depuis (...)

  • .

    Ajouter une vidéo youtube
    Pour ajouter une vidéo youtube sous spip, c’est trés simple est c’est fonctionnel avec spip 2 ou 3, il suffit d’abord de se diriger sur youtube et de sélectionner la vidéos que vous souhaitez intégrer. (...)

  • .

    Afficher des champs spip
    Nous allons dans un premier temps faire un petit rappel des différents objets de spip qui sont auteur, brèves,article,rubrique,formulaire, mais aussi des objets comme la date et il peut en avoir (...)

  • .

    spip créer des champs
    Il est tout a fait possible de créer des nouveaux champs sous spip de les gérer et de pouvoir les afficher au besoin sur le site public, nous allons voir dans cette section comment créer des champs (...)

  • .

    Formulaire de recherche
    Vous voulez intégrer un formulaire de recherche spip, totalement original avec une image une icone ou un bouton de votre choix, vous pouvez non seulement le gérer sur votre squelette ou alors si (...)

  • .

    Liste déroulante articles
    Il est tout a fait possible de réaliser des listes déroutantes articles ou mêmes de rubriques, bréves ou autres et les faire défiler de haute en bas ou de bas en haut, cette possibilité est aussi (...)

  • .

    Thèmes pour spip
    Vous cherchez a réaliser un site web avec spip, vous pouvez donc vous servir de thémes pour spip, nous en avons pour le moment sélectionné une quinzaine, tous sont compatible avec le plugin zpip et (...)

  • .

    Modifier un théme spip
    Vous trouverez içi tout ce que vous avez besoin de savoir pour modifier un théme spip a votre goùt et votre convenance, vous aimez un théme les couleurs ne vous plaise pas, l’apparence non plus, mais (...)

  • .

    L’habillage css de spip
    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 (...)

  • .

    Menu déroulant sous spip
    Aprés un premier artcile sous la possibilité de créer un menu déroulant sous spip simple, nous allons voir pour créer un menu déroulant plus complexe c’est a dire sur plusieurs niveaux, nous nous sommes (...)

  • .

    Un menu sous spip
    Nous allons vous montrer coment créer facilement un menu sous spip simple tout en utilisant un théme zpip pour plus de facilité, la plupart des thémes zpip proposé sont compatible avec les menus (...)

  • .

    Noizetier spip
    Le Noizetier Spip est un plugin vous permettnat de configurer vos pages de votre site web sous la technologies spip et de les habiller par des noisettes (rappelons que des noisettes sont sont des (...)

  • .

    attaque spip que faire
    Nombreux sont les sites sous spip qui ont subis des attaques de pirates informatique , pas simplement des sites sous spip d’ailleurs. Ne croyez pas que ça arrive qu’aux autres, que votre site fait (...)

  • .

    spip 3.1
    Une nouvelle version de spip est en préparation et ne devrais pas tarder a arriver. Elle est pour le moment en version Alpha est elle est proposé en téléchargement pour ceux qui veulent la tester (...)

  • .

    Couleur interface privé
    Vous étes habitué a spip pis depuis la version 3 vous vous demandez mais comment on change la couleur de l’nterface privé, rassurez vous cette option n’a pas disparus elle est bien présente mais n’est (...)

  • .

    plugin skeleditor
    Skeleditor est un plugin spip qui peut être trés utile, tout simplement il permet d’éditer les fichiers squelettes de votre site spip et de les modifier, il permet aussi de modifier les feuilles de (...)

  • .

    Le squelette de spip
    Le squellete est un ensemble de fichiers qui compose votre site pour en donnant l’apparence et son interface. Généralement un squelette se compose d’un bandeau en haut du site, d’un pied de page, (...)

  • .

    Plugin ckeditor
    Le plugin ckeditor vous permet par son interface avec un mini traitement de texte intégré et paramétrable de mieux gérer vos articles, rubrique et bréves comme on connaissez déja fckeditor qui lui (...)

  • .

    Installer spip 3
    Rappelons que spip est un systéme de publication pour la création de site web dynamique, elle simplifie la création de site, mais aussi son dévelloppement et la faciliter de mise a jour. Depuis la (...)

  • .

    Zpip vide
    Zpip vide, nous avions déja parlé dans un précédent article de zpip un plugin permettant de vous proposer un squelette avec une présentation standard pouvant être relooker en installant des thémes (...)

  • .

    SPIP 3
    SPIP 3 la nouvelle version de spip est arrivé, qu’apporte cette nouvelle version d’abord une nouvelle interface privé déja beaucoup plus jolie graphiquement mais surtout mieux organisé, tout est géré (...)

  • .

    Zpip
    Zpip est un plugins ingénieux qui fait beaucoup parlé de lui dans le domaine de dévellopement de site web sous spip, il se compose sous forme d’un plugins généraliste sous forme d’un squelette de (...)

  • .

    SARKA SPIP
    Une nouvelle façon de créer un site web a la maniére sarka, tout d’abord cela est sous la forme d’un plugin a installé dans spip cela reste trés simple a réaliser. Il faudra avant s’assurer que le plugin (...)

  • .

    SPIP 2.12
    Une nouvelle version de spip viens de sortir et on peut voir une nouvelle fois quelques évolutions et pas les moindre. Tout d’abord évolution au niveau des plugins avec déja quelques plugin déja (...)

  • .

    Squelettes Canalgimi
    Nous avons élaborés un squelettes basé sur le célébre plugin squelette Multiflex, vous pouvez bien sur utiliser le squelette librement en respectant les auteurs, tout d’abord le plugin multiflex (...)

  • .

    Fckeditor et Multiflex
    Fckeditor et Multiflex, Multiflex est paramétré par defaut a avoir des images des artcile en une résolution de 300 x 300. Cependant il est possible de modifier cette configuration si vous souhaitez (...)

  • .

    Pagination des articles
    Coment paginer des artciles dans vos squelettes que cela soit dans vos noisettes sommaire article rubrique et autres, tout d’bord pour comprendre les base du plugin multiflex 3, commencer par (...)

  • .

    Multiflex
    Maitrisez Multiflex et créer vous mêmes vos propres structures de squelettes, Multiflex rappelons le est un plugin squelette hautement modulable, même si il est simple d’installé Multiflex sur son (...)

  • .

    Squelette canalgimi 4
    Squelette Canalgimi 4, une version bien différentes que les autre car il est sur 3 colones avec blocs, il est evidement compatible a partir de la version 2 de spip. ce modéle proposé fonctionne (...)

  • .

    Squelette canalgimi 3
    Squelette Canalgimi pour spip 2.0 ou 2.01 2.02 et 2.03, ce modéle proposé fonctionne comme les précédent avec le plugin multiflex 3. Nous rappelons que dans nos pack on intégre le plugin multiflex, (...)

  • .

    Squelette canalgimi 2
    Squelette canalgimi 2, voila un second modèle créé avec Multiflex et remodelé selon une pagination particuliére et différente au squelette canalgimi version 1 (vous pouvez voir la premiére version du (...)

  • .

    Les noisettes
    Les noisettes de spip, de quoi donner a manger a l’écureuil, c’est quoi exactement des noisettes. Petite explication, comme vous savez avec spip il faut créé ou récupérer un squelette (présentation de (...)

  • .

    Des boucles
    Des boucles pour votre site spip, Vous trouverez un fichier que vous pouvez télécharger il vous restera a faire un copier coller des différentes boucles proposés, ce sont des boucles que on ne trouve (...)

  • .

    Squelette Multiflex
    Le squelette Multiflex pour vous simplifier la vie, Il est vrai créer un squelette spip n’est pas a la portée de tout le monde, c’est pourquoi des auteurs vous proposent des squelettes pour spip (...)

  • .

    Les base mysql
    Comme vous le savez spip utilise une base de donnée mysql, cette solution est maintenant proposé par tous les hébergeurs d’avoir une base de donnée MYSQL, le principe est simple quand vous installez (...)

  • .

    Plugin cfg
    Le Plug in cfg est un outil indispensable pour votre site sous spip, il permet de configurer certains plugin comme fckeditor ou encore des suelettes configurable sous spip. L’utilisation de cfg (...)

  • .

    Plugin Fckeditor
    Une installation simple est efficace de Fckeditor en plugin. Nous vous rappellons Fckeditor permet la création de vos articles et bréves comme si vous étiez dans un petit traitement de texte, le (...)

  • .

    C’est quoi un squelette
    Comme vous le savez peut être déja, lorsque vous faite un site en SPIP que nous vous rappelons vous permet de réaliser votre site entièrement interactif et dynamique et vous permet d’accéder a une (...)

    .

Accueil > INTERNET > SPIP > L’habillage css de spip

L’habillage css de spip

Mis à jour le samedi 31 octobre 2015


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.

En images

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

    GAMETECH GAMETECH est une rubrique proposé par david webmaster de ce site sur la chaine BOUGE TV, une web tv de l’Aisne. Dans cette rubrique vous retrouverez des tutoriels sur mac windows android ou encore (...)

  • .

    BOUGE TV Une nouvelle chaîne locale arrive sur vos smartphones et tablettes, par son application disponible sur Android et APP STORE, vous pourrez découvrir ses émissions, reportages et rubriques sur le (...)

  • .

    CHALET OS CHALET OS est une distribution linux basé sur ubuntu que l’on connais bien , comme beaucoup de distribution le principe étant de vous faire découvrir linux avec une clé usb et de booter dessus sans (...)

  • .

    PHOENIX OS ANDROID SUR PC Aprés REMIX OS voiçi PHOENIX OS rappelons que ses deux systèmes permettent d’obtenir un véritable systéme d’exploitation android de bureau sur pc. On retrouve donc un menu démarrer, un poste de travail (...)

  • .

    ELEMENTARY OS De nombreuses distributions Linux sortent et ne se ressemblent pas pour la plupart basé sur UBUNTU que l’on ne présente plus et rappelons le ubuntu est basé sur DEBIAN. ELEMENTARY OS n’échappe pas a (...)

  • .

    quel distribution choisir Vous voulez débuter avec linux, découvrir ce systéme exploitation et perfectionner vos connaissances sous linux, il vous faut dans un premier temps choisir votre distribution linux, la est toute la (...)

  • .

    REMIX OS 3 Android sur Pc REMIX OS voudrais faire passer android sur nos pc et même sur les macs. On pourrait se poser une première questions pourquoi faire et de comment. Evidement d’autres sont capable de faire ça on se (...)

  • .

    Any vidéo converter Any Video Converter est un logiciel gratuit, un convertisseur vidéo gratuit qui fait pensé au logiciel sur pc de freemake sous le nom de vidéo converter. La nouvelle version de Any Video Converter (...)

  • .

    4K vidéo Downloader Depuis 2010, la plateforme de vidéo YouTube permet à ses utilisateurs de mettre en ligne et de lire des vidéos en 4K. Quatre fois plus importante que la HD, soit 4096 pixels sur 3072, cette (...)

  • .

    Cyberduck Cyberduck est un client libre et gratuit (open source – licence GPL) pour la plateforme Mac OS X. Il gère les protocoles FTP et SFTP, WebDAV, le système Rackspace Cloud, Google Docs, et Amazon S3. (...)

  • .

    Giga GG Giga gg est un service de cloud fort intéressant de plus c’est made in france est son offre est trés compléte d’abord par sa version gratuite c’est 100 go de stockage ce qui n’est pas rien et qui peut (...)

  • .

    Handbrake C’est certainement le meilleur logiciel sous mac pour convertir des vidéos, de plus c’est un logiciel libre et gratuit, malgré son interface en anglais il est trés simple d’utilisation. Il reconnaît (...)

  • .

    Le Bitrate vidéos c’est quoi ? Le Bitrate est le flux de données d’une vidéo et d’un fichier audio ou les deux, Le bitrate dépend avant tout de son utilisation, en effet une vidéo que vous utiliserez que sur un ordinateur ne sera (...)

  • .

    robocop Bienvenue dans le jeu officiel du film RoboCop. souvenez vous Détroit, en l’an 2028. Alex Murphy, père de famille dévoués et policier exemplaire et courageux, il est malheureusement grièvement blessé (...)

  • .

    Piwik vs google analitic Aujourd’hui on peut se poser la question sur deux logiciels pour analyser le trafic on canais bien google analitic et aussi celui qui fait beaucoup parlé de lui qui est piwik, mais lequel choisir, (...)

    .