Documentations et Dossiers » [PBTV5.0] Old Barre BBCode site
Tutos/Astuces

 Le 19/12/2016 à 13h10 Swan Avatar  
 


Bonjour à tous,

Comme vous l'avez constatez la barre BBcode pour les envois de messages est faites maintenant avec Font Awesome. Mais tout le monde n'aime pas forcément les design Flats.

C'est pour cela que je vous propose de faire un tour dans la section Des Extras PHPBoost V5.0 ..

- [PBTV5.0] Old Barre BBCode site



Note : Attention cette page est en accès membre seulement.

@imablement Swan.


Administrateur


 Le 19/12/2016 à 16h58 Visiteur
 


Tout le monde n'aime pas forcément les design Flats.

C'est pas faux !! :rire

... J'ai donc également modifié mes icônes (j'essaie d'améliorer les .svg)
Même démarche et même procècus :
Code CSS :
.bbcode-icon-anchor:before{content:url('bbc/ancre.svg')}
.bbcode-icon-bold:before{content:url('bbc/gras.svg')}
.bbcode-icon-italic:before{content:url('bbc/italic.svg')}
.bbcode-icon-underline:before{content:url('bbc/souligne.svg')}
.bbcode-icon-strike:before{content:url('bbc/barre.svg')}
.bbcode-icon-smileys:before{content:url('bbc/smileys.svg')}
.bbcode-icon-title:before{content:url('bbc/titre.svg')}
.bbcode-icon- ..etc...


Et, le résultat et quasi similaire.


D'ailleurs petit à petit tout les icônes du site passent en svg.

CsN Inactif


 Le 19/12/2016 à 17h44 Swan Avatar  
 


Bonjour,

Haaa.. c'est franchement pas mal ;) Tu pourrais partager ton pack icon si tu veux bien , bien sûr ^^

Swan.


Administrateur


 Le 20/12/2016 à 05h22 Visiteur
 


il n'y as pas de soucis pour le partage. ;)
Pour la version finale : suffit d'être un peu patient car il faut encore que je fignole un peu tout ça .
Les images bbcodes ne sont pas toutes exactement à la même tailles et j'ai encore quelques icônes de thèmes a découvrir par-ci par-là.
155 images svg de faites ... et je ne trouve plus de "flat" dans mon thème : mais je fouille encore .
pour les bbcode => du moment :



Pour la modif css le principe reste identique juste modifier le format en .svg
Code CSS :
:before{content:url('bbc/ancre.svg')}

Il y a l'image du background (bleu) bg1.svg
.bbcode { = ligne 7: trouver
Code CSS :
background-color: #EEEEEE;

Remplacer par :
Code CSS :
background:url('adresse_du_dossier/bg1.svg');

et du séparateur : separate.svg.
.bbcode-container:after{ = ligne 30: trouver:
Code CSS :
content: "";

Remplacer par:
Code CSS :
content:url('adresse_du_dossier/separate.svg');


=> adresse_du_dossier : étant l'emplacement que vous avez choisi...

Les couleurs peuvent se modifier facilement avec Inkscape ou Karbon.
- Avantage du .svg - à mes yeux - les dimensions sont inclues avec l'image donc aucune erreur d'analyse.



Edité par Visiteur Le 20/12/2016 à 05h26

CsN Inactif


Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie
Qui est en ligne ?

Qui est en ligne ?

Au total il y a 1 Utilisateur en ligne :: 0 Administrateur, 0 Modérateur, 0 Membre et 1 Visiteur
( basées sur les utilisateurs actifs des 5 dernières minutes )
Utilisateur en ligne: Aucun membre connecté

Membres connectés au cours des dernières 24 heures:

Swan, Sodeska,

Légende

 [ Administrateur(s) ]   [ Modérateur(s) ]   [ Helpers]   [ WebDesigner(s) ]   [ Membres ]