Customisation how-to
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]

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

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
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, 20:39

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(A) Using the administration panel



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

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

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 17:31

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 17:31

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(B) CSS editions, to go over the admin panel

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

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 17:34, édité 1 fois

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

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 17:36

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 17:37

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(C)Other simple CSS editions

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

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 17:43

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 17:45

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 17:53

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 17:56

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 17:57

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 18:18

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 18:20

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(C.Cool 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, 18:21

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 18:23

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 18:32

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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, 18:33

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(D) CSS hacking

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

avatar
ProgVal
Staff du forum
Voir le profil de l'utilisateur http://www.adminforum.fr.cr
(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).


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