proflat

[Réglé] Icônes de Boutons et fontawesome - proflat

[Réglé] Icônes de Boutons et fontawesome

par louvache » 29 mars 2020 à 12:01

Bonjour, je me demande s'il n'y aurait pas moyen de modifier certains boutons pour des choses plus explicites, en particulier pour le BBcode line-trough dont le bouton est un s, alors qu'il existe par exemple un caractère S et pour les infos de message (modération) un « i » plus explicites dans fontawesome ?
louvache
Posteur néophyte
Posteur néophyte
Messages : 21
Enregistré le : 24 mars 2020 à 13:58
Contact :

Re: Icônes de Boutons et fontawesome

par Mazeltof » 30 mars 2020 à 11:54

'jour ici

C'est faisable, il suffit de modifier via le css de ton style perso.

Trouve l'icône que tu souhaites utiliser ici
Récupère l'unicode de l'icône en question.

Récupère la régle de l'icône que tu veux modifier dans ton style d'origine (pour proflat les icônes de BBcodes sont ceux de prosilver). Pour le BBcode 'insérer une image" par exemple :

Code : Tout sélectionner

.fa-image::before {
    content: "\f03e";
}


Copie cette règle dans la feuille de style style_proflat.css de ton style perso et remplace f03e par l'unicode de l'icône que tu veux afficher, par exemple f030

Tu dois avoir une icône différente que celle d'origine.
Attention toutefois, l'icône sera remplacée partout ou elle apparait sur le forum.

Cela dit, l'icône des "informations" de message est déjà un "i" et qu'entends tu par BBcode "line-trough" ?
Avatar du membre
Mazeltof
Resp. des graphistes
Resp. des graphistes
Messages : 4553
Enregistré le : 09 mars 2009 à 22:02
Localisation : Arras
Contact :

Re: Icônes de Boutons et fontawesome

par louvache » 30 mars 2020 à 13:48

Bonjour, j'ai trouvé l’Unicode de chaque icône dans la police fontawesome (et dans la police proflat) elle(s)-même(s).

J’imagine que pour éviter qu’une même icône soit remplacée partout, il faut complexifier les règles CSS en ajoutant des classes à la suite, genre :

Code : Tout sélectionner

.icon .fa-image::before {
    content: "\f03e";
}
… non ?

« line-trough » est l’attribut de style CSS du BBcode texte barré

Edit : Mmmm… Ça fonctionne pour les BBCodes normaux, pas pour ceux ajoutés car il n'y a pas de balise <i> (icône) et encore moins de ::before
M'enfin, j'ai déjà réussi à mettre une icône sympa aux couleurs de polices :

Code : Tout sélectionner

.fa-tint::before {
    content: "\f1fc";
}


Et pour un lien de l'extension Pages dans le menu « Accès rapide » :

Code : Tout sélectionner

/*.icon-pages*/
/* remove default icon styling */
.icon-pages { background: none !important }

/* remove default icon styling */
.icon-pages > a { padding: 0 }

/* apply font icon styling */
.icon-page-liens-utiles > a:before {
    content: "\f0ac"; /*https://fortawesome.github.io/Font-Awesome/cheatsheet/*/
    font: normal normal normal 14px/1 FontAwesome;
    display: inline-block;
    width: 1.28571429em;
    text-align: center;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-right: 2px;
}
louvache
Posteur néophyte
Posteur néophyte
Messages : 21
Enregistré le : 24 mars 2020 à 13:58
Contact :

Re: Icônes de Boutons et fontawesome

par Mazeltof » 30 mars 2020 à 14:53

louvache a écrit :J’imagine que pour éviter qu’une même icône soit remplacée partout, il faut complexifier les règles CSS en ajoutant des classes à la suite


oui, c'est ça mais je doute que la classe .icon suffise.
En gardant l'exemple du bbcode image, je pensait plutôt pensé à :

Code : Tout sélectionner

    .bbcode-img .fa-image::before { content: "\f03e"; }

ainsi tu es certain que seul le bbcode image est impacté par la modification.

De mémoire le bbcode "texte-barré" ne fait pas partie des bbcodes par défaut de phpbb.
Hors si tu utilises une extension, ta question devrait se trouvé dans le forum dédié a cet effet et non dans le forum de support d'un style puisque, de fait, la solution n'est pas la même.
Avatar du membre
Mazeltof
Resp. des graphistes
Resp. des graphistes
Messages : 4553
Enregistré le : 09 mars 2009 à 22:02
Localisation : Arras
Contact :

Re: Icônes de Boutons et fontawesome

par louvache » 30 mars 2020 à 15:19

Nos messages (mon édition) se sont croisés.
louvache
Posteur néophyte
Posteur néophyte
Messages : 21
Enregistré le : 24 mars 2020 à 13:58
Contact :

Re: Icônes de Boutons et fontawesome

par Mazeltof » 30 mars 2020 à 17:57

Mazeltof a écrit :Hors si tu utilises une extension, ta question devrait se trouvé dans le forum dédié a cet effet et non dans le forum de support d'un style puisque, de fait, la solution n'est pas la même.

Tout comme si tu veux ajouter une icône à un BBcode importé, ce sera encore différent mais ce n'est pas l'endroit pour ça. :wink:
Avatar du membre
Mazeltof
Resp. des graphistes
Resp. des graphistes
Messages : 4553
Enregistré le : 09 mars 2009 à 22:02
Localisation : Arras
Contact :

Re: Icônes de Boutons et fontawesome

par louvache » 02 avr. 2020 à 17:31

En fait, j’ai personnalisé uniquement dans le style perso, même pour l’extension Page.

Boutons de Message :
Image

Boutons de BBCodes :
Image

Pour les boutons de BBCodes, j’ai dû copier et modifier un fichier posting_buttons.html pour supprimer l’affichage des boutons perso pré-existant dans Prosilver de manière à ne garder que l’icône de FontAwesome (que j’ai dû mettre à jour en v. 5.13.0 et importer dans le style).
Trouver :

Code : Tout sélectionner

   <!-- BEGIN custom_tags -->
   <button type="button" class="button button-secondary bbcode-{custom_tags.BBCODE_TAG_CLEAN}" name="addbbcode{custom_tags.BBCODE_ID}" value="{custom_tags.BBCODE_TAG}" onclick="bbstyle({custom_tags.BBCODE_ID})" title="{{ custom_tags.BBCODE_HELPLINE|e('html_attr') }}">
      {custom_tags.BBCODE_TAG}
   </button>
   <!-- END custom_tags -->
Supprimer le second {custom_tags.BBCODE_TAG} avant la balise </button> de fermeture.

Boutons de l’extension Page :
Image

Ici comme je suis un rien maniaque, je vais plutôt mettre la vue de l’Europe, puisqu’elle existe.

Pour le CSS des icônes mêmes, ça dépend de ce qu'on veut mettre donc je ne donne pas le code vu qu’il peut varier en fonction des besoins/envies.
louvache
Posteur néophyte
Posteur néophyte
Messages : 21
Enregistré le : 24 mars 2020 à 13:58
Contact :

Re: [Réglé] Icônes de Boutons et fontawesome

par Mazeltof » 02 avr. 2020 à 18:05

'jour ici

Une fois encore, les modifications d'extensions n'ont rien a faire dans ce forum de support de style. Ca ne peut qu'embrouiller les membres qui cherchent a modifier l'apparence des bbcodes par défaut de phpBB avec le style proflat.

Auquel cas il est possible de le faire simplement via le css comme indiqué plus haut.
Avatar du membre
Mazeltof
Resp. des graphistes
Resp. des graphistes
Messages : 4553
Enregistré le : 09 mars 2009 à 22:02
Localisation : Arras
Contact :

Re: [Réglé] Icônes de Boutons et fontawesome

par louvache » 02 avr. 2020 à 20:20

Mais quelle extension ?! Je n'ai travaillé qu'au style Proflat (perso) ! En aucun cas je n'ai touché au moindre fichier d'aucune extension.
louvache
Posteur néophyte
Posteur néophyte
Messages : 21
Enregistré le : 24 mars 2020 à 13:58
Contact :