-
Thème LS # 1 - Rêves Lunaires
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 LunairesVision 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('http://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('http://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 ♥
-
Commentaires
Tu dit voici le code CSS, mais je le voit pas perso ^^' Je sait pas si c'est moi, mon ordi ekla ou un oublie de ta part >w<
Bisouw
-
Mercredi 12 Mai 2021 à 22:30
Tout à fait oui ! xDD
Nan mais t'as raison j'ai buguer x)
-
Jeudi 13 Mai 2021 à 12:11
Voilà, code en place ;p
-
Jeudi 13 Mai 2021 à 12:13
Yes perfect ! Trop forte mon crumbloubloup
-
Mais whaaat! J'adore. Comme tu dis il est simple mais il est magnifique. Je te l'aurai pris si le personnage était une fille (puisque j'en suis une). La créativité c'est ton truc!
Vraiment NICE!
-
Jeudi 13 Mai 2021 à 11:46
Ah oui en effet, si jamais un jour je vois une fille dans les mêmes couleurs je pourrait proposer la possibilité de mettre deux renders différents. Oui j'adore ça ^^
Merci beaucoup ♥
-
Suivre le flux RSS des commentaires
Ajouter un commentaire
~~ La beauté est dans l’œil de celui qui la voit ~~
Créer mon blog
Waaaaa *^*
C'est très zoli ! Bravo à toi :D