AccueilPortailFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 Décorticage css pour phpbb2

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
caro
Invité



MessageSujet: Décorticage css pour phpbb2   Lun 12 Juin - 14:11

Modification du fichier css du thème SUBSILVER

Pour modifier son thème de base, il y a plusieurs techniques:
*modifier le fichier overall_header
*modifier le fichier css

L'inconvénient pour la première solution, c'est qu'il arrive que le fichier overall_header ait été "allégé", cad qu'il ne contienne pas les lignes à rechercher car le fichier css à été activer.

De même, il arrive que les modifications faites dans le fichier css du thème, ne soit pas pris en compte car celui-ci n'a pas été activé.
Pour activer votre fichier css, rdv => http://forum.phpbb.biz/viewtopic.php?t=26022

A vous de choisir votre méthode, sachant que les pros de la modifications, vous diront que faire les modifs dans le fichier css, est un travail plus propre Smile

Que pouvez vous modifier dans le fichier css?
... en fait, vous pouvez ajouter et modifier le fichier à bien des endroits.
Tentons de décortiquer le fichier (petit rappel c'est le css de subSilver qui est pris comme exemple!)


Voici qqs passages qui vous permettront de personnaliser votre thème relativement vite et simplement.
Le but de ce tuto, n'est pas de modifier complétement l'esthétique du thème, mais de garder sa forme de base et d'y ajouter des fonds, des couleurs , des touches persos .

Pour des transformations plus importantes de l'esthétique général du thème, un autre tuto sera utile. Smile


1.

Code:
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
   background-color: #E5E5E5;
   scrollbar-face-color: #DEE3E7;
   scrollbar-highlight-color: #FFFFFF;
   scrollbar-shadow-color: #DEE3E7;
   scrollbar-3dlight-color: #D1D7DC;
   scrollbar-arrow-color:  #006699;
   scrollbar-track-color: #EFEFEF;
   scrollbar-darkshadow-color: #98AAB1;
}
Dans cette première portion vous pouvez déjà changer plusieurs choses:

*modifier les codes de couleurs de la scrollbar et la couleur de fond qui est bleu pâle(#E5E5E5) pour le thème subSilver dont nous parlons.


*ajouter un arrière fond à votre thème:
après
Code:
 body {

ajouter
Code:

background-image: url(images/1.gif);

Pensez à bien indiquer le chemin où l'image est stockée , dans notre exemple c'est dans le dossier image du thème, et l'image est nommée 1.gif
Vous pouvez évidemment donner un autre nom à l'image, et utiliser un autre format ( jpg par exemple)
Evitez de placer une image trop lourde, qui pourrait mettre du temps lors de l'affichage!



2.
Code:
/* General font families for common tags */
font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
a:link,a:active,a:visited { color : #006699; }
a:hover      { text-decoration: underline; color : #DD6900; }
hr   { height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}


Dans cette portion de code vous pouvez faire varier :

*la couleur des liens actifs et visités qui est bleu foncé par défaut
Code:
a:link,a:active,a:visited { color : #006699; }

*le surlignement des liens actifs au passage du curseur
Code:
a:hover      { text-decoration: underline; color : #DD6900; }
cette partie indique que le lien actif sur lequel vous passé votre souris, sera surligné (underline) et la couleur sera par défaut orange (#DD6900)

Vous pouvez modifier les codes de couleurs, mais aussi
°supprimer l'effet surligné en modifiant
Code:
underline
par
Code:
none

°faire clignoter le lien en changeant
Code:
underline
par
Code:
blink
ATTENTION uniquement valable sous netscape et firefox ...

°entourer le lien par un trait au dessus et en-dessous en changeant
Code:
underline
par
Code:
underline overline


La dernière ligne
Code:
hr   { height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}
permet de
modifier la fine ligne de séparation visible dans les réponses
=> ici pour voir => http://membres.multimania.fr/caro78line/A.gif


Il suffit de modifier :
° dans height: 0px; le 0px par la valeur de votre choix pour l'épaisseur du trait (ex 3px)
° le code heximal de couleur #D1D7DC, qui est bleu gris pâle, par défaut




Nous déconseillons de modifier les polices disponibles, citées à la première ligne de la portion de code
Code:
font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
Revenir en haut Aller en bas
caro
Invité



MessageSujet: Re: Décorticage css pour phpbb2   Lun 12 Juin - 14:12

3.

Code:
 /* This is the border line & background colour round the entire page */
.bodyline   { background-color: #FFFFFF; border: 1px #98AAB1 solid; }

/* This is the outline round the main forum tables */
.forumline   { background-color: #FFFFFF; border: 2px #006699 solid; }


/* Main table cell colours and backgrounds */
td.row1   { background-color: #EFEFEF; }
td.row2   { background-color: #DEE3E7; }
td.row3   { background-color: #D1D7DC; }


Décortiquons cette partie :

Code:
/* This is the border line & background colour round the entire page */
.bodyline   { background-color: #FFFFFF; border: 1px #98AAB1 solid; }
²

Ce code donne les infos sur le fond blanc (#FFFFFF) et sur le trait gris/bleu qui fait le tour de ce fond blanc.
*modifier les codes de couleurs :
Code:
#FFFFFF et #98AAB1 par les couleurs de votre choix.

*ajouter une image dans le fond:
Code:
remplacer { background-color: #FFFFFF
par
Code:

background-image: url(images/VOTRE-IMAGE.gif)

*modifier la largeur du trait de contour :
Code:
modifier 1px par la valeur choisie
, une trop grande valeur ne donne pas un effet terrible.

*modifier le style de trait:
en effet le trait est plein et continu pour modifier le trait , changer :

°pour avoir des pointillés en losange
Code:
solid
par
Code:
dotted


°pour des pointillés
Code:
solid
par
Code:
dashed

°pour avoir une double ligne de contour
Code:
solid
par
Code:
double



Ensuite :
Code:
/* This is the outline round the main forum tables */
.forumline   { background-color: #FFFFFF; border: 2px #006699 solid; }

Cette partie touche le cadre externe qui entoure toutes les rubriques de votre forum.


*modifier les codes de couleurs :
Code:
#FFFFFF et #006699 par les couleurs de votre choix.

Les infos données plus haut² restent identiques pour modifier cette partie Smile


Continuons avec la partie :
Code:

/* Main table cell colours and backgrounds */
td.row1   { background-color: #EFEFEF; }
td.row2   { background-color: #DEE3E7; }
td.row3   { background-color: #D1D7DC; }


Dans cette partie vous allez pouvoir :
*modifier les codes de couleurs

°la première ligne (row1) : modification de la première colonne sur l'index, sur le viewtopic et une cellule sur deux dans le viewforum.
Les cellules de réponses

°la deuxième ligne (row2): modification de la deuxième colonne sur l'index, sur le viewtopic (sous 'réponses' et sous 'vus' par défaut) et une cellule sur deux dans le viewforum.

°la troisieme ligne (row3): modification sur le viewtopic (colonne auteur par défaut), PAS de modification sur l'index ni sur le viewforum.



*ajouter une image de fond :
la démarche est la même pour les 3 lignes citées plus haut.

remplacer:

Code:
{ background-color: #EFEFEF; }
par
Code:
{ background-image: url(images/VOTRE-IMAGE.gif)  }

Pensez à prendre des images claires, qui laisseront les textes lisibles.
Prenez une petite image pas trop lourde au chargement, sinon cela pourrait ralentir votre forum.
Revenir en haut Aller en bas
caro
Invité



MessageSujet: Re: Décorticage css pour phpbb2   Lun 12 Juin - 14:12

4.
Code:
/*
  This is for the table cell above the Topics, Post & Last posts on the index.php page
  By default this is the fading out gradiated silver background.
  However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
      background-color: #FFFFFF;
      background-image: url(images/cellpic2.jpg);
      background-repeat: repeat-y;
}

Cette partie touche la colonne horizontale où est ecrit 'Sujets', 'Messages' et 'derniers messages'.
Par défaut c'est le cellpic2.jpg (dégradé) qui s'y trouve.


*modifier la couleur de fond:
changer le code de couleur #FFFFFF par le code heximal de votre choix. Pas de réel interet si vous placez une image.

*modifier l'image :
pour cela pas de modification du code, il vous suffit de REMPLACER l'image cellpic2.jpg qui est sur votre ftp, et de la renommer à l'identique!

*annuler la répétition d'une image :
parfois on place une petite image en dégradé, si elle se répète c'est moche!

chercher :
Code:
repeat-y;

remplacer par :
Code:
no;
Revenir en haut Aller en bas
caro
Invité



MessageSujet: Re: Décorticage css pour phpbb2   Lun 12 Juin - 14:13

5.
Code:
/* Header cells - the blue and silver gradient backgrounds */
th   {
   color: #FFA34F; font-size: 11px; font-weight : bold;
   background-color: #006699; height: 25px;
   background-image: url(images/cellpic3.gif);
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
         background-image: url(images/cellpic1.gif);
         background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px;
}

Ce code touche à la partie supérieure des colonnes de l'index.

*modifier le texte 'Forums','réponses','vus' etc , les intitulés des colonnes., sur l'index, le viewforum et le viewtopic
Code:
   color: #FFA34F; font-size: 11px; font-weight : bold;

°modifier la couleur en remplaçant le code heximal par celui de votre choix

Code:
color: #FFA34F;

°modifier la taille de la police
Code:
font-size: 11px
modification de la valeur 11 par celle de votre choix.
Evitez d'écrire trop grand, cela deformerait le forum.

°modifier le caractère de la police
Code:
font-weight : bold
(par défaut le texte est en gras )

-supprimer le code pour mettre le texte normal




*modifier la hauteur et la couleur de fond de la partie bleue foncée occupée par le cellpic3.gif:

Code:
   background-color: #006699; height: 25px;
aucun interet de changer cette ligne si vous laissez le cellpic en place.


*modifier l'image bleue foncée:

Code:
   background-image: url(images/cellpic3.gif);

en le supprimant vous faites apparaitre la couleur choisie à la ligne précédente.

pour changer l'image vous pouvez renommer l'image dans ce bout de code, mais le plus simple est de changer votre image sur votre FTP directement, en la nommant à l'identique (cellpic3.gif)



Pour la partie où se trouve le NOM de vos rubriques :

Code:
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
        background-image: url(images/cellpic1.gif);
        background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px;
}

*modifier ou supprimer l'image bleue dégradée :
Code:
        background-image: url(images/cellpic1.gif);
supprimez là pour faire appaitre la couleur de fond choisie (ligne d'après)
renommez là au besoin de votre image perso

*modifier la couleur de fond derrière/ à la place de l'image :

Code:
background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px;

°modifier la couleur de fond
Code:
#D1D7DC par celui de votre choix.




°modifier la couleur de la bordure:
Code:
border: #FFFFFF
c'est blanc par défaut, il n'apparait donc pas fort

°modifier l'allure de la bordure:
Code:
border-style: solid; height: 28px;

comme déjà dit plus haut dans un autre morceau de code, le border-style:solid donne un trait continu
vous pouvez lui atttribuer d'autre valeur (voir message plus haut)

Code:
height: 28px
en modifiant la valeur vous allez agrandir ou rétricir la hauteur de la cellule

Attention, si votre image est plus petite que la taille indiquée, elle se répétera.
Revenir en haut Aller en bas
caro
Invité



MessageSujet: Re: Décorticage css pour phpbb2   Lun 12 Juin - 14:13

6.
Code:
/*
  Setting additional nice inner borders for the main table cells.
  The names indicate which sides the border will be on.
  Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
   height: 29px;
   border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
   font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px; }
td.row3Right,td.spaceRow {
   background-color: #D1D7DC; border: #FFFFFF; border-style: solid; }

th.thHead,td.catHead { font-size: 12px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow    { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right    { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft     { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop    { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }

Un peu plus complexe cette partie, je ne vais développer qu'une partie, à vous de tester eventuellement toutes les possibilités .


je décortique:

Code:
td.cat,td.catHead,td.catBottom {
   height: 29px;
   border-width: 0px 0px 0px 0px;
}

*modifier
Code:
height: 29px par la valeur souhaitée
celà modifie



*modifier :
Code:
   font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px; }

celà modifie

dans l'exemple j'ai simplement remplacé 28px par une plus grande valeur
Revenir en haut Aller en bas
caro
Invité



MessageSujet: Re: Décorticage css pour phpbb2   Lun 12 Juin - 14:13

7.
Code:
/* The largest text used in the index page title and toptic title etc. */
.maintitle,h1,h2   {
         font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial,
Helvetica, sans-serif;
         text-decoration: none; line-height : 120%; color : #000000;
}


Cette partie de code modifie le titre du forum tout en haut et au milieu par défaut.

Ainsi que le titre de la rubrique quand vous etes dans le viewforum
le titre du sujet quand vous etes dans viewforum

*retirer le caractère gras :
Code:
supprimer font-weight: bold;

*modifier la taille de la police:
Code:
modifier 22px par la valeur souhaitée
Revenir en haut Aller en bas
caro
Invité



MessageSujet: Re: Décorticage css pour phpbb2   Lun 12 Juin - 14:14

Pour la suite du fichier je ne développe pas.

Ce sont des notions déjà abordées (surtout au début), ce sont des modifications sur
*la taille du texte (font-size )
modifier la valeur des px

*la couleur (color)
modifier la valeur heximale

*l'effet sur le texte (text-decoration)

ces infos ont été traité tout en début de sujet Wink


une dernière info sur le style :

8.
Code:
/* The text input fields background colour */
input.post, textarea.post, select {
   background-color : #FFFFFF;
}

input { text-indent : 2px; }

Cette partie informe sur le cadre où vous ecrivez votre texte de réponse.
Vous pouvez aussi y ajouter une image


Code:
après background-color : #FFFFFF;
ajouter background-image: url(images/VOTRE-IMAGE.gif);

là aussi , prenez une image pas trop sombre pour que le texte reste facilement lisible , sinon vous ferez fuire vos membres.
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Décorticage css pour phpbb2   Aujourd'hui à 1:13

Revenir en haut Aller en bas
 
Décorticage css pour phpbb2
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Changer les couleurs de la palette de défaut pour phpBB2
» Recherche de CSS pour phpbb2
» Sélecteur CSS pour post et signature sur phpbb2 ?
» Avertissements pour les modérateurs. (forum phpBB2)
» phpBB2 : Une couleur pour les nouveaux messages privés

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
lda création :: phpBB :: Tutoriaux-
Sauter vers: