Forum

Bonjour à tous,

Je vous présente une barre d'icône à l'ancienne :


Si ces images vous plaisent, ou correspondent a votre besoin vous pouvez l'installer facilement et rapidement.

Etape 1
Si ce n'est déjà fait :
- Créer un dossier: /modules -DANS- votre thème (templates/mon-thème)
- Puis dans ce dossier /modules un autre dossier nommé cette fois : BBCode (attention aux majuscules) .

Etape 2
Téléchargez ce fichier css: (60.31 KB)
bbcode.css

Etape 3
Mise en place selon votre configuration:
- Vous n'aviez pas de fichier bbcode.css déjà modifié pour votre thème:
Collez simplement le bbcode.css dans le dossier nouvellement créé: mon-thème/modules/BBCode/bbcode.css

- Vous aviez déjà personnalisé votre bbcode.css dans ce cas il vous faudra reporter vos modifications .
Exemple si cela ne touche uniquement que les couleurs du fond.
Lignes 7 et 8
background-color: #EEEEEE; ?votre couleur du fond.
border: 1px solid #BBBBBB; ?votre bordure.

Les modifications faites videz votre cache navigateur.
Et voilà la barre à l'ancienne est en place !

Bonus:
Dans bbcode.css vous trouverez lignes 282 à 285 les icônes de différents hébergeurs d'images proposés par Swan.
Ajouter des hébergeurs d'images
Puis en ligne 287 .bbcode-icon-fa:before
qui sera actif au passage de PHPBoost en version UTF8 donc : à conserver....

Remarques:
Ici sont utilisés des images data du site :data convertor de 22px par 22px, (qui au passage me fournit une idée de thème possible avec PHPBoost) vous pouvez évidement modifier ces icône a partir du moment ou vous recopiez intégralement le code fourni par le site.

La css est plus lourde, mais aucun lien image n'est utilisés donc plus rapide en théorie.
C'est à débattre mais au moins pas de risque de se tromper dans les adresses.

bon courage !

Édité par Visiteur Le 06/03/2017 à 16h39

Bonjour Fingolfin,

Merci pour ce partage

Olivier.

Bonjour Fingolfin,

Merci pour le partage,

Je vais ajouter ma petite couche, on pourrait gagner en performance en utilisant les sprites CSS. Rien à voir avec la boisson qui fait grossir, ici c'est tout l'inverse. Le but est de réduire la taille et d'augmenter les performances.

Le principe est de stocker toutes les icônes dans une même image et de les afficher en fonction de leur position sur l'image globale. Voici un tuto : <a href="https://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html">https://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html</a>

Le seul inconvénient est qu'il faudra reprendre l'image si on veut ajouter une nouvelle icône. Il faudra garder le fichier source pour faire ses modifications.


Cette solution permettrait d'avoir les avantages d'une vrai image (comparé à une icone FA) et réduire les inconvéniants de X fichiers (lourd, long à charger, multiple fichier)


ElenWii

Bonjour,

Merci pour ce partage qui pourra effectivement convenir à certains utilisateurs.
Je relève une anomalie importante dans les consignes de mise en place car si on trouve ci-dessous une indication correcte sur le chemin d'installation:
<span class="formatter-blockquote">Citation:</span><div class="blockquote"> - Créer un dossier: /modules -DANS- votre thème (templates/mon-thème)
- Puis dans ce dossier /modules un autre dossier nommé cette fois : BBCode (attention aux majuscules) .</div>
il y a une erreur ici:
<span class="formatter-blockquote">Citation:</span><div class="blockquote">
Collez simplement le bbcode.css dans le dossier nouvellement créé: mon-thème/modules/BBcode/bbcode.css</div>
<span style="text-decoration: underline;">Le chemin exact est </span>: mon-thème/modules/BB<span style="color:#E3007B;">C</span>ode/bbcode.css

L'indication (attention aux majuscules) prend ici toute sa valeur.

D'autre part, pour ceux qui voudraient tester cette belle barre BBCode sur une version 5.1 (alpha2 disponible ici: <a href="/download/60-phpboost-5-1/478-phpboost-5-1-alpha-2/">https://www.phpboost.com/download/60-phpboost-5-1/478-phpboost-5-1-alpha-2/</a> ), il faudra penser à changer l'encodage du fichier bbcode.css de ISO-8859-15 en UTF-8 sous peine de ne voir aucune de ces icones.

Bonne installation.

Bonjour,

J'ajoute à cette liste celle d'EDN :<a href="http://easy-design.net/pages/pbtv5-0-old-barre-bbcode-site"> [PBTV5.0] Old Barre BBCode site </a> <img src="/images/smileys/happy.png" alt="^^" class="smiley" />
Comme cela chacun pourra choisir son style <img src="/images/smileys/wink.png" alt=";)" class="smiley" />

Swan.

Oui merci «mipel» je viens de corriger .
ElenWii : Le sprite et possible effectivement.
J'avais effectuè des tests et le sprite pesait si je me souviens 35ko, le css en data pèse 60ko.
Comme je le dis plus haut c'est à débattre.. data ou sprite = ?

Sur mon site j'utilise les deux selon les cas, et mon envie.
Ajouter ou changer une image sur un sprite <span style="text-decoration: underline;">-SI -il y as la place</span> n'est pas vraiment difficile.
Faut juste être méticuleux. <img src="/images/smileys/laugh.png" alt=":lol" class="smiley" />
Agrandir un sprite et faisable aussi mais c'est plus simple de tout refaire avec ce site :
<a href="http://spritegen.website-performance.org/">CSS Sprite Generator</a>