logo article ou rubrique
styles typo et css

UN PEU DE TYPOGRAPHIE DANS SPIP

ce titre est encadré par les symboles {{{pour titre ou paragraphe }}}

 
Écrire en caractères penchés,à mettre en début et fin de ligne

ce titre est encadré par les symboless{texte penché }

salut la compagnie

ce titre écrit en gras est encadré par les symboles {{texte en gras }}

 

Un peu de couleurs dans vos textes avec le plugin "couleurs_spip"

  • quelques exemples
     

ET ÇA VA LE FAIRE MON GAILLARD

ah les vilains canards

la syntaxe est  <cs_xxl>ah les vilains canards </cs>

ah les vilains canards

la syntaxe est <cs_xxxl>ah les vilains canards </cs>

ah les vilains canards

la syntaxe est <cs_xxxs>[or]ah les vilains canards[/or] </cs>

ah les vilains canards

la syntaxe est <cs_xs>ah les vilains canards </cs>

ah les vilains canards

la syntaxe est <cs_xxxl>[rouge]ah les vilains canards[/rouge] </cs>

 

la syntaxe est : <exergue|texte=[vert fonce]Ce texte est mis en exergue[/vert fonce] |center>
  • les textes de syntaxes sont dans un cadre blanc, la couleur de fond peut être changé dans le fichier perso css, tout comme la couleur de fond de l’article.
     
    pour le cadre blanc, la syntaxe est donc <code>texte et fermer la balise en plaçant un / après le<
    pour le cadre générale la partie voulue est encadré par [( en début et)] à la fin
    le principe est toujours le même, de fermer les balises qui sont ouverte au début de texte.

     

    ceci est une citation

    la syntaxe est :<quote>ceci est une citation</quote> ou <poesie>texte</poesie>

     
    ce texte est biffé

    la syntaxe est :<del>ce texte est  biffé</del>

     

    texte défilant de droite à gauche de l’écran
    <marquee> texte défilant de droite à gauche de l'écran </marquee>
centrer un texte
<center> centrer un texte </center>

 
la numérotation des lignes

  1. première ligne
  2. deuxième ligne
    1. une sous liste à puce
  3. de retour dans le niveau initial
  4. - et voila
  5. et revoila
     
    la syntaxe
    -# première ligne
    -# deuxième ligne
    -## une sous liste à puce
    -# de retour dans le niveau initial
    -#- et voila
    -# et revoila

 
 
Les puces de début de ligne

  • première ligne
  • deuxième ligne
    • une sous liste à puce
  • de retour dans le niveau initial
     
    la syntaxe
    -* première ligne
    -* deuxième ligne
    -** une sous liste à puce
    -* de retour dans le niveau inkitial

     

Faire un tableau

nom prénom avatar situation
roliere jean coincoin perdu

 

  • comment centrer ?
     
nom
prenom
avatar
rusote
gilbert
gigi
coincoin
coincoin
coincoin

 

  • Faire un tableau à partir d’un fichier csv.
     
    - ouvrir le csv avec libreoffice
    - choisir Europe occidental (windows- 1252/winlatin1
    - français (france)
    - séparé par tabulation (cocher virgule) séparateur de texte ’’ par défaut
     
    - une fois le tableur ouvert, insérer des colonnes avant, entre et après les colonnes existantes
    et coller des pipes | (commande pour pipe = Alt Gr + 6)
  • sélectionner le tout du tableau et faites un copier coller dans votre article


 

  • le code des tableaux
-* Le principe est simple, le signe "|" sépare chaque cellule
-* le plus simple tableau est:
| canard | cochons | dindons | aiglons | moutons |
~
-*Voir la doc de spip, on peut fusionner des cellules, avec |^| - |<| ..etc..


Dans le tableau au dessus le code est. :
~
<code>
| {{[bleu marine]nom[/bleu marine]}} | {{[bleu marine]prénom[/bleu marine]}} | {{[bleu marine]avatar[/bleu marine]}} | {{[bleu marine]situation[/bleu marine]}} |
| roliere | jean | coincoin | perdu |
|<img1664|center>|<img1665|center>|<img1666|center>|<img1667|center>|

| <center>[or]nom[/or]</center> |<center> [or]prenom[/or]</center>| <center>[or]avatar[/or]</center>|
|<center> rusote</center> | <center>gilbert</center> | <center>gigi</center> |
|<center> [rouge]coincoin[/rouge]</center> | <center>[or]coincoin[/or]</center> | <center>[rouge]coincoin[/rouge]</center> |

 

Exemples styles : le fichier perso.css :

 

  • Votre fichier "perso.css" se trouve dans squelette, nous avons vu comment l’éditer ec le sauvegarder dans le paragraphe précédent squelette-escal .

C’est ici que l’on va créer le fichier perso.css
ce fichier vous donne de nombreuses possibilités pour améliorer le contenu graphique de votre site.
Nous allons en voir quelques exemples, beaucoup d’autres sont à découvrir sur le site d’escal,le site de developpeur ici :
http://escal.ac-lyon.fr/spip/
 

 

  • Je trouve que mon bandeau colle trop en haut de ma page dans le navigateur

 

  • Cet article est dans un encadrement marron clair, j’ai demandé ce cadre avec ce code
    [( en début et fermer à la fin )]

     

  • pour la couleur c’est dans style.css

 

 

 

  • Allez sur le site d’escalV4, vous trouverez une série de codes et d’explications.
  • exemple avec le titre Accueil, que vous pouvez renommer comme bon vous semble
  • ici e sera " (°ö° ) Chezlagrenouille, on mumuse à geek(^.^) "
     

 

  • avec un peu de patiente, on peut s’amuser avec les couleurs

  • si le point rond ne vous plaît pas, celui ci étant créer par -* dans votre article
  • vous pouvez changer cette puce, toujours dans perso.css.
  • Vous pouvez voir que j’ai mis une grenouille.



Veuillez laisser l’État dans la malpropreté dans lequel vous l’avez trouvé en y entrant.


Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.2.0