Connexion

Récupérer mon mot de passe

Derniers sujets*
» [PHPBB2]Personnaliser les annonces, notes etc
par soleda Mer 8 Sep 2021 - 8:20

» [PHPBB3]Personnaliser les annonces, notes etc
par Milouze14 Mer 8 Sep 2021 - 8:09

» [TOUTES VERSIONS] Installer MESSENGER Forumactif sur votre forum (Version Française)
par Myrddin Ven 3 Sep 2021 - 22:34

» [TOUTES VERSIONS] Modifier les textes de la barre de navigation
par Ella Lun 30 Aoû 2021 - 18:13

» [PHPBB2]Afficher des commentaires sous forme de vignettes
par soleda Ven 6 Aoû 2021 - 9:38

» [AWESOMEBB]Supprimer le mot invité
par Milouze14 Lun 19 Juil 2021 - 19:03

» [MODERNBB]Supprimer le mot invité
par Milouze14 Lun 19 Juil 2021 - 18:53

» [AWESOMEBB]Modifier les icônes de la réponse rapide
par Milouze14 Sam 17 Juil 2021 - 19:37

» [MODERNBB]Afficher des commentaires sous forme de vignettes
par Milouze14 Lun 12 Juil 2021 - 8:37

» [AWESOMEBB]Afficher des commentaires sous forme de vignettes
par Milouze14 Mer 7 Juil 2021 - 19:25

» [PHPBB3]Afficher des commentaires sous forme de vignettes
par photoclic Jeu 1 Juil 2021 - 23:28

» [PHPBB2] Afficher l'id/ami et brouillon dans le Welcome de la toolbar
par Ptite_Perle Jeu 24 Juin 2021 - 18:29

» [TOUTES VERSIONS] Utiliser les variables utilisateur/forum
par Milouze14 Mer 23 Juin 2021 - 7:01

» [TOUTES VERSIONS] Changer les boutons Nouveau MP et Répondre au MP par du texte
par Constellation Mer 16 Juin 2021 - 0:53

» [PHPBB2] Afficher le posteur du sujet dans les réponses
par Constellation Jeu 10 Juin 2021 - 23:45

» [PHPBB2] Afficher les brouillons en attente sur toutes les pages etc etc
par Constellation Jeu 10 Juin 2021 - 23:43

» [PHPBB2]Supprimer le tag "Re" sur les messages
par Constellation Jeu 10 Juin 2021 - 2:37

» [TOUTES VERSIONS] Ajouter le texte bienvenu et le Pseudo dans l'onglet du navigateur
par Constellation Jeu 10 Juin 2021 - 2:31

» [TOUTES VERSIONS] Afficher la partie profil de la toolbar en bas à gauche avec effet slide
par Constellation Jeu 10 Juin 2021 - 2:27

» [TOUTES VERSIONS] Modifier les textes des MPs nons lus
par Constellation Jeu 10 Juin 2021 - 2:25

Les statistiques du forum
Nous avons 481 membres enregistrés

L'utilisateur enregistré le plus récent est Echo

Nos membres ont posté un total de 27216 messages dans 1378 sujets

[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome

Voir le sujet précédent Voir le sujet suivant Aller en bas

5 participants
Message n°10
Milouze14
Milouze14
Fondateur


https://www.milouze14.com

MessageMilouze14 Ven 12 Juil 2019 - 19:36

Hello les ami(e)s,

même pendant la chaleur , je pense à vous MDR .

L'astuce consiste a remplacer toutes les icônes de l'éditeur par celle de la bibliothèque "Font Awesome" .
L'éditeur de la version EDGE est basée sur le même principe.

En faite, on va remplacer toutes les icônes représentées par des images.

Le résultat imagé:

[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome 210


La C.S.S est commentée afin que vous puissiez vous repérer pour changer leurs apparences.


Vous pouvez aller sur cette page pour voir les icônes disponibles:

http://seehowsupport.com/font-awesome/#top

Pour information , la ccs fonctionne ainsi:

Sur la première rangée et à gauche vous verrez ceci (sous réserve de modification, le procédé reste inchangé):

[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome 111


Il faut juste retenir le "26e" que vous déposerez dans la parti concernée de l'icône.

Toutes les icônes figurant dans la feuille de style auront la propriété "content" suivante:

Code:
content: "\fxxx";

Il faudra donc modifier ce qui suit la barre oblique et le f soit:

Code:
content: "\f";

La C.S.S est déjà fonctionnelle pour tous les boutons les ami(e)s,
ensuite à vous de les modifier selon vos envies  clin oeil .


Allez, on se lance ?


Dans le template overall_header:
Affichage/Templates/Général/ overall_header

Recherchez ceci:
Code:
{T_HEAD_STYLESHEET}


Juste avant 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   Enregistr puis Ajout


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Ajoutez ceci:

Code:

a.sceditor-button div{background-image:none;}
/*BOUTON GRAS*/
a.sceditor-button.sceditor-button-bold:after
{
content: "\f032";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON ITALIC*/
a.sceditor-button.sceditor-button-italic:after
{
content: "\f033";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON SOULIGNER*/
a.sceditor-button.sceditor-button-underline:after
{
content: "\f0cd";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON BARRE*/
a.sceditor-button.sceditor-button-strike:after
{
content: "\f0cc";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON ALIGNER A GAUCHE*/
a.sceditor-button.sceditor-button-left:after
{
content: "\f036";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON CENTRER*/
a.sceditor-button.sceditor-button-center:after
{
content: "\f037";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON ALIGNER A DROITE*/
a.sceditor-button.sceditor-button-right:after
{
content: "\f038";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON JUSTIFIER*/
a.sceditor-button.sceditor-button-justify:after
{
content: "\f039";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON LISTE*/
a.sceditor-button.sceditor-button-bulletlist:after
{
content: "\f0ca";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON LISTE ORDONNEE*/
a.sceditor-button.sceditor-button-orderedlist:after
{
content: "\f0cb";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER UNE LIGNE*/
a.sceditor-button.sceditor-button-horizontalrule:after
{
content: "\f068";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON CITER*/
a.sceditor-button.sceditor-button-quote:after
{
content: "\f10D";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON CODE*/
a.sceditor-button.sceditor-button-code:after
{
content: "\f121";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON SPOILER*/
a.sceditor-button.sceditor-button-faspoiler:after
{
content: "\f066";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON CACHE*/
a.sceditor-button.sceditor-button-fahide:after
{
content: "\f070";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER UN TABLEAU*/
a.sceditor-button.sceditor-button-table:after
{
content: "\f0ce";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON HEBERGER UNE IMAGE*/
a.sceditor-button.sceditor-button-servimg:after
{
content: "\f01c";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER UNE IMAGE*/
a.sceditor-button.sceditor-button-image:after
{
content: "\f03e";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}

/*BOUTON INSERER UN LIEN*/
a.sceditor-button.sceditor-button-link:after
{
content: "\f0C1";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER UNE VIDEO DAILYMOTION*/
a.sceditor-button.sceditor-button-dailymotion:after
{
content: "\f03d";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}

/*BOUTON INSERER UNE VIDEO YOUTUBE*/
a.sceditor-button.sceditor-button-youtube:after
{
content: "\f166";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER UN FLASH*/
a.sceditor-button.sceditor-button-flash:after
{
content: "\f0e7";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON FORMAT DES TITRES*/
a.sceditor-button.sceditor-button-headers:after
{
content: "\f1dc";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON TAILLE POLICE*/
a.sceditor-button.sceditor-button-size:after
{
content: "\f031";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON COULEUR POLICE*/
a.sceditor-button.sceditor-button-color:after
{
content: "\f1fb";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON POLICE*/
a.sceditor-button.sceditor-button-font:after
{
content: "\f15d";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON SUPPRIMER FORMATAGE DU TEXTE*/
a.sceditor-button.sceditor-button-removeformat:after
{
content: "\f016";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON SUPPRIMER FORMATAGE DU TEXTE*/
a.sceditor-button.sceditor-button-removeformat.disabled:after
{
content: "\f1c3";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
opacity:0.6;
}
/*BOUTON PLUS OU MOINS DE BOUTONS*/
a.sceditor-button.sceditor-button-more:after
{
content: "\f065";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INDICE*/
a.sceditor-button.sceditor-button-subscript:after
{
content: "\f12c";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON EXPOSANT*/
a.sceditor-button.sceditor-button-superscript:after
{
content: "\f12B";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON DEFILEMENT HORIZONTAL*/
a.sceditor-button.sceditor-button-fascroll:after
{
content: "\f060";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON DEFILEMENT VERTICAL*/
a.sceditor-button.sceditor-button-faupdown:after
{
content: "\f062";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON DEFILEMENT ALEATOIRE*/
a.sceditor-button.sceditor-button-farand:after
{
content: "\f0b2";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON DATE*/
a.sceditor-button.sceditor-button-date:after
{
content: "\f073";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON SMILEYS*/
a.sceditor-button.sceditor-button-emoticon:after
{
content: "\f118";
  font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON HEURE ACTUELLE*/
a.sceditor-button.sceditor-button-time:after
{
content: "\f017";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER DU TEXTE SANS FORMATAGE*/
a.sceditor-button.sceditor-button-pastetext:after
{
content: "\f0f6";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON INSERER DU TEXTE SANS FORMATAGE DESACTIVE*/
a.sceditor-button.sceditor-button-pastetext.disabled:after
{
content: "\f1c3";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
  opacity:0.6;
}
/*BOUTON BASCULER DE MODE D EDITION WYSIWYG*/
a.sceditor-button.sceditor-button-source:not(.hover):after
{
content: "\f11c";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}
/*BOUTON BASCULER DE MODE D EDITION HTML*/
a.sceditor-button.sceditor-button-source:after
{
content: "\f0f6";
font-size:16px;
font-family:FontAwesome;
color:#20aec8!important;
top: -8px;
position: relative;
font-weight: normal!important;
}

Pensez a cliquer sur le bouton [TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome Sans_t10








Voila, c'est tout pour le moment  clin oeil .
Un soucis direction l'entraide hinhin
https://www.milouze14.com/f14-entraide-forumactif


Dernière édition par Milouze14 le Sam 28 Déc 2019 - 8:57, édité 5 fois
Message n°20
Splash
Splash
Milouzien

Avertissement : 50/100

https://lesforums.caforum.fr

MessageSplash Ven 12 Juil 2019 - 22:35

Merci l'ami
Message n°30
avatar
jakes
Milouzien


https://gambas.forumactif.fr/forum

Messagejakes Dim 14 Juil 2019 - 9:46

Bonjour,
Pas tout compris là !
On en fait quoi de ces icônes ?
Message n°40
Splash
Splash
Milouzien

Avertissement : 50/100

https://lesforums.caforum.fr

MessageSplash Dim 14 Juil 2019 - 9:49

Hi Jakes,
Cette astuce permet de remplacer les icônes traditionnelles des forums par des icônes Fontawesome, comme celles présentes sur ce forum.
Message n°50
avatar
jakes
Milouzien


https://gambas.forumactif.fr/forum

Messagejakes Dim 14 Juil 2019 - 10:26

Justement, je ne vois pas grand chose  oups
Tu parles boutons REPONDRE, CITER ...?
Message n°60
Milouze14
Milouze14
Fondateur


https://www.milouze14.com

MessageMilouze14 Dim 14 Juil 2019 - 11:15

Hello Jakes,

l'aperçu est assez parlant sur cette image présente dans l'astuce:

[TOUTES VERSIONS]Remplacer les icônes de l'éditeur par des icônes FontAwesome 210

On parle de l'éditeur clin oeil
Message n°70
Splash
Splash
Milouzien

Avertissement : 50/100

https://lesforums.caforum.fr

MessageSplash Dim 14 Juil 2019 - 11:23

Jakes, le titre de l'astuce mentionne "Les icônes de l'éditeur", et rien d'autre
Message n°80
Splash
Splash
Milouzien

Avertissement : 50/100

https://lesforums.caforum.fr

MessageSplash Dim 14 Juil 2019 - 12:50

À lire concernant "L'éditeur de message" > Clique
Message n°90
avatar
jakes
Milouzien


https://gambas.forumactif.fr/forum

Messagejakes Dim 14 Juil 2019 - 14:06

Oui ça je connais, ça date. C'est quoi l'intérêt ? C'est pour le fun ou ça présente des avantages ?
Par contre c'est bien d'avoir l'éditeur sur une réponse rapide.

D'autre part regarde mon dernier post, les répétions sont provoquées par appui sur la touche "supprimer" sur mon smartphone android.
Ça ne le fait pas sur PC sous Windows ni sur d'autres forums forumactif sous android.
Message n°100
Milouze14
Milouze14
Fondateur


https://www.milouze14.com

MessageMilouze14 Dim 14 Juil 2019 - 16:10

C'est juste pour le fun mon ami, merci de ne plus polluer ce topic, si tu as des soucis merci de passer par l'entraide hinhin


NOUVELLE BARRE DE NAVIGATION


Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).
Message n°110
Morane
Morane
Milouzien


https://famiglia-sinagra.forumactif.com/

MessageMorane Sam 20 Juil 2019 - 11:23

Merci Phil  impeccable
Message n°120
avatar
BarTender
Milouzien


https://chezbabygraph.forumactif.com/

MessageBarTender Ven 21 Fév 2020 - 13:08

merci super

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Sujets similaires internes ( 0 )
Aucun sujet

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà Milouzien ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum