Accès rapide : Aller au contenu de l'article |  Aller au menu |  Liste complète des articles  |  Aide  |  Contact |
bandeau

Accueil > Aides pour les nuls > Le squelette a fait des petits en couleur

Le squelette a fait des petits en couleur

FTP : installation et usage

Des petits en rubrique
Des petits en article

  Eh oui, le squelette a fait des petits !

Lorsque j’ai modifié la couleur de la page d’accueil de mon site, j’ai choisi un très beau rouge foncé (660033). voir l’article « couleurs ». Mais catastrophe, les rubriques se sont trouvées aussi en rouge foncé. Pour lire du noir là dessus ... coucou c’est tufou ! (en verlan !).

J’ai donc fabriqué des « mini-squelettes »

Avec le logiciel (gratuit) PSPad, j’ai ouvert le fichier habillage.css, et j’ai modifié le « background » de .contenu pour y mettre une autre couleur que le rouge foncé.

J’ai enregistré ce fichier sous le nom : « habillage-rubrique.css ».

Ensuite j’ai ouvert le fichier rubrique.html, j’y ai vu la ligne

<!-- media="..." permet de ne pas utiliser ce style sous Netscape 4 (sinon plantage) -->
<link rel="stylesheet" href="#DOSSIER_SQUELETTE/habillage.css" type="text/css" media="projection, screen, tv" />

et j’ai mis à la place la ligne :

<!-- media="..." permet de ne pas utiliser ce style sous Netscape 4 (sinon plantage) -->
<link rel="stylesheet" href="#DOSSIER_SQUELETTE/habillage-rubrique.css" type="text/css" media="projection, screen, tv" />

Il ne restait plus qu’à expédier habillage-rubrique.css, et rubrique.css par FTP, vers le site distant, dans le dossier /squelettes et voilà ! Tout va bien.

Pendant que j’y étais, j’ai déplacé les sous-rubriques pour les mettre à la fin. J’ai donc déplacé tout le bloc

        <!-- Sous-rubriques -->

        <B_sous_rubriques>
        <h2 class="structure"><:sous_rubriques:></h2>

        <div class="menu-item">
        <ul class="sous-rubriques" title="<:sous_rubriques:>">
        <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par titre}>
        <li>
        <div class="menu-titre"><a href="#URL_RUBRIQUE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>#TITRE</a></div>

        <B_sous_sous_rubriques>
                <ul class="menu-liste">
        <BOUCLE_sous_sous_rubriques(RUBRIQUES) {id_parent} {par titre}>
                <li class="menu-item"><a href="#URL_RUBRIQUE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>#TITRE</a></li>
        </BOUCLE_sous_sous_rubriques>
                </ul>
        </B_sous_sous_rubriques>
        </li>

        </BOUCLE_sous_rubriques>
        </ul>
        </div>
        </B_sous_rubriques>

et je l’ai placé juste avant les dernières lignes :

</body>
</html>
</BOUCLE_rubrique_principal>

 Des petits en article

J’ai fait le même genre d’opération avec les articles, en créant habillage-article.css et en modifiant une ligne de article.html pour y mettre :

<link rel="stylesheet" href="#DOSSIER_SQUELETTE/habillage-article.css" type="text/css" media="projection, screen, tv" />

Et là, nouvelle catastrophe, les titres d’articles avaient disparu, et les jolis intertitres que je mettais en orange, aussi ! J’ai alors regardé un article bien précis, j’ai ouvert le code-source (on fait : affichage / code source) et j’ai repéré mon titre, qui était bien là, et que je ne voyais plus. J’ai vu, devant, ceci :

<h1 class="titre-texte">

Je suis donc allée voir dans habillage-article.css .... et je n’ai pas trouvé h1.titre-texte.... alors j’ai rajouté :

.contenu h1.titre-texte {
 margin: 10px;
 color: #000000
}

et tant que j’y étais, j’ai ajouté aussi :

.contenu h3.spip {
        font-family: Arial;
        font-weight: bold;
        font-size: 140%;
        color: #FF00FF;
}

et j’ai modifié la couleur du gros titre en haut de page en ajoutant une couleur, comme ça :

.contenu h1.titre-texte {
 margin: 10px;
 color: #0000FF;
 }

Il m’a fallu ajouter aussi la définition de

.contenu hr.spip
.contenu strong.spip
.contenu i.spip

Par exemple, j’ai ajouté ceci :

.contenu hr.spip {
        padding: 2px;
        background-color: #007700; }/*couleur de la barre de séparation des articles*/

.contenu strong.spip {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 102%;
        color: #0000FF;} /*strong.spip permet de mettre des mots en caractères gras*/

.contenu i.spip {
 color: #800000;} /*ici la couleur des textes en italique*/


.spip_documents {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 70%;
        margin:10px; }

.spip_documents_center {
        margin: auto;
        text-align: center;
        width: 80%;}

.spip_documents_left {
        float: left;
        margin-right: 15px;
        text-align: center;}

.spip_documents_right {
        float: right;
        margin-left: 15px;
        text-align: center;}

/* le margin: 15px permet de laisser un espace entre le document et le texte d'à-côté*/

Il reste à expédier habillage-article.css par FTP dans le site distant, dans le dossier /squelettes .... Vider le cache, actualiser...

... et voilà, j’ai retrouvé mes jolies couleurs. Peut-être ne les trouvez-vous pas belles, mais moi, si ! Du moins pour l’instant !

Je rappelle que je n’y connais rien en css et html ... mais je farfouille, je trifouille, je bidouille, j’essaie, je défais, je refais .... et j’écris tout ça quand j’ai trouvé quelque chose sinon, dans quelques jours, pfûûît ... tout sera en fuite !


 Squelette : on peut en rire

Dans avec le mort : http://www.chezmaya.com/applet/valentin.htm