Dans ce tuto je vais vous montrer sous différente étape comment styler vos prefix.
Etape 1 :
Préfix d'origine :
Pour rendre vos préfix plat ajouter ce code dans votre template extra.css
Résultat :
===================================================================
Etape 2
Pour changer la couleur de votre préfix mettre ce ccode :
Résultat :
Le code prefixRoyalBlue correspond a la couleur du préfix, la sur le model j'ai prix le bleu.
PS: Si vous changer la couleur tout vos préfix bleu Royal seront changer.
====================================================================
Etape 3
Vous pouvez aussi faire les bordures plus grosse, mettre ce code :
Résultat :
====================================================================
Etape 4
Vous pouvez aussi arrondir les angles, mettez ce code :
Résultat :
====================================================================
Etape 5
Vous pouvez aussi ajouter un icone FA, mettez ce code :
Résultat :
PS : La aussi l'icone FA sera le même pour les préfix que vous avez en bleu Royal.
====================================================================
Etape 6
Vous pouvez aussi mettre un cadre autour de votre FA, mettez ce code :
Résultat :
Sinon simplement en laissant la couleur d'origine et en mettant un FA qui s'adapte a toute les catégories
Mettez ce code :
Résultat :
====================================================================
Résumer :
Pour avoir les péfix plat mettez le premier code ensuite a vous de choisir si vous voulez changer la couleur,
et si vous vous voulez ajouter un icone FA.
Pour changer les angles suffit de changer la valeur du border-radius ou de le supprimer.
Voici quelques codes des autres couleur préfix :
Le préfix jaune = .prefix.prefixYellow
Le préfix vert claire = .prefix.prefixLightGreen
Le préfix vert olive = .prefix.prefixOlive
C'est code sont a mettre a la place du code .prefix.prefixRoyalBlue
Voila ce tuto est terminer !
Crédit : @laurent68
Etape 1 :
Préfix d'origine :
Pour rendre vos préfix plat ajouter ce code dans votre template extra.css
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Résultat :
===================================================================
Etape 2
Pour changer la couleur de votre préfix mettre ce ccode :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Résultat :
Le code prefixRoyalBlue correspond a la couleur du préfix, la sur le model j'ai prix le bleu.
PS: Si vous changer la couleur tout vos préfix bleu Royal seront changer.
====================================================================
Etape 3
Vous pouvez aussi faire les bordures plus grosse, mettre ce code :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Résultat :
====================================================================
Etape 4
Vous pouvez aussi arrondir les angles, mettez ce code :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Résultat :
====================================================================
Etape 5
Vous pouvez aussi ajouter un icone FA, mettez ce code :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Résultat :
PS : La aussi l'icone FA sera le même pour les préfix que vous avez en bleu Royal.
====================================================================
Etape 6
Vous pouvez aussi mettre un cadre autour de votre FA, mettez ce code :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Résultat :
Sinon simplement en laissant la couleur d'origine et en mettant un FA qui s'adapte a toute les catégories
Mettez ce code :
Pour consulter le contenu, vous devez : Se connecter ou S'inscrire.
Résultat :
====================================================================
Résumer :
Pour avoir les péfix plat mettez le premier code ensuite a vous de choisir si vous voulez changer la couleur,
et si vous vous voulez ajouter un icone FA.
Pour changer les angles suffit de changer la valeur du border-radius ou de le supprimer.
Voici quelques codes des autres couleur préfix :
Le préfix jaune = .prefix.prefixYellow
Le préfix vert claire = .prefix.prefixLightGreen
Le préfix vert olive = .prefix.prefixOlive
C'est code sont a mettre a la place du code .prefix.prefixRoyalBlue
1).prefix.prefixPrimary
2).prefix.prefixSecondary
3).prefix.prefixGreen
4).prefix.prefixOlive
5).prefix.prefixLightGreen
6).prefix.prefixBlue
7).prefix.prefixRoyalBlue
8).prefix.prefixSkyBlue
9).prefix.prefixRed
10).prefix.prefixOrange
11).prefix.prefixYellow
12).prefix.prefixGray
13).prefix.prefixSilver
2).prefix.prefixSecondary
3).prefix.prefixGreen
4).prefix.prefixOlive
5).prefix.prefixLightGreen
6).prefix.prefixBlue
7).prefix.prefixRoyalBlue
8).prefix.prefixSkyBlue
9).prefix.prefixRed
10).prefix.prefixOrange
11).prefix.prefixYellow
12).prefix.prefixGray
13).prefix.prefixSilver
Voila ce tuto est terminer !
Crédit : @laurent68
