LA MAISON
NUMÉRIQUE

Trucs et astuces

  Sommaire  

 SPIP

Le site est construit avec SPIP
www.spip.net

 FONTAWESOME

La plupart des pictos proviennent de fontawesome
https://fontawesome.com/icons
Vous pouvez en choisir, dans la section gratuit, puis faire un copier coller dans votre espace texte.
Si Fontawesome demande login et mot-de-passe, inscrivez :
Login : picto@sitememoires.com
mot-de-passe : Lespictosgratuits

Voici la procédure en image :
J’ai choisi un picto de soleil.

J’ai copié le code <i class="fa-solid fa-sun"></i>
Le voici en différentes tailles, en couleur et sur fond coloré.

<i class="fa-solid fa-sun fa-2xs"></i>
<i class="fa-solid fa-sun fa-xs"></i>
<i class="fa-solid fa-sun fa-sm"></i>
<i class="fa-solid fa-sun"></i>
<i class="fa-solid fa-sun fa-lg"></i>
<i class="fa-solid fa-sun fa-xl"></i>
<i class="fa-solid fa-sun fa-2xl"></i>

















[rouge] <i class="fa-solid fa-sun fa-2xl"></i>[/rouge]
[fond or] <i class="fa-solid fa-sun fa-2xl"></i>[/fond or]



 COLONNES

Pour faire des colonnes il faut un peu de code. Vous pouvez mettre du texte, des images ou un mélange des deux à l’intérieur des colonnes.

On commence par inscrire que l’on veut des colonnes avec [multi_colonnes]. Puis, on spécifie combien de colonne on veut.
On a 3 choix :
2 colonnes : [colonne_50]
3 colonnes : [colonne_33]
4 colonnes : [colonne_25]

Après avoir mis du texte ou des images dans une colonne, on ferme cette colonne [/colonne_50] [/colonne_33] [/colonne_25]
Puis, à la fin on ferme la zone colonne [/multi_colonnes]

Un exemple à 2 colonnes :
[multi_colonnes]
[colonne_50]
aaa
[/colonne_50]
[colonne_50]
bbb
[/colonne_50]
[/multi_colonnes]

Ce qui donne :

aaa

bbb

Un exemple à 3 colonnes
[multi_colonnes]
[colonne_33]
aaa
[/colonne_33]
[colonne_33]
bbb
[/colonne_33]
[colonne_33]
ccc
[/colonne_33]
[/multi_colonnes]

Ce qui donne :

aaa

bbb

ccc

Un exemple à 4 colonnes
[multi_colonnes]
[colonne_25]
aaa
[/colonne_25]
[colonne_25]
bbb
[/colonne_25]
[colonne_25]
ccc
[/colonne_25]
[colonne_25]
ddd
[/colonne_25]
[/multi_colonnes]

Ce qui donne :

aaa

bbb

ccc

ddd

Un exemple concret
[multi_colonnes]
[colonne_33]
{{Potage aux carottes}}
<doc50|center>
{recette de Ricardo}
[/colonne_33]
[colonne_33]
{{Ingrédients}}

1 petit oignon, haché
30 ml (2 c. à soupe) de beurre
1,25 litre (5 tasses) de bouillon de poulet
390 g (3 tasses) de carottes pelées et tranchées (environ 7)
170 g (1 tasse) de pommes de terre pelées et coupées en cubes
[/colonne_33]
[colonne_33]
{{Préparation}}

Dans une grande casserole à feu moyen, attendrir l’oignon dans le beurre. Ajouter le bouillon, les carottes et la pomme de terre. Porter à ébullition. Couvrir et laisser mijoter doucement 20 minutes ou jusqu’à ce que les légumes soient tendres.
Au mélangeur, réduire la soupe en purée lisse. Saler et poivrer.
[/colonne_33]
[/multi_colonnes]

Ce qui donne :

Potage aux carottes

recette de Ricardo

Ingrédients

1 petit oignon, haché
30 ml (2 c. à soupe) de beurre
1,25 litre (5 tasses) de bouillon de poulet
390 g (3 tasses) de carottes pelées et tranchées (environ 7)
170 g (1 tasse) de pommes de terre pelées et coupées en cubes

Préparation

Dans une grande casserole à feu moyen, attendrir l’oignon dans le beurre. Ajouter le bouillon, les carottes et la pomme de terre. Porter à ébullition. Couvrir et laisser mijoter doucement 20 minutes ou jusqu’à ce que les légumes soient tendres.
Au mélangeur, réduire la soupe en purée lisse. Saler et poivrer.

En changeant l’appel des colonnes, on a des présentations différentes :
Avec [multi_colonnes_sans_marge] pour ouvrir et [/multi_colonnes_sans_marge] pour fermer


la présentation pour un 4 colonnes sera :
[multi_colonnes_sans_marge]
[colonne_25]
aaa
[/colonne_25]
[colonne_25]
bbb
[/colonne_25]
[colonne_25]
ccc
[/colonne_25]
[colonne_25]
ddd
[/colonne_25]
[/multi_colonnes_sans_marge]

Ce qui donne :

aaa

bbb

ccc

ddd

Un dernier exemple avec des blocs ombrés
Cette fois on met le code pour l’ombrage à l’intérieur de chaque colonne.
[multi_colonnes]
[colonne_50]
[bloc_ombre]
aaa
[/bloc_ombre]
[/colonne_50]
[colonne_50]
[bloc_ombre]
bbb
[/bloc_ombre]
[/colonne_50]
[/multi_colonnes]

Ce qui donne :

aaa

bbb