[PBTV5.0] Old Barre BBCode site

Introduction:

Comme vous le savez le CMS PHPBoost V5 est axé sur le Flat Design. Pour ceux qui aiment les design Pro et Sobre , c'est très bien .. Mais pour ceux qui ont perdu le coté visuel cela l'est moins.

Je vous propose donc de remettre simplement les anciens icones qui appartenaient au Pack Tango Icons Cela vous permettra par la suite, aussi de choisir les icons de votre choix, une fois que vous en aurez compris le principe.

Le visuel

Avertissement

Avant toutes modifications de votre site, pensez à faire une sauvegarde et du site et de votre Base de données.

Commençons ..

Pour commencez rendez-vous dans le dossier de votre thème que vous trouverez dans le dossier "templates", pour vérifier si vous avez le dossier "modules" d'existant et si dans ce dossier vous avez déjà un dossier "BBCode" existant:

- Si oui : regardez si vous avez le fichier suivant dedans : "bbcode.css" dans ce cas c'est tout bon !
- Si non : Si il vous manque le fichier "bbcode.css" importez-le du dossier racine "BBCode/templates"

Et si le dossier "b]module[/b]" n'existe pas, créez le , ainsi que le dossier "BBCode" et importez les fichiers cités ci-dessus du dossier racine.

Le dossier images

Dans le dossiers "Modules/BBCode", si le dossier "images" n'existe pas, créez le !
Téléchargez cette archive et placez les images PNG dans le dossier "images".

Bien entendu vous pouvez changer les icônes si vous en voulez d'autre.

Le fichier bbcode.css

- rendez-vous à la ligne 46

Code CSS :

.bbcode-elements {
    position: relative;
    display: inline-block;
    height: 24px;
}

Remplacez par :

Code CSS :

.bbcode-elements {
    display: inline-block;
    height: 24px;
    margin-right: 4px;
    position: relative;
    width: 27px;
}

- Rendez vous à la ligne 240 ou vous trouverez les code FontAwesome de votre barre BBcode , vous avez ceci :

Code CSS :

 
.bbcode-icon-anchor:before      { content: "f13d"; }
.bbcode-icon-bold:before        { content: "f032"; }
.bbcode-icon-italic:before      { content: "f033"; }
.bbcode-icon-underline:before   { content: "f0cd"; }
.bbcode-icon-strike:before      { content: "f0cc"; }
.bbcode-icon-smileys:before     { content: "f118"; }
.bbcode-icon-title:before       { content: "f022"; }
.bbcode-icon-subtitle:before    { content: "f096"; }
.bbcode-icon-style:before       { content: "f071"; }
.bbcode-icon-url:before         { content: "f0ac"; }
.bbcode-icon-image:before       { content: "f03e"; }
.bbcode-icon-lightbox:before    { content: "f030"; }
.bbcode-icon-quote:before       { content: "f10d"; }
.bbcode-icon-hide:before        { content: "f070"; }
.bbcode-icon-list:before        { content: "f03a"; }
.bbcode-icon-color:before       { content: "f043"; }
.bbcode-icon-size:before        { content: "f034"; }
.bbcode-icon-font:before        { content: "f031"; }
.bbcode-icon-minus:before       { content: "f068"; }
.bbcode-icon-plus:before        { content: "f067"; }
.bbcode-icon-more:before        { content: "f0dc"; }
.bbcode-icon-left:before        { content: "f036"; }
.bbcode-icon-center:before      { content: "f037"; }
.bbcode-icon-right:before       { content: "f038"; }
.bbcode-icon-justify:before     { content: "f039"; }
.bbcode-icon-float-left:before  { content: "f048"; }
.bbcode-icon-float-right:before { content: "f051"; }
.bbcode-icon-sup:before         { content: "f12b"; }
.bbcode-icon-sub:before         { content: "f12c"; }
.bbcode-icon-indent:before      { content: "f03c"; }
.bbcode-icon-table:before       { content: "f0ce"; }
.bbcode-icon-flash:before       { content: "f01d"; }
.bbcode-icon-movie:before       { content: "f008"; }
.bbcode-icon-youtube:before     { content: "f167"; }
.bbcode-icon-sound:before       { content: "f001"; }
.bbcode-icon-code:before        { content: "f121"; }
.bbcode-icon-math:before        { content: "f136"; }
.bbcode-icon-html:before        { content: "f13b"; }
.bbcode-icon-help:before        { content: "f059"; }
.bbcode-icon-upload:before      { content: "f0ee"; }

Remplacez par :

Code CSS :

.bbcode-icon-anchor:before    { content: url('images/anchor.png'); }
.bbcode-icon-bold:before        { content: url('images/bold.png'); }
.bbcode-icon-italic:before    { content: url('images/italic.png'); }
.bbcode-icon-underline:before  { content: url('images/underline.png'); }
.bbcode-icon-strike:before     { content: url('images/strike.png'); }
.bbcode-icon-smileys:before    { content: url('images/smileys.png'); }
.bbcode-icon-title:before       { content: url('images/title.png'); }
.bbcode-icon-subtitle:before   { content: url('images/subtitle.png'); }
.bbcode-icon-style:before     { content: url('images/style.png'); }
.bbcode-icon-url:before         { content: url('images/url.png'); }
.bbcode-icon-image:before      { content: url('images/image.png'); }
.bbcode-icon-lightbox:before  { content: url('images/lightbox.png'); }
.bbcode-icon-quote:before  { content: url('images/quote.png'); }
.bbcode-icon-hide:before    { content: url('images/hide.png'); }
.bbcode-icon-list:before     { content: url('images/list.png'); }
.bbcode-icon-color:before   { content: url('images/color.png'); }
.bbcode-icon-size:before     { content: url('images/size.png'); }
.bbcode-icon-font:before    { content: url('images/font.png'); }
.bbcode-icon-minus:before   { content: url('images/minus.png'); }
.bbcode-icon-plus:before     { content: url('images/plus.png'); }
.bbcode-icon-more:before     { content: url('images/more.png'); }
.bbcode-icon-left:before     { content: url('images/left.png'); }
.bbcode-icon-center:before{ content: url('images/center.png'); }
.bbcode-icon-right:before   { content: url('images/right.png'); }
.bbcode-icon-justify:before     { content: url('images/justify.png'); }
.bbcode-icon-float-left:before  { content: url('images/float_left.png'); }
.bbcode-icon-float-right:before{ content: url('images/float_right.png'); }
.bbcode-icon-sup:before          { content: url('images/sup.png'); }
.bbcode-icon-sub:before          { content: url('images/sub.png'); }
.bbcode-icon-indent:before   { content: url('images/indent.png'); }
.bbcode-icon-table:before     { content: url('images/table.png'); }
.bbcode-icon-flash:before     { content: url('images/flash.png'); }
.bbcode-icon-movie:before     { content: url('images/movie.png'); }
.bbcode-icon-youtube:before { content: url('images/youtube.png'); }
.bbcode-icon-sound:before      { content: url('images/sound.png'); }
.bbcode-icon-code:before        { content: url('images/code.png'); }
.bbcode-icon-math:before        { content: url('images/math.png'); }
.bbcode-icon-html:before        { content: url('images/html.png'); }
.bbcode-icon-help:before        { content: url('images/help.png'); }
.bbcode-icon-upload:before   { content: url('images/upload.png'); }

Enregistrer et fermer.

Et pour finir ...

Important: N'oubliez pas de rafraîchir vos cache dans l'administration/Outils/Cache ==> CSS !

Si vous avez des questions, n'hésitez pas à les poser sur le forum , dans le sujet dédié à ce tutoriel

Créé le 11/12/2016, par Swan