Astuces diverses
avatar
Messages : 130
Date d'inscription : 07/02/2015
PNJ






Jeu 13 Aoû - 11:28

Astuces
Vous trouverez ici des astuces de personnalisation rassemblées par nos membres. Petits tutoriels et ressources diverses, tout ce qui ne rentre pas dans les autres sujets de la Boîte à Outils se retrouve ici !

Tout ce qui se trouve ici est pour vous : pour utiliser une ressource ou appliquer une astuce, pas besoin de demander ! En revanche, si vous avez un problème ou des questions, n'hésitez pas à contacter l'auteur du message.

Pour proposer des ressources / astuces, postez-les simplement à la suite de ce sujet.


Les class du forum

On va commencer par vous lister quelques class présentes dans le css du forum, et que vous pouvez utiliser telles quelles pour la mise en page de vos messages !
Voir le profil de l'utilisateur
avatar
Messages : 130
Date d'inscription : 07/02/2015
PNJ






Jeu 13 Aoû - 15:01

Les messages officiels

Voici les class principalement utilisées pour les messages officiels du forum, de ce type-là :

Spoiler:
 

Les cadres gris et blanc dans lesquels on écrit tout ça s'appellent cadregris et cadreblanc. Ces class s'utilisent dans des div, et on les imbrique généralement l'une dans l'autre, comme ça :

Code:
<div class="cadregris"><div class="cadreblanc">VOTRE TEXTE ICI</div></div>

Le gros titre sur fond vert que vous voyez au début de ce message, c'est le titre1. La version orange qui juste en-dessous, c'est le titre2. Les deux sont à utiliser dans des div, comme ça :

Code:
<div class="titre">VOTRE TITRE ICI</div>

Code:
<div class="titre2">VOTRE TITRE ICI</div>

Si vous voulez les utiliser avec les cadres ci-dessus, la div du titre1 se place avant les div des cadres, et la div du titre2 se place entre le cadregris et le cadreblanc :

Code:
<div class="titre1">VOTRE TITRE ICI</div><div class="cadregris"><div class="cadreblanc">VOTRE TEXTE ICI</div></div>

Code:
<div class="cadregris"><div class="titre2">VOTRE TITRE ICI</div><div class="cadreblanc">VOTRE TEXTE ICI</div></div>
Voir le profil de l'utilisateur
avatar
Messages : 130
Date d'inscription : 07/02/2015
PNJ






Jeu 13 Aoû - 15:01

Les autres titres

Les deux premiers titres ne vont pas avec le reste de votre message ? On a tout prévu ! Voici quelques autres titres que vous pouvez utiliser pour organiser vos messages :

Titre 3

Code:
<div class="titre3">Titre 3</div>

Titre 4

Code:
<div class="titre4">Titre 4</div>

Titre 5

Code:
<div class="titre5">Titre 5</div>

Titre vert

Code:
<div class="titrevert">Titre vert</div>

Titre orange

Code:
<div class="titreorange">Titre orange</div>

NB : le dernier modèle est également disponible en blanc, pour le mettre sur un fond sombre ou coloré ! Comme sur ce font vert, par exemple :

Titre blanc

Code:
<div class="titreblanc">Titre blanc</div>
Voir le profil de l'utilisateur
avatar
Messages : 130
Date d'inscription : 07/02/2015
PNJ






Jeu 13 Aoû - 15:15

Les autres blocs de texte

Voici de quoi organiser un peu vos blocs de texte ! Tout d'abord, deux blocs fréquemments utilisés dans les sujets officiels :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:
<div class="barreverte">TEXTE</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:
<div class="barreorange">TEXTE</div>

Pour mettre un peu de texte en valeur, un encadré tout simple :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:
<div class="encadre">TEXTE</div>

Et enfin, pour ajouter un petit paragraphe de texte explicatif :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:
<div class="infobloc">TEXTE</div>
Voir le profil de l'utilisateur
avatar
Messages : 130
Date d'inscription : 07/02/2015
PNJ






Jeu 13 Aoû - 15:16

Les couleurs

Les couleurs des groupes du forum sont des couleurs html courantes, avec un code et un nom. Pour les utiliser, vous pouvez employer soit leur code, soit leur nom :

Éveillés : mediumseagreen / #3DB372
Éteints : cornflowerblue / #6394ED
Brisés : crimson / #6394ED

Par ailleurs, les deux couleurs principales du forum ont une class associée :

#88c235 (vert)
#eaab32 (orange)

Vous pouvez utiliser le code de la couleur pour l'utiliser dans vos messages, ou bien utiliser la class dans un div ou un span pour colorer facilement du texte. Par exemple :

Lorem ipsum dolor sit amet

Code:
<span class="vert">TEXTE</span>

Deux autres class sont disponibles pour mettre du texte orange ou vert en gras :

Lorem ipsum dolor sit amet

Code:
<span class="bold_vert">TEXTE</span>

Lorem ipsum dolor sit amet

Code:
<span class="bold_orange">TEXTE</span>

Mais vous ne cherchez pas forcément à reprendre les couleurs du forum ! Si vous cherchez plus de couleurs, vous pourrez trouver votre bonheur sur ce site. Là encore, vous pouvez utiliser soit les noms soit les codes des couleurs qui vous intéressent. Si vous repérez une couleur qui vous plaît mais que vous l'aimeriez bien un peu plus nuancée, cliquez sur "Shades" pour obtenir un dégradé de la couleur en question. "Mix" vous permet de créer un dégradé entre deux couleurs choisies (et donc de trouver des teintes entre les deux couleurs). Vous pouvez également utiliser le color picker de ce site pour obtenir le code html de n'importe quelle couleur.
Voir le profil de l'utilisateur
Contenu sponsorisé







Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Escapism :: DETENTE :: Esthétismes :: Boîte à Outils-