logo article ou rubrique
style_css et typographie spip

par lagrenouille

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 symbole  {texte penché }

 
salut la compagnie

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

 
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

 
Les puces de début de ligne
exemple qui ne marche pas avec mes grenouilles à la place des *

  • 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 initial

     

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. :
    ~
    enter>|<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> |

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>

 
 

  • * avec le plugins "exergue *
    la syntaxe est : <exergue|texte=[vert fonce]Ce texte est mis en exergue[/vert fonce] |center>
    la grosseur des caractères se configure dans le plugin

     

Quelques exemples de 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

 

 

 

citation

 

  • 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(^.^) "
     
    accueil modifié par "chezlagrenouille on mumuse à geek"
    explication pour remplacer le titre du menu:
    * je crée un répertoire lang dans squelette
    * je crée dedans le fichier 'local_fr.php'
    et dedans je mets
    <?php
    // fichier de langue pour surcharger le squelette Escal

    if (!defined('_ECRIRE_INC_VERSION')) return;

    $GLOBALS[$GLOBALS['idx_lang']] = array(

    // A
    'accueil' => '(°ö°)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.Mais, comment ?
  • mettez votre image puce dans "/squelettes/images/puce1.png
  • puis dans votre perso.css, le code :

 

 

  • Mettre un commentaire ou un titre sous l’annonce défilante, avant l’article d’accueil
     
  • mettre inc-annonce_defilant.htmt dans "squellettes/inclusions et mettre votre commentaire avant la balise de fin
     
    <h1>Attention</h1>
    <h2><em>un titre peut en cacher un autre

     

     Un peu d’aide pour vos codes couleur
    *-* Dans Firefox le module "colorzilla"
     
    *-* sous debian, ou autre distributions copiées sur debian
     




Haut de page
Systéme: Gnu_Linux_Debian