SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 242 visiteurs en ce moment

Accueil > Squelettes > Squelettes pour blog > Lebanon > Lebanon : Modifier l’aspect graphique (programmation CSS)

Lebanon : Modifier l’aspect graphique (programmation CSS)

2 novembre 2007 – par erational

5 votes

Nous allons maintenant modifier le squelette Lebanon conçu par tetue pour l’adapter à nos besoins.

Avant tout, n’oubliez de sauvegarder régulièrement vos modifications pour pouvoir revenir en arrière si besoin.

Nous allons repartir de l’article Lebanon : Analyse de la CSS du squelette

Objectifs

Nous allons reprendre la charte graphique pour lui donner un ton plus léger avec une palette blanc-bleu. La disposition générale : « bannière - 2 colonnes - pied » restera inchangé.

Changer le fond

Sous un éditeur graphique (photoshop, gimp, ...) je crée un fond dégradé que je nomme bg_leb.png

J’édite la feuille de style habillage.css

Maintenant je supprime le motif de papier sur le bloc #page et ajoute 2 bordures latérales. On supprime le bout de CSS sur inc-head.css

Et on ajoute ce qui suit dans habillage.css

Reprendre la bannière

Sous un éditeur graphique (photoshop, gimp, ...) je crée un motif de nuage que je nomme bg_nuage.png. Dans habillage.css on reprend le bloc #entete

Le titre n’est pas très lisible, on va aussi lui ajouter un fond. Si l’on observe le code source HTML le bloc se présente de la façon suivante :

Comme le titre possède un id, il va être facile de la modifier par CSS, on va donc :
-  modifier les marges internes pour coller le titre sur la bordure
-  redéfinir le tag {a} en block et lui donner une taille en hauteur et largeur. Comme c’est un peu particulier, on va aussi ajouter temporairement des bordures orange pour voir si cela se passe bien, soit :

C’est bon, on peut enlever la bordure orange et placer une image de fond bg_nom_site_spip.png

Reprendre le pied

Le pied correspond au bloc #pied. Le HTML nous donne

Et la CSS :


Aperçu du #pied avec l’extension webdeveloper de firefox

Nous allons :

  • Supprimer la marge droite pour supprimer l’effet de bloc
  • Redéfinir le tag p pour que les liens soient listes en ligne et non les uns dessous les autres
  • Ajouter un fond sur le bloc #pied pour le faire ressortir graphiquement

Éditons le fichier habillage.css :

Résumé

À vous de continuer pour relooker cette charte graphique...

Nous vous rappellons la méthode :

  1. Repérer la partie que vous voulez modifier (un tag ? une classe, un bloc <div>...)
  2. Analyser le code HTML et CSS correspondant.
  3. Modifier le fichier CSS (petit à petit pour vérifier que vous éditez le bon endroit)

Nous vous conseillons d’effectuer ce tutorial étape par étape « à la main »

our les plus paresseux voici les fichiers du corrigé

Corrigé du tutoriel

P.-S.

Article préalablement publié sur le site GenerationCyb

Dernière modification de cette page le 3 novembre 2007

Retour en haut de la page

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Aveline v2

    9 novembre 2012 – 86 commentaires

    Aveline est une collection de noisettes hautement paramétrables, compatibles avec les thèmes Z et à inclure dans vos pages avec le noiZetier. Compatibilité Cette version 2 du plugin Aveline s’utilise, sous SPIP 3, avec la version 2 du noizetier, (...)

  • Calendrier Mini 2.0

    19 mai 2012 – 244 commentaires

    Ce plugin ajoute la balise #CALENDRIER_MINI qui insère un petit widget de navigation par mois dans les dates des évènements. Fonctionnement du mini calendrier Le mini calendrier présente un mois à la fois. Les jours du mois comportant des (...)

  • Le Squelette Zpip

    11 novembre 2009 – 363 commentaires

    Ce squelette n’est plus maintenu, il est remplacé par SPIPr-dist Zpip est un modèle de squelette réutilisable, modulaire et disposant d’une galerie de thèmes. Ce modèle de squelette rend l’installation d’un site avec son thème plus facile, et la (...)

  • Galleria (fr)

    16 novembre 2011 – 183 commentaires

    Une galerie d’image qui utilise la librairie javascript Galleria. Description Ce plugin vous permet d’ajouter des galeries d’images à vos articles. La galerie créée utilise la librairie javascript Galleria. Le plugin propose un modèle nommé (...)

  • PortePlume Equation

    10 juin 2012 – commentaires

    Version pour spip 2.1 et 3.0 du plugin Spip Equation Ce plugin rend plus simple l’intégration dans un texte de formules mathématiques et d’équations. Dans ce but il ajoute un groupe de boutons dans la barre typographique qui permet d’intégrer les (...)