1. IMPORTANT : Nouvelles mesures de sécurité - 2. Règles pour obtenir de l'aide dans les forums de support - 3. Restrictions des droits pour le groupe "Support suspendu"

Il est obligatoire de respecter les Règles de MyBB.fr : Version abrégée ou Version complète pour obtenir du support sur nos forums.

Les membres ayant un site/forum contrevenant aux règles de MyBB.support seront placés dans le groupe "Support suspendu" et ne bénéficieront plus du support du staff. Nous recommandons aux autres membres d'agir de même. Il ne s'agit pas d'un bannissement, le membre retrouvera son statut "normal" dès que sa situation sera conforme aux règles.

Nouveau : un Wiki en français : plus de détails.
Avant de soumettre votre problème, consultez-le, ainsi que la FAQ, sans oublier le moteur de recherche interne.


Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
Adapter les principales fonctions de Bootstrap pour votre forum
Mots-clés » heaven, adapter, principales, fonctions, bootstrap, votre, forum
07-11-2014, 19:28, (Modification du message : 29-11-2014, 0:40 par Jules.)
#1
Adapter les principales fonctions de Bootstrap pour votre forum
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

Cordialement, Jules.
Membre du support sur MyBB.support

Retrouvez tout mes partages réalisés sur MyBB.support grâce aux mots-clés : cliquez-ici
Répondre
01-02-2015, 17:06,
#2
RE: Adapter les principales fonctions de Bootstrap pour votre forum
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 Huh
merci

voici la formule utilisée :

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


Pièces jointes Miniature(s)
       
Répondre
02-02-2015, 14:03,
#3
RE: Adapter les principales fonctions de Bootstrap pour votre forum
Suite à la lecture de la discussion de Jules, le contenu devrait être :
[b_style="danger"]Essais[/b_style]

Wink

Administrateur de MyBBCodes.com
Cool " Ce n'est pas ce que vous savez qui est important, c'est ce que vous faites ou ne faites pas!"
Obtenez plus de 175 plugins pour MyBB ici...
~~ AUCUNE AIDE Par MP, MAIL OU MSN !!!~~
Répondre
02-02-2015, 19:15,
#4
RE: Adapter les principales fonctions de Bootstrap pour votre forum
Désolé mais ne fonctionne toujours pas Confused
Répondre
02-02-2015, 19:33,
#5
RE: Adapter les principales fonctions de Bootstrap pour votre forum
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é! Wink

Administrateur de MyBBCodes.com
Cool " Ce n'est pas ce que vous savez qui est important, c'est ce que vous faites ou ne faites pas!"
Obtenez plus de 175 plugins pour MyBB ici...
~~ AUCUNE AIDE Par MP, MAIL OU MSN !!!~~
Répondre
02-02-2015, 19:59,
#6
RE: Adapter les principales fonctions de Bootstrap pour votre forum
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 ?
Répondre
02-02-2015, 20:15,
#7
RE: Adapter les principales fonctions de Bootstrap pour votre forum
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... Wink


Administrateur de MyBBCodes.com
Cool " Ce n'est pas ce que vous savez qui est important, c'est ce que vous faites ou ne faites pas!"
Obtenez plus de 175 plugins pour MyBB ici...
~~ AUCUNE AIDE Par MP, MAIL OU MSN !!!~~
Répondre
02-02-2015, 20:25,
#8
RE: Adapter les principales fonctions de Bootstrap pour votre forum
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?


Administrateur de MyBBCodes.com
Cool " Ce n'est pas ce que vous savez qui est important, c'est ce que vous faites ou ne faites pas!"
Obtenez plus de 175 plugins pour MyBB ici...
~~ AUCUNE AIDE Par MP, MAIL OU MSN !!!~~
Répondre
02-02-2015, 22:04,
#9
RE: Adapter les principales fonctions de Bootstrap pour votre forum
Idem avec le thème par défaut, c'est très dommage car Bootstrap permet de faire beaucoup de choses
Répondre
02-02-2015, 22:21,
#10
RE: Adapter les principales fonctions de Bootstrap pour votre forum
(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... Wink

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.

Cordialement, Jules.
Membre du support sur MyBB.support

Retrouvez tout mes partages réalisés sur MyBB.support grâce aux mots-clés : cliquez-ici
Répondre




Utilisateur(s) parcourant ce sujet : 1 visiteur(s)

Contact | MyBB.support | Retourner en haut | Retourner au contenu | Version bas-débit (Archivé) | Syndication RSS
 Utilitaire de traduction fourni par Regentronique