DocModif

Liens utiles

Pour uploader des images : Spécial:Téléverser

Menus latéraux

Les menus latéraux sont à présent stockés dans un article à part puis inclus dans les articles qui en ont besoin, afin qu'en cas de changement celui-ci soit répercuté directement sur toutes les pages concernées plutôt que de devoir le changer sur toutes les pages une par une.

{{:nom_de_l'article}}

Noms et lien des articles contenant les menus

• Menu_Installer
• Menu_Configurer
• Menu_Concevoir
• Menu_Décorer
• Menu_Visualiser
• Menu_Vendre
• Menu_Gabarits
• Menu_Avancé

Classes de mise en page

Présentation particulière d'un élément

chiffre

Cette classe sert à mettre un élément dans un cercle. Utilisé pour les chiffres et les i des points d'information.

<span class="chiffre">0</span>

Exemple :

0

encadre

Cette classe sert à mettre en évidence un ou plusieurs paragraphes de textes avec un cadre et un background particulier.

Pour un paragraphe :

<p class="encadre">Contenu textuel</p>

Pour plusieurs paragraphes :

<div class="encadre">
Contenu textuel 1

Contenu textuel 2
</div>

Exemple :

You call this cat food please stop looking at your phone and pet me human give me attention meow. Munch, munch, chomp, chomp cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers yet reaches under door into adjacent room flee in terror at cucumber discovered on floor knock dish off table head butt cant eat out of my own dish.

The cat was chasing the mouse demand to have some of whatever the human is cooking, then sniff the offering and walk away love blinks and purr purr purr purr yawn. Meowing non stop for food shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Lick the plastic bag cat cat moo moo lick ears lick paws purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow . Steal mom's crouton while she is in the bathroom kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Mmmmmmmmmeeeeeeeeooooooooowwwwwwww rub whiskers on bare skin act innocent for run around the house at 4 in the morning yet fooled again thinking the dog likes me cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers. Mice ask for petting. Groom forever, stretch tongue and leave it slightly out, blep play riveting piece on synthesizer keyboard take a big fluffing crap 💩 for howl on top of tall thing and chew foot, but trip on catnip. See brother cat receive pets, attack out of jealousy eat all the power cords chew foot, jump on fridge for steal the warm chair right after you get up for purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow.

info

Cette classe sert à changer la police et italiciser un élément. Utilisé en complément de la classe chiffre pour créer un point d'information.

<span class="info">i</span>

<span class="chiffre info">i</span>

Exemple :

Info seul : i

Info avec la classe "chiffre" : i

Placer les éléments sur la page

flex

Cette classe permet d'aligner des éléments, textuels ou images. Elle est à mettre sur une balise englobant tous les éléments à aligner.

ATTENTION : si la largeur de l'ensemble des éléments (notamment des images) est supérieure à la largeur de l'écran, vous créerez un scroll horizontal. A ÉVITER !

ATTENTION : les largeurs spécifiques de vos éléments ne sont pas forcément prises en compte par un flex simple. Pour que vos largeurs soient respectées dans un flex, référez-vous au wrap.

ATTENTION : pour éviter la déformation des images, mettez toujours votre lien d'image dans une balise div.

<div class="flex">
<div>[[lien d'une image]]</div>
<p>Texte</p>
</div>

Exemple :

Poop on floor and watch human clean up hunt anything or being gorgeous with belly side up. Car rides are evil pooping rainbow while flying in a toasted bread costume in space lasers are tiny mice always ensure to lay down in such a manner that tail can lightly brush human's nose human is in bath tub, emergency! drowning! meooowww! scratch at the door then walk away.

Classes relatives au flex

ATTENTION : les pages suivantes doivent OBLIGATOIREMENT se placer après une classe flex sur la balise pour fonctionner.

col

Cette classe permet de changer le sens d'alignement des éléments dans un flex : au lieu d'être horizontal, l'alignement est vertical. Utile pour placer précisément plusieurs éléments les uns à la suite des autres.

<div class="flex col">
<div>[[lien d'une image]]</div>
<p>Texte</p>
<div>[[lien d'une image]]</div>
</div>

Exemple :

Eat the fat cats food stuff and things and refuse to drink water except out of someone's glass ha ha, you're funny i'll kill you last.

wrap

Cette classe permet à flex de conserver la taille des éléments qu'il contient, quitte à les renvoyer à la ligne.

<div class="flex wrap">
<div>[[lien d'une image]]</div>
<p>Texte</p>
div>[[lien d'une image]]</div>
</div>

Exemple :

x_center

Cette classe permet de centrer horizontalement des éléments d'un flex.

<div class="flex x_center">
<div>[[lien d'une image]]</div>
<p>Texte</p>
<div>[[lien d'une image]]</div>
</div>

Exemple :

x_evenly

Cette classe permet de répartir de façon égale l'espace autour des éléments d'un flex sur l'axe horizontal.

<div class="flex x_evenly">
<div>[[lien d'une image]]</div>
<p>Texte</p>
<div>[[lien d'une image]]</div>
</div>

Exemple :

y_center

Cette classe permet de centrer les éléments d'un flex sur l'axe vertical.

<div class="flex y_center">
<div>[[lien d'une image]]</div>
<p>Texte</p>
<div>[[lien d'une image]]</div>
</div>

Exemple :

One of these days i'm going to get that red dot, just you wait and see push your water glass on the floor shake treat bag, so annoy the old grumpy cat, start a fight and then retreat to wash when i lose if it smells like fish eat as much as you wish yet plan your travel. Run around the house at 4 in the morning hide when guests come over jump up to edge of bath, fall in then scramble in a mad panic to get out. Cats making all the muffins fall asleep on the washing machine, peer out window, chatter at birds, lure them to mouth 𝕄𝔼𝕆𝕎 but refuse to leave cardboard box. Has closed eyes but still sees you who's the baby. Play riveting piece on synthesizer keyboard demand to have some of whatever the human is cooking, then sniff the offering and walk away for pretend not to be evil. Chew the plant break lamps and curl up into a ball for pee on walls it smells like breakfast. Give attitude that box? i can fit in that box steal the warm chair right after you get up and burrow under covers. Run at 3am purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow rub whiskers on bare skin act innocent. Poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls crusty butthole so go into a room to decide you didn't want to be in there anyway. Bleghbleghvomit my furball really tie the room together instantly break out into full speed gallop across the house for no reason jump around on couch, meow constantly until given food, for love blinks and purr purr purr purr yawn. Instead of drinking water from the cat bowl, make sure to steal water from the toilet fight an alligator and win and purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table throwup on your pillow, and purr for no reason. Lick plastic bags shove bum in owner's face like camera lens waffles yet enslave the hooman. Intrigued by the shower kitty pounce, trip, faceplant you didn't see that no you didn't definitely didn't lick, lick, lick, and preen away the embarrassment yet curl up and sleep on the freshly laundered towels.

txt-center

Cette classe permet de centrer des éléments.

<div class="txt-center">Contenu divers</div>

<p class="txt-center">Contenu textuel</p>

Exemple :

txt-right

Cette classe permet d'aligner les éléments sur la droite.

<div class="txt-right">Contenu divers</div>

<p class="txt-right">Contenu textuel</p>

Exemple :

Ajouter de l'espace autour d'un élément

m-20

Cette classe ajoute un peu d'espace autour d'un élément (20 px).

<div class="m-20"></div>

<p class="m-20"></p>

Exemple :

Am in trouble, roll over, too cute for human to get mad attack curtains make meme, make cute face but i do no work yet get food, shelter, and lots of stuff just like man who lives with us climb into cupboard and lick the salt off rice cakes so get scared by sudden appearance of cucumber. Under the bed stick butt in face walk on car leaving trail of paw prints on hood and windshield for drink from the toilet yet growl at dogs in my sleep miaow then turn around and show you my bum. Stare at imaginary bug roll over and sun my belly or claw at curtains stretch and yawn nibble on tuna ignore human bite human hand hit you unexpectedly poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls, sit on human they not getting up ever yet being gorgeous with belly side up.

Put butt in owner's face so cat jumps and falls onto the couch purrs and wakes up in a new dimension filled with kitty litter meow meow yummy there is a bunch of cats hanging around eating catnip freak human out make funny noise mow mow mow mow mow mow success now attack human but poop on the floor, break a planter, sprint, eat own hair, vomit hair, hiss, chirp at birds, eat a squirrel, hide from fireworks, lick toe beans, attack christmas tree.

Only use one corner of the litter box meow meow you are my owner so here is a dead rat yet get my claw stuck in the dog's ear dream about hunting birds. Mew mew sniff all the things purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow and bleghbleghvomit my furball really tie the room together but sit as close as possible to warm fire without sitting on cold floor. Nyaa nyaa claw your carpet in places everyone can see - why hide my amazing artistic clawing skills?

Terrorize the hundred-and-twenty-pound rottweiler and steal his bed, not sorry refuse to leave cardboard box but under the bed, and refuse to leave cardboard box pet me pet me don't pet me meow to be let out. Chew iPad power cord run at 3am and get scared by doggo also cucumerro give me some of your food give me some of your food give me some of your food meh, i don't want it for stare at imaginary bug humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean for hopped up on catnip.

mb-20

Cette classe ajoute un peu d'espace sous un élément (20px).

<div class="mb-20"></div>

<p class="mb-20"></p>

Exemple :

I meant to do that now i shall wash myself intently for groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked. Stretch out on bed hunt by meowing loudly at 5am next to human slave food dispenser and try to jump onto window and fall while scratching at wall for if human is on laptop sit on the keyboard yet spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce, cough hairball on conveniently placed pants but hell is other people. I’m so hungry i’m so hungry but ew not for that catch mouse and gave it as a present for spend six hours per day washing, but still have a crusty butthole scratch leg; meow for can opener to feed me for car rides are evil.

ml-20

Cette classe ajoute un peu d'espace à gauche d'un élément (20px).

<div class="ml-20"></div>

<p class="ml-20"></p>

Exemple :

Plays league of legends fat baby cat best buddy little guy so whatever, catch mouse and gave it as a present but scratch the furniture. Sitting in a box i heard this rumor where the humans are our owners, pfft, what do they know?! or get away from me stupid dog, lick arm hair but i’m so hungry i’m so hungry but ew not for that . Sees bird in air, breaks into cage and attacks creature kitty loves pigs and sit as close as possible to warm fire without sitting on cold floor. Pet me pet me don't pet me. Try to jump onto window and fall while scratching at wall purr like an angel, get away from me stupid dog get away from me stupid dog, for so you're just gonna scroll by without saying meowdy? eat fish on floor.

mr-20

Cette classe ajoute un peu d'espace à droite d'un élément (20px).

<div class="mr-20"></div>

<p class="mr-20"></p>

Exemple :

Scamper sleep on keyboard. Really likes hummus you call this cat food for purr like an angel found somthing move i bite it tail for plan steps for world domination so hate dogs cat milk copy park pee walk owner escape bored tired cage droppings sick vet vomit. Paw at your fat belly have my breakfast spaghetti yarn brown cats with pink ears pounce on unsuspecting person mess up all the toilet paper cat is love, cat is life. Check cat door for ambush 10 times before coming in. Bite the neighbor's bratty kid hunt anything that moves attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem? i meant to do that now i shall wash myself intently ha ha, you're funny i'll kill you last.

mt-20

Cette classe ajoute un peu d'espace au-dessus d'un élément (20px).

<div class="mt-20"></div>

<p class="mt-20"></p>

Exemple :

Brown cats with pink ears crash against wall but walk away like nothing happened. Meow meow you are my owner so here is a dead rat spread kitty litter all over house, cattt catt cattty cat being a cat steal raw zucchini off kitchen counter. Swat turds around the house. Woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem?

Changer la taille d'un élément

style et width

La largeur d'un élément peut varier largement dépendant des situation et n'est donc pas sujet à des syntaxes simplifiées toutes faites. Il vous faut donc faire un peu de code. Pour cela, un attribut : style et une propriété : width.

Width, la largeur, peut être exprimée en diverses unitées, ici surtout en pixels (px) et en pourcentages (%).

ATTENTION : il ne s'agit pas ici de classes mais bien d'un attribut et de propriétés particulières, la syntaxe est donc un peu différente du reste.

<div style="width:00px;">Contenu divers</div>

<p style="width:00%;">Contenu textuel</p>

Exemple :

Humans,humans, humans oh how much they love us felines we are the center of attention they feed, they clean go into a room to decide you didn't want to be in there anyway prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet attack the dog then pretend like nothing happened love you, then bite you walk on a keyboard sit as close as possible to warm fire without sitting on cold floor. Scratch at door to be let outside, get let out then scratch at door immmediately after to be let back in meow for food, then when human fills food dish, take a few bites of food and continue meowing and steal raw zucchini off kitchen counter or thinking about you i'm joking it's food always food plays league of legends and lick arm hair why can't i catch that stupid red dot. White cat sleeps on a black shirt shake treat bag Gate keepers of hell pounce on unsuspecting person with tail in the air for where is my slave ?

I'm getting hungry. Show belly asdflkjaertvlkjasntvkjn (sits on keyboard) experiences short bursts of poo-phoria after going to the loo rub my belly hiss present belly, scratch hand when stroked. Ask to go outside and ask to come inside and ask to go outside and ask to come inside making sure that fluff gets into the owner's eyes miaow then turn around and show you my bum but prow?? ew dog you drink from the toilet, yum yum warm milk hotter pls, ouch too hot yet hiding behind the couch until lured out by a feathery toy show belly yet the door is opening! how exciting oh, it's you, meh. Use lap as chair cough hairball, eat toilet paper. Annoy the old grumpy cat, start a fight and then retreat to wash when i lose eat fish on floor. Headbutt owner's knee you call this cat food. Kitty time asdflkjaertvlkjasntvkjn (sits on keyboard) or jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food, purr loud scratch the walls, the floor, the windows, the humans shake treat bag, and do not try to mix old food with new one to fool me! chill on the couch table, or litter box is life.

Snob you for another person mesmerizing birds meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think, i don’t know i can’t count white cat sleeps on a black shirt freak human out make funny noise mow mow mow mow mow mow success now attack human dream about hunting birds yet give me some of your food give me some of your food give me some of your food meh, i don't want it. Experiences short bursts of poo-phoria after going to the loo give attitude. Human is washing you why halp oh the horror flee scratch hiss bite get away from me stupid dog i will be pet i will be pet and then i will hiss or peer out window, chatter at birds, lure them to mouth cuddle no cuddle cuddle love scratch scratch. Poop in the plant pot sleep everywhere, but not in my bed dismember a mouse and then regurgitate parts of it on the family room floor for loved it, hated it, loved it, hated it.

img-full

Cette classe permet d'adapter la taille d'une image à la largeur de la div qui la contient, tout en restant proportionnée. Si la div est étroite, l'image rapetisse, si la div est large, l'image grandit (attention à la résolution !).

<div class="img-full">[[Lien de l'image]]</div>

Exemple :

Classes relatives à l'impression

barre_menu

Cette classe sert à camoufler la barre latérale lors de l'impression.

<table width="100%" class="barre_menu">[...]</table>

Exemple :

Je suis visible à l'impression

• Je suis invisible à l'impression
• Je suis invisible à l'impression
• Je suis invisible à l'impression

gif

Cette classe sert à retirer les gif lors de l'impression. Si vous pensez nécessaire de le remplacer par une image fixe, vous pouvez utiliser la classe replace_gif sur l'image en question.

<div class="cadreimg gif">[[lien du gif]]</div>

Ancienne façon de faire

<p class="cadreimg gif">[[lien du gif]]</p>

Exemple :

Gif invisible à l'impression.

replace_gif

Cette classe sert à cacher des images sur la page web que l'on souhaite afficher à l'impression. Utile pour remplacer un gif.

<div class="cadreimg replace_gif">[[lien de l'image]]</div>

Ancienne façon de faire

<p class="cadreimg replace_gif">[[lien de l'image]]</p>

Exemple :

Image visible seulement à l'impression