Raccourcis typographiques : un article essentiel :
http://www.spip.net/IMG/pdf/doc-273.pdf
Le code des couleurs se trouve ici :
http://www.wdvl.com/Quadzilla/Tips_Tricks/hexchart.html
Un gros titre bleu
<font size="150%" color="#0000FF"><center> ...... </center></font>
(en mettant la couleur qu'on veut)
Cela donne ceci :
Un intertitre noir
<h2>....</h2>
Cela donne ceci :
Intertitre
Des « boutons »
[Précédente-> ]
(en mettant un numéro d'article au bout de la flèche) .
Cela donne ceci :
On trouve ici un générateur de boutons :
http://www.buttongenerator.com/index.php?start=42
Boutons colorés
Je souhaitais colorer les boutons « Page précédente » et « Page suivante ». Il faut pour cela ouvrir le fichier spip_style.css et ajouter :
_ .spip_in input{background:#FFCC00;}
_ .spip_out input {background:#FFCC00;}
sans oublier le point au départ et en mettant la couleur qu’on veut. Avec FFCC00 cela donne ceci :
Importer une photo
Photo qui se trouve sur un autre site internet. Il suffit de récupérer son adresse URL.
Par exemple celle-ci : http://www.journal-la-mee.fr/bp/a.jpg
Pour la placer, écrire ceci :
<p align=center><img src="URL_de_la_photo" align="middle" alt="légende_de _la_photo"></p>
on peut remplacer center (centré) par left (gauche) ou right (droite)
Cela donne ceci par exemple :
<p align=center><img src="http://www.journal-la-mee.fr/bp/a.jpg" alt="Sommaire"></p>
Un cadre de couleur
Recopier le code suivant :
<center> <table border="3" BORDERCOLOR="#000000" WIDTH="75%" CELLPADDING=12 BGCOLOR="#F0EEDF"> <tr> <td>
Votre texte
</td> </tr> </table> </center>
Cela donne un cadre saumon autour de Votre texte.
Comme ceci.
Votre texte Votre texte Votre texte Votre texte Votre texte Votre texte Votre texte Votre texte Votre texte |
On peut changer la couleur (saumon=F0EEDF), la largeur du bord (border), la dimension du cadre (width).
Texte placé à droite
<div style="text-align: right;">.......</div>
C’est utile par exemple pour une signature. Cela donne ceci :
Tout le fond de page en couleur
<table WIDTH="100%" CELLPADDING=8 BGCOLOR="#F0EEDF"> <td> ... </table>
On peut changer la couleur
Cecla donne ceci : voir exemple
Un groupe de mots, en couleur
Voici le code :
<font color="#FF00FF"> ...... </font>
Cela donne ceci ....... intentionnellement !, juste pour faire voir les possibilités .
On peut aussi utiliser les raccourcis du genre .... à condition d’avoir fait les modifications nécessaires
Modifier la taille du texte
Voici le code :
<font size="20%"> ..... </font>
On peut changer le pourcentage par tâtonnement
Cela donne ceci :
On peut changer le pourcentage comme on veut.
Ne pas afficher la date dans les articles
Les articles du site de La Mée sont très longs et correspondent à des dates différentes. Je ne souhaite donc pas afficher de date, sous le titre.
Voilà ce que j’ai fait :
Dans « dist » j’ai cherché article.html
je l’ai téléchargé vers le site local
puis j’ai entouré l’indication de la date avec
– <!--
au début
– et -->
à la fin.
Cela donne ceci :
<!-- [(#DATE|nom_jour)] [(#DATE|affdate)]-->
J’ai enregistré et renvoyé « article.html » dans « dist »
Les articles sans indications « des mêmes auteurs » ou "dans la même rubrique
Il suffit de faire comme ci-dessus, dans « article.html » que l’on trouve dans le dossier « dist »
mettre <!--
au début de la partie qui concerne les auteurs
et mettre -->
à la fin de cette partie.
Puis enregistrer le nouvel article.html et renvoyer par FTP dans dist
Rubriques et sous-rubriques
Problématique : j’ai mis le titre des rubriques sur un fond de « texture » - Mais alors les sous-rubriques se trouvaient avec la même texture (Ici Wb0184345) et ce n’était pas beau.
Pour remédier à cela,
1) j’ai créé une classe « sous-rubriques » de la façon suivante :
j’ai ouvert habillage.css
j’y ai vu ceci :
.general{
background-color: #eaffea;
text-align:center;
}
.general .menu-titre {
background: url("http://www.journal-la-mee.info/SPIP-v1-6/Wb0184345.jpg") }
.rubriques {
background-color: #ffffff; text-align:center;
}
.rubriques .menu-titre {
background :url("http://www.journal-la-mee.info/SPIP-v1-6/Wb0184345ac.jpg")
}
alors j'ai ajouté ceci :
.sous-rubriques {
background-color: #ffffff; text-align:center;
}
.sous-rubriques .menu-titre {
background-color: #eaffea;
text-align:center;
}
Cela me donne alors :
/* Des couleurs specifiques selon les types de menus */
.general {
background-color: #eaffea;
text-align:center;
}
.general .menu-titre {
background:
url("http://www.journal-la-mee.info/SPIP-v1-6/Wb0184345.jpg") }
.rubriques {
background-color: #ffffff;
text-align:center; }
_ .rubriques .menu-titre {
background :url("http://www.journal-la-mee.info/SPIP-v1-6/Wb0184345ac.jpg") }
.sous-rubriques {
background-color: #ffffff;
text-align:center;
}
.sous-rubriques .menu-titre {
background-color: #eaffea;
text-align:center;
}
J’ai enregistré habillage.css et je l’ai envoyé par ftp sur le site distant, dans le dossier ... dist
2) Dans le fichier rubrique.txt
j’ai vu ceci :
<!-- Sous-rubriques -->
<B_sous_rubriques>
<h2 class="structure"><:sous_rubriques:></h2>
<div class="menu">
<ul class="rubriques" title="<:sous_rubriques:>">
j’ai modifié comme ceci
<!-- Sous-rubriques -->
<B_sous_rubriques>
<h2 class="structure"><:sous_rubriques:></h2>
<div class="menu">
<ul class="sous-rubriques" title="<:sous_rubriques:>">
J’ai enregistré sous ....... rubrique.txt
Puis j’ai envoyé ... rubrique.txt .... sur le diste distant dans le dossier .... dist
J’ai supprimé le fichier ....rubrique.html .. qui s’y trouvait
Et j’ai renommé .... rubrique.txt ... en ...rubrique.html
Disposition à l’écran
J’ai voulu mettre les textes principaux à gauche et renvoyer à droite toute la partie navigation (celle qui comporte le nom des rubriques et sous-rubriques)
Pour faire cette modification, il faut aller dans habillage.css, qui se trouve dans le dossier squelettes, ici :
Ici, le texte principal commençait à 30 % du bord gauche de l’écran et allait jusqu’Ã 3 % du bord droit. J’ai modifié ainsi :
#principal { position: absolute; left: 2%; /*left: 18em;*/ top: 0px; margin: 0px; padding: 0px; /*margin-right: 2em;*/ margin-right: 30%; margin-top: 1.5em;}
Le texte principal est maintenant à 2 % du bord gauche et à 30 % du bord droit
Le bloc de navigation commençait à 0 px du bord gauche et avait une largeur de 25 %. J’ai modifié ainsi :
#navigation { position: absolute; left: 70%; top: 0px; width: 26%; /*width 0px;margin: 0px;/ /*margin-left: 1.8em;*/ margin-left: 3%; /margin-top: 1.5em; th: 14em;*/ }
ce qui donne 70 % du bord gauche et une largeur de 26 %
J’ai décalé ensuite le bloc de navigation vers le bas, en jouant, de façon pifométrique, sur « margin-top » dans la ligne suivante :
#navigation { position: absolute; left: 70%; top: 0px; width: 26%; /*width 0px; margin: 0px;/ /*margin-left: 1.8em;*/ margin-left: 3%; margin-top: 1.5em; th: 14em;*/ }
Un texte surligné
C’est tout simple, rien à changer dans les fichiers : il suffit d’écrire <font style="background-color:#74FFEF"> AVANT LE TEXTE et </font> après le texte
en choisissant la couleur qu’on veut
Cela donne ceci : Un titre surligné
Surligner les mots recherchés
Pour que les mots de la recherche soient surlignés dans un article trouvé et référencé dans la page de résultats, il faut aller voir : .spip_surligne background-color : #FFF ; dans spipstyle.css
Caractères gras
J’ai voulu que, en utilisant le raccourci {{ ...}}
(qui correspond au bouton « B » de la barre des menus, cela donne des lettres bleues.
Il faut aller dans style_spip.css et ajouter ceci :
strong.spipfont-family : Verdana, Arial, Helvetica, sans-serif ;font-weight : bold ;font-size : 105% ;color : #0000FF ;
et renvoyer style-spip.css dans le site distant, dans « squelettes ». voir aussi.
Pour utiliser ces caractères gras, on peut écrire <b>...</b>
.... b est l’abréviation de bold, mot anglais qui veut dire « gras »
i.spip : Italiques
On peut désirer mettre les phrases en italique, en couleur.
Il faut aller dans style_spip.css et compléter la ligne i.spip existante : par exemple comme ceci :
i.spip {
color: #FF0101;
}
et renvoyer style-spip.css dans le site distant, dans « squelettes ». voir aussi article 5007
exemple : cela donne ceci : « cela donne ceci »
Pour utiliser ces italiques, on peut prendre le bouton I du menu, ou bien {...}
ou bien <em>...</em>
em est l’abréviation du mot anglais « emphase » qui veut dire : mise en exergue
Attention : il est possible que la modification du fichier style_spip.css ne suffise pas si elle entre en conflit avec un autre fichier. Dans le cas présente aller voir : habillage-article.css et modifier la couleur de i.spip
Insérer un formulaire
<br>
<form action="mailto:journal.la.mee@wanadoo.fr" method="POST">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FF0000">
<tr>
<td width="25"><font size="1" face="Arial">Nom</font>
</td>
<td width="25"> <font size="1" face="Arial">
<input type="text" name="textfield2" size="8">
</font></td>
<td width="25"><font size="1" face="Arial">Prénom</font>
</td>
<td width="25"> <font size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="text" name="textfield23" size="8">
</font></td>
</tr>
<tr>
<td width="25"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">email
: </font></td>
<td width="25"> <font size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="text" name="textfield22" size="8">
</font></td>
<td width="25"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">adresse</font></td>
<td width="25"> <font size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="text" name="textfield222" size="8">
</font></td>
</tr>
<tr>
<td colspan="4">
<div align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">
<input type="submit" name="Submit" value="Envoyer">
</font></div>
</td>
</tr>
</table>
</td>
</tr>
</form>
Retraits
Si on tape :
-
.................. cela met une petite puce triangulaire
-*
............... cela met une autre puce et un retrait
-**
..............cela met une autre puce et un retrait plus grand
-***
..........etc !
Tout ça permet de belles présentations !
Insertion de photos
– En bas de la page, cliquer sur « insérer un document »
Il vaut mieux qu’il ne soit pas trop « lourd » (maxi 1 Mo)
– cliquer sur télécharger
Ensuite, cliquer sur « modifier l’article »
et mettre <doc527|left>
là où on veut la photo. Ou bien <doc527|right>
ou bien <doc527|center>
Si on veut mettre plusieurs photos :
– soit mettre <doc527|left> <doc528|left> <doc529|left>
avec tous « left »... mais des fois ça renvoie la troisième photo à la ligne d’en dessous
– soit mettre
|<doc544>| <doc545>| <doc546>|
(trois côte à côte, pas plus, sans left, right, center) sans oublier de placer le trait vertical
Si on met <emb|527|left>
cela met la photo en taille réelle.
Pour insérer plein de photos, par FTP, voir ici
Voir aussi quelques trucs ici :