• [Thème Complet] - Rose / gris / blanc - Am I pretty?

    Rendu:

    Cliquez sur les images pour les avoir en plus grand. Ouvrez-les dans un nouvel onglet pour la taille réelle.
    De gauche à droite: article + commentaires / article dans une rubrique / liste des sujets d'un forum / message d'un sujet de forum.

    Ci-dessous: effets au survol.

    Captures hébergées sur HostingPics.

    Si vous vous servez, merci de me prévenir par commentaires et de me créditer de façon visible sur votre blog.

    Le thème est fait à partir d'un header mis en LS sur le blog. Clic là pour arriver sur sa page.
    J'ai mis un moment à le faire parce que j'avais pas envie d'oublier des choses '^' du coup, plus on avance dans le temps, plus il y a de trucs codés dans ce que je mets en LS... '^' *prenez les derniers pas les premiers o/*

    Inclus dans le code CSS:

    • Base (header, footer, titre, fonds, commentaires, boutons & champs)
    • Menu de gauche
    • Shoutbox
    • Calendrier
    • Forums
    • Derniers visiteurs
    • Tag cloud
    • Menubarre
    • Bulle d'aide au survol
    • Bloc citations
    • Effets au survol de certains éléments

    Code:

    /*FENETRE*/
    #body {background: #333;}
    a {color: #945;}
    a:hover {color: #723;
    font-weight: bold; text-decoration: none;}

    /*PAGE*/
    #background {width: 1000px; border-left: 2px #fff solid;
    border-right: 2px #fff solid; box-shadow: 0px 0px 15px white;
    text-align: justify; background-color: #EEE;
    border-top: 2px solid #FFF; margin: auto;
    margin-top: -2px; margin-bottom: 0px; margin-left: auto;
    font-family: Trebuchet MS; color: #111;
    border-radius: 0px 100px 0px 100px;}

    /*HEADER*/
    #header {background: url('http://ekladata.com/jbgHf-iIkoSEnnAa-kSCswH11ko.jpg') no-repeat;
    height: 326px; border-bottom: 3px solid #FFF; border-top: 2px solid #FFF;
    width: 800px; margin-left: 200px;
    border-radius: 0px 100px 0px 0px;}
    #titre_header {text-shadow: 0px 0px 7px #000000;
    font-family: Tahoma;
    font-size: 64px; top: 20px; right: 310px;}
    #titre_header a {color: #FFF;}
    #titre_header a:hover {text-decoration: none;
    color: #000; font-weight: normal; transition: 1s;}
    #slogan_header {display: none;}

    /*MENU GAUCHE + CONTENU*/
    #menu1 {width: 198px;
    border-right: 2px solid #FFF;
    margin-top: -341px; border-bottom: 2px solid #FFF;}
    #content {width: 800px; margin-top: -10px;
    margin-left: 200px;}
    .module_menu_contenu_block {margin-left: 10px;
    margin-right: 10px; width: 178px;}
    .module_contenu_block {padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 10px; width: 780px;}

    /*TITRES*/
    #menu1 .module_menu_titre {background: url('http://ekladata.com/jbgHf-iIkoSEnnAa-kSCswH11ko.jpg');
    font-family: Times New Roman; font-size: 19px; border-radius: 0px 0px 15px 0px;
    color: #FFF; text-shadow: 0px 0px 5px #000; font-style: italic;
    border-top: 2px solid #FFF; border-bottom: 2px solid #FFF;
    margin-top: 10px; height: 30px; text-align: center;
    background-position: 580px 80px; line-height: 140%;
    margin-bottom: 10px; width: 198px;}
    .module_titre_contenu {background: url('http://ekladata.com/jbgHf-iIkoSEnnAa-kSCswH11ko.jpg');
    font-family: Times New Roman; font-size: 19px; border-radius: 0px 0px 15px 0px;
    color: #FFF; text-shadow: 0px 0px 5px #000; font-style: italic;
    border-top: 2px solid #FFF; border-bottom: 2px solid #FFF;
    font-weight: normal;
    margin-top: 10px; height: 30px; text-align: center;
    background-position: 0px 470px; line-height: 140%;
    margin-bottom: 10px;}
    .module_titre_contenu a {color: #FFF}


    /*COMMENTAIRES*/
    .comment_normal, .comment_admin {margin-left: -10px;}
    .commentheader {width: 800px; background: #DDD; border-bottom: 2px solid #BBB;
    margin-top: 10px; margin-bottom: 10px; height: 30px;
    border-radius: 15px 0px 0px 0px;}
    .commentpseudo, .commentpseudo a {font-style: italic;
    color: #FBD; font-family: Times New Roman; font-size: 20px;
    font-weight: normal; margin-left: 10px; line-height: 170%;
    text-shadow: 0px 0px 3px #999, 0px 0px 3px #999,0px 0px 3px #999,
    0px 0px 3px #999,0px 0px 3px #999,0px 0px 3px #999;}
    .commentpseudo a:hover {color: #333;}
    .commentnumber {font-family: Courier New; color: #FFF;
    border-radius: 15px 0px 0px 0px;
    margin-top: -0px; width: 30px; font-size: 15px; height: 30px;
    text-align: center; margin-right: 5px; font-weight: bold; line-height: 210%;
    background: #BBB;}
    .commentavatar {float: left;
    margin-left: -5px; margin-top: -12px; padding-right: 10px;}
    .commentbody {width: 790px;}
    .commentavatar {margin-top: 0px;
    background: #BBB; height: 74px; width: 74px;
    border-radius: 0px 60px 60px 0px;
    padding: 0px 0px 0px 10px; margin-top: -8px;}
    .commentavatar img {border: 2px solid #BBB;
    border-radius: 60px;}
    .commentdate {font-size: 10px; opacity: 0.4;
    color: #000; margin-top: 14px; height: 15px;
    background: url('http://ekladata.com/PIxbgz5QfHy4ANohjmhBMXo_zGo.png') no-repeat;
    background-position: 30px;}
    .block-reply {margin-left: 5px; border-radius: 15px 0px 0px 0px;
    border-left: 2px solid #BBB; padding-left: 8px;}
    .block-reply .commentheader {margin-bottom: 2px;}
    .block-reply .commentavatar {margin-top: 0px;}

    /*REPONSE COMMENTAIRES*/
    .comment-reply {text-align: center; margin-top: 5px;
    font-family: Times New Roman; border: 2px solid #BBB; background: #DDD;
    height: 80px; width: 80px; border-radius: 80px;
    margin-left: 360px; font-size: 18px; line-height: 450%;
    text-shadow: 0px 0px 3px #999, 0px 0px 3px #999,
    0px 0px 3px #999,0px 0px 3px #999,0px 0px 3px #999,0px 0px 3px #999;
    transform: rotate(-30deg); transition: 1s;}
    .comment-reply a {color: #FBD;}
    .comment-reply:hover {transform: rotate(0deg);
    transition: 1s;}

    /*LIEN COMMENTAIRE*/
    .article_comments_link {background: #FFF; padding: 5px;
    border-radius: 0px 15px 15px 0px;
    margin-left: -10px;}

    /*PIED DE PAGE*/
    #footer {height: 20px; line-height: 150%;
    background: url('http://ekladata.com/jbgHf-iIkoSEnnAa-kSCswH11ko@1000x500.jpg');
    font-family: Times New Roman;
    border-top: 2px solid #FFF; text-align: center;}
    #footer a{color: #100;}

    /*BOUTONS ET CHAMPS*/
    #background input[type=submit], button {margin-top: 3px;
    border: 2px solid #BBB; background-color: #DDD;
    color: #000; width: 162px;}
    #background input[type=text] {width: 154px;
    opacity: 0.5; border: 1px solid #222; margin-top: 3px;}
    #background input[type=text]:focus {opacity: 1;
    color: #000;}

    /*INFO ARTICLE*/
    .article_info {font-size: 13px; text-align: center;
    margin-bottom: 5px; background: #DDD; border: 1px solid #BBB;
    border-radius: 20px;
    opacity: 0.5;}
    .article_info:hover {opacity: 1;}

    /*INFOBULLE*/
    #help_bubble {background: #EEE;
    border: #333 solid 1px;
    border-radius: 70px; height: 70px; width: 70px;
    font-size: 12px; padding-top: 20px;
    text-align: center; font-family: Times New Roman;}

    /*SHOUTBOX*/
    .menu_shoutbox {height: 200px; border: 2px solid #BBB;
    background: #DDD; padding: 2px; width: 170px;}
    .menu_shoutbox strong {color: #666}
    .menu_shoutbox hr {width: 90%; background: #EEE;
    height: 2px; margin: 2px;}

    /*TAG CLOUD*/
    a.tagcloud-tag-1 {color: #8c0130;}
    a.tagcloud-tag-2 {color: #bc4373;}
    a.tagcloud-tag-3 {color: #dbb2c3;}

    /*DERNIERS VISITEURS*/
    img.menu-lastvisitors-avatar {max-width: 41px; max-height: 41px;
    margin: 2px; border-radius: 30px; opacity: 0.3;
    border: 2px solid #BBB;}
    img.menu-lastvisitors-avatar:hover {opacity: 1; transition: 1s;
    border: 2px solid #dbb2c3;}

    /*CALENDRIER*/
    #menu_calendar_month {background: rgba(255,255,255,0.5);
    width: 176px; text-align: center;
    border: #EDD 1px solid;}
    #menu_calendar {background: rgba(255,255,255,0.5);
    width: 176px;}
    #menu_calendar thead {background: #EDD;}
    #menu_calendar td {height: 20px; width: 20px;}
    #menu_calendar td a {font-weight: bold; color: #000;
    background: url('http://ekladata.com/PIxbgz5QfHy4ANohjmhBMXo_zGo.png') no-repeat center;
    height: 20px; width: 20px; line-height: 150%;}
    #menu_calendar td a:hover {color: #FEE;
    background: url('http://cdn.shopify.com/s/files/1/0161/4732/t/5/assets/sky%20blue%20and%20coral.png?9061188742314066697') no-repeat center;}

    /*MENUBARRE*/
    #menubar {background: #EDD;
    color: #1e1e1e;}
    .menubar_section:hover,
    .menubar_section,
    .menubar_separation,
    .menubar_button,
    #menubar_logo,
    #menubar_favorites { background: none;}
    #menubar_section_content,
    #menubar table {background: #EDD;
    color: #1e1e1e;}

    #menubar_section_interactions,
    #menubar_section_manage,
    #menubar_section_account,
    #menubar_section_help,
    #menubar_notifications,
    #menubar_signin {background: #EDD;
    color: #1e1e1e;}

    /*CITATIONS*/
    blockquote {font-size: 15px; padding: 5px;
    border: 2px solid #BBB; margin-left: 30px;
    margin-right: 30px; border-radius: 10px;}
    blockquote:before {content: url('http://ekladata.com/7Eo8n1AgJWNDJolbqXmHCxvoSeA@20x20.png');
    float: left;}

    /*FORUMS*/
    .forum_table {width: 100%}
    .post_table_profile {padding: 5px; background: #BBB;
    border-top: 2px solid #BBB;}
    .post_table_msg {border-top: 2px solid #BBB; padding: 5px;}
    .post_table_profile img {max-width: 64px; max-height: 64px;margin-left: 5px;
    border: 2px solid #DDD; margin-top: -117px; border-radius: 64px;
    margin-left: 18px;}
    .post_table_profile img:hover {border: 2px solid #FFF;}
    .post_table_profile a {color: #FFF; float: right;
    padding-left: 5px; margin-top: 65px;
    transform: rotate(-35deg); border-radius: 30px;
    text-align: center; width: 100px; background: #DDD;
    border: 1px solid #AAA;}
    .post_table_profile a:hover {text-shadow: 0px 0px 5px #FFF;}
    .topic_table_row0, .forum_table_row0 {background: rgba(255,255,255, 0.5);
    margin-bottom: 5px;}
    .forum_table th, .forum_table td {padding: 3px;}
    td.post_table_head {font-family: Times New Roman;
    color: #BBB;}
    .topic_table, .forum_table {width: 100%;}
    span.tag.tag-ontop {background-color: #FDE;
    border: 1px solid #FDE; color: #515;}
    .topic_table td {padding: 0px 3px 3px 3px;}​

    Comment installer le thème?

    C'est très simple. Il suffit de suivre scrupuleusement les instructions ci-dessous:

    1. Allez dans votre interface d'édition de thème, décochez tout ce que vous pouvez et mettez le reste à zéro.
    2. Allez dans la partie "ajouter du CSS".
    3. S'il y a des choses dedans, enlevez-les.
    4. Copiez-collez intégralement le code ci-dessus dans la partie vide "ajouter du CSS".
    5. Enregistrez.
    6. C'est bon!

    Normalement, il ne devrait pas y avoir de problèmes, mais s'il y en avait, je vous invite à m'envoyer un message privé m'expliquant le bug pour que je puisse le résoudre.

    Note: dans ce code, il y a des titres pour vous aider à vous repérer. Ils se présentent sous la forme: /*FENETRE*/
    Vous pouvez ainsi retirer les portions de code correspondant aux menus que vous n'utilisez pas.

    Par exemple, si vous retirez ce qui est entre le titre /*CALENDRIER*/ et la prochaine ligne blanche, vous enlèverez le code pour le module calendrier. Je ne garantis rien au niveau des conséquences si vous décidez d'enlever des morceaux de code.

    Enjoy!


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :