-
Thème en libre service #14 - Steampunk/EMSIHPARG V.14
EMSIHPARG V.14 (octobre 2015 à février 2016)
Les Codes
@font-face {font-family: "Tech";
src: url('http://ekladata.com/qR2WTZxg0DqfEUN5GELl4hugSd0/technott.ttf');}
@font-face {font-family: "Mathilde";
src: url('http://ekladata.com/klgAchlmwlokSxsTV-_5RethQN4/mathilde.ttf');}
@font-face {font-family: "Quick";
src: url('http://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('http://ekladata.com/8hO1Bl1CNyhVtLMKuK7WUpTNrAg.jpg') 50% 0% fixed;}
#body a {text-decoration: none;}
/*--fond page--*/
#background {width: 1060px;
background: url('http://ekladata.com/sTHt8SS88z7QaZ553O3d--HdhmA.png') 50% 0% repeat-y;}
/*--header--*/
#header {height: 500px;
background: url('http://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('http://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--*/
Pour installer le thème
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.
Ce que vous devez faire et savoir en plus de copier le code
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é.
En cas de bug dans l'affichage du thème, vérifiez que toutes les valeurs du thème sont à zéro. Si le problème ne vient pas de là, n'hésitez pas à me prévenir et j'essaierai de voir où ça coince.
J'ai décidé de mettre en libre service mes anciens thèmes. Je ne les utilise plus mais je les aime toujours alors autant qu'ils servent à d'autres personne ! Enjoy.
Il s'agit du design #45 réalisé en octobre 2015
25 septembre 2021. Le codage du thème a été mis à jour et adapté pour être mis en LS. Il est adapté aux grands écrans (au moins de 1000px de large) - Idée du thème en Mai 2015
-
Commentaires
C'est trop beau, est-ce que tu as un article sur "COMMENT FAIRE UN THEME MAGNIFIQUE"?
-
Jeudi 28 Octobre 2021 à 15:52
Haha je n'ai pas d'article de ce genre ^^ : pour ça il vaut mieux aller sur des blogs de codage comme celui de Nagalia (fantasy graph).
Je met uniquement à disposition des thèmes (et pour ceux qui savent coder, ils ont le droit de les modifier tant qu'ils laissent le "design original by Elinae" dans le footer
-
Vous devez être connecté pour commenter
Je crois que j'ai découvert ton blog lorsque tu avais ce thème.
Je te l'ai déjà dit, mais j'adore le header et la police du titre des articles ;)
Haha merci ^^
Pour ce design là j'ai du mettre à jour les polices utilisées pour que ça s'adapte à du libre service ^^ sinon ça convenait pas. A l'origine les titres d'articles avaient une police beaucoup moins lisible (ça faisait un peu effet "signature" si on veut mais pas fou pour des titres quoi). Pareil pour la police du header, comme je l'avais fait sur photoshop pas moyen de retrouver le nom de la police donc j'ai du improviser.