+- MyBB.support, le portail francophone de MyBB (https://mybb.support)
+-- Forum : Plug-ins et modules pour MyBB (https://mybb.support/forum-32.html)
+--- Forum : MyCode (https://mybb.support/forum-35.html)
+--- Sujet : Adapter les principales fonctions de Bootstrap pour votre forum (/thread-7154.html)
Adapter les principales fonctions de Bootstrap pour votre forum - Jules - 07-11-2014
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
RE: Adapter les principales fonctions de Bootstrap pour votre forum - zak - 01-02-2015
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]RE: Adapter les principales fonctions de Bootstrap pour votre forum - exdiogene - 02-02-2015
Suite à la lecture de la discussion de Jules, le contenu devrait être :
[b_style="danger"]Essais[/b_style]
RE: Adapter les principales fonctions de Bootstrap pour votre forum - zak - 02-02-2015
Désolé mais ne fonctionne toujours pas
RE: Adapter les principales fonctions de Bootstrap pour votre forum - exdiogene - 02-02-2015
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é!
RE: Adapter les principales fonctions de Bootstrap pour votre forum - zak - 02-02-2015
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 ?
RE: Adapter les principales fonctions de Bootstrap pour votre forum - exdiogene - 02-02-2015
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...
RE: Adapter les principales fonctions de Bootstrap pour votre forum - exdiogene - 02-02-2015
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?
RE: Adapter les principales fonctions de Bootstrap pour votre forum - zak - 02-02-2015
Idem avec le thème par défaut, c'est très dommage car Bootstrap permet de faire beaucoup de choses
RE: Adapter les principales fonctions de Bootstrap pour votre forum - Jules - 02-02-2015
(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.