• Thème LS # 1 - Rêves Lunaires

    Préanbule
    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 :
    Images 2
    (Cliquez-pour voir en grand.)

    Zoom sur les commentaires : Images
    (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-imageurl('http://ekladata.com/Y3_U_DQrs57n76xa9z-1z76_oXk.png');
     background-attachmentfixed;}

    /* - - Fond de la page - -*/
    #background {
        background#faf9f9;
        bordernone;
        border-radius0px;
        width1010px;
        margin-top0px;
        box-shadow0px 0px 10px #333333;
        }

    /* -- Header --*/
    #header {
        backgroundurl('https://zupimages.net/up/21/19/umjb.png');
        height227px;
        width1010px;
        margin-top0px;
    }

    /* - - - Menu1 - - - */
    #menu1 {
        margin-left20px;
        margin-right15px;
        bordernone;
        }

    #menu1
    .module_menu_titre {
        background#cd93ee;
        border-radius20px;
        text-align:center;
        color#9e1da9;
        font-familyFrench Script MT;
        font-size33px;
        height40px;
        margin-bottom10px;
        margin-top10px;
        width220px;
        border1px solid #ac4abe;
        box-shadow-1px -1px 2px #ffffff inset;
        bordernone;
        font-stylenone;
    }

    #menu1
    .module_menu_contenu {
        magin10px;
        text-aligncenter;
        width220px;
        }


    /* - - - Contenu - - - */
    .module_titre {
        bordernone;}

    .module_titre_contenu {
        color#a1d9f0;
        font-familyFrench Script MT;
        font-size48px;
        text-aligncenter;
        margin-bottom10px;
        bordernone;
    }

    .article_info {
        displayblock;
        positionabsolute;
        top300px;
        left725px;
        text-aligncenter;
        font-styleitalic;
        color#acd4e5;
        backgroundnone;
        }

    .article_info {
        font-styleitalic;
        color#8789e3;
    }

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

    .module_contenu{
        background-imageurl('http://ekladata.com/z8IqTpuX25qLcIwkKz68SEb9WdI.png');
        color#333;
        margin-left50px;
        margin-right15px;
        margin-top30px;
        border2px dashed #a1d9f0;
        }

    /* - - - COMMENATAIRES - - - */
    /* - - Entête coms' - - */
    .commentheader {
        display:block;
        border-left2px solid #ffffff;
        border-top2px solid #ffffff;
        border-right2px solid #ffffff;
        border-radiusnone;
        background-color#7F9ED3;
        margin-top5px;
        width565px;
        height33px;
        margin-left2px;
        }  

    /* - - Corps coms - - */
    .commentbody {
        display:block;
        border-left2px solid #fff;
        border-bottom2px solid #fff;
        border-right2px solid #fff;
        border-radiusnone;
        background-color#94b0e1;  
        color#fff;
        width565px;
        padding5px;
        margin-left2px;
        }

    .comment_admin {
        border:none;}

    .comment {
        border:none;}

    /* - Avatar des com's -*/
    .commentavatar {
        display:block;
        positionabsolute;
        margin-left575px;
        border-leftnone;
        margin-top-39px;
        }  

    .commentavatar img{   
        max-width55px;
        border-radius0px;
        }

    /* - Pseudo - */
    .commentpseudo {
        display:block;
        font-familyEthBlack;
        font-size15px;
        margin-left0px;
        margin-top2px;
        color#a6d6db;
    }

    .commentpseudo {
        color#3F15B9;
        text-decorationnone;
    }

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

    .comment_admin .commentnumber {
        color#F7DCF3;
        }

    .commentdate {
        margin-right10px;
        margin-top2px;
        color#F7DCF3;}

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

    .block-reply {
        display:block;     
        margin-left0x;
    }  

    .comment-reply {
        font-weightnormal;
        font-size10px;
        text-transformuppercase;
        color#060639}

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

    .block-reply .commentbody{
        border-left2px solid #000;
        border-bottom2px solid #000;
        border-right2px solid #000;
        background-color#C5FCE5;  
        width510px;
        color#333333;
        padding5px;
        }

    .block-reply .commentheader {
        width510px;
        border-left2px solid #000;
        border-top2px solid #000;
        border-right2px solid #000;
        background-color#8fe9c3;  
        }

    .block-reply .pseudo {
        margin-left2px;}  

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

    /* modif liée à l'avatar    img avatar 0x0 + texte ajouté */
    .reply .commentpseudo {colorblack background-colornonemargin-left00px}
    .replies .commentpseudo:before content" ➔ une réponse de "}
    .replies [id*="comment"a[href*="profile"img{height0pxwidth0px;}
    .replies .commentavatar {margin-right150px;}

    /* principe précédent mais code modifié */
    .commentheader {padding-left10px}
    .commentbody a[href*="profile"img {
        top-00px;
        positionrelative;
    }
    .reply .commentbody a[href*="profile"img {
        top0px;
        positionrelative;
    }
    .commentnumber {
        floatleft;
        width45px;
        font-size20px;
    }
    .commentavatar {
        floatleft;
        margin-right20px;     /* à adapter */}

    /* - - - PIED DE PAGE - - - */
    /* - - Texte et liens - - */
    #footer {
        letter-spacing0pt;
        font-familyarial;
        font-size14px;
        background-colornone;
        border-radiusnone;
        margin-top15px;
        color#7DD3E3;
        text-align:center;
    }

    #footer a:hover {
        letter-spacing0pt;
        font-familyarial;
        font-size14px;
        background-colornone;
        border-radiusnone;
        margin-top15px;
        color#B08CEE;
        text-align:center;
    }
     
    /* - - petit crédit - - */
    #footer:after {
        content"    Un thème signé **Aeda";
        color#3EB2C8;
        font-familyarial;
        letter-spacing0pt;
        font-size14px;
    }

    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

    1
    Mercredi 12 Mai à 18:36

    Waaaaa *^*

    C'est très zoli ! Bravo à toi :D

    2
    Mercredi 12 Mai à 18:44

    Très bô je trouve aussi >w<

     

    3
    Mercredi 12 Mai à 20:48

    Merci :3 ^♥^

    4
    Mercredi 12 Mai à 22:25

    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 à 22:30

        Tout à fait oui ! xDD

        Nan mais t'as raison j'ai buguer x)

      • Jeudi 13 Mai à 12:11

        Voilà, code en place ;p

      • Jeudi 13 Mai à 12:13

        Yes perfect ! Trop forte mon crumbloubloup

    5
    Jeudi 13 Mai à 11:24

    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 à 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 ♥

    6
    Mardi 1er Juin à 15:36

    Il est simple mais vraiment cool ! ^^

      • Mardi 1er Juin à 16:17

        Merci beaucoup ^^

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :