Customisation how-to

1 Customisation how-to le 12/4/2010, 18:38

ProgVal
Staff du forum

Merci reçus: 49

Customising SF-BB

(A) Using the administration panel
A.1 - Pictures
A.2 - Colors

(B) CSS editions, to go over the admin panel
B.1 - Links colors
B.2 - Titles colors
B.3 - Titles background

(C) Other simple CSS editions
C.1 - Frame width
C.2 - Background colors
C.3 - Border colors
C.4 - Tables and headers
C.5 - "Off ligne" button
C.6 - Forum description
C.7 - roundish corners
C.8 - Hidden profil colors
C.9 - Invitation message colors
C.10 - Code blocks colors
C.11 - Widgets panel

(D) CSS hacking
D.1 - Roundish forum corner

2 Re: Customisation how-to le 12/4/2010, 18:39

ProgVal
Staff du forum

Merci reçus: 49

(A) Using the administration panel

Dernière édition par ProgVal le 26/4/2010, 15:35, édité 1 fois

3 Re: Customisation how-to le 13/4/2010, 08:04

ProgVal
Staff du forum

Merci reçus: 49

(A.1) Pictures
Lot of pictures which are customisable in the admin panel remains customisable.

However, the title background pictures and category background pictures must be edited in the admin panel and the CSS style-sheet (easy editions)

Forums and topic frame pictures and header background must be modified using the CSS (easy editions) ; the pictures doing the roundish corner too (advanced editions)

Also, with replacing the picture of the "On line" button, have at mind to replace the "Off line" button for a pretty display (easy editions)

4 Re: Customisation how-to le 26/4/2010, 15:31

ProgVal
Staff du forum

Merci reçus: 49

(A.2) Colors
Colors which are editable in the admin panel ; and which's changes are applied instantly :
> Text color
> Visited, active, or flight over link
> Font (size and font)
> Quote, admin, and moderator font
> Page's, quote's, and textbox's backgrounds colors
> Scrollbar color (only for old browsers)

The fellowing colors are editable in the admin panel, and must be applied with easy deal :
> Link color
> Header's font

Border colors may not be applied.

5 Re: Customisation how-to le 26/4/2010, 15:31

ProgVal
Staff du forum

Merci reçus: 49

(B) CSS editions, to go over the admin panel

6 Re: Customisation how-to le 26/4/2010, 15:32

ProgVal
Staff du forum

Merci reçus: 49

(B.1) Link colors

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

Replace #color by the color you want your links to have.

Dernière édition par ProgVal le 26/4/2010, 15:34, édité 1 fois

7 Re: Customisation how-to le 26/4/2010, 15:33

ProgVal
Staff du forum

Merci reçus: 49

(B.2) Titles color

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

Replace #color by the color you want your titles to have.

8 Re: Customisation how-to le 26/4/2010, 15:36

ProgVal
Staff du forum

Merci reçus: 49

(B.3) Titles background

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

Replace background_image_url by the URL adress of the image you want your titles background to be.

9 Re: Customisation how-to le 26/4/2010, 15:37

ProgVal
Staff du forum

Merci reçus: 49

(C)Other simple CSS editions

10 Re: Customisation how-to le 26/4/2010, 15:39

ProgVal
Staff du forum

Merci reçus: 49

(C.1) Frame width

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

Replace XX by the width of the frame, eighter XX% (percentage), or XXpx (pixels).

11 Re: Customisation how-to le 26/4/2010, 15:43

ProgVal
Staff du forum

Merci reçus: 49

(C.2) Background colors
For the forums and topic background, in the forum/topic list :

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

For the background color of miscellaneous area with roundish corner, like the 3Who is online", the menu, or the greet message :

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

For the messages, module, and announce background color :

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

Replace#color by the wanted color of each area.

12 Re: Customisation how-to le 26/4/2010, 15:45

ProgVal
Staff du forum

Merci reçus: 49

(C.3) Border colors
For the break between forms and topics, in the forums/topics lists :

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

For all other breaks (table, list, and so on...)

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

Raplce#color by the color you want to apply for each border

13 Re: Customisation how-to le 26/4/2010, 15:53

ProgVal
Staff du forum

Merci reçus: 49

(C.4) Tables and header
Their customization is very easy, so, here is their common explanation..
For forums and topics tables border :

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

For the header :

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

In brown :
- Replace #color by the color you want to apply to the area

In green :
- For a non-repeating image, write no-repeat
- For a vertical-repeating image, write repeat-y
- For a horizontal-repeating image, write repeat-x
- for a boot-repeating image, write repeat

In orange :
- For a top-aligned background, write top
- For a middle-aligned background, write center
- For a bottom-aligner background, write bottom

In red :
- For a left-aligned background, write left
- For a center-aligned background, write center
- For a right-aligned background, write right

14 Re: Customisation how-to le 26/4/2010, 15:56

ProgVal
Staff du forum

Merci reçus: 49

(C.5) "Off ligne" button

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

Replace offline_button_url by the URL adress of the image you want the "Offline" button to be. This button should have the same height and width as to "Online" button, to have the best display
Replace X by the image width.
Replace Y by the image height.

15 Re: Customisation how-to le 26/4/2010, 15:57

ProgVal
Staff du forum

Merci reçus: 49

(C.6) Forum description

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

Replace #color by the color of the text of the forum description.

16 Re: Customisation how-to le 27/4/2010, 16:18

ProgVal
Staff du forum

Merci reçus: 49

(C.7) Roundish corners

/*Image_Coins_Arrondis-------------------------------------------------*/
.upperleft,.upperleft2,.upperleft3 {background-image: url("top_left_corner");}
.upperright,.upperright2,.upperright3 {background-image: url("top_right_corner");}
.lowerleft,.lowerleft2,.lowerleft3 {background-image: url("bottom_left_corner");}
.lowerright,.lowerright2,.lowerright3 {background-image: url(" bottom_right_corner");}

Replace top_left_corner by the URL adress of the image you want the top left corner to be.
Replace top_right_corner by the URL adress of the image you want the top right corner to be.
Replace bottom_left_corner by the URL adress of the image you want the bottom left corner to be.
Replace bottom_right_corner by the URL adress of the image you want the bottom left corner to be.

17 Re: Customisation how-to le 27/4/2010, 16:20

ProgVal
Staff du forum

Merci reçus: 49

(C. Hidden profil colors :

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

EIn brown :
- Replace #color1 by the background color you want to apply to the profil, when it is display over the messages
In purple :
- Replace #color2 by the border color you want to apply to the profil, when it is display over the messages

18 Re: Customisation how-to le 27/4/2010, 16:21

ProgVal
Staff du forum

Merci reçus: 49

(C.9) Connect invitation message colors :

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

In brown :
- Replace #color1 by the background color you want your messages to have
In purple :
- Modifiez #color2 by the bordercolor you want your messages to have
In red :
- Modifiez #color3 by the text color you want your messages to have

19 Re: Customisation how-to le 27/4/2010, 16:23

ProgVal
Staff du forum

Merci reçus: 49

(C.10) Code blocks colors :

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

In brown :
- Replace #color1 by the background color you want the code area to have.
En violet :
- Replace #color2by the border color you want the code area to have.
En rouge :
- Replace #color3by the text color you want the code area to have.

20 Re: Customisation how-to le 27/4/2010, 16:32

ProgVal
Staff du forum

Merci reçus: 49

(C.11) Widgets panel :

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

X is the panel width when it is open. It must to be at least 20px more than you widgets width.
Y is the panel width when it is closed.

The italic settings are the background properties.
The underlined settings are the background properties.

In brown :
- Replace #color by the background color you want the area to have.

In green :
- For a non-repeating image, write no-repeat
- For a vertical-repeating image, write repeat-y
- For a horizontal-repeating image, write repeat-x
- for a boot-repeating image, write repeat

In orange :
- For a top-aligned background, write top
- For a middle-aligned background, write center
- For a bottom-aligner background, write bottom

In red :
- For a left-aligned background, write left
- For a center-aligned background, write center
- For a right-aligned background, write right

To hide the panel, add this to your CSS stylesheet :

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

21 Re: Customisation how-to le 27/4/2010, 16:33

ProgVal
Staff du forum

Merci reçus: 49

(D) CSS hacking

22 Re: Customisation how-to le 27/4/2010, 16:40

ProgVal
Staff du forum

Merci reçus: 49

(D.1) Roundish forum corner :
To edit the roundish forum corner, you must to have its 9 CSS attributes : the border is a composition of 8 images and a background color.

Here is the 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;}

Here are the meaning :

For each image (so, for each line), you have to replace"X" by its width, and "Y" by its height. You must to put the image adress instead of the blue and red titles.

However, all the pictures on the same line (A or C) must have the same height, and all the images in the same columnd (1 or 3) must have the same width.

SF-BB borders can be found here : SF-BB borders (+ roundish border)

Tips :
> The images A2 and C2 are repeated horizontally, the images B1 and B3 too, but vertically.
> The field B2 don't have an image by default, but the inner frame color (so, replace #color_B2 by the color).

Derniers sujets

1 Customisation how-to le 12/4/2010, 18:38

2 Re: Customisation how-to le 12/4/2010, 18:39

3 Re: Customisation how-to le 13/4/2010, 08:04

4 Re: Customisation how-to le 26/4/2010, 15:31

5 Re: Customisation how-to le 26/4/2010, 15:31

6 Re: Customisation how-to le 26/4/2010, 15:32

7 Re: Customisation how-to le 26/4/2010, 15:33

8 Re: Customisation how-to le 26/4/2010, 15:36

9 Re: Customisation how-to le 26/4/2010, 15:37

10 Re: Customisation how-to le 26/4/2010, 15:39

11 Re: Customisation how-to le 26/4/2010, 15:43

12 Re: Customisation how-to le 26/4/2010, 15:45

13 Re: Customisation how-to le 26/4/2010, 15:53

14 Re: Customisation how-to le 26/4/2010, 15:56

15 Re: Customisation how-to le 26/4/2010, 15:57

16 Re: Customisation how-to le 27/4/2010, 16:18

17 Re: Customisation how-to le 27/4/2010, 16:20

18 Re: Customisation how-to le 27/4/2010, 16:21

19 Re: Customisation how-to le 27/4/2010, 16:23

20 Re: Customisation how-to le 27/4/2010, 16:32

21 Re: Customisation how-to le 27/4/2010, 16:33

22 Re: Customisation how-to le 27/4/2010, 16:40