-
Code CSS Personnaliser ses fenêtres.
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.
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:
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:
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
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)
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:
Sur eklablog,le texte est placé automatiquement à gauche.
Si vous souhaitez modifier son emplacement ,il suffira de mettre en anglais l'emplacement vouludans le code ci dessous:-Gauche: left-Droit: droite-Milieu: centerVoici 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:
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"
Tags : code, css, fenetre, eklablog, module
-
Commentaires
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 ? :)
3Marine08Lundi 3 Octobre 2011 à 15:27Tu 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
7Marine08Vendredi 7 Octobre 2011 à 11:31Bonsoir, 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
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 ^^
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 !
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
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;}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.
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 !
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à^^
Coucou Aimie ^^
Comment on fait pour arrondir les bords des fênetre comme sur ton blog ? voilà, merci d'avance !
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 !
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
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
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 ?
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,
Allison44JodyneDimanche 14 Octobre 2012 à 11:02Merci 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
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
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
Dans la source CSS de ton blog ^^ :
" Apparence " , " Modifier le thème " et " Ajouter du CSS " et tu colle le code voilà ;) !
coucou
la case gestion des commentaires peux t'on metre un fond ou non
bonne journée et merci pour tes codes bisous
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 !!!
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.
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
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.
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.
Ah c'est sûrement parce que je l'avais mis au début, je l'ai mis tout à la fin ça fonctionne. Merci ! :)
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 ^^
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.
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
bonjour j'ai essayé 1er code échec mon css me dis erreur
.window_handle{height: 39px;}
.window_title{color: MediumPurple;}
.window_handle_content{background:url("http://ekladata.com/iY4jGOKxZ-m-chmEzNasjMt3GOY/titre-cote-gauche-et-droit.jpg") repeat-x;}
.window_handle_left{background:url("http://ekladata.com/iY4jGOKxZ-m-chmEzNasjMt3GOY/titre-cote-gauche-et-droit.jpg") no-repeat;}
.window_handle_right{background:url("http://ekladata.com/iY4jGOKxZ-m-chmEzNasjMt3GOY/titre-cote-gauche-et-droit.jpg") no-repeat;}
.window_content{background:url("http://ekladata.com/mVAE1xfbn43NFjO4Bw7J7OFFsfk/fond-fenetre.jpg");}dommage çà ferais plus joli tout harmonisé.
bonsoir j'ai enfin réussi changer de navigateur Firefox déconne. Merci beaucoup pour ses codes.Il n'y a que changer fond notifications pas réussie
Ajouter un commentaire
J'ai eu du mal mais j'ai reussis merci beaucoup ! :D