Thème en libre service #14 - Steampunk/EMSIHPARG V.14

@font-face {font-family: "Tech";
src: url('https://ekladata.com/qR2WTZxg0DqfEUN5GELl4hugSd0/technott.ttf');}
 
@font-face {font-family: "Mathilde";
src: url('https://ekladata.com/klgAchlmwlokSxsTV-_5RethQN4/mathilde.ttf');}
 
@font-face {font-family: "Quick";
src: url('https://ekladata.com/zUTeK2m3I5AtgfKlNhO36Urdoew/Quicksand-Regular.otf');}
 
::-moz-selection { color: white;  background: #a0cb63; }
::selection      { color: white;  background: #a0cb63; }
 
    
/*--fond fenêtre--*/
#body {word-wrap: break-word;
background: url('https://ekladata.com/8hO1Bl1CNyhVtLMKuK7WUpTNrAg.jpg') 50% 0% fixed;}
#body a {text-decoration: none;}
 
/*--fond page--*/
#background {width: 1060px;
background: url('https://ekladata.com/sTHt8SS88z7QaZ553O3d--HdhmA.png') 50% 0% repeat-y;}
 
/*--header--*/
#header {height: 500px;
background: url('https://ekladata.com/-zcd25RZjgagAEQkdKDwFflUQdk.png') 50% 0% no-repeat;}
 
#titre_header {}
 
#titre_header a {display: flex;
    align-items: flex-end;
    justify-content: center;
    font-weight: normal;
    margin-left: 35px;
    font-family: Tech;
    letter-spacing: 20pt;
width: 1000px;
height: 445px;
  
    --gold: 173, 144, 74;
    color: #f6d66f;
   text-shadow:
        0 1px 0 #c2b95c,
        0 2px 0 #a7873c,
        0 3px 0 #836e39,
        0 4px 0 #5f5531,
        0 5px 0 #4b4427,
        0 6px 1px rgba(var(--gold),.1),
        0 0 5px rgba(var(--gold),.1),
        0 1px 3px rgba(var(--gold),.3),
        0 3px 5px rgba(var(--gold),.3),
        0 5px 10px rgba(var(--gold),.25),
        0 10px 10px rgba(var(--gold),.2),
        0 20px 20px rgba(var(--gold),.15);
    font-size: calc(45vw / 10)    
}
 
#titre_header a:hover {color: #f5e8bc;
    text-decoration: none;}
 
#header-link {}
 
/*--menu header--*/
#menu {display: flex;
    position: absolute;
    margin-left: 10px;
    top: 445px;
width: 990px;
    height: 46px;
    align-items: center;
color: #cad3a4;
text-shadow: 2px 2px 0px #191917;}
 
#menu a {
    color: #cad3a4;
text-shadow: 2px 2px 0px #191917;
display: inline-block;
width: 100%;
    height: 100%;
font-family: 'Tech';
font-size: 15pt;
    text-align: center;
    margin-left: 25px;
line-height: 130%;}
 
#menu a:hover {background: #414435;
    color: #a0a780;
    text-shadow: 2px 2px 0px #1e1d19;
border-radius: 15px;
    box-shadow: inset 2px 2px 0px #1e1d19;}
 
/*--menu1--*/
 
#menu1 {width: 0px;}
#menu1 a {}
#menu1 a:hover {color: rgba(255,255,255,0.7);}
 
#menu1 .module_menu_titre {
font-family: 'Mathilde';
height: 100%;
margin-bottom: -25px;
color: #27200e;}
 
#menu1 .module_menu_contenu {font-family: 'Quick';}
 
/*--recherche--*/
.module_menu_type_search [type="submit"] {display: none;}
 
.module_menu_type_search input[type="text"] {
    height: 27px;
    border: none!important;
    border-radius: 5px;
 padding-left: 34px!important;
    margin: 0px;
    color: white!important;
background-image: url('https://ekladata.com/6jFBWyEHhaV0PjMfYv2n8SzhoXY.png')!important;
background: rgba(0,0,0,0.3);
width: 0;
                   -webkit-transition-duration: 0.7s;
                   -moz-transition-duration: 0.7s;
                   transition-duration: 0.7s}
 
.module_menu_type_search input[type="text"]:hover {color: white;
    width: 275px;
                   -webkit-transition-duration: 0.6s;
                   -moz-transition-duration: 0.6s;
                   transition-duration: 0.6s}
 
.module_menu_type_search input[type=text], .module_menu_type_search select, .module_menu_type_search textarea {
}
 
 
#background input[type=text], #background select, #background textarea {
}
 
.module_menu_type_search {position: absolute;
top: 80px;
margin-left: 100px;}
 
/*--module dernier visiteurs--*/
.module_menu_type_lastvisitors {}
 
.module_menu_type_lastvisitors img {}
 
.module_menu_type_lastvisitors img:hover{}
 
/*-dernier article-*/
.module_menu_type_lastarticles .module_menu_titre {
    font-size: 35pt;}
.module_menu_type_lastarticles {position: absolute;
bottom: 0px;
margin-left: 700px;
width: 310px;}
 
.module_menu_type_lastarticles .module_menu_contenu {
    margin-top: 8px;
    height: 200px;}
 
.module_menu_type_lastarticles {}
 
.module_menu_type_lastarticles a {color: #4b835e;}
.module_menu_type_lastarticles a:hover {}
 
.module_menu_type_html a {}
.module_menu_type_html a:hover {}
 
.module_menu_type_stats {position: absolute;
margin-left: 950px;
top: 525px;}
.module_menu_type_stats a {}
.module_menu_type_stats a:hover {}
 
/*- dernier commentaire -*/
.module_menu_type_lastcomments .module_menu_titre {
    font-size: 35pt;}
 
.module_menu_type_lastcomments .module_menu_content {
margin-top: 20px;
    max-height: 100px!important;
overflow: auto;}
 
.module_menu_type_lastcomments {
    position: absolute;
bottom: 0px;
margin-left: 375px;
width: 310px;}
 
.module_menu_type_lastcomments {}
 
.module_menu_type_lastcomments a {color: #4b835e;}
.module_menu_type_lastcomments a:hover {}
 
/*- dernier sujet -*/
.module_menu_type_lasttopics .module_menu_titre {
    font-size: 35pt;}


.module_menu_type_lasttopics {position: absolute;
bottom: 0px;
margin-left: 55px;
width: 310px;}
 
.module_menu_type_lasttopics a {color: #4b835e;}
 
.module_menu_type_lasttopics .module_menu_contenu {
height: 200px;
    margin-top: 8px;
overflow: hidden;}
 
.module_menu_type_lasttopics {}
 
/*--module dernier visiteurs--*/
.module_menu_type_lastvisitors {position: absolute;
bottom: 240px;
margin-left: 190px;}
 
.module_menu_type_lastvisitors .module_menu_titre {
font-size: 56pt;
margin-left: 590px;}
 
.module_menu_type_lastvisitors img {width: 80px;
height: 80px;
border-radius: 100px;
      -webkit-filter: sepia(1);
      -moz-filter: sepia(1);
      -o-filter: sepia(1);
      filter: sepia(1);
border: 1px solid #90783e;
box-shadow: 0px 0px 7px #2a261e;
margin: 8px;
    -webkit-transition-duration: 0.7s;
                   -moz-transition-duration: 0.7s;
                   transition-duration: 0.7s}
 
.module_menu_type_lastvisitors img:hover{
      -webkit-filter: sepia(0);
      -moz-filter: sepia(0);
      -o-filter: sepia(0);
      filter: sepia(0);
                   -webkit-transition-duration: 0.7s;
                   -moz-transition-duration: 0.7s;
                   transition-duration: 0.7s}
 
 
/*--article--*/
#content {width: 980px;
margin-left: 40px;}
 
.module_titre_contenu, .module_titre_contenu a {font-family: 'Mathilde';
font-size: 44pt;
letter-spacing: 0.5pt;
height: 100%;
color: #535339;
text-shadow: 1px 1px 0px #f5ebd3;
line-height: 50%;
margin-top: 30px;
margin-bottom: 10px;
font-weight: bold;}
.module_titre_contenu:hover, .module_titre_contenu a:hover {}
.module_titre_contenu {padding-left: 80px;}
 
.article_info {display: none;}
.article_info a {}
.article_info a:hover {}
 
.module_contenu {font-family: 'Quick';
font-size: 10.3pt;
width: 905px;
margin-left: 38px;}
 
.article_text {}
.module_contenu a {color: #dd2e27;}
.module_contenu a:hover {color: #96ba3d;}
.module_bottom {}
 
 
/*--commentaire--*/
.comment_normal, .comment_admin {width: 850px;
margin-left: auto; margin-right: auto;
margin-top: 35px;}
 
div.commentheader {}
 
div.commentbody {}
 
.commentbody p {width: 780px;
font-size: 10pt;}
 
.commentnumber {position: absolute;
    margin-left: 780px;
    margin-top: 12px;
    z-index: 7;
    width: 70px;
    height: 55px;
    border-radius: 5px 22px / 30px 9px;
-ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
    transform: rotate(5deg);
background: rgba(0,0,0,0.4);
color: white;
font-size: 20pt;
    text-align: center;
padding-top: 15px;
                   -webkit-transition-duration: 0.7s;
                   -moz-transition-duration: 0.7s;
                   transition-duration: 0.7s}
 
.commentnumber:hover {
        background: rgba(0,0,0,0);
                   -webkit-transition-duration: 0.7s;
                   -moz-transition-duration: 0.7s;
                   transition-duration: 0.7s}
 
.commentpseudo {font-family: 'tech';
font-size: 14pt;
color: #564e42;
-ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
    transform: rotate(-5deg);
position: absolute;
margin-left: -15px;
margin-top: -15px;}
 
.commentpseudo img {display: none;}
.comment_admin .commentpseudo a {color: #564e42;}
.comment_normal .commentpseudo a {color: #564e42;}
.commentpseudo a {}
.commentpseudo a:hover {color: #4b9e58;}
 
.commentdate {font-size: 7pt;
text-align: left;
position: relative;
left: -680px;
top: 5px;}
 
.commentavatar {}
 
.commentavatar img {width: 70px;
    height: 70px;
    border-radius: 5px 22px / 30px 9px;
-ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
    transform: rotate(5deg);}
.commentavatar img:hover {}
 
.comment-reply a {background: #c8504d;
text-transform: uppercase;
font-weight: bold;
font-size: 10pt;
letter-spacing: 1pt;
padding: 2px 7px 1px 7px!important;
border: 1px solid #694844;
text-shadow: 1px 1px 0px #694844;
color: #f4eec5;}
 
.comment-reply a:hover {background: #a24340;
color: #f4eec5;}
 
.block-reply {border: none;}
 
.block-reply li {width: 700px;
margin-left: 20px;
height: 100%;}
 
.block-reply li .commentbody p {width: 100%;}
.block-reply li .commentheader{}
 
.block-reply li .commentpseudo {}
.block-reply li .commentpseudo a {}
.block-reply li .commentdate {
position: relative;
left: -530px;}
 
.block-reply li .comment_normal, .block-reply li  .comment_admin {
    height: 100%;
}
 
.block-reply li .commentbody {}
 
.block-reply li .commentavatar {position:absolute;
    z-index: 8;
margin-left: -65px;
margin-top: -25px;}
 
.block-reply li .commentavatar img {width: 40px;
height: 40px;
opacity: 0.8;}
 
/*--bouton--*/
input[type=button],input[type=submit], button {background: #c8504d;
text-transform: uppercase;
font-weight: bold;
font-size: 12pt;
letter-spacing: 1pt;
padding: 2px 7px 1px 7px!important;
border: 1px solid #694844;
text-shadow: 1px 1px 0px #694844;
color: #f4eec5;}
 
input[type=button]:hover,input[type=submit]:hover, button:hover {background: #a24340;}
#background input[type=text], #background select, #background textarea {padding: 4px 0px 4px 0px;
margin-bottom: 4px;}
 
/*--helpbubble--*/
#help_bubble {}
 
 
/*--recherche--*/
.module_menu_type_search [type="submit"] {}
 
 
 
/*--forums--*/
.post_table {background: #585c47;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
min-height: 100px;
padding-bottom: 15px;}
 
.post_table_head {height: 40px;
font-family: Mathilde;
font-size: 15pt;
text-align: right;
color: #e2e8ab;
padding-right: 10px;
padding-top: 7px;}
 
.post_table_profile a {position: absolute;
margin-top: -40px;
    margin-left: 10px;
font-family: "tech";
font-size: 15pt;
color: #e2e8ab;}
 
.post_table_profile a:hover {}
 
.post_table_profile {}
 
.post_table_profile img {width: 40px;
height: 40px;
border-radius: 70px;
position: absolute;
margin-top: -25px;
margin-left: 25px;}
 
.post_table_msg {padding: 10px;
color: #e2e8ab;}
 
.tag-ontop {}
 
.chemin_forum a {}
.forum_table th, .topic_table th{color: #544e42;
    text-transform: uppercase;
    font-weight: normal;
background: #696f51;
color: white;
font-family: 'tech';
font-size: 13pt;
padding: 5px 0px 2px 10px;}
 
.forum_table tr:nth-child(even), .topic_table tr:nth-child(even){background:rgba(0,0,0,0.07);
padding: 5px;}
 
.forum_table tr:nth-child(odd), .topic_table tr:nth-child(odd){
    background: rgba(0,0,0,0.02);
padding: 5px}
 
.forum_table table td { color : #f0f0f0 ;
    padding : 5px ; }
 
.forum_table td, .topic_table td {}
 
.forum_table td a, .topic_table td a {color: #497860;}
 
.forum_table td a:hover, .topic_table td a:hover {color: white;}
 
.forum-description {margin: 20px 0px 20px 0px;}
 
.ok_topic {}
 
.tag-resolved {background: #4d805e;
border: 1px solid #3c6349;
color: #f2e9ba;
text-transform: uppercase;
letter-spacing: 0.5pt;
text-shadow: 1px 1px 0px #3c6349;
padding: 3px 5px 3px 5px;}
 
.tag-ontop {background: #a65750;
border: 1px solid #77504b;
color: #f2e9ba;
text-transform: uppercase;
letter-spacing: 0.5pt;
text-shadow: 1px 1px 0px #77504b;
padding: 3px 5px 3px 5px;}
 
.module_contenu_block {}
 
/*--footer--*/
#footer {font-size: 0pt;
    height: 360px;
border-top: 2px solid #b99e64;
margin-left: 100px;
margin-right: 100px;
margin-top: 30px;}
 
 
#footer a {font-size: 0pt;}
 
#footer a:hover {}
 
#footer:after {content: "Design original by Elinae D.P. - © 2015 - 2021";
font-size: 10pt;
color: rgba(0,0,0,0.4);
margin-left: 525px;}
 
/*--pagination--*/
.pagination {}
 
.pagination span {}
 
.pagination a {}
 
.pagination a:hover {}
.pagination img {}
 
 
.module_menu_type_html {position: absolute;
bottom: 10px;
margin-left: 55px;
    font-family: 'Quick';
color: #27200e;}
 
.module_menu_type_html a {color: #27200e;}
 
.module_menu_type_html .module_menu_titre {
font-size: 56pt;
margin-left: 35px;}
 
.nav {}
 
/*--menubar--*/
#menubar {background: #8eb137;
color: #f4ecc9;
font-family: luz, helvetica, arial, sans-serif;}
 
#menubar_section_account a {color: #f4ecc9;}
#menubar_section_account img {
border-radius: 40px 30px / 20px 50px ;}
 
#menubar_hide {display: none;}
 
#menubar_logo {background: none;}
 
#menubar_signin {background: none;}
 
.menubar_section {background: none;}
 
.menubar_separation {display: none;}
 
.menubar_button {background: none;}
 
.menubar_section:hover {background: #8eb137;}
 
.menubar_section ul {background: #8eb137;
border-radius: 0px 0px 5px 5px;}
 
.menubar_section li {background: #8eb137;
color: #f4ecc9;}
.menubar_section li:hover {background: #8c9072;
color: #f4ecc9;}
 
.menubar_section li:last-child {background: #8eb137;
color: #f4ecc9;
border-radius: 0px 0px 5px 5px;}
 
.menubar_section li:last-child:hover {background:#8c9072;
color: #f4ecc9;}
 
.menubar_button:hover {background: #8eb137;}
 
#notifications_panel {background:none;}
 
#notifications_panel ul {background: #8eb137;
border-radius: 0px 0px 5px 5px;}
 
.notif msg {}
#notifications_panel span {color: #ffedcc;}
#notifications_panel span strong {color: #c74d4c;}
#notifications_panel .notif_date {color: #7d8272;}
 
#notifications_panel li {background: #8eb137;}
 
#notifications_panel li:hover {background: #8c9072;}
 
#notifications_panel li:hover span {color: #e0dbbf;}
#notifications_panel li:hover span strong {color:#c74d4c;}
#notifications_panel li:hover .notif_date {color: #9f9f9f;}
 
 #notifications_panel .new_notification span {color: #f4ecc9;}
.new_notification span {color: #f4ecc9;}
.new_notification:hover span {color: #f4ecc9;}
#notifications_panel li .new_notification span {color: #f4ecc9;}
#notifications_panel li:hover .new_notification span{color: #f4ecc9;}
 
/*--menubar-fin--*/
​
​​

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

2. Choisir un seul menu à gauche.

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

4. Utilisez le menu de l'en-tête.

1. Il faut utiliser le menu de l'en-tête. Le menu déroulant n'a pas été codé !

2.  Ne pas choisir plus de 6 derniers articles, derniers sujets de forum et 6 derniers commentaires.

3.  Choisir d'afficher 10 derniers visiteurs dans le module derniers visiteurs.

4.  Seuls les modules derniers visiteurs, derniers sujets des forums, derniers commentaire et rechercher ont été codé.