-
Thème 5 - Evelynn (LoL)
De base, c'était un thème pour un de mes RPG, mais l'ambiance ne collant pas tellement au contexte je ne l'ai pas utilisé! Mais vu le temps que j'ai passé dessus, ç'aurait été bête de le laisser prendre la poussière alors le voici en libre-service!
Le blog test se trouve ici, si vous voulez voir l'intégralité du thème (les commentaires, les forums, le reste de la page...).
Merci de me prévenir si vous l'utilisez. ♥
(+) Pour changer le titre, demandez moi et donnez moi le votre, je le ferais aussi vite que possible!
(+) Il faut que toutes les valeurs soit à zéro et décochées, sauf format du blog > page > automatique centré et contenu > forums - messages > marges extérieures d'un blog message
(+) Vous pouvez changer les couleurs si elles ne vous plaisent pas. Si vous avez besoin d'aide, n'hésitez pas! (je peux modifier une image pour vous, si vous voulez qu'elle s'accorde à peu près avec le thème)
(+) Les "XXXXXXXX" module_menu_contenuXXXXXXXX sont à remplacer par le "numéro" de votre module. Voici un tuto qui pourrait vous aider ici! Et si jamais, je suis joignable pour toute question.
(+) Le blog a deux menus, le deuxième menu est à largeur 0px et c'est dedans qu'on mettre les modules personnalisé qu'on mettra sur le haut du blog
(+) Si vous avez le moindre soucis, n'hésitez pas à m'envoyer un message ou à poster un commentaire!
CODE CSS:
/*----------------ENTÊTE DECLARATIVE----------------*/
@font-face {font-family: "novab";
src: url('http://ekladata.com/QRv_HTuPAUTxaFyUohFWpThI1aY/Proxima-Nova-Bold.otf');}
@font-face {font-family: "roboto";
src: url('http://ekladata.com/VcFzXkCFCJ4uo7A-mAn7kzw7Xbc/Roboto-BoldCondensed.ttf');}
@font-face {font-family: "robotoBI";
src: url('http://ekladata.com/Z5B6_aSg_DAeSfa--kAjF4QNQTs/Roboto-BlackItalic.ttf');}
/*----------------BODY & FENÊTRE----------------*/
#body {
background:url('http://ekladata.com/w_DpN64vYAuJxEXbFyEu1l9u86w/bande-menu.png') repeat-x 50% 0%,
url('http://ekladata.com/7Bi8_ewvtm3JvVZb3O4tRpswAC8/fond-page.png') repeat-y 50% 0%,
url() repeat left bottom;
background-color: #0C0C0C;
font-family: calibri;
font-size: 13px;
border-bottom: 0px solid black;
}
#body a {
font-weight: bold;
text-decoration: none;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}
body a:hover {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}
.module_contenu img {text-align: center;
margin 0px;
}
/*----------------FOND PAGE----------------*/
#background {
width: 1000px;
/*border-left: 5px solid #050505;
border-right: 5px solid #050505;*/
}
/*----------------HEADER----------------*/
#header {
height: 500px;
margin-top:61px;
background:url('http://ekladata.com/rvuxM9lbK9_7g30S7udrMEXdm4g/header-test-evelynn-gifFINAL.gif');
border-top: 5px solid #350B1B;
}
.img_header{
position: absolute;
top: 0px;
margin-left: -195px;
}
#menu a{
text-transform: uppercase;
color: #aaa;
border-right: 1px solid #222;
letter-spacing: 3px;
width: 260px;
height: 35px;
margin-top: -65px;
margin-right: 5px;
padding-top: 20px;
padding-bottom: 5px;
text-align: center;
font-family: "roboto";
font-size: 20px;
}
#menu li a:after{
margin-left: 40px;
color: #444;
content: " V";
font-size: 19px;
padding-right: 3px;
}
#menu ul li a:after{
content: " ";
font-size: 13px;
padding-right: 3px;
}
#menu a:hover{
padding-bottom: 5px;
opacity: 0.8;
}
#menu li {
min-height: 20px;
width: 267px;
border-right: 0px;
}
#menu ul {
border-top: 5px solid #230712;
background: #111;
color: #555;
margin-left: -6px;
width: 267px;
}
#menu ul a {
padding: 5px;
font-size: 13px;
text-align: left;
color: #555;
border-right: 0px solid #fff;
border-bottom: 1px solid #222;
letter-spacing: 1px;
font-size: 12px;
}
#menu ul a:hover {
background-color: #222;
color: #aaa;
padding-left: 15px;
}
/********MENU HEADER*********/
.video_menu {
padding: 50px;
background:url('http://ekladata.com/RaM-RTL1GOxvPEdueCGfh67ahcY/fond-video.png') center no-repeat;
}
.actu_menu{
width: 400px;
padding: 30px;
margin-left:15px;
background:url('http://ekladata.com/0xoUfpqsmCc5X2u75G4BIj9oUwg/fond-contexte.png') left center no-repeat;
}
/*----------------MENU----------------*/
/****MENU 1*****/
#menu1 {
text-align: justify;
width: 224px;
color: #969696;
}
#menu1 .module_menu_titre {
padding: 20px;
height: 20px;
font-family: 'roboto';
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
font-size: 15px;
background-color: #090909;
border-bottom: 5px solid #240813;
}
#menu1 .module_menu_contenu {
background-color: #0C0C0C;
margin-bottom: 50px;
padding: 15px;
}
.liens a{
display: block;
background: #080808;
color: #888;
padding: 5px;
margin-top: 6px;
border-radius: 3px;
text-align: center;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
}
.liens a:hover{
background: #2B1420;
}
/******DERNIERS TOPICS*******/
.module_menu_type_lasttopics a {
color: #553E44;
font-size: 11px;
text-transform: uppercase;
}
.module_menu_type_lasttopics li{
background-color: #090909;
padding: 5px;
border-radius: 3px;
margin-bottom: 3px;
}
.module_menu_type_lasttopics a:hover {
color: #2B4E5A;
}
/***DERNIERS VISITEURS***/
.module_menu_type_lastvisitors {
margin-top: 50px;
font-size: 0px;
margin-bottom: 50px;
}
.module_menu_type_lastvisitors .module_menu_contenu {
padding: 12px;
}
.module_menu_titre_type_lastvisitors {
width: 200px;
}
.module_menu_type_lastvisitors img {
max-width: 60px;
margin-bottom: 5px;
margin-right: 1.5px;
border-radius: 50px;
padding: 2px;
border: 1px solid #86214A;
margin: 10px;
}
/*----------------ARTICLES----------------*/
.module_titre {
background-color: #0E0E0E;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.module_titre_contenu{
height: 100%;
font-family: "roboto";
text-transform: uppercase;
padding-top: 25px;
padding-bottom: 50px;
text-align: left;
font-size: 18px;
letter-spacing: 2px;
background:url('http://ekladata.com/5hVXSBSVOxrpt4tc56DkzmnEgDk/titre-article.png') left bottom no-repeat;
color: #B4B2B1;
padding-left: 30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.module_titre_contenu a{
min-height: 50px;
color: #B4B2B1;
padding-left: 10px;
padding-bottom: 10px;
letter-spacing: 2px;
word-spacing: 3px;
text-transform: uppercase;
}
.module_titre_contenu a:hover{
color: #B4B2B1;
opacity:0.5;
}
.article_info {
font-size: 0px;
color: #DCDCDC;
opacity: 0.5;
text-align: right;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 30px;
}
.module_contenu {
background-color: #0E0E0E;
color: #C1C1C1;
text-align: justify;
font-family: calibri;
font-size: 12px;
padding: 20px;
border-bottom-right-radius:5px;
border-bottom-left-radius: 5px;
margin-bottom: 50px;
}
.module_contenu a {
color: #2B4E5A;
text-transform: uppercase;
font-size: 11px;
}
.module_contenu a:hover {
color: #422F35;
}
.article_info a{
font-size: 0px;
}
.module_bottom {}
/*----------------PIED DE PAGE----------------*/
#footer {
height: 400px;
color: #333;
text-align: right;
padding-right: 20px;
text-transform: uppercase;
font-size: 11px;
font-family: calibri;
letter-spacing: 1px;
}
#footer a {
color: #333;
}
#footer a:hover {
color: #2B4E5A;
}
#footer:after {content: " Thème de Fabule";}
/*----------------COMMENTAIRE----------------*/
.comment_normal, .comment_admin {
width: 100%;
}
div.commentheader{
background-color: #141414;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-bottom: 8px;
margin-top: 28px;
font-family: arial;
padding: 5px;
position: relative;
}
.comment_admin .commentheader{
background-color: #0D0E12;
}
div.commentbody {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background-color: #191919;
padding: 10px;
color: #999999;
margin-top: -10px;
}
.comment_admin .commentbody {
background-color: #141414;
color: #555555;
padding: 10px;
}
.block-reply {
border-left: 3px solid #202020;
}
.comment-reply a{
color: #344A53;
font-weight: bold;
font-family: calibri;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
}
.comment-reply a:hover{
color: #888;
}
.commentnumber {
font-family: "novab";
color: #344A53;
font-size: 15px;
padding-left: 5px;
opacity: 0.6;
}
.commentpseudo {
font-family: calibri;
color: #444;
margin-top: 3px;
font-size: 13px;
letter-spacing: 1px;
text-transform: lowercase;
}
.commentpseudo a {color: #555; font-weight: 600;}
.commentpseudo a:hover {color: white; opacity: 0.5;}
.commentavatar {
margin-right: 10px;
margin-top: -35px;
position: relative;
padding: 5px;
}
.commentavatar img {
border: 3px solid #141414;
border-radius: 100px;
}
.block-reply li .commentavatar {
margin-right: 5px;
margin-top: -5px;
position: relative;
padding: 5px;}
.commentdate {
font-size: 0px;
opacity: 0.5;
color: white;
}
/*----------------BOUTONS----------------*/
input[type=button],input[type=submit], button {
margin: 9px;
margin-left: 0px;
min-width: 10px;
min-height: 20px;
background-color: #191919;
font-weight: bold;
color: #999999;
font-family: calibri;
border: 3px solid #191919;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 2px;
border-radius: 5px;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, .button:hover {
opacity: 0.7;
}
/*----------------HELPBUBBLES----------------*/
#help_bubble {
background-color: #111;
color: #999;
border: 1px solid #222;
border-radius: 5px;
opacity: 0.7;
}
/*----------------FORUMS----------------*/
.post_table_msg {
background-color: #151515;
padding: 10px;
border-bottom: 0px solid #222222;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.post_table_head {
color: #3A3A3A;
font-size: 0px;
}
.post_table_profile img{
border: 2px solid #272727;
margin-left: 10px;
margin-top: -7px;
margin-bottom: 10px;
padding: 0px;
border-radius: 50px;
}
.post_table_profile a{
color: #555;
font-family: calibri;
text-transform: uppercase;
display: block;
width: 79px;
background-color: #151515;
margin-top: 15px;
margin-left: 10px;
text-align: center;
border-radius: 3px;
margin-top: 15px;
margin-left: 10px;
text-align: center;
}
.post_table_profile a:hover{
color: #555;
opacity: 0.8;
}
.post_table_profile {
background:url('http://ekladata.com/7Bi8_ewvtm3JvVZb3O4tRpswAC8/fond-page.png') left center repeat-y;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
opacity: 0.7;
border-bottom: 0px solid #000;
}
.forum-description {
background-color: #191919;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
border: 4px double #111111;
}
/*****champs*****/
input[type="text"] {
width: 90%;
height: 25px;
color: #888;
border: 1px solid #151515;
background: #090909;
border-radius: 5px;
}
.form_cavom{
color: #888;
border: 1px solid #151515;
background: #090909;
border-radius: 5px;
}
/******BALISES*******/
.scroll {
background-image: url('http://ekladata.com/g0EY1MKL8ufxXM7w_CSCIUIdJqg/super-fond-hihi.png');
color: #9D9D9D;
border: 3px solid #242B27;
border-radius: 3px;
padding: 10px;
margin-bottom: 5px;
height: 150px;
overflow-y: auto;
text-align: justify;
box-shadow: -1px 2px 10px 3px #0B0B0B inset;
}
.cadre {
background-image: url('http://ekladata.com/g0EY1MKL8ufxXM7w_CSCIUIdJqg/super-fond-hihi.png');
color: #9D9D9D;
border: 3px solid #0C0C0C;
border-radius: 3px;
padding: 10px;
margin: 5px;
margin-bottom: 5px;
overflow-y: none;
text-align: justify;
font-family: calibri;
box-shadow: -1px 2px 10px 3px #0B0B0B inset;
}
MENU DU HAUT - CSS:
#module_menu_contenuXXXXXXXX {
position: absolute;
top: 0px;
margin-left: -918px;
font-family: "roboto";
font-size: 20px;
text-transform: uppercase;
color: #aaa;
border-right: 1px solid #222;
letter-spacing: 3px;
height: 36px;
padding-left: 15px;
padding-top: 18px;
padding-bottom: 5px;
padding-right: 50px;
}MENU DU HAUT - HTML:
<p></p>
<table>
<tbody>
<tr>
<td>
<div class="img_header"><img src="http://ekladata.com/-Dnf-3nVhYBFB08hY_M9yCoBKTA.png" alt="header" /></div>
</td>
<td>explorer</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"> </p>
<p> </p>MENU SOUS LE HEADER - CSS:
#module_menuXXXXXXXX {
position: absolute;
top: 470px;
margin-left: -1125px;
width: 1000px;
color: #D1D1D1;
}
#module_menu_titreXXXXXXXX {
height: 0px;
font-size: 0px;
background-color: none;
}
#module_menu_contenuXXXXXXXX {
background:url('http://ekladata.com/gBV5Ev8kOR9WimxTBMqlF3zBg5U/bande-header.png') center no-repeat;
height: 293px;
width: 1250px;
}MENU SOUS LE HEADE - HTML:
<p><br /><br /></p>
<table>
<tbody>
<tr>
<td><img src="http://ekladata.com/N5u51FgE5TELPk9qPNgZsY8Vu-A.png" alt="" /></td>
<td>
<div class="video_menu">
<p style="text-align: right;"> </p>
<p style="text-align: right;"><iframe style="border-radius: 10px; border: 3px solid #0B0B0B;" src="//www.youtube.com/embed/i7Juyu5GZV0" width="180" height="102"></iframe></p>
<p style="text-align: right; margin-top: -17px; margin-right: -30px; font-family: 'roboto'; letter-spacing: 4px; font-size: 17px;">TRAILER</p>
</div>
</td>
<td>
<div class="actu_menu">
<div style="margin-right: auto; max-height: 110px; width: 318px; overflow-y: scroll; padding-top: 5px; padding-right: 10px;">
<p>Le drame approche, les tambour de guerre aussi. Ce n'est pas les ravages de la pierre, du moins pas encore, mais les peuples oubliés qui commencent à sortir de l'ombre. Tous ces gens rejetées des royaumes ou qui ont décidé de les quitter se réveillent. Les abandonnés comme les mauvais, les ennemis de toujours se relèvent.<br />Les royaumes cherchent activement des gens pour rejoindre les rangs de leurs armés, guerriers, mages, sorciers et encore bien d'autres... La menace arrive, et à grands pas.</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<p> </p>CODE HTML POUR LES LIENS MENU
<div class="liens">
<p><a href="#">lien 1</a></p>
<p><a href="#">lien 2</a></p>
<p><a href="#">lien 3</a></p>
</div>
-
Comments
Il est magnifique !
En plus quand c'est Evelynn c'est encore plus beau 3.3
Je suis fan des codes css, des couleurs et du header !
Evelynn est ma main, comment ne pas l'aimer xD
Un tel passif mérite d'être connu e.e
4Crilista décoFriday 28th August 2020 at 11:40
Add comment
Wow, très beau thème, bravo ! :)
Merci beaucoup! :3
derien ! :)