FAQ

Thèmes

FAQ Thèmes révisée en décembre 2022 par Mipel sur la base de la V 5.2

Mettre une image de fond sur son site
Vous voulez mettre une image de fond sur votre site mais vous ne savez pas comment faire ?

Prenons le thème Underline pour exemple:

ouvrez le dossier templates/underline/theme et éditez le fichier design.css
recherchez la partie qui concerne le body :

Code CSS : 
body {
    position: relative;
    height: auto;
    min-height: 100%;
    background: #000000 url(images/body.jpg) no-repeat fixed top center;
    color: #555555;
    font-size: 1.3em;
    font-family: "Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
}

C'est la propriété 'background' qui va nous permettre de définir une couleur et/ou une image en arrière plan.

Le dossier images se trouve dans le dossier du thème défini dans la configuration générale du site (templates/{VOTRETHEME}/theme/images) Une image de fond d'écran peut être répétée ou non, voyons ensemble comment procéder:

Pour répéter l'image horizontalement il vous faudra ajouter repeat-x derrière l'adresse de l'image url(image/global.png)
Au contraire si c'est pour la répéter verticalement ce sera plutôt : repeat-y
Pour ne pas la répéter et la centrer : no-repeat center
Pour la répéter horizontalement et verticalement : repeat
Pour la répéter, la centrer et qu'elle reste fixe par rapport au navigateur : no-repeat center fixed

Il vous faudra aussi adapter la couleur de l'arrière plan car si votre image ne fait que 1024 pixels de large, alors qu'un visiteur possède un écran de 26" avec une résolution plus élevée, il verra la couleur attribuée autour de l'image.
Existe-t-il un site de démonstration des thèmes ?
Oui, bien sûr, il existe un site ou vous pouvez tester tous les thèmes disponibles. Rendez vous sur : http://demo.phpboost.com/
Où télécharger les thèmes disponibles pour PHPBoost ?
Vous pouvez télécharger les thèmes sur la page des téléchargements en fonction de votre version.
Les thèmes sont-il compatibles d'une version à l'autre ?
Non, les thèmes PHPBoost ne sont pas compatibles d'une version à l'autre. Si un thème vous intéresse, faite une demande de conversion sur le forum.

Une documentation permet aussi de réaliser la migration soit même.
Comment installer un thème ?
C'est très simple, lisez cet article qui vous expliquera en détail comment installer un thème sur votre site.
Peut-on mettre plusieurs thèmes à la disposition des utilisateurs ?
OUI, vous pouvez installer plusieurs thèmes, les membres pourront alors choisir leur propre thème par le biais de l'édition de leur profil (l'administrateur aussi).

Vous pouvez bien sûr choisir le thème par défaut pour les visiteurs dans administration / configuration générale.
Comment est structuré un thème ?
Nous vous invitons à lire l'article suivant dans la documentation : La structure d'un thème
Je veux faire mon propre thème je commence par où ?
Voir la documentation pour créer un thème
Comment personnaliser complètement son thème pour tous les modules ?
Il suffit de copier le répertoire templates des modules dans le répertoire de votre thème, le renommer par le nom du module et ceux-ci seront automatiquement chargés à la place des templates par défaut (qui sont dans chaque répertoire module à la racine).
Ensuite vous pouvez tout changer directement dans votre thème.

C'est une méthode très flexible et qui permet d'alléger énormément la création de thème en donnant la possibilité à ceux qui veulent pousser leur thème de tout modifier.
Comment changer la bannière ?

Version V3 et plus ... :


Il suffit de créer votre bannière, puis de la renommer header.jpg et la transférer dans le répertoire :" ../templates/nom_de_votre_theme/theme/images/".

Sinon créez votre bannière, donnez lui le nom que vous souhaitez, transférez-la dans ../templates/nom_de_votre_theme/theme/images/, puis éditez le fichier ../templates/nom_de_votre_theme/theme/design.css à la ligne 34 (Thème Base) et au lieu de "header.jpg" mettez le nom de votre image.
Code CSS : 
 
/* -- En-tete de page - Header -- */
/* ------------------------------ */
header#header {
    background-color: #366393;
    background: url(images/header.jpg) no-repeat fixed top center;
à remplacer par exemple par: 
    background: url(images/nom_de_votre_image.jpg) no-repeat fixed top center;
}
Comment modifier la couleur des membres en ligne connectés ?
Il va faloir éditer le fichier /templates/nom_de_votre_theme/theme/global.css à la ligne 26 environ et modifier les valeurs des 'color'

Code CSS : 
/* --- Couleur des liens --- */
a.admin  { color: #C2029C; }
a.modo   { color: #3DD7FF; }
a.member { color: #5485B9; }


Simple, mais efficace !
Comment changer les liens du menu horizontal sous la bannière ?
Vous trouverez toutes les informations nécessaires pour personnaliser votre thème dans la documentation : personnaliser un thème
Comment modifier le nom de son thème et celui de son réalisateur ?
Une fois que vous avez terminé votre thème, donnez lui un nom et déclarez-vous comme créateur du thème.

Pour cela éditez les fichiers :

  • lang/english/desc.ini
  • lang/french/desc.ini

et modifiez les champs de ce fichier.

Si vous modifiez le nom du thème, il est préférable de renommer aussi le nom du répertoire du thème.
Comment créer un thème fixe à x pixels de largeur ?
Il va falloir éditer le fichier design.css de votre thème.

exemple pour le thème underline: /templates/underline/theme/design.css

Code CSS : 
body{
background-color:#FFFFFF; 
font-size:12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
color:#2E3B5F;
margin:0;
padding:0;
}


Il va falloir modifier :
  • width:1000px; ==> à ajouter et mettre la taille souhaitée (attention: si vous mettez plus de 1000px les utilisateurs qui sont en 1024x768 et moins auront des problèmes d'affichage) .
  • margin:0; ==> à supprimer
  • padding:0; ==> à supprimer
Comment modifier la largeur d'un menu ?
La taille des colonnes et du conteneur principal sont ajustables dans le fichier design.css selon le thème que vous utilisez:

Ouvrez le fichier dans le dossier /templates/nom_du_theme/theme/design.css

Code CSS : 
/@media (min-width: 769px) {
    div#global {
        min-height: 100vh;
        flex-direction: row;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
    }
    aside#menu-left,
    aside#menu-right {
        width: 200px;
    }

Modifiez par exemple le width: 200px; par width: 220px; de la classe menu-left et menu-right pour augmenter la zone de 20px.

- Vous pouvez aussi définir le menu gauche et le menu droit de manière indépendante :

Code CSS : 
aside#menu-left {
        width: 100px;
    }
aside#menu-right {
        width: 300px;
    }