Thème 5 - Evelynn (LoL) - “ Prélude à l'Illumination ”

Thème 5 - Evelynn (LoL)

Written by Fabule in thèmes (l-b) on 7 May 2020 à 15:08

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>

<br />
Comments
1

Hoebe

Thursday 7th May 2020 at 15:21
Wow, très beau thème, bravo ! :)
Répondre

Voir les réponses

Fabule

Thursday 7th May 2020 at 15:26

Merci beaucoup! :3

Hoebe

Thursday 7th May 2020 at 15:37

derien ! :)
2

ИΞMΞSIS

Thursday 7th May 2020 at 18:20
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 !
Répondre

Voir les réponses

Fabule

Thursday 7th May 2020 at 19:27

Merci beaucoup! ♥

Evelynn est vraiment classe comme personnage T-T je suis super fan de son chara-design et du perso en lui-même!
3

ИΞMΞSIS

Thursday 7th May 2020 at 21:04
Evelynn est ma main, comment ne pas l'aimer xD

Un tel passif mérite d'être connu e.e
Répondre

Voir les réponses

Fabule

Friday 8th May 2020 at 11:21

oh purée xD gg!! elle est pas évidente à jouer, et en plus en jungle haha! uwu je voulais apprendre à la jouer mais jsuis tellement une brêle de base dans tous les autres rôles que bon, ce fut un échec xD

Très pratique comme passif d'ailleurs uwu
4

Crilista déco

Friday 28th August 2020 at 11:40
Je te le vole ;3
Répondre

Voir les réponses

Fabule

Saturday 29th August 2020 at 13:00

d'acc! :3
5

noisette grillée

Saturday 19th December 2020 at 20:59
Merci pour ce thème ! j'aimerai l'utiliser, si possible puis-je changer de couleur l'image du menu et du titre des articles ? merci !
Répondre

Voir les réponses

Fabule

Saturday 19th December 2020 at 21:16

De rien! :D Oui, c'est possible de changer les couleurs!
6

Cяilista

Thursday 25th March 2021 at 16:08
je te le pique :)
Répondre
Suivre le flux RSS des commentaires

Add comment

Name / User name:

E-mail (optional):

Website (optional):

Comment:

Contact me in case of response

Thème 5 - Evelynn (LoL)

Comments