Thème en libre service #5 - Tamako Love Story

@font-face {font-family: "Bebas_Neue";
src: url('https://ekladata.com/DQ4_vfzSOgR64n05EBmf7v_kH2U/BebasNeue.otf');}

/*--fond fenêtre--*/
#body {background:url('https://ekladata.com/HoUo8QjAQzTA1DGYPY3koHwKXMA.jpg') fixed repeat-x 50% 0%;}
#body a { text-decoration: none;}

/*--fond page--*/
#background {
width: 1100px;
margin-top: 0px;
border-right: solid 1px #858585;
border-left: solid 1px #858585;
box-shadow: 0px 0px 7px #b4b4b4;
background: url('https://ekladata.com/3TJ8pywRld7WY8UooKNnnvYZMV0.jpg') no-repeat 50% 0% white;}

/*--header--*/
#header {
height: 370px;}

#titre_header {font-size: 0px;}

.bannimg {position: absolute;
top: 190px;
margin-left: -720px;}

#menu {position: relative;
top: 10px;
left: 35px;
display: none;}

#menu a {
display: block;
width: 110px;
height: 30px;
background: linear-gradient( #ffb381, #f19151);
margin-right: 10px;
border-radius: 6px;
text-align: center;
font-family: "Bebas_Neue";
color: white;
font-size: 15pt;
letter-spacing: 2pt;
line-height: 160%;
text-shadow: 1px 1px 2px #e28141;
border: solid 1px #e28141;
opacity: 0.9;}

#menu a:hover {
background: linear-gradient( #99e55b, #7bca26);
text-shadow: 1px 1px 2px #74cb2d;
border: solid 1px #74cb2d;
opacity: 1;}

/*--menu1--*/
#menu1 {
margin-right: 32px;
width: 320px;
color: #9e9e9e;
background: rgba(255,255,255,.60);
border: 1px solid #99e55b;
padding-top: 20px;}

#menu1 a {color: #ea8d4f;
font-weight: bold;}
#menu1 a:hover {color: #ffba8c;}

#menu1 .module_menu_titre {height: 45px;
font-size: 25pt;
background-color: #99e55b;
color: white;
text-align: right;
padding-right: 15px;
font-family: Bebas_Neue;
line-height: 160%;
text-shadow: 1px 1px 2px #74cb2d;}

#menu1 .module_menu_contenu {padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 10px;
color: #767c91;}

/*--module dernier visiteurs--*/
.module_menu_type_lastvisitors img {width:45px;
height: 45px;
margin-bottom: 15px;
border-radius: 8px 3px / 4px 7px;
box-shadow: 0px 0px 4px #bababa;
opacity: 0.9;
margin-right: 5px;
margin-left: 7px;}

.module_menu_type_lastvisitors img:hover{opacity: 0.2;}

/*--derniers articles--*/

.module_menu_type_lastarticles {position: absolute;
top: -75px;
margin-left: 105px;
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
transform: rotate(-15deg);
width: 200px;
height: 230px;}

.module_menu_type_lastarticles a {text-shadow: 1px 1px 0px white, -1px -1px 0px white, -1px 1px 0px white, 1px -1px 0px white;
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
filter: grayscale(1);}

.module_menu_type_lastarticles a:hover {color: #99e55b;}

/*--shootbox--*/
.menu_shoutbox {background-color: #fbfbfb;
border: solid 1px #c7c7c7;
padding: 5px 5px 5px 5px;
margin-bottom: 10px;}

.menu_shoutbox hr {width: 90%;
border-bottom: dashed 1px #d5d5d5;}

/*--article--*/
#content {width: 670px;
margin-left: 32px;
background: rgba(255,255,255,.60);
border: solid 1px #f8a167;
padding-top: 20px;}

.module_titre_contenu, .module_titre_contenu a {
height: 45px;
width: 645px;
font-weight: lighter;
font-family: "Bebas_Neue";
color: white;
font-size: 28pt;
text-decoration: none;
text-align: left;
text-shadow: 1px 1px 2px #e28141;}

.module_titre_contenu {
padding-left: 25px;
line-height: 125%;
padding-top: 5px;
background-color: #f8a167;}

.article_info { display: none;
}

.module_contenu {
padding-top: 15px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
font-family:arial;
font-size: 11pt;
color: #767c91;
letter-spacing: 0.1pt;
border-radius: 0px 0px 3px 3px;
}

.module_contenu a {
color: #94d250;
font-weight: bold;
}

.module_contenu a:hover {
color: #b0f663;
}

.module_bottom {
height: 20px;

}

/*--footer--*/
#footer {
height: 25px;
font-size: 14px;
color: grey;
float: right;
padding-top: 45px;
margin-right: 30px;}

#footer a {
color: grey;
}

#footer a:hover {
opacity: 0.7;
}

#footer:after {content: "- Design original by Elinae - © 2015";}

/*--commentaire--*/
.comment_normal, .comment_admin {
width: 100%;
}

div.commentheader{
background-color: #f9f9f9;
margin-top: 10px;
border-right: solid 5px #ebebeb;
border-left: solid 1px #ebebeb;
border-top: solid 1px #ebebeb;
border-bottom: dashed 1px #dcdcdc;}

div.commentbody {
padding-top: 10px;
padding-right: 2px; padding-left: 7px;
padding-bottom: 10px;
background-color: #f9f9f9;
text-align: justify;
margin-bottom: 25px;
border-right: solid 5px #ebebeb;
border-left: solid 1px #ebebeb;
border-bottom: solid 5px #ebebeb;}

.comment_admin .commentnumber {
color: #9a9a9a;
font-family: impact;
font-weight: lighter;
font-size: 25px;
float: right;}

.commentnumber {
float: right;
color: #9a9a9a;
font-family: impact;
font-size: 25px;
font-variant: normal;
text-align: center;
padding-right: 10px;
width: 45px;
padding-left: 10px;}

.commentpseudo a {
font-style: normal;
text-decoration: none;
font-variant: normal;
}

.commentpseudo {
line-height: 140%;
padding-top: 5px;
font-family: "Bebas_Neue";
font-weight: lighter;
font-size: 18px;
float: right;
letter-spacing: 3pt;}

.comment_admin .commentpseudo {
font-style: normal;
text-decoration: none;
font-variant: normal;
}

.commentdate {float: left;
font-size: 9pt;
padding-top: 5px;
padding-left: 5px;
font-family: Arial, Helvetica, sans-serif;
color: grey;
opacity: 0.8;
line-height: 200%;
}

.commentavatar {float: right;}

.commentavatar img {
width: 90%;
border-radius: 8px 3px / 4px 7px;
box-shadow: 0px 0px 3px #9a9a9a;}

/*--bouton--*/
input[type=button],input[type=submit], button {
background-color: #f8a167;
padding: 5px 14px 5px 14px;
border: solid 1px #e48748;
color: white;
font-family: "Bebas_Neue";
letter-spacing: 1pt;
font-size: 14pt;}

/*--module recherche--*/
.module_menu_type_search, input[type=button],input[type=submit], button {text-align: center;}

#background input[type=text], #background select, #background textarea {
width: 88%;
height: 25px;
margin-bottom: 5px;}

/*--helpbubble--*/
#help_bubble {background: #f9f9f9;
border: solid 1px #9d9d9d;
border-radius: 3px;
color: #4c4c4c;}​

  1. Mettre à zéro toutes les valeurs de votre blog et décocher tout ce que vous pouvez sauf > ça <.

  2. Choisir un seul menu à droite.

  3. Ne pas mettre de slogan à votre blog.

  4. Copier, coller et appliquer les codes CSS du thème proposé.

1. le titre du blog est une image, pour qu'il y ai le titre de votre blog, demandez-le moi en commentaire ci-dessous.

2. Une fois que vous aurez l'image correspondant au titre de votre blog, placez ce code dans le code source HTML d'un module simple :

<div class="bannimg"><img src="LIENDEVOTREIMAGE"/></div>

Puis enregistrez.

3. A propos du module "derniers articles" : choisissez 10 articles affichés et faites-le avant d'installer le thème (une fois le thème installé vous ne pourrez plus modifier le module).

4. Je vous déconseille de mettre des liens dans le menu du header car ça surcharge vraiment le thème, mais vous pouvez en mettre. Evitez seulement de mettre plus de 4 liens. /!\ Je n'ai pas codé le menu du header pour être un menu déroulant !

5. Parfois une scrollbar horizontale s'ajoute toute seule sans qu'il y ai besoin d'en avoir une : je n'ai pas su régler ce problème là.