Derniers sujets*
» [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

» [TOUTES VERSIONS]Afficher la date de la dernière visite au survol du Pseudo seulement pour les admins
par Constellation Jeu 10 Juin 2021 - 2:23

» [TOUTES VERSIONS]Afficher de belles infobulles Tooltipster
par Constellation Jeu 10 Juin 2021 - 2:20

» [PHPBB3] Supprimer la ligne Cacher sa présence en ligne
par Chéryl Sam 29 Mai 2021 - 19:40

» [TOUTES VERSIONS] Masquer le bouton j'aime pas ou j'aime a un membre
par fred9545 Sam 29 Mai 2021 - 11:51

» [PHPBB2] Modifier le texte des balises codes , citation et Spoiler
par Milouze14 Jeu 13 Mai 2021 - 19:21

» [PHPBB3] Personnaliser les balises hide code quote et spoiler
par Sick.l.Offrande Jeu 13 Mai 2021 - 19:19

» [TOUTES VERSIONS] Citation avec envoi direct sur le message rapide
par Sick.l.Offrande Jeu 13 Mai 2021 - 19:19

» [TOUTES VERSIONS] Afficher un texte qui au clic postera un message automatiquement
par Sick.l.Offrande Mer 12 Mai 2021 - 1:18

» [TOUTES VERSIONS] Afficher une barre des tâches façon Windows 10 sur votre forum
par Milouze14 Lun 10 Mai 2021 - 9:48

» [PHPBB2] Agréger les doubles post
par Milouze14 Lun 10 Mai 2021 - 7:49

» [PHPBB2] Remplacer le mot Invité
par soleda Dim 9 Mai 2021 - 18:51

» [TOUTES VERSIONS] Héberger du css dans une page html comme sur la feuille de style
par Milouze14 Dim 9 Mai 2021 - 18:43

» [TOUTES VERSIONS] Auto suggestion des membres sur les tags
par Milouze14 Jeu 6 Mai 2021 - 14:27

Les statistiques du forum
Nous avons 475 membres enregistrés

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

Nos membres ont posté un total de 26100 messages dans 1325 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

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

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

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

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

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