Les fichiers css configurables nous permettent de configurer un thème au niveau de la taille des polices, de la couleur, des images de fonds et cellpics, qui vont pouvoir leur donner un aspect tout à fait différent, un aspect différent que l'on ne peut pas changer via le panneau d'administration, gestion des thèmes puis éditer.
Sur ces post, je vais vous donner pour chaque thème, le fichier css à copier et coller dans note pad ou bloc-notes de windows, qui sera en fait un simple fichier texte.
Une fois collé dans note pad ou bloc-notes, vous l'enregistrez en le nommant par exemple si je prend solaris, vous l'enregistrez sur votre dique dur en lui donnant le nom de solaris1.
Sur vote disque dur vous le verrez apparaître de cette façon;
Puis vous cliquez sur le nom de ce fichier qui est sur votre disque dur et vous le renommez solaris1.css Très important, il faut que le fichier soit nommé à la fin par .css
et qui vous donnera ceci;
Etant donné qu'il y a un certains nombre de thèmes fournis par le service vos forums, vous pouvez ouvrir un nouveau dossier sur votre disque dur et le nommer par exemple "fichiers css" et dans ce dossier, vous placez tout vos fichiers que vous aurez recopié de ce tuto.
Puis vous ouvrirez un autre dossier sur votre disque dur que vous nommerez par exemple "fichiers css 1". Et dans ce dossier, vous recopiez tout les fichiers du premier dossier que vous avez nommé auparavant "fichier css"
Le dossier "fichier css" accueillera tout les fichiers css qui n'ont pas été modifiés, spout des fichiers sains.
Et dans le 2eme dossier, vous pourrez par exemple modifier les fichiers pour après, les placer sur votre forum.
Comme cela, si vous n'avez pas placé le bon code, vous pourrez toujours l'effacer et vous pouvez recommencer l'opération avec le fichier sain qui se trouve dans le dossier "fichier css" que vous recopirez dans le "dossier fichiers css1". De cette manière, vous avez toujours un fichier sain et propre.
Et ce qui est avantageux, vous pouvez également créer plusieurs fichiers css pour un seul thème en les nommant différemment, par exemple, pour le subsilver, vous pouvez le nommer sub1, le 2eme fichier qui comportera d'autres modifications en couleur, vous pourrez le nommer par exemple sub2 et ainsi de suite.
Comme cela, si vous créez un fichier css sur le thème subsilver avec certaines modifications en couleurs, que vous aurez nommé sub1, et si au bout d'une semaine, vous voulez changer l'aspect, vous pourrez charger le sub2 qui comportera les autres modifications et ainsi de suite.
Comment charger le fichier css.
Vous allez sur http://www.vosforums.com/ vous allez sur votre compte puis vous cliquez sur "personnalisez les thèmes de ce forum"
A ce moment, vous allez voir à droite de chaque thème un mot "css".
Vous cliquez sur css du thème auquel vous voulez apporter une modification et vous allez vous trouver à cet endroit :
Là, vous cliquez sur parcourir et vous cherchez votre fichier texte qui sera nommé comme je vous l'ai indiqué plus haut par exemple pour solaris vous cherchez solaris1.css et vous cliquez sur valider.
Si tout ce passe bien, vous devez avoir ce message qui vous dit le fichier css a été chargé pour le forum de ...
comme ceci:
et si vous avez rentré les bons paramètres avec le mot !important; à chaque modification, votre thème prendra un autre aspect.
Et pour annuler un fichier css, vous allez à nouveau sur http://www.vosforums.com/ vous rentrez sur votre compte puis personnalisez les thèmes de ce forum, vous cliquez sur css du thème auquel vous avez chargé un fichier et vous cliquez sur "effacer votre fichier css".
Pour que les modifications soient prises en compte, vous vous déconnectez du forum et vous vous reconnectez et à ce moment, votre fichier modifier n'apparaîtra plus sur le forum.
Attention, très important, le fichier css doit être complet comme présenté dans le post où je vous les placec'est à dire que le fichier css doit commencer par;
- Code: Tout sélectionner
.mainmenu
et se terminer par
- Code: Tout sélectionner
@import url("templates/nom du thème/local.css");
Et pour chaque modifications apportées il faut rentrer ce mot avec les sigles ! ; c'est à dire ceci;- Code: Tout sélectionner
!important;
Vous le verrez sur le tuto plus bas comment que j'ai rentrer les modifications...
Surtout n'enlevez pas un sigle genre { ou / ou * car cela ne pourra pas fonctionner et pourra causer des disfonctionnement au thème et si il y a des espaces entre les sigles, ou entre les mots, laissez les espaces, car sinon le code ne fonctionnera pas.
Voilà, avec ce tuto, vous allez pouvoir modifier en profondeur pratiquement tout les thèmes.
Dans les post qui suivent, je vous ai placés les bons codes source des fichiers css.
Petite précision, sur le tuto , je vous montre comment modifier les codes, mais vous, vous ne modifiez que ce que vous, vous voulez modifier.Je l'ai fait à titre d'exemple.
Exemple donné avec un fichier chargé sur mon forum;http://raudax.vosforums.com/
Petite précision.Si vous voulez mettre une image de fond via le fichier css, et que actuellement, avant la mise en place du css, si vous avez un script qui indique une image de fond dans la description dur forum sur http://www.vosforums.com/ il faut enlever ce script avant de charger le fichier css, car il pourrait y avoir un conflit.
Avec les fichiers css, il est beaucoup plus simple de charger une image de fond que de la charger via la description du forum.
Autre petite précision. Qd vous chargez votre fichier css via http://www.vosforums.com/ dans personnalisez les thèmes de ce forum, comme indiquez ci dessus, si la modification ne ce fait pas de suite, cliquez sur les liens "en haut" et "en bas" (l'endroit de l'emplacement de la publicité) à gauche du mot css, pour que les modifications soient prises en compte.
Voilà, et si il y a des amateurs éclairés en la matière qui peuvent apporter leur contribution à ce tuto pour le faire évoluer, vous pouvez poster ici;
http://vosforums.vosforums.com/viewtopic.php?t=671
leur aide est la bienvenue.
Le fichier css
Voici un tuto qui va vous apprendre à modifier l'apparrence d'un thème via le fichier css pour tout les thèmes mis à part les thèmes bluetabs, purplePulse, et fiblack3dblue.
Les codes des autres fichiers css des autres thèmes, ressemble au code subsilver. Donc, vous pouvez vous baser sur ce tuto pour modifier les autres thèmes.
Avec le fichier css, vous n'avez plus besoin de rentrer un script pour placer une image de fond dans la description du forum.
Tout peut se faire via le css.
Attention. Ne recopiez pas ces codes pour les placer sur le forum, ces codes sont ici qu'à titre d'exemple. Vous prenez le code fournit sur la page du forum, et vous faites les modifications d'après ce tuto et vous rentrez les couleurs et images que vous, vous voulez rentrer.. Les codes complets vous les prenez sur cette page http://vosforums.vosforums.com/viewtopic.php?t=658
et vous vous servez de ce tuto pour faire les modifications.
Ce qui est interessant avec les fichiers css..Admettons que vous voulez créer un thème pour noël, (je prends exemple maintenant sur subsilver) vous prenez le code css original qui est fourni dans le tuto, vous le copiez sur
le bloc-notes, vous l’enregistrez sur disons noël et vous le renommez noël.css sur votre disque dur.
Dedans vous mettez des couleurs avec images de fond et cellpic qui vont pour cette fête.
vous le chargez, et vous aurez un thème pour noel.
Maintenant, si vous voulez créer un thème pour paques, vous refaites la même chose, vous recopiez le fichier css original qui est fourni dans le tuto, vous le copiez le copie sur notpad, vous le nommez paques et vous l'enregistrez sur le disque dur, puis vous le renommez paques.css
Et dedans vous mettez des couleurs et images qui vont avec cette fête.
Puis vous allez sur http://vosforums.com/ vous supprimez le fichier css de paques en cliquant sur « supprimer le fichier css » et vous chargez le fichiers css de pâques.
Admettons que vous voulez revenir à noel, vous supprimez via http://www.vosforums.com/ personnaliser les thèmes de ce forum, vous supprimez le fichier css que aviez chargé pour paques, et vous rechargez le noël.
Vous ne perdez aucune couleur, ni images de fonds, puisque vos fichiers css sont enregistrés sur votre disque dur avec les couleur changées.
Et vous pouvez créer autant de fichier css que vous voulez pour un thème.
Mais ce qui est interessant, disons pour le thème noel, vous pouvez créer un dossier sur votre disque dur que vous nommer noel, dedans vous aurez votre fichier css modifier pour noel, et vous pouvez inclure dans ce dossier les images de tes boutons envoyez, répondre etc , et pour le thème de pâques, vous créez également un autre dossier sur votre disque dur que vous nommez par exemple pâques et vous incluez les images des boutons envoyez répondre etc..
Petite précision toutefois pour les images de fond et cellpic, ayez un hébergeur pour les stocker comme cela vous êtes sur de les avoir toujours qd vous chargez un thème.Prenez note
Il y a certain code de couleur qui se définisse de cette façon; background-color: Black;
ce sont des nom de couleur, soit
Black = noir, Green = vert, Red = rouge, Yellow = jaune, Blue = bleu
Mais vous pouvez également mettre des codes couleur de cette façon;
background-color: #E5E5E5;
mais si vous mettez un code couleur en remplacement de black par 524152 n'oubliez pas d'inclure le
# soit #524152 Si je prend un code comme celui ci par exemple qui indique la couleur des boutons bbcode;background-color : signifie la couleur de fond
color : signifie la couleur du texte
font-size: signifie la taille du texte
Néamoins, avec le code de couleur pour une image de fond ou autre qui se détermine de cette façon- Code: Tout sélectionner
background-color: #E5E5E5;
et que vous, vous voulez placer une image à la place d'un code couleur, le code se détermine de cette façon;
- Code: Tout sélectionner
background-image: url(adresse url de votre image);
Pour les images de fond via une adresse url, il suffit de rentrer une url de votre image de fond dans la partie
background-image : url(URL DE VOTRE IMAGE); sur son code css. Important n'enlevez surtout pas les sigles * / { } ; sinon le code ne fonctionnera pas. Les pixels definissent la taille des lettres ou des bordures. Si a une bordure vous mettez 0 pixels, vous n'avez plus de bordures apparentes. Et surtout chose importante,n'oubliez pas de placez le
!important; aux modifications que vous voulez faire. C'est ceci qui va prendre en compte la modification.Voilà la dénomination des codes.
Ce code vous sert à changer le fond de l'arrière du forum et la couleur du scrollbar - Code: Tout sélectionner
/* 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;
}
c'est à dire ceci;
et ceci 
et pour obtenir ceci, j'ai rentré le code de cette façon
- Code: Tout sélectionner
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-image: url(http://bandesdessinees.nuxit.net/fichiercss/subsigloo/fond2.gif) !important;
scrollbar-face-color: #ff0000 !important;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
Vous devez voir la différence du code de l'image qui au départ est une couleur et qd je place une image via une adresse url ;
Code d'un fond en couleur
- Code: Tout sélectionner
background-color: #E5E5E5;
Code d'un fond avec une adresse url;
- Code: Tout sélectionner
background-image: url(http://bandesdessinees.nuxit.net/fichiercss/subsigloo/fond2.gif);
ce code vous sert à changer l'image du devant du forum- Code: Tout sélectionner
/* This is the border line & background colour round the entire page */
.bodyline { background-color: #FFFFFF; border: 1px #98AAB1 solid; }
c'est à dire ceci;
et pour obtenir cela j'ai rentré le code de cette façon;
- Code: Tout sélectionner
/* This is the border line & background colour round the entire page */
.bodyline { background-image: url(http://bandesdessinees.nuxit.net/fichiercss/subsigloo/kiwi01.gif) !important; border: 1px #98AAB1 solid; }
Maintenant par exemple pour les images de fond fixes, comme pour les thèmes de Mylgo, si je prend l'exemple sur le thème MylManga, le code pour l'image de fond est ceci;
/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: #F4CDCE;
scrollbar-face-color: #AE817B;
scrollbar-highlight-color: #CD9489;
scrollbar-shadow-color: #F4CDCE;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-arrow-color: #F4CDCE;
scrollbar-track-color: #F4CDCE;
scrollbar-darkshadow-color: #CD9489;
background-image : url(URL DE VOTRE IMAGE) !important;
background-repeat : no-repeat;
background-position : right top;
background-attachment : fixed;
}
Notez que l'image de fond se trouve là ou je l'indique en rouge et si vous voulez la changer, n'oubliez pas le !important; comme sur l'exemple ci dessus.
Ce code vous sert à modifier les contours des cellules, soit en les colorant, soit en les éliminant.. le pixel détermine la grosseur du trait, soit 0 = aucune ligne - Code: Tout sélectionner
/* This is the outline round the main forum tables */
.forumline { background-color: #FFFFFF; border: 2px #006699 solid; }
c'est à dire ceci;
Pour obtenir cela, j'ai rentré le code de cette façon
- Code: Tout sélectionner
/* This is the outline round the main forum tables */
.forumline { background-color: #FF0000 !important; border: 1px #98AAB1 solid; }
Ce code pous permet de modifier les couleurs des cellules- Code: Tout sélectionner
/* Main table cell colours and backgrounds */
td.row1 { background-color: #EFEFEF; }
td.row2 { background-color: #DEE3E7; }
td.row3 { background-color: #D1D7DC; }
c'est à dire ceci;
pour obtenir cela, j'ai rentré le code de cette façon;
- Code: Tout sélectionner
/* Main table cell colours and backgrounds */
td.row1 { background-color: #99cccc !important; }
td.row2 { background-color: #00cccc !important; }
td.row3 { background-color: #66cccc !important; }
Ceci est très interressant surtout pour les thèmes où l'on ne peut changer les couleurs via le panneau d'administration du forum dans éditer le thème de....
comme par exemple le thème solaris
Maintenant, à la place des couleurs, vous pouvez aussi placer des images
Pour obtenir ceci;
j'ai rentré le code de cette façon
- Code: Tout sélectionner
/* Main table cell colours and backgrounds */
td.row1 { background-image: url(http://bandesdessinees.nuxit.net/images/0001.gif) !important; }
td.row2 { background-image: url(http://bandesdessinees.nuxit.net/images/002.gif) !important; }
td.row3 { background-image: url(http://bandesdessinees.nuxit.net/images/002.gif) !important; }
et il faut aussi cherché la ligne que je vous montre en rouge pour rentrer une url.
/*
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-image: url(http://bandesdessinees.nuxit.net/images/002.gif) !important; 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; }
Ce code vous permet de changer les cellpics via une url;- Code: Tout sélectionner
*/
td.rowpic {
background-color: #FFFFFF;
background-image: url(images/cellpic2.jpg);
background-repeat: repeat-y;
}
/* 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;
}
c'est à dire ceci
et pour obtenir cela, j'ai rentré le code de cette façon;
- Code: Tout sélectionner
*/
td.rowpic {
background-color: #FFFFFF;
background-image: url(http://bandesdessinees.nuxit.net/fichiercss/subsigloo/cellpic2.jpg) !important;
background-repeat: repeat-y;
}
/* 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(http://bandesdessinees.nuxit.net/fichiercss/subsigloo/cellpic3.gif) !important;
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(http://bandesdessinees.nuxit.net/fichiercss/subsigloo/cellpic1.jpg) !important;
background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px;
}
Avec ce code, vous pouvez changer l'apparence des liens de navigations hors forums c'est à dire "index du forum", "marqué tout les forums comme lu" etc... C'est idéal pour les forums, dont ces liens et ces phrases sont disons peu visibles comme par exemple le thème de MylPotterPour le myl potter le code est celui ci;
- Code: Tout sélectionner
/* General text */
.gen { font-size : 12px;}
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall {color : #7B5B3B; }
a.gen,a.genmed,a.gensmall { color: #7B5B3B; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #7B5B3B; text-decoration: underline; }
.gen2{ font-size : 12px; color : #000000; font-family: Arial, Helvetica, sans-serif;}
a.gen2:hover2{ color: #7B5B3B; text-decoration: underline; }
.gen3{ font-size : 10px; color : #000000; font-family: Arial, Helvetica, sans-serif;}
a.gen3:hover2{ color: #7B5B3B; text-decoration: underline; }
.gen4{ font-weight: bold; font-size : 12px; color : #000000; font-family: Arial, Helvetica, sans-serif;}
a.gen4:hover2{ color: #000000; text-decoration: underline; }
a.gen4{ color: #000000; text-decoration: none; }
.gen5{ font-weight: bold; font-size : 12px; color : #FDD35F; font-family: Arial, Helvetica, sans-serif;}
a.gen5:hover2{ color: #FDD35F; text-decoration: underline; }
a.gen5{ color: #FDD35F; text-decoration: none; }
et pour obtenir ceci;
J'ai placé le code de cette façon;
- Code: Tout sélectionner
/* General text */
.gen { font-size : 13px !important;}
.genmed { font-size : 13px !important; }
.gensmall { font-size : 13px !important; }
.gen,.genmed,.gensmall {color : #ff6600 !important; }
a.gen,a.genmed,a.gensmall { color: #ff6600 !important; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #7B5B3B; text-decoration: underline; }
.gen2{ font-size : 13px !important; color : #000000; font-family: Arial, Helvetica, sans-serif;}
a.gen2:hover2{ color: #7B5B3B; text-decoration: underline; }
.gen3{ font-size : 13px !important; color : #000000; font-family: Arial, Helvetica, sans-serif;}
a.gen3:hover2{ color: #7B5B3B; text-decoration: underline; }
.gen4{ font-weight: bold; font-size : 12px; color : #000000; font-family: Arial, Helvetica, sans-serif;}
a.gen4:hover2{ color: #000000; text-decoration: underline; }
a.gen4{ color: #000000; text-decoration: none; }
.gen5{ font-weight: bold; font-size : 12px; color : #FDD35F; font-family: Arial, Helvetica, sans-serif;}
a.gen5:hover2{ color: #FDD35F; text-decoration: underline; }
a.gen5{ color: #FDD35F; text-decoration: none; }
Avec ces codes, vous pouvez changez la couleur des titres des catégories et des forums- Code: Tout sélectionner
/* Forum category titles */
.cattitle { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #006699}
a.cattitle { text-decoration: none; color : #006699; }
a.cattitle:hover{ text-decoration: underline; }
/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: 12px; color : #006699; }
a.forumlink { text-decoration: none; color : #006699; }
a.forumlink:hover{ text-decoration: underline; color : #DD6900; }
Ceux qui veut dire qu'avec ce code si vous mettez d'autres couleurs, vous les aurez d'une autre apprence;
exemple;
- Code: Tout sélectionner
a.cattitle { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #006699}
et vous le placez de cette façon;
- Code: Tout sélectionner
a.cattitle { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #ff0000 !important}
Ce code correspond au changement de couleurs des n° de pages de navigation c'est à dire page 1 à 3 etc - Code: Tout sélectionner
/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: 11px; color : #000000;}
a.nav { text-decoration: none; color : #006699; }
a.nav:hover { text-decoration: underline; }
Et pour obtenir cela;
j'ai placé le code de cette façon.
- Code: Tout sélectionner
/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: 11px; color : #ff0000 !important;}
a.nav { text-decoration: none; color : #ff0000 !important;}
a.nav:hover { text-decoration: underline; }
Avec ce code, vous pouvez changez le titre des topics.- Code: Tout sélectionner
/* titles for the topics: could specify viewed link colour too */
.topictitle { font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #5493B4; }
a.topictitle:hover { text-decoration: underline; color : #DD6900; }
Et pour obtenir cela (j'ai placé de la couleur rouge, mais vous pouvez mettre autre chose)
J'ai placé le code de cette façon;
- Code: Tout sélectionner
/* titles for the topics: could specify viewed link colour too */
.topictitle { font-weight: bold; font-size: 11px !important; color : #ff0000 !important; }
a.topictitle:link { text-decoration: none; color : #ff0000 !important; }
a.topictitle:visited { text-decoration: none; color : #ff0000 !important; }
a.topictitle:hover { text-decoration: underline; color : #ff0000 !important; }
Avec ce code vous pouvez modifier la couleur du nom des membres, du nom admin etc.. - Code: Tout sélectionner
/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : 11px; color : #000000;}
Pour obtenir cela;
j'ai rentré le code de cette façon;
- Code: Tout sélectionner
/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : 12px !important; color : #663366 !important;}
Avec ce code, vous pouvez modifier la couleur de la présentation des membres sous l'avatar, et la date des post.- Code: Tout sélectionner
/* Location, number of posts, post date etc */
.postdetails { font-size : 10px; color : #000000; }
Pour obtenir cela;
J'ai rentré le code de cette façon, j'ai placé de la couleur orange, mais vous, vous rentrez ce que vous voulez comme couleur
- Code: Tout sélectionner
/* Location, number of posts, post date etc */
.postdetails { font-size : 11px !important; color : #ff9933 !important;
}
Avec ce code, vous pouvez modifiez la couleur du texte dans les post- Code: Tout sélectionner
/* The content of the posts (body of text) */
.postbody { font-size : 12px;}
a.postlink:link { text-decoration: none; color : #006699 }
a.postlink:visited { text-decoration: none; color : #5493B4; }
a.postlink:hover { text-decoration: underline; color : #DD6900}
J'ai rentré le code de cette façon;
- Code: Tout sélectionner
/* The content of the posts (body of text) */
.postbody { font-size : 13px !important;}
a.postlink:link { text-decoration: none; color : #9966ff !important;}
a.postlink:visited { text-decoration: none; color : #009999 !important;}
a.postlink:hover { text-decoration: underline; color : #ffcc00 !important;}
Petite précision pour ce code;
cette ligne;
.postbody { font-size : 13px !important;} le pixel indique la grandeur du texte tel que vous la verrez sur les post. si vous voulez que la couleur change dans le post , il faut la noter de cette façon;
.postbody { font-size : 13px !important; color : #000000 !important;}
Ce code est interessant pour les thèmes ou l'on ne peut changer la couleur du texte via le panneau d'administration du forum dans éditer le thème ... pour certains thèmes comme par exemple le thème Solaris, par le css cela est possible.
Exemple de ce que cela donne sur solaris;
Avec ces codes, vous pouvez modifiez l'apparence des quote et des codes dans les messages, le pourtour, la couleur du fond.. - Code: Tout sélectionner
/* Quote & Code blocks */
.code {
font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}
Pour obtenir cela
J'ai rentré le code de cette façon..
- Code: Tout sélectionner
/* Quote & Code blocks */
.code {
font-family: Courier, 'Courier New', sans-serif; font-size: 11px !important; color: #3300cc !important;
background-color: #FAFAFA !important; border: #000000 !important; border-style: solid;
border-left-width: 2px !important; border-top-width: 2px important; border-right-width: 2px !important; border-bottom-width: 1px !important;
}
.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px !important; color: #444444 !important; line-height: 125%;
background-color: #FAFAFA !important; border: #000000 !important; border-style: solid;
border-left-width: 2px !important; border-top-width: 2px !important; border-right-width: 2px !important; border-bottom-width: 2px !important;
}
Ce code signifie le changement de couleur, les infos du bas de page. - Code: Tout sélectionner
/* Copyright and bottom info */
.copyright { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;}
a.copyright { color: #444444; text-decoration: none;}
a.copyright:hover { color: #000000; text-decoration: underline;}
C'est idéal pour les thèmes qui ont ces informations peu visibles ou alors trops petits
Pour obtenir cela;
j'ai rentré le code de cette façon;
- Code: Tout sélectionner
/* Copyright and bottom info */
.copyright { font-size: 13px !important; font-family: Arial, Helvetica, sans-serif; color: #ff6600 !important; letter-spacing: -1px;}
a.copyright { color: #ff6600 !important; text-decoration: none;}
a.copyright:hover { color: #ff6600 !important; text-decoration: underline;}
Avec ce code vous pouvez modifiez la couleur de "d'envoyer, prévisualiser, ajouter option - Code: Tout sélectionner
/* Form elements */
input,textarea, select {
color : #000000;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
border-color : #000000;
}
Pour obtenir cela;
J'ai rentré le code de cette façon;
- Code: Tout sélectionner
/* Form elements */
input,textarea, select {
color : #ff0000 !important;
font: normal 12px !important; Verdana, Arial, Helvetica, sans-serif;
border-color : #000000 !important;
}
Avec ce code, vous pouvez changez la couleur de l'endroit ou vous tapez votre message (utile surtout si vous avez un endroit foncé comme par exemple le thème solaris) et que vous n'aimez pas le noir dans l'endroit des post. - Code: Tout sélectionner
/* The text input fields background colour */
input.post, textarea.post, select {
background-color : #FFFFFF;
}
Pour le thème solaris pour obtenir cela;
J'ai rentré le code de cette façon;
- Code: Tout sélectionner
/* The text input fields background colour */
input.post, textarea.post, select {
background-color : #111111 !important;
}
Dans ce code, ce qui est interressant, vous pouvez placez une image de fond dans l'endroit où vous écrivez votre texte;
Exemple, le code original est celui là;
- Code: Tout sélectionner
/* The text input fields background colour */
input.post, textarea.post, select {
background-color : #FFFFFF;
}
et si vous mettez ceci, une url d'image à la place d'un code couleur;
- Code: Tout sélectionner
background-image: url(http://bandesdessinees.nuxit.net/images/rodeo2.gif) !important;
à la place de ceci
- Code: Tout sélectionner
background-color : #FFFFFF;
Vous obtiendrez ceci comme sur ce forum de démonstration;
et pour avoir cela j'ai renré le code de cette façon
- Code: Tout sélectionner
/* The text input fields background colour */
input.post, textarea.post, select {
background-image: url(http://bandesdessinees.nuxit.net/images/rodeo2.gif) !important;
font-size: 13px !important;
}
avec ce code, vous pouvez changez l'apparence des boutons bbcode et la couleur du texte à l'intérieur - Code: Tout sélectionner
/* The buttons used for bbCode styling in message post */
input.button {
background-color : #EFEFEF;
color : #000000;
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}
et pour obtenir cela;
j'ai rentré le code de cette façon;
- Code: Tout sélectionner
/* The buttons used for bbCode styling in message post */
input.button {
background-color : #ff9933 !important;
color : #99ccff !important;
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}
Avec ce code, vous pouvez changer l'apprence du texte qui indique la mise en forme du bouton bbcode - Code: Tout sélectionner
/* This is the line in the posting page which shows the rollover
help line. This is actually a text box, but if set to be the same
colour as the background no one will know ;)
*/
.helpline { background-color: #DEE3E7; border-style: none; }
Pour obtenir ceci;
J'ai placé le code de cette façon;
- Code: Tout sélectionner
/* This is the line in the posting page which shows the rollover
help line. This is actually a text box, but if set to be the same
colour as the background no one will know ;)
*/
.helpline { background-color: #008000 !important; border-style: none; }
Comme vous pouvez le constater, le texte est blanc dans la définition du bbcode, alors pour avoir la couleur du texte il faut rajouter cette ligne;
- Code: Tout sélectionner
color: White !important;
Ce qui donne comme code entier
- Code: Tout sélectionner
/* This is the line in the posting page which shows the rollover
help line. This is actually a text box, but if set to be the same
colour as the background no one will know ;)
*/
.helpline { background-color: #008000 !important; border-style: none;
color: White !important;}
voilà, avec ces changements, vous pouvez voir ce que cela donne sur mon forum sur lequel j'ai introduit le fichier css;
http://raudax.vosforums.com/
Ici, je vous montre le fichier css que j'ai chargé sur ce forum avec les modifications apportées.
http://raudax.vosforums.com/viewtopic.php?t=13
et pour avoir les codes couleurs;
http://macmicro.chez.tiscali.fr/Outilsw ... eurweb.htm
