Creer une jolie page
De plus, la prévualisation interne à l'éditeur est désactivée par défaut pour voir directement les sources HTML de la page à créer/éditer.
Aussi, veuillez préférer la prévualisation de votre page par le bouton "Prévualiser" en dessous de l'éditeur plutôt que par le bouton "Source" dans ce dernier.
En effet, cliquer sur le bouton "Source" risque de supprimer certaines de vos dispositions si elles ne sont pas prise en compte de base par l'éditeur !
Sommaire
A qui ça s'adresse ?
La création d'une page s'adresse à la fois aux joueurs qu'au staff susceptible de toucher aux page du site. En effet, le méchanisme d';affichage des pages custom que le staff connaît est le même que celui des fiches personnages.
Ainsi, si vous avez comme ambition de créer une belle fiche de personnage ou de rajouter/modifier une des pages du site alors vous trouverez votre bonheur ici.
Ce qu'il faut savoir
Comme les fiches de personnage et les pages custom utilisent le même mécanisme pour leur affichage, ils utilisent alors les mêmes outils. Celui-là va directement vous concerner, puisque c'est également grâce à lui que vous allez pouvoir embellir vos pages plus facilement.
En effet, nous utilisons un framework pour l'affichage du site, qui nous facilite la vie. Il s'agit de Bootstrap 4.6. Vous pouvez d'ailleurs consulter la documentation de ce framework, cela ne vous apportera que plus de connaissances.
Commençons par les fondamentaux
Les fondamentaux
Ce qui va vous être le plus utilse est de contrôler la disposition de votre page. Pour cela, Bootstrap nous met à disposition plusieurs classes, qui vont déterminer combien de place prend chaque composant et comment ils vont s'afficher.
Taille des éléments
En premier lieu, il faut savoir que Bootstrap va diviser la page en 12 colonnes. Il y aura donc 12 classe pour chacune des colonnes pour déterminer la taille de votre élément. En voici un exemple avec le code associé :
Ce block fait 1 colonne
Ce block fait 2 colonnes
Ce block fait 3 colonnes
Ce block fait 4 colonnes
Ce block fait 5 colonnes
Ce block fait 6 colonnes
Ce block fait 7 colonnes
Ce block fait 8 colonnes
Ce block fait 9 colonnes
Ce block fait 10 colonnes
Ce block fait 11 colonnes
Ce block fait 12 colonnes
Les différentes marges des éléments
Il existe deux types de marges en Html/CSS : Le padding (marges internes), et le margin (marges externes). Voyons un exemple avec la figure rouge :
Bootstrap met donc 6 classes à disposition pour les margin et les padding :
Margin à 0
Margin à 1
Margin à 2
Margin à 3
Margin à 4
Margin à 5
Pour appliquer le Margin uniquement sur un côté :
Margin à 3 en haut
Margin à 3 à droite
Margin à 3 en bas
Margin à 3 à gauche
La sémentique est exactement la même pour le padding, en voici un exemple simple :
Padding à 5
Les lignes
Il existe une façon simple de forcer plusieurs éléments à se mettre sur une seule ligne (dans la mesure où ils entrent tous dans les 12 colonnes). Il s'agit de la classe row :
Un block de 6 colonnes
Encore un block de 6 colonnes, sans la row je passerais à la ligne
Un block de 6 colonnes
Encore un block de 6 colonnes, sans la row je passerais à la ligne
Quelques classes faites par l'Arche
Pour vous aider dans la conception de vos pages quelques classes CSS ont été crées. En voici quelques unes
Un texte avec la couleur principale de l'Arche
Un texte avec la couleur principale de l'Arche
Un texte avec la couleur claire de l'Arche
Un texte avec la couleur claire de l'Arche
L'arche a également crée des classes pour gérer plus finement la taille de vos éléments:
Il y a également des classes pour définir la couleur de fond des éléments, voici deux exemples avec des sections (sur fond blanc afin de bien voir les différences) :
Code préfabriqué par l'arche pour de belles dispositions
Voici quelques codes préfaits par l'Arche pour appliquer une belle disposition sur vos pages. Commençons par un contenu à gauche, et un à droite :
Un contenu à gauche ! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu cursus diam. Suspendisse tristique nibh lorem, vel rutrum ipsum vestibulum a. Mauris elementum sem in nunc tincidunt rutrum. Maecenas mollis mauris sem, non luctus ex dictum nec. Vestibulum at est at nunc semper tempus quis vitae lectus. Proin volutpat luctus facilisis. Aliquam ut vulputate purus, ut dictum ante. Aliquam eget mi rutrum, vulputate dui id, auctor est. Duis cursus ultrices congue. Nam ut velit interdum neque malesuada egestas scelerisque ac elit. Phasellus id sagittis orci. Donec consequat euismod dui a bibendum. Integer tortor sem, efficitur a felis id, ornare luctus nibh. Duis ut ex sapien. Vestibulum iaculis nisl tellus, at commodo enim elementum vitae.
Un contenu à droite ! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu cursus diam. Suspendisse tristique nibh lorem, vel rutrum ipsum vestibulum a. Mauris elementum sem in nunc tincidunt rutrum. Maecenas mollis mauris sem, non luctus ex dictum nec. Vestibulum at est at nunc semper tempus quis vitae lectus. Proin volutpat luctus facilisis. Aliquam ut vulputate purus, ut dictum ante. Aliquam eget mi rutrum, vulputate dui id, auctor est. Duis cursus ultrices congue. Nam ut velit interdum neque malesuada egestas scelerisque ac elit. Phasellus id sagittis orci. Donec consequat euismod dui a bibendum. Integer tortor sem, efficitur a felis id, ornare luctus nibh. Duis ut ex sapien. Vestibulum iaculis nisl tellus, at commodo enim elementum vitae.
Un contenu à gauche ! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu cursus diam. Suspendisse tristique nibh lorem, vel rutrum ipsum vestibulum a. Mauris elementum sem in nunc tincidunt rutrum. Maecenas mollis mauris sem, non luctus ex dictum nec. Vestibulum at est at nunc semper tempus quis vitae lectus. Proin volutpat luctus facilisis. Aliquam ut vulputate purus, ut dictum ante. Aliquam eget mi rutrum, vulputate dui id, auctor est. Duis cursus ultrices congue. Nam ut velit interdum neque malesuada egestas scelerisque ac elit. Phasellus id sagittis orci. Donec consequat euismod dui a bibendum. Integer tortor sem, efficitur a felis id, ornare luctus nibh. Duis ut ex sapien. Vestibulum iaculis nisl tellus, at commodo enim elementum vitae.
Un contenu à droite ! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu cursus diam. Suspendisse tristique nibh lorem, vel rutrum ipsum vestibulum a. Mauris elementum sem in nunc tincidunt rutrum. Maecenas mollis mauris sem, non luctus ex dictum nec. Vestibulum at est at nunc semper tempus quis vitae lectus. Proin volutpat luctus facilisis. Aliquam ut vulputate purus, ut dictum ante. Aliquam eget mi rutrum, vulputate dui id, auctor est. Duis cursus ultrices congue. Nam ut velit interdum neque malesuada egestas scelerisque ac elit. Phasellus id sagittis orci. Donec consequat euismod dui a bibendum. Integer tortor sem, efficitur a felis id, ornare luctus nibh. Duis ut ex sapien. Vestibulum iaculis nisl tellus, at commodo enim elementum vitae.
Ensuite, voici un contenu centré :
Chaque block est centré ! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu cursus diam. Suspendisse tristique nibh lorem, vel rutrum ipsum vestibulum a. Mauris elementum sem in nunc tincidunt rutrum. Maecenas mollis mauris sem, non luctus ex dictum nec. Vestibulum at est at nunc semper tempus quis vitae lectus. Proin volutpat luctus facilisis. Aliquam ut vulputate purus, ut dictum ante. Aliquam eget mi rutrum, vulputate dui id, auctor est. Duis cursus ultrices congue. Nam ut velit interdum neque malesuada egestas scelerisque ac elit. Phasellus id sagittis orci. Donec consequat euismod dui a bibendum. Integer tortor sem, efficitur a felis id, ornare luctus nibh. Duis ut ex sapien. Vestibulum iaculis nisl tellus, at commodo enim elementum vitae.
Conclusion
Avec tout ça, vous avez les fondamentaux pour créer une page. Vous avez également de quoi faire des pages assez simples. Pour pousser votre personnalisation encore plus loin, vous pouvez visiter la documentation de Bootstrap.
Dans le cas où vous souhaiteriez appliquer votre propre style, cela vous est possible avec les attributs "style" des éléments HTML. Pour vous permettre de développer vos pages plus facilement, voici un template CodePen qui affichera en temps réel votre page avec le style de l'arche. Vous aurez alors un éditeur plus confortable.
Il suffira alors de copier/coller votre code, sans les balises link et script.