Code CSS Personnaliser ses fenêtres.

01.10.2011

Grâce à cette astuce, vous allez pouvoir assortir toutes vos fenetres

( profil,MP...) à votre thème:

Voici comment faire:

Le premier code permettra de personnaliser le titre ainsi

que le fond de la fenetre.

Code CSS Personnaliser ses fenêtres.

Pour votre titre:

1- Crééz vous une créa pour le fond du titre ( une petite dimension suffit puisqu'elle est répétée:

11X40 suffira) .

2-Créez vous une créa pour le coté gauche du titre ( 11X40 suffira)

3-Créez vous une créa pour le coté droit du titre ( 11X40 suffira)

( vous pouvez utiliser la même créa de 11X40 pour le 1, 2 et 3 )

Pour le fond de la fenetre:

4-Faites vous une créa avec votre logiciel préféré (j'ai choisi comme dimension 750X350 pour le fond.)

Pour la hauteur:

A vous de voir selon votre blog (moi j'ai mis 39)

Pour la couleur:

Voici des sites où vous trouverez le code ou le nom d'une couleur en anglais:

http://www.aidenet.com/pageperso64j.htm

http://stylescss.free.fr/couleurs.php

Voici le code:

.window_handle{height: HAUTEURpx;}
.window_title{color: COULEUR EN ANGLAIS;}
.window_handle_content{background:url("ADRESSE DE LA CREA fond du titre 1") repeat-x;}
.window_handle_left{background:url("ADRESSE DE LA CREA coté gauche du titre 2") no-repeat;}
.window_handle_right{background:url("ADRESSE DE LA CREA coté droit du titre 3") no-repeat;}
.window_content{background:url("ADRESSE DE LA CREA fond de fenetre");}

Le deuxième code vous permettra de personaliser le contour

à la fenetre:

Code CSS Personnaliser ses fenêtres.

Vous aurez plusieurs créas à faire:

-Coté Gauche et coté droit (la créa peut être la même et de petite dimension vu qu'elle se répéte:

21x40 suffira )

-Coin coté gauche: Cette créa ne se répétera pas.Vous pouvez faire un coin arrondi selon vos gouts:

21x40 suffira

-Coin coté droit: Cette créa ne se répétera pas.Vous pouvez faire un coin arrondi selon vos gouts:

21x40 suffira

-Fond du bas: Elle sera répété :Un petit format suffira: 21x40 suffira

Si vous ne souhaitez pas faire de coin arrondi, il suffira de faire qu'une seule créa,elle

servira pour tout.Inutile de vous faire du travail en plus lol!

Voici le code:

.window_content_wrapper1{background:url("ADRESSE IMAGE COTE GAUCHE") repeat-y top left;}
.window_content_wrapper2{background:url("ADRESSE IMAGE COTE DROIT") repeat-y top right;}
.window_bottom_wrapper1{background:url("ADRESSE IMAGE COIN BAS DE GAUCHE ") no-repeat 0% 0%;}
.window_bottom_wrapper2{background:url("ADRESSE IMAGE BAS COIN DE DROITE") no-repeat 100% 100%;}
.window_bottom{background:url("ADRESSE IMAGE DU FOND EN BAS ");}

Si vous souhaitez des contours de fenetres arrondies:

( à vous ensuite de modifier le nombre de pixel en fonction de vos besoins)

.window_handle_left {border-radius: 12px 0px 0px 0px;
  -moz-border-radius:  12px 0px 0px 0px;
  -webkit-border-radius:  12px 0px 0px 0px}
.window_handle_right {border-radius: 0px 12px 0px 0px;
-moz-border-radius:  0px 12px 0px 0px;
-webkit-border-radius:  0px 12px 0px 0px}
.window_bottom_wrapper1 {border-radius: 0px 0px 12px 12px;
  -moz-border-radius:  0px 0px 12px 12px;
  -webkit-border-radius:  0px 0px 12px 12px}
.window_bottom_wrapper2 {border-radius: 0px 0px 12px 12px;
  -moz-border-radius:  0px 0px 12px 12px;
  -webkit-border-radius:  0px 0px 12px 12px}
.window_content {border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px}

3-Le troisième code pour les boutons:

Code CSS Personnaliser ses fenêtres.

Créez vous deux petites créas de couleurs différentes (petit format puisqu'elle se répétera):

- Une pour le bouton.

-Une pour le survole du bouton.

Voici le code:

.button_win, .window input[type=button], .window input[type=submit], .window button{
background: url("ADRESSE IMAGE BOUTON") repeat-x;}
.button_win:hover, .window input[type=button]:hover, .window input[type=submit]:hover, .window button:hover{background: url("ADRESSE IMAGE SURVOLE") repeat-x;}

Changer la couleur du coutour des boutons:

Sur eklablog ,le contour des boutons au survole est bleu.

Vous pouvez changer cette couleur et même mettre un contour de base( donc celle qu'on voit lorsqu'on

ne survole pas le bouton) .

Voici le code:

.button_win, .window input[type=button], .window input[type=submit], .window button{
border: TAILLE EN CHIFFREpx solid COULEUR DE BASE EN ANGLAIS ;}
.button_win:hover, .window input[type=button]:hover, .window input[type=submit]:hover, .window button:hover{
border: TAILLE EN CHIFFREpx solid COULEUR POUR LE SURVOLE EN ANGLAIS ;}

4-Modifier la couleur du texte

Code CSS Personnaliser ses fenêtres.

Vous pouvez aussi assortir la couleur de votre texte à votre thème.

Voici le code:

.window{font-size:15 ;color:COULEUR EN ANGLAIS;}

Vous pouvez aussi assortir la couleur de votre texte avec lien à votre

thème.

(Merci à Nagalia pour le partage)

Code CSS Personnaliser ses fenêtres.

Voici le code:

.window_content a {color: #COULEUR;}

Pour modifier la couleur au survole:

.window a:hover {
color: COULEUR EN ANGLAIS;}

5-Modifier l'emplacement,la texte du titre et autres:

Code CSS Personnaliser ses fenêtres.

Sur eklablog,le texte est placé automatiquement à gauche.

Si vous souhaitez modifier son emplacement ,il suffira de mettre en anglais l'emplacement voulu

dans le code ci dessous:

-Gauche: left

-Droit: droite

-Milieu: center

Voici le code:

.window_handle_content {text-align: EMPLACEMENT EN ANGLAIS ;}

Si vous souhaitez que tous vos textes soient centrés voici le code:

.window {text-align: EMPLACEMENT EN ANGLAIS;}

Pour modifier la couleur du titre:

.window_title{color:COULEUR EN ANGLAIS;}

Pour modifier la taille du titre:

.window_title{font-size: TAILLE EN CHIFFREpx;}

Pour modifier la police du titre:

.window_title {font-family:NOM DE LA POLICE;}

Si vous souhaitez une lueur externe au niveau du titre:

(celui là je viens de le composer et il fonctionne)

.window_title{moz-box-shadow: 0px 0px 10px couleur en anglais;
Text-shadow : 0px 0px 5px couleur en anglais}

Personnaliser la ligne"date","sujet" de la messagerie:

(Merci à Merryl pour le partage du code)

Code CSS Personnaliser ses fenêtres.

Code:

Th {background-image :url(L'adresse de la créa);
-moz-box-shadow: 0px 0px 10px couleur en anglais;
Text-shadow : 0px 0px 5px couleur en anglais}

-----------------------------------------------------------------------------------------------------------------------

Ces codes sont à mettre dans votrs source CSS:

Cliquer sur" Apparence " puis ""Modifier le thème" " puis " ajouter un css"

Mettre le code dans la fenetre puis cliquer "appliquer et sauvegarder"

Code CSS:Personnaliser sa barre