FAQ - PHPBoost CMS : Thèmes

Mettre une image de fond sur son site

Tue, 04 Aug 2009 09:06:52 +0200

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.

Peut-on mettre plusieurs thèmes à la disposition des utilisateurs ?

Thu, 24 Apr 2008 11:42:34 +0200

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 installer un thème ?

Thu, 24 Apr 2008 11:41:52 +0200

C'est très simple, lisez cet article qui vous expliquera en détail comment installer un thème sur votre site.

Comment personnaliser complètement son thème pour tous les modules ?

Thu, 20 Mar 2008 13:04:40 +0100

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 modifier la largeur d'un menu ?

Mon, 17 Mar 2008 20:14:42 +0100

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;
    }

Comment créer un thème fixe à x pixels de largeur ?

Sun, 16 Mar 2008 17:26:04 +0100

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 le nom de son thème et celui de son réalisateur ?

Sat, 15 Mar 2008 07:54:10 +0100

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 modifier la couleur des membres en ligne connectés ?

Tue, 04 Mar 2008 16:23:30 +0100

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 la bannière ?

Tue, 04 Mar 2008 16:21:13 +0100

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;
}

Je veux faire mon propre thème je commence par où ?

Mon, 03 Mar 2008 22:41:52 +0100

Voir la documentation pour créer un thème