THÈME EN LIBRE SERVICE #13 - EMSIHPARG V.8

@font-face {font-family: "Renzo";
src:url('https://ekladata.com/drmdn2_Za9Tl4XKo-HYEMfFYvPQ/renzo.otf');}

@font-face {font-family: "Roboto";
src:url('https://ekladata.com/oY3L-ZyNIyXC-_IqZOjMKKDPTTs/Roboto-Regular.ttf');}

/*--nom de couleur--*/
:root {
    --pink: #f77294;
    --blue: #1fe1fc;
}

/*---- fond de fenêtre ----*/#body {margin: 0;
color: #666666;
text-decoration: none;
background-color: #050505;
background-image:url("https://ekladata.com/JFkc8fCi0hkbVVxKSZ2reqkSeEk.jpg");
background-attachment: scroll;
background-position: center top;
background-repeat: no-repeat;}

#body a:hover {text-decoration: none;}

/*---- fond de page ----*/
#background {width: 1000px;
overflow: hidden;
background: url("https://ekladata.com/wD4NXCbpREoGIcr1tDaDuCjGRz0.jpg");
background-position: center top;
background-attachment: scroll;
margin: 0px auto;
background-repeat: no-repeat;
background-color: #0f0f0f;}

/*---- header ----*/
#header {height: 280px;
position: relative;
margin-top: 0;
margin-left: 0;
margin-right: 0;
background: url("https://ekladata.com/8UKPUk1BrUfrY_-8P8YGZz11mjU.jpg");
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;}

#titre_header a {display: flex;
    align-items: center;
    justify-content: center;
    font-family: Renzo;
    font-size: 45pt;
    letter-spacing: 10pt;
    color: var(--blue);
    text-shadow: 0 0 3px var(--blue);
width: 1000px;
height: 250px;}

/*---- menu du header ----*/
#menu {z-index: 15;
    list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 247px;
left: 10px;
    font-family: 'Roboto'!important;}

#menu a {display: inline;
    padding: 5px 10px 5px 10px;
    color: var(--pink);
    font-family: 'Roboto';
    letter-spacing: 3.5pt;
        text-shadow: 0px 0px 4px var(--pink);}

#menu a:hover {text-decoration: none;}

#menu ul a, #menu ul a {letter-spacing: -0.5pt;
text-shadow: none;
background:rgba(3,3,3,.80);
line-height: 12pt;
display: inline-block;
width: 150px;
height: 100%;
padding: 5px 10px 5px 10px;}

#menu ul a:hover, #menu ul a:hover {box-shadow: inset 2px 1px 3px black;
background:rgba(48,53,54,.80);
text-shadow: 0px 0px 3px black;
width: 150px;
height: 100%;}

/*---- menu principal ----*/
#menu1 {width: 267px;
margin-top: 20px;
margin-left: 5px;}

#menu1 a {color: var(--pink);}
#menu1 a:hover {color: white;
text-decoration: none;}

#menu1_top {overflow: hidden;
height: 125px;
background-image:url("https://ekladata.com/jeIZB1-VdR7IKtbmjQIV7Jj-bPY.png");}

#menu1_bottom {overflow: hidden;
height: 132px;
background-image:url("https://ekladata.com/Em-GmUV1fn3pGLej-TqHnFutt-4.png");}

#menu1 .module_menu_titre {width: 175px;
    height: 100%;
font-weight: normal;
font-style: normal;
text-decoration: none;
font-variant: small-caps;
margin-right: 0px;
color: var(--blue);
font-family: 'Renzo';
font-size: 13.3pt;
text-align: left;
background: rgba(0,0,0,0.7);
margin-left: 18px;
padding-left: 30px;
padding-right: 25px;
    text-shadow: 0px 0px 7px var(--blue);
letter-spacing: 0.8pt;}

#menu1 .module_menu_contenu  {
    width: 210px;
    margin-bottom: 0px;
margin-left: 18px;
text-align: left;
background: rgba(0,0,0,0.7);
background-repeat: repeat-y;
font-family: 'Roboto';
font-size: 9.7pt;
color: #9e9e9e;
    padding: 5px 10px 25px 10px;}

/*---- derniers visiteurs ----*/
.module_menu_type_lastvisitors .module_menu_contenu {background: none!important;}
.module_menu_type_lastvisitors .module_menu_titre {background: none!important;}

.module_menu_type_lastvisitors {position: absolute;
top: 385px;}

.module_menu_type_lastvisitors img {height: 30px; width: 30px;
  -webkit-transition-duration: 0.3s;
                   -moz-transition-duration: 0.3s;
                   transition-duration: 0.3s;
opacity: 0.2;}

.module_menu_type_lastvisitors img:hover { -webkit-filter: hue-rotate(180deg);
      -moz-filter: hue-rotate(180deg);
      -o-filter: hue-rotate(180deg);
      filter: hue-rotate(180deg);
 -webkit-transition-duration: 0.7s;
                   -moz-transition-duration: 0.7s;
                   transition-duration: 0.7s;
opacity: 1;}

.module_menu_type_lastvisitors a {color: #060606;}


#content {margin: 70px 10px 30px 300px;
width: 700px}

/*---- titre article ----*/
.module_titre_contenu {background: url('https://ekladata.com/Y2x63JY6NPSg4iMFAmbrk76NMPc.png') 100% 100% no-repeat;}

.module_titre_contenu, .module_titre_contenu a {font-weight: normal;
font-size: 24px;
font-family: Renzo;
font-style: normal;
text-decoration: none;
text-transform: uppercase;
color: #f77294;
text-align: right;
padding-right: 10px;}

.module_titre_contenu {height: 30px;}

/*---- info article ----*/
.article_info {color: #585858;
font-family: 'Roboto';
font-size: 9pt;
margin: 0px 0px 15px 0px!important;
padding: 0px;}

.article_info a {text-shadow: 0px 0px 2px black;}

/*---- contenu article ----*/
.module_contenu_block {}
.module_contenu {padding: 5px 12px 10px 12px;
font-family: 'Roboto';
font-size: 10pt;
color: #9e9e9e;
line-height: 130%;
margin: 0px;
text-align: justify;}

.module_contenu a {color: #1fc7de;
font-weight: normal;
font-style: normal;
text-decoration: none;
font-variant: normal;
    text-shadow: 0px 0px 1px var(--blue);}

.module_contenu a:hover {color: #acacac;
    text-shadow: 0px 0px 1px #acacac;}

/*---- recherche ----*/
.module_menu_type_search .module_menu_contenu {background: none!important;}
.module_menu_type_search .module_menu_titre {background: none!important;}

.module_menu_type_search { position: absolute;
    top: 298px;
margin-left: 200px;}

.module_menu_type_search input[type="text"]:nth-child(1) {background: #202425;
width: 190px; height: 25px;
border: none;
box-shadow: inset 1px 1px 4px black;
border-radius: 4px 4px 4px 4px;}

.module_menu_type_search input[type="submit"]:nth-child(3) {
display: none;}
.module_menu_type_search input[type=text] {background: url('https://ekladata.com/MARdyOayMxSPGSb7urGdls_hAO8.png') no-repeat 2% 50%!important;
background-size: 8%!important;}

/*--module de la shoutbox--*/
.menu_shoutbox {height: 350px;
background: rgba(50,50,50,0.8);
box-shadow: inset 1px 2px 7px rgba(0,0,0,0.9);
padding: 7px;
color: #717171;}

.menu_shoutbox hr {width: 0px;
height:0px;
padding:0px;
margin: 11px;}

.module_menu_type_shoutbox input[type="text"], .module_menu_type_shoutbox select, .module_menu_type_shoutbox textarea {
background: rgba(50,50,50,0.8);
box-shadow: inset 1px 2px 7px rgba(0,0,0,0.8);
color: #717171;
border: none;
margin-top: 4px;
height: 20px;
width: 95%;
padding: 5px;
margin-bottom: 5px;}

.module_menu_type_shoutbox [type="submit"] {width: 90%;
background: linear-gradient(var(--pink), #c25054);
color: #ededed;
height: 30px;
border: none;
border-radius: 3px;
font-family: 'roboto';
letter-spacing: 3pt;
    text-transform: uppercase;
    font-weight: bold;
text-shadow: 1px 2px 0px #c25054;}

.module_menu_type_shoutbox [type="submit"]:hover {opacity: 0.9;
box-shadow: inset 1px 2px 3px rgba(0,0,0,0.5);}

.menu_shoutbox strong {color: var(--blue);}

/*---- boutons ----*/
input[type=button],input[type=submit], button {width: 90%;
background: linear-gradient(var(--pink), #c25054);
color: #ededed;
height: 30px;
border: none;
border-radius: 3px;
font-family: 'roboto';
letter-spacing: 3pt;
    text-transform: uppercase;
    font-weight: bold;
text-shadow: 1px 2px 0px #c25054;}
 
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, .button:hover {opacity: 0.9;
box-shadow: inset 1px 2px 3px rgba(0,0,0,0.5);}

/*---- forum ----*/
.tag-ontop {background-color:#f23b5f;
border: 1px solid black;}
.tag-resolved {background-color:#f4f4f4;
border: 1px solid black;
color: #3a3a3a;}

.post_table_head {background: #060606;
text-align: right;
padding-right: 10px;
color: #323232;
font-family: arial;
padding-top: 3px; padding-bottom: 3px;}

.post_table_profile {font-size: 10pt;
    font-weight: bold;
    text-align: center;
    line-height: 220%;
    background: #060606;
    padding-bottom: 13px;
width: 100px;}
.post_table_profile img {border-radius: 15px 35px / 25px 9px;
background-color: #d8d8d8;
box-shadow: 0px 0px 3px #d8d8d8;
border: 3px solid #d8d8d8;
}

.post_table_msg {background: #595959;
box-shadow: inset -3px -4px  0px #060606, inset -1px -1px 10px black;
padding: 5px 9px 7px 9px;
text-align: justify;
color: black;}

/*---- footer ----*/
#footer {text-shadow: 0px 0px 4px black;}
#footer a {color: #424242;
font-weight: normal;
font-style: normal;
text-decoration: none;
font-variant: small-caps;}

#footer {
    text-shadow: 0px 0px 4px black;}

#footer {clear: both;
overflow: hidden;
text-align: center;
height: 25px;
margin-top: 0;
color: #424242;
font-family: 'Roboto';
font-size: 12pt;
font-weight: bold;
font-style: normal;
text-decoration: none;
font-variant: small-caps;}

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

/*---- commentaire article ----*/
.comment_normal, .comment_admin {background: black;
    width: 93%;
margin-left: 5%; margin-right: 5%;
margin-top: 10px; margin-bottom: 15px;
border-radius: 7px 7px 5px 5px;}

.commentdate {color: #333;
font-family: helvetica;}

.commentbody {background: #060606;
margin-left : 3px; margin-right: 3px;
margin-bottom: 0px; margin-top: 5px;
border-radius: 4px;
text-align: justify;
border-bottom: 3px solid black;}

.commentavatar {border: 3px solid #d8d8d8;
padding: 0px;
margin-left: 8px; margin-bottom: 4px;
border-radius: 15px 35px / 25px 9px;
background-color: #d8d8d8;
box-shadow: 0px 0px 3px #d8d8d8;}

.commentavatar img {border-radius: 15px 35px / 25px 9px;}

.comment_admin .commentpseudo a {color: #e93a5b;
text-shadow: 0px 0px 1px #e93a5b;}

.commentnumber {color: white;
font-family: arial;
opacity: 0.3;}

.comment_admin .commentnumber {color: white;
font-family: arial;
opacity: 0.3;}

ul.block-reply {border: none;
margin-top: 40px;}

/*---- MENUBAR ----*/
#menubar_hide{display:none;}
#menubar_logo{position : absolute;
right: -2px;}
#menubar_favorites{background-image: none}
.menubar_separation{display: none;}
.menubar_section{background: none;}
.menubar_section:hover{background: none;}
#menubar{background: black;
    box-shadow: 0px 0px 5px black;
    border-bottom:0px solid #bac84b;
    color:#fc5e87;
    font-size: 8pt;
    font-family: arial;
text-transform: none;}
.menubar_section img{opacity:0.7;
    -o-filter:grayscale(1%);
    -moz-filter:grayscale(1%);
    -webkit-filter:grayscale(1%)}
.menubar_section li {
    margin-bottom:0px;
    border-bottom: 1px dashed #111111;
    font-size: 9pt;
    color: grey;
    font-family: arial;
    background:black; }
.menubar_section li:last-child{
    margin-bottom:2px;
    border: 0px solid #111111;
    font-size: 9pt;
    color: grey;
    font-family: arial;
    background:black;
border-radius: 0px 0px 10px 10px;}
.menubar_section li:hover {color:#17d7f2;;
    transition-duration:0.4s;
      -moz-transition-duration:0.4s;
      -webkit-transition-duration:0.4s;}
.menubar_section li:last-child:hover {
    box-shadow:inset 0px 0px 20px #111111;
transition-duration:0.5s;
      -moz-transition-duration:0.5s;
      -webkit-transition-duration:0.5s;}

#notifications_panel{background: none;}
#notifications_panel a{
    font-weight:normal;
    font-size:10px;
    text-transform:uppercase}
#notifications_panel a,
#notifications_panel div {
    color:#ddd;
    font-size:11px;
    background:#030303;
transition-duration:0.5s;
      -moz-transition-duration:0.5s;
      -webkit-transition-duration:0.5s;}
#notifications_panel a:hover,
#notifications_panel div:hover {
    color:#17d7f2;
    box-shadow:inset 0px 0px 20px black;}
#notifications_panel
.new_notification {color: #fc3367;}

#menubar_section_account img {border-radius: 20px 20px 20px 20px;}
#menubar_section_account a {color: white;}
#menubar{padding-left: 15px;}
​​

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.

2.  Le menu du header et le menu déroulant ont été codé. La shoutbox et les forums aussi.

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