Guide de personnalisation pour SF-BB
SOS-FORUM.com
     

Derniers sujets

» ATLANTIC CITY - rpg city
par Solitude 15/3/2017, 10:41

» Bonne Année 2015
par Chantra Chantrapa 5/3/2017, 20:31

» Rio de Janeiro
par Solitude 14/9/2015, 15:34

» Bon Anniversaire Zeco
par Laurent 29/5/2015, 06:29

» Plateforme d'affiliation Afflight
par Landry85 5/5/2015, 10:04


Vous n'êtes pas connecté. Connectez-vous ou enregistrez-vous

Voir le sujet précédent Voir le sujet suivant Aller en bas  Message [Page 1 sur 1]

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
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



Dernière édition par ze_chaofan le 20/3/2010, 13:31, édité 32 fois

2 Via le Panneau d'administration le 6/12/2009, 14:22

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(A) Via le Panneau d'administration



Dernière édition par ze_chaofan le 20/3/2010, 13:31, édité 3 fois

3 Les images le 6/12/2009, 14:22

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(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).



Dernière édition par ze_chaofan le 20/3/2010, 13:32, édité 5 fois

4 Les couleurs le 6/12/2009, 14:27

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(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.



Dernière édition par ze_chaofan le 20/3/2010, 13:32, édité 5 fois

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(B) Les modifications CSS complétant celles sur le PA



Dernière édition par ze_chaofan le 20/3/2010, 13:32, édité 3 fois

6 Couleur des liens le 6/12/2009, 14:29

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(B.1) Couleur des liens
/*Fix_Liens-------------------------------------------------*/
.notitle,.notitle a,.notitle a:hover { color: #color; }
Remplacez #color par la couleur de vos liens.



Dernière édition par ze_chaofan le 20/3/2010, 13:33, édité 4 fois

7 Couleur des titres le 6/12/2009, 14:31

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(B.2) Couleur des titres
/*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.



Dernière édition par ze_chaofan le 20/3/2010, 13:33, édité 4 fois

8 Fond des titres le 6/12/2009, 14:33

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(B.3) Fond des titres
/*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.



Dernière édition par ze_chaofan le 20/3/2010, 13:33, édité 4 fois

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(C) Les modifications CSS supplémentaires simples



Dernière édition par ze_chaofan le 20/3/2010, 13:34, édité 3 fois

10 Largeur du cadre le 6/12/2009, 14:38

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(C.1) Largeur du cadre
/*Largeur_cadre-------------------------------------------------*/
.sfbbwidth { width: XX; }
Remplacez XX par la largeur du cadre, soit en XX% (pourcentage), soit en XXpx (pixels).



Dernière édition par ze_chaofan le 20/3/2010, 13:34, édité 4 fois

11 Couleurs de fond le 6/12/2009, 14:38

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(C.2) Couleurs de fond
Pour la couleur de fond des forums et sujets dans les listes de forums/sujets :
/*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 :
/*Couleur_Arrondis_Interieur-------------------------------------------------*/
.backcorner2{ background-color: #color; }
Pour la couleur de fond des messages, modules et annonces :
/*Couleur_Fond_Cellules-------------------------------------------------*/
td.row1,td.row2,td.row3,.backcorner3 { background-color: #color; }
Remplacez #color par la couleur désirée pour chaque zone.



Dernière édition par ze_chaofan le 20/3/2010, 13:35, édité 4 fois

12 Couleurs des bordures le 6/12/2009, 14:41

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(C.3) Couleurs des bordures
Pour les séparations entre les forums et sujets dans les listes de forums/sujets :
/*Cadres_Colonnes-------------------------------------------------*/
td.colonne1,td.colonne2{ border-top: 1px solid #color; }
Pour toutes les autres séparations (tableaux, liste etc...)
/*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.



Dernière édition par ze_chaofan le 20/3/2010, 13:35, édité 4 fois

13 Tables et header le 6/12/2009, 14:42

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(C.4) Tables et header
Leur personnalisation étant très similaire, voici une explication commune.
Pour les cadres des tables des forums et sujets :
/*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 :
/*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



Dernière édition par ze_chaofan le 20/3/2010, 13:36, édité 4 fois

14 Bouton "Hors ligne" le 6/12/2009, 14:43

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(C.5) Bouton "Hors ligne"
/*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.



Dernière édition par ze_chaofan le 20/3/2010, 13:36, édité 4 fois

15 Description du forum le 6/12/2009, 14:44

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(C.6) Description du forum
/*Description_forum-------------------------------------------------*/
.description { font-size : 12px; color: #color; }
Remplacez #color par la couleur du texte de la description du forum.



Dernière édition par ze_chaofan le 20/3/2010, 13:36, édité 4 fois

16 Coins arrondis (intérieurs) le 6/12/2009, 14:47

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(C.7) Coins arrondis (intérieurs)
/*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.



Dernière édition par ze_chaofan le 20/3/2010, 13:37, édité 3 fois

17 Couleurs du profil masqué le 6/12/2009, 14:52

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(C.8) Couleurs du profil masqué :
/*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



Dernière édition par ze_chaofan le 20/3/2010, 13:38, édité 4 fois

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(C.9) Couleurs du message d'invitation à la connexion :
/*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



Dernière édition par ze_chaofan le 20/3/2010, 13:38, édité 3 fois

19 Couleurs des blocs de code le 6/12/2009, 14:54

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(C.10) Couleurs des blocs de code :
.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



Dernière édition par ze_chaofan le 20/3/2010, 13:39, édité 3 fois

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(C.11) Le panneau des widgets :
/*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 :
/*Suppression_Panneau_Widgets-------------------------------------------------*/
.widgetleft {display: none; }



Dernière édition par ze_chaofan le 20/3/2010, 13:39, édité 3 fois

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(D) Les modifications CSS supplémentaires avancées



Dernière édition par ze_chaofan le 20/3/2010, 13:40, édité 1 fois

avatar
Zeco
Administrateur absent
Voir le profil de l'utilisateur http://digs.forumactif.com/forum
(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 :
/*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).


Contenu sponsorisé

Voir le sujet précédent Voir le sujet suivant Revenir en haut  Message [Page 1 sur 1]

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum

 
  •  

Créer un forum | © PunBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit | Informatique et Internet | Publicité en ligne