• Code CSS Personnaliser ses fenêtres.

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

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

    Code CSS Personnaliser ses fenêtres.

    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-alignEMPLACEMENT 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;}

     

    newSi 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

     

    « Curseur "en pluie"Jessie J »
    Partager via Gmail Yahoo!

    Tags Tags : , , , ,
  • Commentaires

    1
    Lundi 3 Octobre 2011 à 13:42

    J'ai eu du mal mais j'ai reussis merci beaucoup ! :D

    2
    Lundi 3 Octobre 2011 à 13:44

    Et est ce que on peu changer la couleur quand on clique sur quelqun qu'an c'est ecrit leur Blog et leur site ces en Bleu , est ce que on peu changer la couleur ? :)

    3
    Marine08
    Lundi 3 Octobre 2011 à 15:27

    MERCI BEAUCOUP AIMIE >O<

    4
    Mercredi 5 Octobre 2011 à 14:10

    Merci beaucoup. :)

    5
    Jeudi 6 Octobre 2011 à 22:25

    Tu es genial de partagé ca car je cherchais comment le faire et javais pas trouvé d,endroit mieux expliqué et je t,ai vue sur google lorsque jai fais la recherches ... Je mis mets totue suite sur ca.

    Bonne fin soirée. bisous

    6
    Vendredi 7 Octobre 2011 à 04:10

    Merci ton astuce est simple comme bonjour.

    Tu es bonne pour ton age.

    Merci encore.

    Bisous

    7
    Marine08
    Vendredi 7 Octobre 2011 à 11:31

    bonjour

     

    8
    Dimanche 9 Octobre 2011 à 11:06

    Coucou ! Whaou : merci beaucoup Aimie ♥.

    9
    Lundi 10 Octobre 2011 à 00:34

    Bonsoir, tu es très gentille d'expliquer comment faire cela, je trouve que c'est plus beau que ce que nous avons, bien plus beau et je te trouve très douée pour savoir faire tout ce que tu fais.


    Bravo !


    Je ne suis pas bien pour l'instant, je ne peux pas faire grand chose, mais dès que je prendrai un peu de mieux,  je vais essayer de faire ce que tu nous explques si bien.


    Merci pour tout, tu es gentille de partager.


    Bisous,


    Allison

    10
    Samedi 15 Octobre 2011 à 17:33

    J'ai eu un peu de mal, mais finalement j'ai réussi x)

    Merci beaucoup pour le code ^^

    11
    Shuchu Profil de Shuchu
    Dimanche 16 Octobre 2011 à 10:01
    *Commence a remercie*
    12
    Nesumi Profil de Nesumi
    Mercredi 26 Octobre 2011 à 14:56

    Merci beaucoup Aimie, grâce à toi j'ai réussis à bien personaliser mon blog, et grâce à tes fonds transparents j'ai réussis à rendre mes fenêtre transparente en quelque sorte XD

    Enfin merci pour tout ^^

    13
    Samedi 29 Octobre 2011 à 12:31

    Waw franchement merci, grace à toi j'ai un blog magnifique !!! C'est super sympa de faire partager ton savoir faire comme ça <3


    T'es super !

    14
    Mardi 1er Novembre 2011 à 10:26

    merci beaucoup aimielisa ^^

    15
    Mercredi 2 Novembre 2011 à 10:16

    J'adore mets en encore s'il te plait (comme pour mettre un curseur comme les tiens )

    16
    Vendredi 11 Novembre 2011 à 17:24

    coucou aimie merci beauocup j'etai passer en curieuse lol et j'ai vue astuce pour embelire vos blog et suis ci est genial merci de nous les patager te fais de gros bibisoussss a beintot

    17
    Samedi 12 Novembre 2011 à 09:01

    bonjour Mokoru

    Que veux tu dire par boutons? est ce les boutons des fenetres?

    Tu peux m'entourer sur cette impression l'endroit ou se trouve les boutons ( tu peux le faire avec photofilre gratuit ou pain ou sur n'importe quel logiciel )

    Quel effet tu voulais obtenir à l'origine?

    tu as utilisé ce 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;}

     

    18
    Samedi 12 Novembre 2011 à 14:07

    Quelle dimension as tu utilisé pour la créa bouton et bouton survolé?

    11x40 suffit largement puisque c'est répété.

    J'ai l'impression que sur ton bouton qu'on ne voit plus le texte. Peut être parce que la couleur du texte est la même que le fond du bouton??  regarde de quelle couleur tu l'as mis.

    -si tu n'y arrives pas ,donne moi le lien de tes deux boutons ( tu les a hébérgé sur eklablog?)  je te ferai le code comme ça tu pourras voir avec ton code ce qui ne fonctionnait pas.

    19
    Samedi 12 Novembre 2011 à 14:10

    Tien voilà l'image : Clique ici

    J'ai pourtant tout bien fait je comprend pas pourquoi on vois pas mon texte, tu peux me faire le code pour qu'on le vois ? stp merci !

    20
    Mercredi 16 Novembre 2011 à 07:15

    Merci beaucoup =)

    21
    Lundi 5 Décembre 2011 à 21:31

    coucou aimie j'i trouver un problème dans le code pour le contour des boutons^^ tu as oublié le "solid" pour le contour du dexième bouton^^Car sans la solid le contour lors du survole n'apparait pas car il n'y a pas le "solid" voilà^^

    22
    Dimanche 11 Décembre 2011 à 10:34

    Merci, merci beaucoup pour toutes ces astuces et tous ces codes! Merci mille fois!!!

    23
    Dimanche 11 Décembre 2011 à 10:54

    Bonjour

    Merci mindy068

    Kiwato:  Effectivement ,tu as raison, merci de me l'avoir signalé.

    24
    Dimanche 11 Décembre 2011 à 10:55

    de rien^^

    25
    Saïx Profil de Saïx
    Mardi 14 Février 2012 à 21:11

    je n'est pas vraiment compris  tu dit qu'il fo se crer des couleurs =/ mais comment?

    26
    Samedi 31 Mars 2012 à 17:20

    Coucou Aimie ^^

    Comment on fait pour arrondir les bords des fênetre comme sur ton blog ? voilà, merci d'avance !

    27
    sasma Profil de sasma
    Jeudi 5 Avril 2012 à 07:33

    merci beaucoup pour ton aide :D  bonnes vacances à toi aussi et merci de ta visite :)

    28
    Jeudi 5 Avril 2012 à 09:43

    Merci ma Grande !

    J'en ai ch..bavé mais je suis (presque) arrivée au restat souhaité.

    Une remarque : lorsque l'on modifie la ligne "Dates" "sujets", etc. de la messagerie, les modifications sont automatiquement répercutées au claendrier. Il ne me reste plus qu'à trouver comment me débarrasser de cet effet secondaire.

    Gros bisous !

    29
    Lundi 9 Avril 2012 à 11:48

    pour le premier on la trouve où la hauteur?

    30
    Lundi 9 Avril 2012 à 20:07

    Bonjour midori

    Tu dois voir la hauteur que tu veux:essaie 39

    31
    Saïx Profil de Saïx
    Lundi 9 Avril 2012 à 20:10

    ent on crée des couleurs?

    32
    Lundi 9 Avril 2012 à 20:21

    ok merci

    33
    Lundi 9 Avril 2012 à 20:22

    Merci ^^

    34
    Lundi 9 Avril 2012 à 20:32

    il ne marche pas

    35
    Lundi 9 Avril 2012 à 20:47

    Bonjour Midori

    Les codes fonctionne puisque ce  sont les codes que j'utilise pour mon blog.

    As tu bien les liens de ta créa? as tu bien mis le codes couleurs comme il faut?

    Miley: Je mis deux liens pour les couleurs dans l'article

    mokoru: de rien

     

    36
    Saïx Profil de Saïx
    Lundi 9 Avril 2012 à 20:48
    37
    Lundi 9 Avril 2012 à 20:52

    bin je lai mis comme tu là indiquer si dessus

    38
    Samedi 14 Avril 2012 à 22:33

    Une question comment on change la police d'écriture dans les fenêtres ?

    39
    Mercredi 9 Mai 2012 à 15:04

    J'ai beau mettre le nom EXACT de ma police d'écriture, ça fonctionne quand même pas...! T.T

    40
    Dimanche 20 Mai 2012 à 21:27

    Bonjour Aimielisa

    Merci de nous proposer tant d'aide pour personnaliser les blogs. Ca m'a été très utile pour un de mes blogs.

    J'espère que tu continuera à nous aider

    41
    Dimanche 20 Mai 2012 à 21:42

    ca yest ca marche mercie

    42
    Nafuh Profil de Nafuh
    Dimanche 27 Mai 2012 à 19:41

    Coucou ^^ ! Merci d'avoir partagé ces codes ^^ !

    Grace à eux (et à toi ^^) j'ai eu de superbes résultats ^^ !

    Merci encore ^^ !

    Juste une question,y'a-t-il un moyen de changer la police du bouton ?

    43
    Mardi 25 Septembre 2012 à 08:34

    Merci pour tous ces codes Aimielisa, c'est bien du travail pour toi de faire ce que tu fais et je t'en félIcite.

    J'ai bien travaillé pour faire toutes les cartes de mon blog et j'ai réussi, je suis contente.

    Merci infiniment,
    Bisous,
    Allison

    44
    Jodyne
    Dimanche 14 Octobre 2012 à 11:02

    Merci beaucoup Aimielisa

    J'ai essayé la seule chose que je ne trouve pas c'est retirer ce bleu et blanc du menu déroulant de Eklablog

    Par contre le reste pas de soucis

    Merci encore gros bisous

    45
    Atena Profil de Atena
    Jeudi 8 Novembre 2012 à 11:31

    Ton blog est une merveilles!pleine de ressource!géniale

    je vais garder ton lien précieusement!

    merci en tout cas de tout ces partages utiles!

    Je te souhaite une tres belle journée

    46
    Vendredi 16 Novembre 2012 à 22:49

    coucou

     merci pour  ton aide avec tes codes 

    ouff j'ai réussit mais depuis hier je me bataille mdr!!! bonne soirée de gros bisous

    47
    Lundi 19 Novembre 2012 à 20:53

    mais ou mettons ses code 

    48
    Lundi 19 Novembre 2012 à 21:38

    Dans la source CSS de ton blog ^^ :

    " Apparence " , " Modifier le thème " et " Ajouter du CSS " et tu colle le code voilà ;) !

    49
    Mardi 20 Novembre 2012 à 12:40

    coucou

     la case gestion des commentaires peux t'on metre un fond ou non

    bonne journée  et merci pour tes codes bisous

     

     

    50
    Mardi 20 Novembre 2012 à 14:35

    ok milles merci ^^

    51
    Hilarry Profil de Hilarry
    Vendredi 1er Mars 2013 à 13:38

    Merci !

    52
    ♥ Princesse Peach ♥ Profil de ♥ Princesse Peach ♥
    Samedi 2 Mars 2013 à 23:06

    Je suis bloquer avec le code des arrondisement  

    Je n'arrive pas a arrondire les deux coin d'en haut a droite et en haut a gauche !!!

     

    53
    ♥ Princesse Peach ♥ Profil de ♥ Princesse Peach ♥
    Jeudi 21 Mars 2013 à 16:49

    Je n'arrive toujour pas a arrondire le tableau d'information de mes visiteur :(

     

    54
    Mardi 16 Avril 2013 à 11:39

    ça veut dire   quoi " adresse de la créa " ?

    55
    Amu-love Profil de Amu-love
    Lundi 22 Avril 2013 à 11:55

    Enfin!J'ai réussi de mettre !Merci beaucoup

    56
    Jeudi 25 Avril 2013 à 14:33

    Merci beaucoup!

    57
    Dimanche 5 Mai 2013 à 16:24

    Coucou, j'ai un petit problème, là j'ai voulu changer le thème et les messages que je reçois le destinaire est en gris et de même pour le message... Ce n'est pas très visibile, je voudrais mettre noir mais je ne trouve pas comment faire, pourrais-tu m'aider stp ? merci d'avance.

    58
    Dimanche 5 Mai 2013 à 16:30

    Tu parle des commentaires? si c'est ça va dans "modifer le theme" puis"contenu" puis "commentaire"  et tu vas regarder dans" police de caractere du texte :au niveau de couleur tu coches et mets le code 

    59
    Amu-love Profil de Amu-love
    Dimanche 5 Mai 2013 à 16:33

    Waouh j'adore ton new thème!!!

    60
    Dimanche 5 Mai 2013 à 16:35

    Non, je parle des messages reçus, ceci : (Non je ne m'envoie pas des messages à moi-même c'est juste pour le test).

    Je voudrais changer le gris du destinataire, et le message y compris stp.

    61
    Dimanche 5 Mai 2013 à 16:41

    ok alors cela correspond au code numéro 4 de mon article :)

    62
    Dimanche 5 Mai 2013 à 16:46

    Hum lequel exactement... ? (Désolée du dérangement, je suis un peu pommée)

    63
    Dimanche 5 Mai 2013 à 17:05

    Celui là :.window{font-size:15 ;color:en anglais;}

    64
    Dimanche 5 Mai 2013 à 17:08

    Ah bon ? ... ça ne marche pas. :/

    65
    Dimanche 5 Mai 2013 à 17:53

    tu as mis quoi comme couleur mets moi ton code.

    66
    Dimanche 5 Mai 2013 à 17:55

    .window{font-size:15 ;color:black;}

    67
    Dimanche 5 Mai 2013 à 17:59

    Je viens de le tester sur mon blog test,ça fonctionne . Regarde bien tes codes  css présent sur ton blog  peut être as -tu mis deux codes identiques ,du coup ça fait conflis ,je ne vois que ça.

    Fait un test en ne mettant que celui ci ,tu verras qu'il fonctionne.

     

    68
    Dimanche 5 Mai 2013 à 18:01

    D'accord j'essaierais merci.

    69
    Dimanche 5 Mai 2013 à 18:11

    Ah c'est sûrement parce que je l'avais mis au début, je l'ai mis tout à la fin ça fonctionne. Merci ! :)

    70
    Samedi 11 Mai 2013 à 20:11

    Moi aussi j'ai réusii avec du mal mais merci ♥

    71
    Enavres* Profil de Enavres*
    Jeudi 27 Juin 2013 à 10:27

    j'ai une question, est-ce que tu saurais comment faire changer la police du titre des articles, des rubriques, mais avec une autre police que celles proposées ?

    sinon merci pour les codes ^^

    72
    Lundi 22 Juillet 2013 à 14:49

    Bonjour Enavres Chan

    Il faut savoir que si tu mets une police  un peu trop particulière sur ton blog, seul ceux qui auront installé cette police pourront la voir en allant sur ton blog.les autres verront une police prédéfinie qui ne sera pas forcement très jolie avec ton thème. Je te conseille donc plutôt de choisir une police standart. 

    73
    Enavres* Profil de Enavres*
    Lundi 22 Juillet 2013 à 15:11

    ah d'accord merci ^^

    74
    Samedi 14 Septembre 2013 à 15:52

     

    Bonjour Ainielisa, aurais-tu le code pour faire les coins arrondis des colonnnes, soit la colonne de gauche ou de la colonne de droite ?

    J'ai réussi à faire les deux sur mon blogs, maintenant je n'y arrive plus chez une amie.

    Je peux faire le titre mais non la colonne de gauche avec des coins arrondis.

    Donc, j'aimerais avoir le code pour faire la colonne de gauche avec des coins arrondis, je veux dire par là les petits modules sous les titres.

    Merci de ton aide,

    Allison

     

    Si une  autre personne peut me lire, elle pourrait aussi me donner les  infos

    75
    Mardi 21 Janvier 2014 à 03:51

    Salut..WOW!C'est genial je t'adore..Merci.!!!!!!!!

    76
    Dimanche 2 Février 2014 à 23:10

    un coucou

      bonne  et douce nuit bisous

    77
    Dimanche 16 Mars 2014 à 06:38

    Merci beaucoup, ça m'aide vraiment !

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :