Thème LS # 1 - Rêves Lunaires

06.05.2021

Bonjour :D
Cela fait longtemps déjà que j'aurais dû poster cet article, depuis le temps que j'ai fait et annoncé le thème dans la liste. Mais bon, mieux vaut tard que jamais.

Voici donc aujourd'hui le tout premier thème en libre service que je propose sur GraphA ! ^^

Je sais avoir encore du chemin à faire niveau originalité, codage et graphisme. Celui-ci est vraiment simple par exemple, mais de sa simplicité nait sa beauté. Selon moi.

Rêve Lunaires

Vision générale du thème :

(Cliquez-pour voir en grand.)

Zoom sur les commentaires :

(Cliquez-pour voir en grand.)

Points à marquer sur ce thème :

χ Les forums, la barre de défilement, les boutons et les widgets spéciaux (recherche, chatbox ext..) ne sont pas codés.

√ Je peux changer le header : titre, ombres et ajouter un slogan au besoin.

√ A le demande, je peux ajouter des codage HTML pour les menus ou bien CSS pour les forums.

Comme je l'ai dit, c'est un thème en toute simplicité mais il fait de l'effet et je l'avais fait justement parce que je voulait quelque chose de joli et épuré. Mais finalement, il ne collais pas avec le "thème" du blog, donc j'ai changé.

/* - - - FONDS DU BLOG - - -*/
/* - - Fond principal - -*/
#body {
  background-image: url('https://ekladata.com/Y3_U_DQrs57n76xa9z-1z76_oXk.png');
background-attachment: fixed;}

/* - - Fond de la page - -*/
#background {
  background: #faf9f9;
  border: none;
  border-radius: 0px;
  width: 1010px;
  margin-top: 0px;
  box-shadow: 0px 0px 10px #333333;
  }

/* -- Header --*/
#header {
  background: url('https://zupimages.net/up/21/19/umjb.png');
  height: 227px;
  width: 1010px;
  margin-top: 0px;
}

/* - - - Menu1 - - - */
#menu1 {
  margin-left: 20px;
  margin-right: 15px;
  border: none;
  }

#menu1
.module_menu_titre {
  background: #cd93ee;
  border-radius: 20px;
  text-align:center;
  color: #9e1da9;
  font-family: French Script MT;
  font-size: 33px;
  height: 40px;
  margin-bottom: 10px;
  margin-top: 10px;
  width: 220px;
  border: 1px solid #ac4abe;
  box-shadow: -1px -1px 2px #ffffff inset;
  border: none;
  font-style: none;
}

#menu1
.module_menu_contenu {
  magin: 10px;
  text-align: center;
  width: 220px;
  }

/* - - - Contenu - - - */
.module_titre {
  border: none;}

.module_titre_contenu {
  color: #a1d9f0;
  font-family: French Script MT;
  font-size: 48px;
  text-align: center;
  margin-bottom: 10px;
  border: none;
}

.article_info {
  display: block;
  position: absolute;
  top: 300px;
  left: 725px;
  text-align: center;
  font-style: italic;
  color: #acd4e5;
  background: none;
  }

.article_info a {
  font-style: italic;
  color: #8789e3;
}

.article_info a:hover {
  font-style: none;
  color: #a68ece;}

.module_contenu{
  background-image: url('https://ekladata.com/z8IqTpuX25qLcIwkKz68SEb9WdI.png');
  color: #333;
  margin-left: 50px;
  margin-right: 15px;
  margin-top: 30px;
  border: 2px dashed #a1d9f0;
  }

/* - - - COMMENATAIRES - - - */
/* - - Entête coms' - - */
.commentheader {
  display:block;
  border-left: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  border-radius: none;
  background-color: #7F9ED3;
  margin-top: 5px;
  width: 565px;
  height: 33px;
  margin-left: 2px;
  }

/* - - Corps coms - - */
.commentbody {
  display:block;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  border-radius: none;
  background-color: #94b0e1;
  color: #fff;
  width: 565px;
  padding: 5px;
  margin-left: 2px;
  }

.comment_admin {
  border:none;}

.comment {
  border:none;}

/* - Avatar des com's -*/
.commentavatar {
  display:block;
  position: absolute;
  margin-left: 575px;
  border-left: none;
  margin-top: -39px;
  }

.commentavatar a img{
  max-width: 55px;
  border-radius: 0px;
  }

/* - Pseudo - */
.commentpseudo {
  display:block;
  font-family: EthBlack;
  font-size: 15px;
  margin-left: 0px;
  margin-top: 2px;
  color: #a6d6db;
}

.commentpseudo a {
  color: #3F15B9;
  text-decoration: none;
}

/* - Numéro et date - */
.commentnumber {
  color: #F7DCF3;
  margin-right: -10px;
  }

.comment_admin .commentnumber {
  color: #F7DCF3;
  }

.commentdate {
  margin-right: 10px;
  margin-top: 2px;
  color: #F7DCF3;}

/* - - Réponses aux coms - - */
.show-replies {color: #ffffff;}

.block-reply {
  display:block;
  margin-left: 0x;
}

.comment-reply a {
  font-weight: normal;
  font-size: 10px;
  text-transform: uppercase;
  color: #060639}

.comment-reply a:hover {
  font-weight: normal;
  color: #c2c5f2}

.block-reply .commentbody{
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
  background-color: #C5FCE5;
  width: 510px;
  color: #333333;
  padding: 5px;
  }

.block-reply .commentheader {
  width: 510px;
  border-left: 2px solid #000;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  background-color: #8fe9c3;
  }

.block-reply .pseudo {
  margin-left: 2px;}

.block-reply .commentavatar a img {display:none;}

/* modif liée à l'avatar   img avatar 0x0 + texte ajouté */
.reply .commentpseudo {color: black ; background-color: none; margin-left: 00px}
.replies .commentpseudo:before { content: " ➔ une réponse de "}
.replies [id*="comment"] a[href*="profile"] img{height: 0px; width: 0px;}
.replies .commentavatar {margin-right: 150px;}

/* principe précédent mais code modifié */
.commentheader {padding-left: 10px}
.commentbody a[href*="profile"] img {
  top: -00px;
  position: relative;
}
.reply .commentbody a[href*="profile"] img {
  top: 0px;
  position: relative;
}
.commentnumber {
  float: left;
  width: 45px;
  font-size: 20px;
}
.commentavatar {
  float: left;
  margin-right: 20px; /* à adapter */}

/* - - - PIED DE PAGE - - - */
/* - - Texte et liens - - */
#footer a {
  letter-spacing: 0pt;
  font-family: arial;
  font-size: 14px;
  background-color: none;
  border-radius: none;
  margin-top: 15px;
  color: #7DD3E3;
  text-align:center;
}

#footer a:hover {
  letter-spacing: 0pt;
  font-family: arial;
  font-size: 14px;
  background-color: none;
  border-radius: none;
  margin-top: 15px;
  color: #B08CEE;
  text-align:center;
}

/* - - petit crédit - - */
#footer:after {
  content: "   Un thème signé **Aeda";
  color: #3EB2C8;
  font-family: arial;
  letter-spacing: 0pt;
  font-size: 14px;
}

Donc voilà, le code CSS est fait, testé et approuvé sur mon blog test. Ainsi, voici les quelques réglages qu'il y aura à faire avant de mettre le thème sur votre blog :

* Rendre le titre et le slogan invisible (sauf si vous le prenez sans me demander de vous faire le header avant, dans ce cas vous pouvez laisser).
* Décocher toutes cases dans "titres modules" de #menu1
* Dans Pied de page, décocher tout SAUF l'alignement et le style des liens.

Voilà, ce sont les seules choses que je n'ai pas réussi à dicter en CSS, j'ai encore quelques progrès à faire. ^^'
Si vous avez des questions n'hésitez pas. Voilà si vous le voulez, demandez en commentaires, avec les réglages adéquates vous pourrez les mettre rapidement sur votre blog ;p.

Voilà, j'espère que ce premier thème vous plaît, même si vous ne le prenez pas. N'hésitez pas à me donner votre avis ou des conseils.
Bonne journée, Aeda ♥