Guide de personnalisation pour SF-BB

**Zeco** · Sujet: Guide de personnalisation pour SF-BB 7/3/2009, 16:02

Personnalisation du SF-BB

(A) Via le Panneau d'administration
A.1 - Les images
A.2 - Les couleurs

(B) Les modifications CSS complétant celles sur le PA
B.1 - Couleur des liens
B.2 - Couleur des titres
B.3 - Fond titres

(C) Les modifications CSS supplémentaires simples
C.1 - Largeur du cadre
C.2 - Couleurs de fond
C.3 - Couleurs des bordures
C.4 - Tables et header
C.5 - Bouton "Hors ligne"
C.6 - Description du forum
C.7 - Coins arrondis (intérieurs)
C.8 - Couleurs du profil masqué
C.9 - Couleurs du message d'invitation à la connexion
C.10 - Couleurs des blocs de code
C.11 - Le panneau des widgets

(D) Les modifications CSS supplémentaires avancées
D.1 - Le cadre arrondi du forum

**Zeco** · Sujet: Via le Panneau d'administration 6/12/2009, 13:22

(A) Via le Panneau d'administration

**Zeco** · Sujet: Les images 6/12/2009, 13:22

(A.1) Les images
La quasi-totalité des images sont modifiables dans le Panneau d'administration sont effectives.

Cependant, les images du fond des titres et les image du fond des catégories sont à modifier dans le panneau d'administration et dans la feuille de style CSS (modifications simples).

Les images de cadre des listes de forums et sujets, ainsi que le fond de l'entête sont à modifier via le CSS (modifications simples), ainsi que les images formant le cadre arrondi (modifications avancées).

Aussi, en remplaçant l'image du bouton "En ligne" dans les messages, pensez à remplacer l'image du bouton "Hors ligne" pour un bon affichage (modifications simples).

**Zeco** · Sujet: Les couleurs 6/12/2009, 13:27

(A.2) Les couleurs
Les couleurs suivantes sont modifiables dans le panneau d'administration et directement effectives :
> Couleur du texte
> Couleur du lien visité, actif et survolé
> Les polices (taille et type)
> Couleurs police citation, administrateur et modérateur
> Couleur de fond de page, des citations et des zones de saisies.
> Couleurs de la barre de défilement (uniquement sous les vieux navigateurs)

Les couleurs suivantes sont modifiables dans le panneau d'administration doivent être complétées avec les modifications simples :
> Couleur du lien
> Couleur Police entête

Les couleurs des contours ne sont pas effectives.

**Zeco** · Dernière édition par ze_chaofan le 20/3/2010, 12:32, édité 3 fois

(B) Les modifications CSS complétant celles sur le PA

**Zeco** · Sujet: Couleur des liens 6/12/2009, 13:29

(B.1) Couleur des liens

Citation:

/*Fix_Liens-------------------------------------------------*/
.notitle,.notitle a,.notitle a:hover { color: #color; }

Remplacez #color par la couleur de vos liens.

**Zeco** · Sujet: Couleur des titres 6/12/2009, 13:31

(B.2) Couleur des titres

Citation:

/*Hauts_colonnes-------------------------------------------------*/
th,td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom,h1.pagetitle,.secondarytitle,.secondarytitle h2 {color: #color;}

th a,td.cat a,td.catHead a,td.catSides a,td.catLeft a,td.catRight a,td.catBottom a, h1.pagetitle a,.secondarytitle a,.secondarytitle h2 a {color: #color;}

Remplacez #color par la couleur de vos titres.

**Zeco** · Sujet: Fond des titres 6/12/2009, 13:33

(B.3) Fond des titres

Citation:

/*Fond_titres-------------------------------------------------*/
td.rowpic,th,td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom { background-image: url("url_image_de_fond"); }

Remplacez url_image_de_fond par l'adresse de l'image de fond des titres.

**Zeco** · Dernière édition par ze_chaofan le 20/3/2010, 12:34, édité 3 fois

(C) Les modifications CSS supplémentaires simples

**Zeco** · Sujet: Largeur du cadre 6/12/2009, 13:38

(C.1) Largeur du cadre

Citation:

/*Largeur_cadre-------------------------------------------------*/
.sfbbwidth { width: XX; }

Remplacez XX par la largeur du cadre, soit en XX% (pourcentage), soit en XXpx (pixels).

**Zeco** · Sujet: Couleurs de fond 6/12/2009, 13:38

(C.2) Couleurs de fond
Pour la couleur de fond des forums et sujets dans les listes de forums/sujets :

Citation:

/*Couleurs_Colonnes-------------------------------------------------*/
td.colonne1{ background-color: #color; }

Pour la couleur de fond de divers zones à coins arrondis, comme le "Qui est en ligne", le menu et le message d'accueil :

Citation:

/*Couleur_Arrondis_Interieur-------------------------------------------------*/
.backcorner2{ background-color: #color; }

Pour la couleur de fond des messages, modules et annonces :

Citation:

/*Couleur_Fond_Cellules-------------------------------------------------*/
td.row1,td.row2,td.row3,.backcorner3 { background-color: #color; }

Remplacez #color par la couleur désirée pour chaque zone.

**Zeco** · Sujet: Couleurs des bordures 6/12/2009, 13:41

(C.3) Couleurs des bordures
Pour les séparations entre les forums et sujets dans les listes de forums/sujets :

Citation:

/*Cadres_Colonnes-------------------------------------------------*/
td.colonne1,td.colonne2{ border-top: 1px solid #color; }

Pour toutes les autres séparations (tableaux, liste etc...)

Citation:

/*Couleurs_Separations-------------------------------------------------*/
.forumline,th,td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom,th a,h1.pagetitle,td.rowpic { background-color: #color; }

Remplacez #color par la couleur désirée pour chaque bordure.

**Zeco** · Sujet: Tables et header 6/12/2009, 13:42

(C.4) Tables et header
Leur personnalisation étant très similaire, voici une explication commune.
Pour les cadres des tables des forums et sujets :

Citation:

/*Fond_tables-------------------------------------------------*/
.styletable {
background-color: #color;
background-image: url("url_image_de_fond_tables");
background-repeat: repeat-x;
background-position: top left;
border: none;
}

Pour le header :

Citation:

/*Fond_entete-------------------------------------------------*/
.styleheader {
background-color: #color;
background-image: url("url_image_de_fond_header");
background-repeat: repeat-x;
background-position: top left;
border: none;
}

En marron :
- Modifiez #color par la couleur de fond que vous souhaitez attribuer à la zone

En vert :
- Pour que l'image ne se répète pas, inscrivez no-repeat
- Pour que l'image se répète en mosaïque, inscrivez repeat
- Pour que l'image se répète horizontalement, inscrivez repeat-x
- Pour que l'image se répète verticalement, inscrivez repeat-y

En orange :
- Pour aligner le fond en haut, inscrivez top
- Pour aligner le fond en bas, inscrivez bottom
- Pour aligner le fond au centre, inscrivez center

En rouge :
- Pour aligner le fond à gauche, inscrivez left
- Pour aligner le fond à droite, inscrivez right
- Pour aligner le fond au centre, inscrivez center

**Zeco** · Sujet: Bouton "Hors ligne" 6/12/2009, 13:43

(C.5) Bouton "Hors ligne"

Citation:

/*Offline-------------------------------------------------*/
.offlinebutton {
background-image: url('url_bouton_offline');
min-width: Xpx;
width: Xpx;
min-height: Ypx;
height: Ypx;
}

Remplacez url_bouton_offline par l'adresse de l'image du bouton "Hors ligne". Ce bouton doit avoir les mêmes dimensions que le bouton "En ligne" pour un affichage optimal.
Remplacez X par la largeur de l'image.
Remplacez Y par la hauteur de l'image.

**Zeco** · Sujet: Description du forum 6/12/2009, 13:44

(C.6) Description du forum

Citation:

/*Description_forum-------------------------------------------------*/
.description { font-size : 12px; color: #color; }

Remplacez #color par la couleur du texte de la description du forum.

**Zeco** · Sujet: Coins arrondis (intérieurs) 6/12/2009, 13:47

(C.7) Coins arrondis (intérieurs)

Citation:

/*Image_Coins_Arrondis-------------------------------------------------*/
.upperleft,.upperleft2,.upperleft3 {background-image: url("coin_haut_gauche");}
.upperright,.upperright2,.upperright3 {background-image: url("coin_haut_droite");}
.lowerleft,.lowerleft2,.lowerleft3 {background-image: url("coin_bas_gauche");}
.lowerright,.lowerright2,.lowerright3 {background-image: url("coin_bas_droite");}

Remplacez coin_haut_gauche par l'adresse de l'image du coin haut gauche.
Remplacez coin_haut_droite par l'adresse de l'image du coin haut droit.
Remplacez coin_bas_gauche par l'adresse de l'image du coin bas gauche.
Remplacez coin_bas_droite par l'adresse de l'image du coin bas droit.

**Zeco** · Sujet: Couleurs du profil masqué 6/12/2009, 13:52

(C.8) Couleurs du profil masqué :

Citation:

/*Menu_Profil-------------------------------------------------*/
.profilpop { background-color: #color1; border: 1px solid #color2;}

En marron :
- Modifiez #color1 par la couleur de fond que vous souhaitez attribuer au profil lorsqu'il est affiché par dessus les messages
En violet :
- Modifiez #color2 par la couleur de la bordure que vous souhaitez attribuer au profil lorsqu'il est affiché par dessus les messages

**Zeco** · Dernière édition par ze_chaofan le 20/3/2010, 12:38, édité 3 fois

(C.9) Couleurs du message d'invitation à la connexion :

Citation:

/*Warning-------------------------------------------------*/
.warning { background-color: #color1; border: 1px solid #color2;padding : 2px; color: #color3; font-size: 10px; }
.warning a { color: #color3; font-size: 10px; }

En marron :
- Modifiez #color1 par la couleur de fond que vous souhaitez attribuer au message
En violet :
- Modifiez #color2 par la couleur que vous voulez attribuer à la bordure du message
En rouge :
- Modifiez #color3 par la couleur que vous souhaitez attribuer au texte

**Zeco** · Sujet: Couleurs des blocs de code 6/12/2009, 13:54

(C.10) Couleurs des blocs de code :

Citation:

.code{ background-color: #color1; border: 1px dashed #color2; color: #color3; }

En marron :
- Modifiez #color1 par la couleur de fond que vous souhaitez attribuer au bloc de code
En violet :
- Modifiez #color2 par la couleur que vous voulez attribuer à la bordure du bloc de code
En rouge :
- Modifiez #color3 par la couleur que vous souhaitez attribuer au texte du bloc de code

**Zeco** · Sujet: Re: Guide de personnalisation pour SF-BB 16/1/2010, 11:30

(C.11) Le panneau des widgets :

Citation:

/*Panneau_Widgets-------------------------------------------------*/
.widgetleft:hover {padding-left: 10px; padding-right: 10px; width: Xpx;}
.widgetleft {background: #color url("url_image_de_fond_header") top right repeat-y; min-width: Ypx;}
.widgetleft:hover {background: #color url("url_image_de_fond_header") top right repeat-y; }

X Correspond à largeur du panneau ouvert. Il faut mettre 20 pixels de plus que la largeur de vos widgets.
Y Correspond à largeur du panneau fermé.

Les réglages en italique correspondent aux propriétés du fond.
Les réglages soulignés correspondent aux propriétés du fond.

En marron :
- Modifiez #color par la couleur de fond que vous souhaitez attribuer à la zone

En vert :
- Pour que l'image ne se répète pas, inscrivez no-repeat
- Pour que l'image se répète en mosaïque, inscrivez repeat
- Pour que l'image se répète horizontalement, inscrivez repeat-x
- Pour que l'image se répète verticalement, inscrivez repeat-y

En orange :
- Pour aligner le fond en haut, inscrivez top
- Pour aligner le fond en bas, inscrivez bottom
- Pour aligner le fond au centre, inscrivez center

En rouge :
- Pour aligner le fond à gauche, inscrivez left
- Pour aligner le fond à droite, inscrivez right
- Pour aligner le fond au centre, inscrivez center

Pour masquer le panneau, ajoutez ceci à votre CSS :

Citation:

/*Suppression_Panneau_Widgets-------------------------------------------------*/
.widgetleft {display: none; }

**Zeco** · Sujet: Re: Guide de personnalisation pour SF-BB 16/1/2010, 11:30

(D) Les modifications CSS supplémentaires avancées

**Zeco** · Sujet: Re: Guide de personnalisation pour SF-BB 16/1/2010, 11:30

(D.1) Le cadre arrondi du forum :
Pour modifier le cadre arrondi du forum, il vous faut modifier les 9 attributs CSS de ce dernier, le cadre étant composé de 8 images et de une couleur de fond.

Voici le CSS :

Citation:

/*Round-------------------------------------------------*/

.roundtopleft {background-image: url('coin_A1'); min-width: Xpx; width: Xpx; min-height: Ypx; height: Ypx;}

.roundtopright {background-image: url('coin_A3'); min-width: Xpx; width: Xpx; min-height: Ypx; height: Ypx;}

.roundtopcenter {background-image: url('bordure_A2'); min-height: Ypx; height: Ypx;}

.borderleft {background-image: url('bordure_B1'); min-width: Xpx; width: Xpx;}

.borderright {background-image: url('bordure_B3'); min-width: Xpx; width: Xpx;}

.bordercenter {background-color: #color_B2; background-image: none;}

.roundbottomleft {background-image: url('coin_C1'); min-width: Xpx; width: Xpx; min-height: Ypx; height: Ypx;}

.roundbottomright {background-image: url('coin_C3'); min-width: Xpx; width: Xpx; min-height: Ypx; height: Ypx;}

.roundbottomcenter {background-image: url('bordure_C2'); min-height: Ypx; height: Ypx;}

Et voici les correspondances :

Pour chaque image (donc chaque ligne), vous devrez remplacer "X" par sa largeur, et "Y" par sa hauteur. Vous devez mettre l'adresse de l'image à la place des intitulés bleus et rouges.

Cependant, toutes les images sur la même ligne (A ou C) doivent avoir la même hauteur, et toutes les images dans la même colonne (1 ou 3) doivent avoir la même largeur.

Des cadres pour SF-BB sont disponibles ici : Cadres SF-BB (+ coins arrondis)

A savoir :
> Les images A2 et C2 se répètent horizontalement, les images B1 et B3 verticalement.
> Le champ B2 lui ne reçoit pas d'image par défaut, mais la couleur de l'intérieur du cadre (remplacez donc #color_B2 par la couleur).


	Forum gratuit \| © phpBB \| Forum gratuit d'entraide\| Statistiques \| Signaler un abus \| Créer un forum \| Contrat CC