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 [bleu]habillage.css[/bleu], et j’ai modifié le « background » de [bleu].contenu[/bleu] 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 [bleu]rubrique.html[/bleu], 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 [bleu]habillage-rubrique.css[/bleu], et [bleu]rubrique.css[/bleu] 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 [bleu]habillage-article.css [/bleu].... et je n’ai pas trouvé [bleu]h1.titre-texte[/bleu].... 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é [bleu]la couleur du gros titre[/bleu] 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 [bleu]habillage-article.css[/bleu] 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
Fil RSS 