-
Thème #3 Angel
Thème dans les couleurs blanc, rose et vert pâles.
MAJ : 15/05/2021 (commentaires, menu en-tête, module recherche, Newsletter)
Cliquez sur l'image pour agrandir
- Créditer / Prévenir en commentaire ou par MP si vous prenez un header ou un thème.
- Préciser quelque part sur votre blog que le thème est de moi si ce n'est pas déjà fait. (normalement c'est déjà noté dans le pied de page)Avant de copier le code :
- Décocher tout ce qui est coché dans les paramètre du blog (Apparence → Modifier le thème → Format du blof / En-tête/Menu 1... etc.)
- 2- Le thème est fait pour un seul menu à gauche, sinon vous pouvez toujours bidouiller le code pour ajouter un second menu.
html,body { cursor : url("http://nsm08.casimages.com/img/2016/02/20//16022006003420257713988879.png"), auto; }
@font-face {font-family: "gabriola";
src: url('http://ekladata.com/mdvOyk3-RX70_IU2E3_kJSoac0I/Gabriola.ttf');}
@font-face {font-family: "edwardian script itc";
src: url('http://ekladata.com/_RXpbMyIGgRBWx5AuyQ3j4uj1Es/Edwardian.ttf');}
/*Fond*/
#body { background-image: url("http://nsm08.casimages.com/img/2016/02/19//16021908133920257713986588.png");
background-repeat: repeat;
background-attachment: fixed; }
#background { background-image: url("http://nsm08.casimages.com/img/2016/02/20//16022006403120257713988896.png");
box-shadow: 0 0 15px black;
width: 1050px;
}
#header {background-image: url("http://nsm07.casimages.com/img/2017/02/19//17021912332620257714856908.png"); height: 450px;
background-repeat: no-repeat;
font-family: edwardian script itc;
font-size: 85px;
color: white;
font-weight: none;
text-shadow: 0 0 5px DeepPink , 0 0 5px deeppink, 0 0 5px black; }
#titre_header {top: 50px; left: 50px;}
#titre_header a {color: white;}
#slogan_header {top: 150px;
left: 50px;
font-family: edwardian script itc;
font-size: 45px;
color: white;
font-weight: none;
text-align: center;
text-shadow: 0 0 5px ForestGreen, 0 0 5px ForestGreen, 0 0 5px black;}
/*Menu en-tête*/
#menu {
top: 10px;
text-align: right;
left: 900px;
}
#menu a {
height: 20px;
line-height: 23px;
background-image: url("http://nsm08.casimages.com/img/2016/02/20//16022006403120257713988896.png");
border-radius: 3px;
box-shadow: 0 0 3px ForestGreen, 0 0 3px green;
font-family: gabriola;
font-size: 23px;
color: white;
font-weight: bold;
text-shadow: 0 0 2px deeppink, 0 0 2px deeppink, 0 0 2px green;
margin-bottom: 10px;
margin-right: -10px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 20px;
padding-left: 5px;
}
#menu a:hover {box-shadow: 0 0 3px deeppink, 0 0 3px indigo;
color: white;
font-weight: bold;
text-shadow: 0 0 2px green, 0 0 2px green, 0 0 2px white;
font-size: 23px;
padding-right: 15px;}
ul#menu ul { width: 150px;}
ul#menu ul a {font-family: calibri;
text-shadow: none;
font-weight : semi-bold;
color: #8E56A7;
font-size: 12px;
background: #fff;
height: 20px;
line-height: 20px;
text-align: left;
padding-left: 10px;
}
ul#menu ul a:hover {color: #359171;
text-shadow: none;
background: #FAF5FC;
font-size: 12px;
font-weight : semi-bold;
text-align: left;
padding-left: 15px;
-webkit-transition-duration: 450ms;
-moz-transition-duration: 450ms;
transition-duration: 450ms;
}
/*-menu1-*/
#menu1 { width: 270px;
margin-left: 5px;
margin-right: 10px;
}
#menu1 .module_menu_titre { height: 76px;
line-height: 88px;
background-image: url("http://nsm07.casimages.com/img/2017/03/03//17030307301914970214889233.png");
background-repeat: no-repeat;
background-position: center;
padding: 5px;
font-family: gabriola;
font-size: 24px;
color: white;
font-weight: bold;
text-align: center;
text-shadow: 0 0 5px LightGreen, 0 0 5px black, 0 0 5px black;
}
.module_menu_contenu {
font-family: arial;
padding: 5px;
margin-bottom: 25px;
color: black; }
.module_menu_contenu a {color: #D06C9D;
font-weight : bold;}
/*Modules*/
.module_menu_type_search [name="q"] {width:85%;
border-radius: 2px; }
.module_menu_type_newsletter input[name=subscribe] {width:85%;
border-radius: 3px;
margin-top: 5px;}
.menu_shoutbox strong {
color: white;
font-family: arial;
font-size: 13px;
text-shadow: 0px 0px 3px deeppink, 0px 0px 3px deeppink, 0px 0px 3px black; }
.menu_shoutbox {padding: 3px;
margin: 5px; border: 1px dashed SeaGreen;
border-radius: 5px;
height: 240px;
color: black;
text-shadow: 0px 0px 3px white, 0px 0px 3px white;
font-family: arial;
font-size: 12px;
background-image: url("http://nsm08.casimages.com/img/2016/02/20//16022002511420257713988845.png");
background-repeat: no-repeat;}
.module_menu_type_shoutbox [name="shoutbox_msg"]{width: 80%; }
/*Visiteurs*/
.module_menu_type_lastvisitors img {max-width: 40px;
opacity: 0.9; margin: 2px;
border-radius: 20px;
border: 1px solid white;
box-shadow: 0 0 3px deeppink, 0 0 2px indigo;
margin: 5px; }
.module_menu_type_lastvisitors img:hover {
box-shadow: 0 0 3px green, 0 0 3px green, 0 0 3px white;
border: 1px solid white;
opacity: 1;
margin: 5px;}
#help_bubble {
font-weight: bold;
padding: 3px;
font-style : italic;
font-size: 12px;
border-radius: 5px;
border: 2px solid #E175A0;
color: black;
background-color: white; }
/*Articles*/
#content {
margin-right: 10px;}
.module_titre {height: 60px;
line-height: 60px;
background: url(http://nsm08.casimages.com/img/2016/02/20//16022002324420257713988827.png) no-repeat 100% 0%,
url(http://nsm08.casimages.com/img/2016/02/20//16022002341420257713988833.png) repeat-x 0% 50%;
background-repeat: no-repeat;
padding: 5px;
font-family: gabriola;
font-size: 18px;
color: white;
font-weight: bold;
text-align: center;
text-shadow: 0 0 5px deeppink, 0 0 5px PaleVioletRed, 0 0 5px black;
margin-left: 20px;
margin-top: 10px;}
.module_titre a {color: white;}
.article_info {margin-right: 5px;
margin-bottom: 10px;
font-size: 11px;
font-weight: none;
text-align: center;
font-family: arial;
text-align: right;
color: grey;
text-shadow: 0 0 2px white, 0 0 2px white;}
.article_info a {color: green;}
.module_contenu { margin-left: 20px;
text-align: justify;
font-family: arial;
font-size: 13px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 25px;
color: black;
border-radius: 20px;
}
.module_contenu a {color: #E175A0;}
#footer { height: 30px; text-align: center;
}
#footer a{ height: 50px; color: grey;}
#footer::after{
font-size: 13px;
font-family: arial;
content: "- Thème du blog by Kalyna";
color: #E175A0;
text-shadow: 0 0 3px white, 0 0 3px white; }
/*-commentaire-*/
a.article_comments_link {
border-radius: 5px;
color: #6D9221;
padding: 2px 5px 2px 5px;}
#commentform .mce-colorbutton {display:none;}
.mce-colorbutton {display:none;}
.comment_normal, .comment_admin {
width: 99%;
}
div.commentheader {border-radius: 5px 5px 0px 0px;
height: 45px;
background: #80D1B5;}
.comment_admin div.commentheader {
height: 45px;
background: #B894C8;
}
div.commentbody {border-radius: 0px 0px 5px 5px;
border: 1px solid #F6F2F8;
text-align: left;
color: #333;
padding-top: 10px;
padding-right: 3px;
padding-left: 5px;
padding-bottom: 5px;
background-color: #fff;
text-align: left;
margin-bottom: 25px;
}
.commentnumber {display: none;
}
.commentpseudo {margin-left: 75px;
font-family: Amaranth;
color: #000;
font-weight: normal;
padding-left: 5px;
font-size: 18px;
float: left;
line-height: 28px;
}
.commentpseudo a {font-weight: normal;
line-height: 28px;
color: #000;
font-size: 18px;
}
.commentpseudo a:hover {font-weight: normal;
color: #684471;
}
.comment_admin .commentpseudo {
font-weight: normal;
font-style: normal;
text-decoration: none;
font-variant: normal;}
.commentdate {position: absolute;
width: 200px;
margin-top: 28px;
float: left;
margin-left: 80px;
font-size: 9px;
padding-right: 5px;
color: #fff;
}
.commentavatar {height: 5px;
float: left;
padding-left: 5px;
}
.commentavatar img {
border: 1px solid white;;
width: 55px;
float: left;
position: absolute;
margin-top: -49px;
margin-left: 0px;
border-radius: 3px;
}
.comment-reply a {margin-left: 15px;
background: #999;
color: #fff;
padding: 2px 10px 2px 10px;
border-radius: 2px;
margin-bottom: 5px;
}
.comment-reply a:hover {margin-left: 15px;
background: #777;
color: white;
padding: 2px 10px 2px 10px;
border-radius: 3px;
margin-bottom: 5px;}
.block-reply div.commentdate {margin-left: 68px;}
.block-reply div.commentbody {background: #F8F5FA;
padding-left: 4px;
color: #333;
}
.block-reply {margin-left: 25px;
margin-right: 5px;
padding: 3px;
border-left: none;}
.block-reply .commentavatar {height: 0px;
z-index: 1;
width: 50px; }
.block-reply .commentavatar img {
z-index: 1;
width: 45px;
border: 1px solid white;
}
.block-reply .commentpseudo {
margin-left: 62px;
float: left;
}
.block-reply .commentpseudo a {}
.block-reply div.commentheader {margin-top: 15px;}
a.show-replies {color: #fff;}
a.show-replies:hover {color: white;}
.show-replies {
margin-left: 200px;
border-radius: 5px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 25px;
padding-right: 25px;
background: #B894C8;}
.show-replies:hover {background: #A87BBB;}
/*-Rechercher-*/
.module_menu_type_search [name="q"] {
width: 220px;
border: 1px solid #80D1B5;
height: 20px;
margin-bottom: 5px;
}
.module_menu_type_search [type="submit"] {font-weight: bold;
color: white;
padding: 5px;
border: 2px solid #fff;
background: #80D1B5;
}
.module_menu_type_search [type="submit"]:hover {background: #58C29D;}
.module_menu_type_search {text-align: center;}
/*-newsletters-*/
.module_menu_type_newsletter input[name=subscribe] {
width: 220px;
border: 1px solid #80D1B5;
height: 20px;
margin-bottom: 5px;
}
.module_menu_type_newsletter [type="submit"] {font-weight: bold;
color: white;
padding: 5px;
border: 2px solid #fff;
background: #80D1B5;
}
.module_menu_type_newsletter [type="submit"]:hover {background: #58C29D;}
.module_menu_type_newsletter {text-align: center;}
/*menubar*/
#menubar,
#menubar a { color: black; font-weight: normal;
font-family: arial; font-size: 12px; }
#menubar {color: black;
font-family: arial; font-size: 12px;
font-weight: normal; }
.menubar_section li:hover {color: black; text-shadow: 0 0 15px white;}
.menubar_section li {color: black;
text-shadow: 0 0 5px white, 0 0 5px white;
font-family: arial;
font-size: 12px;}
#menubar { background-image: url("http://nsm08.casimages.com/img/2016/02/19//16021908133920257713986588.png"); background-attachment: fixed; }
.menubar_button
.menubar_section:hover,
.menubar_section,
.menubar_separation,
.menubar_button,
#menubar_logo,
#menubar_favorites { background: none;}
#menubar_hide,
#menubar_show { background-image: url("http://nsm08.casimages.com/img/2016/02/20//16022005031920257713988864.png");}
.menubar_section li {
background:url("http://nsm08.casimages.com/img/2016/02/20//16022005084320257713988871.png")no-repeat; }
.menubar_section li:last-child {
background:url("http://nsm08.casimages.com/img/2016/02/20//16022005084320257713988872.png")no-repeat ; border-radius: 5px; }
.menubar_section:hover div{
background-image: url("http://nsm08.casimages.com/img/2016/02/20//16022005103520257713988873.png")}
#notifications_panel li{ background:url("http://nsm08.casimages.com/img/2016/02/05//16020509063920257713950794.png")}
#notifications_panel li:hover { background:url("http://nsm08.casimages.com/img/2016/02/20//16022005103520257713988873.png") }
#notifications_panel .new_notification { background:url("http://nsm08.casimages.com/img/2016/02/20//16022005435820257713988878.png")}
#notifications_panel li:last-child{ background:url("http://nsm08.casimages.com/img/2016/02/05//16020509063920257713950794.png"); }
#notifications_panel li:last-child :hover{ background:url("http://nsm08.casimages.com/img/2016/02/05//16020509063920257713950794.png"); color: deeppink; }
#menubar_section_content,
#menubar_section_appearance,
#menubar_section_interactions,
#menubar_section_manage,
#menubar_section_account,
#menubar_section_help,
#menubar_notifications,
#menubar_signin { background: none;}
#menubar_favorites_btn,
#menubar_nofavorites_btn:hover { background: url("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%; }
#menubar_favorites_btn:hover,
#menubar_nofavorites_btn {
background: url("/images/menubar/icon_favorite.png")no-repeat 50% 50%; }
/*Fenetres*/
.window_title{ font-family: gabriola;
font-size: 22px;
text-shadow: 0 0 5px deeppink, 0 0 5px pink;}
.window_handle_content {background-image:url("http://nsm08.casimages.com/img/2016/02/20//16022005103520257713988873.png");}
.window_handle_left {background-image:url("http://nsm08.casimages.com/img/2016/02/20//16022005103520257713988873.png");}
.window_handle_right {background-image:url("http://nsm08.casimages.com/img/2016/02/20//16022005103520257713988873.png");}
.window_content_wrapper1 {background-image:url("http://nsm08.casimages.com/img/2016/02/20//16022005103520257713988873.png");}
.window_content_wrapper2 {background-image:url("http://nsm08.casimages.com/img/2016/02/20//16022005103520257713988873.png");}
.window_bottom_wrapper1 {background-image:url("http://nsm08.casimages.com/img/2016/02/20//16022005103520257713988873.png");}
.window_bottom_wrapper2 {background-image:url("http://nsm08.casimages.com/img/2016/02/20//16022005103520257713988873.png");}
.window_bottom {background-image: url("http://nsm08.casimages.com/img/2016/02/20//16022005103520257713988873.png");}
.window_content {background-image: url("http://nsm08.casimages.com/img/2016/02/19//16021908133920257713986588.png");}
.window_tabs {background-image: url("http://nsm08.casimages.com/img/2016/02/19//16021908133920257713986588.png");}
.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: 0px 0px 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px}
-
Commentaires
Bonjour j'aimerais te le prendre si tu veux bien ? mes je sais pas comment faire pour le mettre peu tu me le mettre sur mon blog j'attend que tu me repond pour t'envoyer le lien de mon blog je mettrais la permission pour que tu puise le faire si jamais tu veux bien ^^ bisous
voici le lien *^*
de mon blog ^^
http://un-univers-pour-tout-les-gout.eklablog.com/
mes es ce que le menu du haut pourra rester comme je les m'y sur mon blog ou pas :) ?
Vous devez être connecté pour commenter
Salut :3 Je peux le prendre ? Je l'adore >w<
Juste une question : Comment t'as fait pour créer un code CSS du thème ?
Ok, contente si il te plait :)
Comment j'ai fait ?? Tu veux dire pour trouver les codes ? bah ça fait un moment que j'en fait alors les propriétés et les sélecteurs viennent tout seul ^^ Pour t'aider il y a une liste de sélecteurs ici et une des propriété ici. Pour les débutants le blog Fantasy Graph de Nagalia est pas mal.
Ah OK, merci! En fait je voulais dire par là : tu vois, la majorité des thèmes en LS sont justes des images que tu dois mettre sur ton blog...Bah certains thèmes en LS (comme toi par exemple) s'installent juste avec un code que tu dois copier-coller. Je voulais savoir comment tu t'y es prise pour faire ça, car ça m'intéresse x)
Ah oui je vois de quoi tu parles. C'est parce qu'ils se contentent que des "graphismes" la partie images, sans codes ou forme de blog, ce n'est pas vraiment des "thèmes" complet.
Bah personnellement sur un blog en hors ligne je mets tous les paramètres à zéro (marges, bordures, polices etc.) et je refais tout en CSS manuellement, y'a pas vraiment de "trucs", faut juste connaitre les bases (sélecteurs et propriétés). Quand j'ai commencé à faire des thèmes il y a quelques années je mettais beaucoup aider du blog de Nagalia, mais comme c'est toujours la même chose (les propriétés et sélecteurs) on retiens très vite.
Ah merci! Je vais aller voir le blog de Nagalia! Mais est-ce qu'il faut apprendre vraiment tout le CSS?
De rien :) Non, pas besoin ^^ il y a plein de blogs où on peut trouver les listes de sélecteurs et propriétés, quand j'ai un doute je vais voir pour vérifier c'est tout. Après, une fois que tu as fait un thème tu peux te servir du CSS de ce thème pour en faire un autre, tu aura juste des modifs à faire, au moins tu aura les bases d'écrite. Mais tu verra, c'est TOUJOURS la même chose, tu va vite retenir... c'est très simple.
Merci beaucoup >w< Désolée de te saouler mais par quoi on doit commencer ? Genre au tout-tout-tout-tout-tout-tout début....
Tu ne me saoule pas ^^ Hum...si vraiment tu veux un thème fait uniquement en CSS mets tes paramètres à Zéro (marges, bordures, fond etc.).
Faut aussi déjà savoir quelle forme de thème tu veux (combien de menu ? de quel côté ? etc), une fois que tu sais ce que tu veux, tu définis les tailles du menu, du header et ton blog, comme ça tu as déjà une base/un plan de travail. Ensuite tu créais ton header, personnellement je commence par ça, car je fais ensuite mon thème autour de ce header, surtout au niveau des couleurs pour rester dans le même ton.
Par exemple pour le thème de cet article, j'ai d'abord fait le header, comme il était dans des tons pâles et que l'ange est blanc, je suis resté dans ces mêmes couleurs.
Après c'est que de la personnalisation.
En gros les premiers sélecteurs que tu devrais utilisé sont ceux-là:
#body {}
#background {}
#header {}
#menu1 {}
Ah d'accord...Merci! Et entre les {},qu'est-ce qu'on doit mettre ?
C'est les propriétés (taille, police, bordure... etc. bref la personnalisation). pour mettre une bordure au header par exemple.
#header {border: 2px solid black;}
OK, merci encore de ton aide! J'essaierai de créer un thème grâce à ce que tu m'as dis >w<
De rien :) (je suis nulle en explication ^^)
xD Ah oui! J'ai oublié un dernier truc : dans le header du thème, comment t'as fais pour que les bords soient pas tout droits ?