Adapter les principales fonctions de Bootstrap pour votre forum

[Jules]

Bonjour à tous et à toutes, 

Aujourd'hui je vous propose une adaptation des principales fonctions (CSS) de Bootstrap pour vos forums MyBB.

Avant de commencer à adapter les fonctions de Bootstrap, vous devez l'ajouter à votre site, pour que ça ressemble à quelque chose à la finale...

Allez dans votre template "headerinclude" et ajoutez-y le css de bootstrap, je vous conseil le lien CDN :

Code :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

Avec ceci dans votre template, vous aurez tout ce qu'il faut pour continuer. Si vous voulez l'installer d'une autre manière, vous pouvez toujours visiter le "Getting started".

Nous commençons !

---

Première chose que nous allons ajouter, les boutons de bootstrap.
Expression régulière : \[b_style=(.*?)\](.*?)\[/b_style\]
Remplacement : <button type="button" class="btn btn-$1">$2</button>
Utilisation : [b_style=style du bouton]texte dans le bouton[/b_style]
Pour le rendu et les styles disponibles : http://getbootstrap.com/css/#buttons

---

Ensuite, nous attaquons les labels de bootstrap.
Expression régulière : \[label=(.*?)\](.*?)\[/label\]
Remplacement : <span class="label label-$1">$2</span>
Utilisation : [label=style du label]texte dans le label[/label]
Pour le rendu et les styles disponibles : http://getbootstrap.com/components/#labels

---

Nous continuons avec les badges.
Expression régulière : \[badge\](.*?)\[/badge\]
Remplacement : <span class="badge">$1</span>
Utilisation : [badge]texte dans le badge[/badge]
Pour le rendu (un seul style disponible) : http://getbootstrap.com/components/#badges

---

Voilà le MyCode pour intégrer les panels : 
Expression régulière : \[panel_(.*?)=(.*?)\](.*?)\[/panel\]
Remplacement : <div class="panel panel-$1">
  <div class="panel-heading">
    <h3 class="panel-title">$2</h3>
  </div>
  <div class="panel-body">
    $3
  </div>
</div>
Utilisation : [panel_style du panel=titre du panel]contenu du panel[/panel]
Pour le rendu et les styles disponibles : http://getbootstrap.com/components/#panels

---

Nous poursuivons avec les alerts.
Expression régulière : \[alert=(.*?)\](.*?)\[/alert\]
Remplacement : <div class="alert alert-$1" role="alert">$2</div>
Utilisation : [alert=style de l'alert]texte dans l'alert[/alert]
Pour le rendu et les styles disponibles : http://getbootstrap.com/components/#alerts

---

Maintenant nous passons aux progressbar.
Expression régulière : \[progress=(.*?)\](.*?)\[/progress]
Remplacement : <div class="progress">
<div class="progress-bar progress-bar-$1" role="progressbar" aria-valuenow="$2" aria-valuemin="0" aria-valuemax="100" style="width: $2%">
    <span class="sr-only">Avancé : $2 %</span>
  </div>
</div>
Utilisation : [progress=style de la barre]% (ex : 40), sans écrire le %[/progress]
Pour le rendu et les styles disponibles : http://getbootstrap.com/components/#progress

[zak]

Bonjour, j'ai potassé la chose, mais chez moi le résultat est décevant, mon avatar en décentré ainsi que mes forums.

J'ai ajouter le lien dans mon header include (celui de mon thème)
j'ai créer mon mycode

De plus l'essai que j'ai effectué est bizarre, comment y remédier
merci

voici la formule utilisée :

Code :

[b_style="btn btn-danger"]Essais[/b_style]

[exdiogene]

Suite à la lecture de la discussion de Jules, le contenu devrait être :
[b_style="danger"]Essais[/b_style]

[zak]

Désolé mais ne fonctionne toujours pas

[exdiogene]

Est-ce que cette ligne fût ajoutée dans votre template "headerinclude" :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

Il serait bon d'avoir accès au Panneau d'Administration de votre site pour vérifier, par message privé!

[zak]

cela fonctionne avec le code :

Code :

[b_style=danger]Essais[/b_style]

bien vu !
Par contre j'ai une modification bien visible de mon css général (le bienvenue est descendu, le début de l'affichage des forums est coupé, le login box est aussi réduit...) Est ce normal ?

[exdiogene]

Je ne saurais dire sans passer des heures à lire ce code CSS du lien...

Mais il est évident que les styles CSS pourront s'affecter mutuellement.

Je recommande de placer le lien :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

Au dessus de tous les autres liens CSS dans le template "headerinclude", ainsi votre style local aura la priorité en effaçant les classes et identifiants qui sont identiques dans ce fichier...

[exdiogene]

Après vérification le lien est effectivement le premier en ligne.

Mais je dois avouer que vous avez tout un ramassis de CSS et de codes Javascript dans l'entête de votre thème "square", ce qui peut fort certainement influencer vos problèmes.

Avez-vous vérifier avec le thème par défaut?

[zak]

Idem avec le thème par défaut, c'est très dommage car Bootstrap permet de faire beaucoup de choses

[Jules]

(02-02-2015, 20:15)exdiogene a écrit :  Je ne saurais dire sans passer des heures à lire ce code CSS du lien...

Mais il est évident que les styles CSS pourront s'affecter mutuellement.

Je recommande de placer le lien :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">

Au dessus de tous les autres liens CSS dans le template "headerinclude", ainsi votre style local aura la priorité en effaçant les classes et identifiants qui sont identiques dans ce fichier...

Comme précisé par Exdiogene, insérez le style au tout début de votre template "headerinclude", vos styles de thème seront donc inclus après et auront la priorité sur Bootstrap.

Si votre forum est encore déformé, c'est que certaines balises ne sont pas définis dans vos styles actuels, vous devrez donc faire quelques modifications à votre css pour que bootstrap n'influe plus sur les éléments principaux de votre forum.