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 > Mise en forme : titres, boutons, cadre, couleurs, photos

Mise en forme : titres, boutons, cadre, couleurs, photos

FTP : installation et usage

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 :

Gros Titre

 Un intertitre noir

<h2>....</h2>

Cela donne ceci :

Intertitre


 Des « boutons »

[<input value="Précédente" type="submit" />-> ]

(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>
Sommaire

 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 :

signature

 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.spip
font-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&eacute;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>

Voir aussi :


 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 :


NOTES:

8