Thème en libre service #10 - Paisible

@font-face {font-family: "Master";

src: url('https://ekladata.com/UKntiAf8XrBrQ19P8hVHaR201Bg/master_of_break.otf');}

@font-face {font-family: "SF";
src: url('https://ekladata.com/tjayi-v3IbuMqxhkUJTKWbAAqQQ/SF-New-Republic.ttf');}

@font-face {font-family: "round";
src: url('https://ekladata.com/3CTUswhiEj245cn85IhQtNDqWyE/Rounded_Elegance.ttf');}

/*--fond fenêtre--*/
#body {word-wrap: break-word;
background: #f5f5f5:}
#body a {text-decoration: none;}

/*--fond page--*/
#background {margin-top: 70px;
width: 1120px;
background: white;
box-shadow: 0px 0px 15px rgba(0,0,0,0.5);}

/*--header--*/
#header {height: 235px;
background: url('https://ekladata.com/MmWe8-M5-DqroV0C5nVeq9ZEZ-E.jpg') 50% 0% no-repeat, #424953;}
#titre_header {text-align: left;
position: relative;
top: 20px;
left: 50px;
color: black;
font-size: 45pt;
font-family: Master;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);}

#titre_header a {color: white;
text-shadow: -1px -3px 0px #19d9c8;}

#titre_header a:hover {text-decoration: none;}
#header-link {display: inline-block;}

/*--menu header--*/
#menu {width: 1120px;
top: 190px;
left: 0px;
height: 45px;
font-family: 'SF';
font-size: 18pt;
line-height: 220%;}

#menu a {display: inline-block;
width: 100%;
padding: 0px 10px 0px 10px;
color: #f7f7f7;
text-shadow: 1px 1px 0px black;}

#menu li {height:45px;}

#menu li:hover {background: #ffa68a;}

#menu ul {background: #ffa68a;
position: absolute;
margin-top: -7px;
width: 180px;}

#menu ul li {height: 25px;}

#menu ul a {width: 170px;
padding: 3px 5px 3px 5px;
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
transition-timing-function: ease-out;}

#menu ul a, #menu ul a:hover {font-size: 12pt;
display: inline-block;
line-height: 100%;
position: absolute;
margin-top: 0px;
width: 165px;}

#menu ul a:hover {padding-left: 25px;
width: 150px;
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
transition-timing-function: ease-out;}

/*--menu1--*/
#menu1 {width: 300px;
background: #e3e3e1;
padding: 40px 17px 40px 17px;
font-family: round;}
#menu1 a {color: #c095b0;}
#menu1 a:hover {color: white;}
#menu1 .module_menu_titre {height: 100%;
background: #d1d1d1;
padding: 15px;
font-family: SF;
font-size: 14pt;
text-align: center;
color: #44474a;}
#menu1 .module_menu_contenu {padding: 15px 0px 30px 0px;}

/*--recherche--*/
.module_menu_type_search .module_menu_titre {display: none!important;}
.module_menu_type_search .module_menu_contenu {background: none!important;
border-bottom: none!important;}
.module_menu_type_search [type="submit"] {display: none;}
.module_menu_type_search input[type="text"] {height: 30px;
width: 89%;
padding-left: 30px!important;
color: #333!important;
border-radius: 5px;
box-shadow: none;
border: none;
background: white;
background-image: url('https://ekladata.com/6EDQP4lbqPa5Ex3AiysuQq_TLXI.png')!important;}

/*--module dernier visiteurs--*/
.module_menu_type_lastvisitors img {width: 60px;
height: 60px;
border-radius: 60px;
margin: 5px;}
/*--article--*/
#content {width: 690px;
margin: 40px;
font-family: round;}
/*-titre d'article-*/
.module_titre_contenu, .module_titre_contenu a {color: #ffa68a}
.module_titre_contenu:hover, .module_titre_contenu a:hover {}
.module_titre_contenu {font-family: SF;
font-size: 25pt;
height: 100%;}
/*-article info-*/
.article_info {background: #fafafa;
text-align: right;
padding: 5px 15px 5px 5px;
font-size: 8pt;
margin: 5px 0px 10px 0px;}
.article_info a {color: #171016!important;}

.article_info a:hover {color: #ffbfac!important;}
/*-contenu article-*/
.module_contenu {color: #171016;
font-size: 10pt;}
.article_text {}
.module_contenu a {color: #83bbe0;}
.module_contenu a:hover {color: #badaba;}
.module_bottom {}

/*--commentaire--*/
.comment_normal, .comment_admin {width: 100%;
background: #ddf4f6;
margin: 25px 0px 25px 0px;
border-radius: 10px;}

div.commentheader {height: 30px;
border-bottom: dashed 1px #424953;
line-height: 230%;
font-family: SF;
text-transform: uppercase;}
div.commentbody {padding: 10px;}
.commentbody p {}

/*-numéro de commentaire-*/
.commentnumber {font-family: SF;
padding: 0px 5px 0px 15px;}
.commentnumber:hover {}

/*-comment pseudo-*/
.commentpseudo {font-size: 16px;
color: white;
font-weight: normal!important;
text-shadow: 1px 1px 0px #2f5074;}
.commentpseudo img {display: none;}
.commentpseudo a {color: #b8dbb9;
font-weight: normal!important;
text-shadow: 1px 1px 0px #2f5074;}
/*-comment date-*/
.commentdate {font-size: 7pt;
letter-spacing: 1px;}
/*-avatar de commentaire-*/
.commentavatar {margin-right: -10px;}
.commentavatar img {border: 2px solid #424953;
border-radius: 80px 15px / 40px 70px;
width: 40px;
height: 40px;}

/*--bouton--*/
input[type=button],input[type=submit], button {background: #ffa68a;
color: white;
text-shadow: 1px 1px 0px #da7f62;
text-transform: uppercase;
font-size: 13pt;
padding: 5px 10px 5px 10px;
border: 3px solid #ffa68a;
border-radius: 5px;
font-weight: bold;}
input[type=button]:hover,input[type=submit]:hover, button:hover {color: #ffa68a;
background: white;
text-shadow: none;}

/*--forums--*/
.post_table {width: 100%;
background: #fafafa;
margin: 5px 0px 35px 0px;
border: 2px solid #424953;}

.post_table_head {background: #424953;
height: 35px;
text-align: right;
color: #dfdfdf;
line-height: 250%;
padding: 0px 10px 0px 0px;}

.post_table_profile {width: 15%;
background: #424953;}
.post_table_profile a {color: white;
position: absolute;
margin-top: -30px;
text-transform: uppercase;
font-size: 14pt;
margin-left: 15px;}
.post_table_profile img {width: 70px;
height: 70px;
border-radius: 100px;
margin: -15px 0px 20px 10px;}

.post_table_msg {padding: 10px;}
.forum_table {margin-top: 20px;}
.forum_table th, .topic_table th{background: #f2c7df;
font-size: 15px;
font-weight: bold;
padding: 5px 0 5px 10px;
color: white;
text-shadow: 1px 1px 0px #af8da5;}
.forum_table tr:nth-child(even), .topic_table tr:nth-child(even){background: #fbfbfb;}
.forum_table tr:nth-child(odd), .topic_table tr:nth-child(odd){background: #efefef;}
.forum_table td, .topic_table td {padding: 5px 8px 5px 8px;}

.forum-description {background: grey;
color: white;
padding: 10px;
margin: 10px 0px 10px 0px;
border-radius: 5px;}

/*--footer--*/
#footer {height: 80px;
background: #424953;
color: white;
text-align: center;
font-family: arial;
font-size: 11pt;}
#footer a {color: white;}
#footer:after {content: "Header by natjkriss - Design original by Elinae - ©2016";
color: white;}

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. Faites attention au nombre de lien dans le menu du header..

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

1.   Si votre titre de blog est entièrement en lettre capitale, ça ne rendra pas bien.

2. J'ai très peu codé le menu de droite, il est simplissime : si vous voulez le personnalisé : allez-y.

3. Il vaut mieux choisir 8 derniers visiteurs pour le module "derniers visiteurs".

4. Vous pouvez utiliser un menu déroulant pour votre menu du header.