Membres connectés récemment
[AWESOMEBB]Modifier les icônes de la réponse rapide
Page 1 sur 1
Hello les ami(e)s,
voici une astuce qui va changer les icônes de la réponse rapide:
Actuellement vous avez ce visuel:
Vous pouvez selon votre choix avoir cette apparence:
Couleurs unies pour tous les boutons
Voir le style
Couleurs définies pour tous les boutons:
Voir le style
Pour cela, on va introduire la librairie awesome dans le template overall_header:
Affichage/Templates/Général/ overall_header
Juste avant ceci:
Déposez ceci:
Pensez a enregistrer puis à valider en cliquant respectivement sur puis
Ensuite il va falloir utiliser ce site:
https://fontawesome.com/v4.7/icons/
Cliquez sur un des boutons :
Recherchez le code unicode:
C'est ce code qu'il faudra reporter dans la feuille de style fournie et en vous repérant avec les commentaires.
Revenir à l'astuce
Couleurs unies pour tous les boutons:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
Penser a cliquer sur le bouton
Revenir à l'astuce
Couleurs définies pour tous les boutons:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
Penser a cliquer sur le bouton
voici une astuce qui va changer les icônes de la réponse rapide:
Actuellement vous avez ce visuel:
Vous pouvez selon votre choix avoir cette apparence:
Couleurs unies pour tous les boutons
Voir le style
Couleurs définies pour tous les boutons:
Voir le style
Pour cela, on va introduire la librairie awesome dans le template overall_header:
Affichage/Templates/Général/ overall_header
Juste avant ceci:
- Code:
{T_HEAD_STYLESHEET}
Déposez ceci:
- Code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Pensez a enregistrer puis à valider en cliquant respectivement sur puis
Ensuite il va falloir utiliser ce site:
https://fontawesome.com/v4.7/icons/
Cliquez sur un des boutons :
Recherchez le code unicode:
- Code:
fxxx
C'est ce code qu'il faudra reporter dans la feuille de style fournie et en vous repérant avec les commentaires.
Revenir à l'astuce
Couleurs unies pour tous les boutons:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
- Code:
#quick_reply .sceditor-button{text-indent:0px!important;}
#quick_reply .sceditor-button div{background:none!important; line-height: 16px!important;}
#quick_reply .sceditor-button div:before
{
font-family: FontAwesome;
font-size: 16px!important;
/*la couleur pour tous les boutons*/
color:#1E88E5!important;
font-weight: normal;
}
/*LE BOUTON GRAS*/
#quick_reply .sceditor-button.sceditor-button-bold div:before{content: "\f032";}
/*LE BOUTON ITALIC*/
#quick_reply .sceditor-button.sceditor-button-italic div:before{content: "\f033";}
/*LE BOUTON SOULIGNER*/
#quick_reply .sceditor-button.sceditor-button-underline div:before{content: "\f0cd";}
/*LE BOUTON BARRER*/
#quick_reply .sceditor-button.sceditor-button-strike div:before{content: "\f0cc";}
/*LE BOUTON MENTIONNER*/
#quick_reply .sceditor-button.sceditor-button-mention div:before{content: "\f21d";}
/*LE BOUTON SPOILER*/
#quick_reply .sceditor-button.sceditor-button-faspoiler div:before{content: "\f160";}
/*LE BOUTON SMILEYS*/
#quick_reply .sceditor-button.sceditor-button-emoticon div:before{content: "\f118";}
/*LE BOUTON BASCULER DE MODE EDITION EN MODE HTML*/
#quick_reply .sceditor-button.sceditor-button-source:not(.hover) div:before{content: "\f070";}
#quick_reply .sceditor-button.sceditor-button-source.hover{box-shadow:none!important;}
/*LE BOUTON BASCULER DE MODE EDITION EN MODE WYSIWYG*/
#quick_reply .sceditor-button.sceditor-button-source.hover div:before{content: "\f06e";}
/*ON DESACTIVE L OPACITE*/
#quick_reply .sceditor-button.disabled div{opacity:1!important;}
Penser a cliquer sur le bouton
Revenir à l'astuce
Couleurs définies pour tous les boutons:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajouter ceci:
- Code:
#quick_reply .sceditor-button{text-indent:0px!important;}
#quick_reply .sceditor-button div{background:none!important; line-height: 16px!important;}
#quick_reply .sceditor-button div:before
{
font-family: FontAwesome;
font-size: 16px!important;
font-weight: normal;
}
/*LE BOUTON GRAS*/
#quick_reply .sceditor-button.sceditor-button-bold div:before
{
color:#1E88E5!important;
content: "\f032";
}
/*LE BOUTON ITALIC*/
#quick_reply .sceditor-button.sceditor-button-italic div:before
{
color:#660000!important;
content: "\f033";
}
/*LE BOUTON SOULIGNER*/
#quick_reply .sceditor-button.sceditor-button-underline div:before
{
color:#40A497!important;
content: "\f0cd";
}
/*LE BOUTON BARRER*/
#quick_reply .sceditor-button.sceditor-button-strike div:before
{
color:#707344!important;
content: "\f0cc";
}
/*LE BOUTON MENTIONNER*/
#quick_reply .sceditor-button.sceditor-button-mention div:before
{
color:#F1B906!important;
content: "\f21d";
}
/*LE BOUTON SPOILER*/
#quick_reply .sceditor-button.sceditor-button-faspoiler div:before
{
color:#F006F1!important;
content: "\f160";
}
/*LE BOUTON SMILEYS*/
#quick_reply .sceditor-button.sceditor-button-emoticon div:before
{
color:#F15B06!important;
content: "\f118";
}
/*LE BOUTON BASCULER DE MODE EDITION EN MODE HTML*/
#quick_reply .sceditor-button.sceditor-button-source:not(.hover) div:before
{
color:#27F106!important;
content: "\f070";
}
#quick_reply .sceditor-button.sceditor-button-source.hover{box-shadow:none!important;}
/*LE BOUTON BASCULER DE MODE EDITION EN MODE WYSIWYG*/
#quick_reply .sceditor-button.sceditor-button-source.hover div:before
{
color:#06C4F1!important;
content: "\f06e";
}
/*ON DESACTIVE L OPACITE*/
#quick_reply .sceditor-button.disabled div{opacity:1!important;}
Penser a cliquer sur le bouton
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum