• Thème 2 - You're space, right?

    Thème #4 - You're space, right?

     

    Voici mon deuxième thème en full css! Vous n'avez qu'à copier/coller les codes dans les parties indiquées et c'est magique!

    Si jamais vous ne savez pas comment trouver le numéro de vos menus, dites le moi, je vous aiderait. Sivous ne souhaitez que l'un ou l'autre des menus de lien, vous pouvez supprimer le code qui ne vous sert pas. (j'ai mis des indications dans le css si jamais)

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

     

    (+) il faut que toutes les valeurs soit à zéro et décochées, sauf format du blog > page > automatique centré

    (+) L'image, le titre du blog et les liens doivent être dans le même menu.

    (+) 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.

     

     CODE CSS:

    /*----------------BODY & FENÊTRE----------------*/
     
    #body {
        background:transparent url("http://ekladata.com/O7lG9Ob_KkVv9pTZZBaATKBB1Is/fond1.png")center top repeat-y;
        background-color: #C1C1C1;
        font-family: tahoma;
        font-size: 11px;
    }
     
    #body a {
        text-decoration: none;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
    }
     
    body a:hover {
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
    }
     
    .module_contenu img {text-align: center;
                         margin 0px;
    }
     
     
    /*----------------FOND PAGE----------------*/
     
    #background {
        width: 860px;
    }
     
     
     
    /*----------------HEADER----------------*/
     
    #header{
        height: 15px;
    }
     
    /*----------------MENU----------------*/
     
     
    /****MENU 1*****/
     
    #menu1 {
        position: fixed;
        top: 37px;
        margin-left: 20px;
        width: 167px;
        text-align: center;
        color: #808080;
    }
     
    #menu1 a{
        color: #58853D;
    }
     
    #menu1 a:hover{
        color: #8EB4C9;
    }

     
    /*menu 1*/
     
    #module_menu_contenuXXXXXXXX p{
        background-color: #889D92;
        color: white;
        margin-top: 5px;
        text-transform: lowercase;
        letter-spacing: 1px;
    }

     
    #module_menu_contenuXXXXXXXX a{
        display: block;
        color: white;
        background-color: #6A91B0;
        width: 100%;
        padding: 10px 0px 10px 0px;
        margin: 5px 0px 2px 0px;
        font-size: 9px;
        text-transform: uppercase;
        font-family: tahoma;
        letter-spacing: 2px;
    }
     
    #module_menu_contenuXXXXXXXX a:hover{
        color: white;
        background-color: #E3836C;
    }

     
    /***DERNIERS VISISTEURS***/
     
    .module_menu_type_lastvisitors .module_menu_titre {
        font-size: 0px;
        height: 0px;
        margin-top: 20px;
    }
     
    .module_menu_type_lastvisitors img {max-width: 35px;
    border: 2px solid lightgrey; margin-bottom: 3px;
        border-radius: 80px; margin: 5px;
    }
     
    .module_menu_type_lastvisitors img:hover {opacity: 0.8;}
     
     
    /*----------------ARTICLES----------------*/
     
     
    .module_titre_contenu{
        height: 100%;
        background-color: #889D92;
        border: 4px solid white;
        outline: 1px solid #CECECE;
        color: white;
        text-align: center;
        padding: 10px;
        font-family: arial;
        font-size: 15px;
        letter-spacing: 2px;
        word-spacing: 2px;
        text-transform: lowercase;
        font-style: italic;
        margin-left: 104px;
        margin-right: 87px;

    }
     
    .module_titre_contenu a{
        color: white;
        font-style: italic;
    }
     
    .module_titre_contenu a:hover{
        opacity: 0.7;
    }
     
    .article_info {
        font-size: 0px;
        text-align: right;
        font-style: italic;
        color: #A1A1A1;
        margin-bottom: 10px;
    }
     
    .article-info a{
        font-weight: bold;
    }
     
    .module_contenu {
        color: #555555;
        text-align: justify;
        font-family: tahoma;
        font-size: 12px;
        padding: 15px;
        margin-bottom: 50px;
        margin-left: 94px;
        margin-right: 78px;
    }
     
    .module_contenu a {
        color: #E48069;
        font-weight: bold;
        
    }
     
    .module_contenu a:hover {
        color: #6A91B0;
    }
     
     
    /*----------------COMMENTAIRE----------------*/
     
    .comment_normal, .comment_admin {
        width: 100%;
    }
     
    div.commentheader{
        background-color: #6A91B0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-bottom: 8px;
        margin-top: 28px;
        font-family: arial;
        padding: 5px;
        position: relative;
    }
     
    .block-reply li .commentheader{
        border-radius: 3px;
    }
     
    div.commentbody {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color: #DDDDDD;
        padding: 10px;
        color: #lighgrey;
        margin-top: -10px;
    }
     
    .block-reply {
        border-left: 3px solid #E48069;
    }
     
    .comment-reply a{
        color: #64796D;
        font-family: Arial;
        text-transform: uppercase;
        font-size: 8px;
        letter-spacing: 1px;
    }
     
    .comment-reply a:hover{
        color: grey;
    }
     
    .commentnumber {
        font-family: "playmaj";
        color: white;
        font-size: 20px;
        padding-left: 5px;
        opacity: 0.6;
    }
     
    .commentpseudo {
        font-family: "playit";
        color: #888888;
        font-size: 13px;
        letter-spacing: 1px;
        text-transform: lowercase;
    }
     
    .commentpseudo a {color: white; font-weight: none;}
     
    .commentpseudo a:hover {color: white; opacity: 0.5;}
     
    .commentavatar {
        margin-right: 10px;
        margin-top: -25px;
        position: relative;
        padding: 5px;
    }
     
    .commentavatar img {
        border: 3px solid #6A91B0;
        border-radius: 100px;
    }
     

    .block-reply li .commentavatar {
        margin-right: 5px;
        margin-top: -5px;
        position: relative;
        padding: 5px;}
     
    .commentdate {
        padding-top: 5px;
        font-size: 10px;
        color: white;
        opacity: 0.5;
    }
     
     
     
    /*----------------PIED DE PAGE----------------*/
     
    #footer {
        text-align: center;
        text-transform: uppercase;
        font-size: 9px;
        color: #E68D7F;
        height: 30px;
        width: 400px;
        margin-left: 325px;
    }
     
    #footer a {
        color: #6A91B0;
    }
     
    #footer a:hover {
        color: #889D92;
    }
     
    #footer:after {content: " Thème de Fabule";}
     
     
    /*----------------HELPBUBBLES----------------*/
     
    #help_bubble {
        background-color: #889D92;
        color: #F1F1F1;
        border: 2px solid #607368;
        border-radius: 10px;
        opacity: 0.8;
        font-weight: bold;
    }
     
     
    /*----------------BOUTONS----------------*/
     
    input[type=button],input[type=submit], button {
        margin: 5px;
        margin-left: 0px;
        min-width: 10px;
        min-height: 20px;
        background-color: #889D92;
        color: white;
        font-family: arial;
        border: 2px solid #60756A;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 2px;
        border-radius: 2px;
    }
     
    input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, .button:hover {
        background-color: #6A91B0;
        color: white;
        font-family: arial;
        border: 3px solid #39556C;
    }
     
     
    /*******FORUMS********/
     
    .post_table_msg {
        background-color: #E5E5E5;
        padding: 10px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
     
    .post_table_head {color: #F7F7F7;
                      font-size: 0px;
    }
     
    .post_table_profile img{
        border: 2px solid #B1C6D6;
        border-radius: 50px;
        margin-left: 10px;
        margin-top: -10px;
        margin-bottom: 20px;
        padding: 0px;
    }
     
    .post_table_profile a{
        color: white;
        font-size: 13px;
        font-family: consolas;
        text-transform: uppercase;
        display: block;
        width: 76px;
        padding: 2px 0px 2px 0px;
        background-color: #B1C6D6;
        text-align: center;
        border-radius: 2px;
        margin-top: 20px;
        margin-left: 11px;
        text-align: center;
    }
     
    .post_table_profile a:hover{
        opacity: 0.7;
        color: white;
    }
     
    .post_table_profile {
        background-color: #6A91B0;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;

    }
     
     
    .forum-description {
        background-color: #F0F0F0;
        border: 1px solid lightgrey;
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 10px;
        border-radius: 2px;
        color: #333333
    }
     
     

    /*********BALISES***********/
     
    .esp img{
        margin: 5px;
        max-width: 78px;
        border: 3px solid white;
        outline: 1px solid lightgrey;
    }
     
    .liens a{
        display: inline-block;
        width: 47%;
        padding: 2px;
        text-transform: uppercase;
        text-align: center;
        font-size: 10px;
        background-color: #E0E0E0;
        border: 1px solid lightgrey;
        margin: 2px;
        color: grey;
    }

     

    CODE HTML "LINKS":

    <div class="liens">
    tes liens ici
    </div>

     

    CODE HTML "BLOGROLL":

    <div class="esp">
    tes images ici
    </div>

     


  • Comments

    1
    Monday 3rd October 2016 at 23:55

    Oh que c'est beau *-*

    oulàlàlàlàlàlàlàlà.

    j'aime. uwu

    2
    Friday 7th October 2016 at 18:32

    Super stylé ! :o

    3
    Sunday 6th November 2016 at 18:13

    Coucou, c'est pour te dire que j'utilise ton thème pour mon blog ~~

    4
    Saturday 12nd November 2016 at 20:39
    Magnifique,je te le prends Merchii
    5
    Sunday 13rd November 2016 at 11:10

    Coucou tu pourrais s'il te plait m'installer le menu,parceque je suis vraiment pas doué.

    Merci d'avance :)

     

    • Voir les réponses
    6
    Monday 14th November 2016 at 12:21

    C'est bon,merci beaucoup ^^

     

     

    7
    Friday 18th November 2016 at 15:30

    Oui,merci de m'avoir aidé

    8
    Tuesday 22nd November 2016 at 20:29

    J'te le pique ! ♥ Rien à dire, tes thèmes sont vraiment géniaux ! *w* 

    9
    Monday 5th December 2016 at 18:29

    je te pique deux trois truc sans oublier de te créditer (comme à chaque fois hein ^^)

    10
    Friday 30th December 2016 at 11:25

    Je vais l'utiliser, merci ^^

    11
    Saturday 7th January 2017 at 16:56

    Coucou !Ce thème est juste magnifique ! Je te le prends ! Par contre, j'ai un petit soucis avec le menu, ce serait possible que tu m'aides ?

    • Voir les réponses
    12
    Friday 10th February 2017 at 10:28

    Plop, ce thème est magnifique **

    Est-ce que c'est possible de m'en inspirer pour mon prochain thème ? (Je te créditerai bien sûr)

    • Voir les réponses
    13
    Thursday 6th April 2017 at 16:14
    Magnifique, je le prends ♥
    14
    Wednesday 28th June 2017 at 22:52

    Je te le pique <3333

    15
    Sunday 13rd August 2017 at 13:02

    Salut ! Je t'emprunte ce magnifique thème pour mon blog principal !

    16
    Friday 1st September 2017 at 20:32

    Waaaa, je suis fan <3 je te le pique si ça ne te dérange pas c:

    17
    Sunday 3rd September 2017 at 00:54

    Ca fait hyper longtemps que je ne suis pas venue ici ! C'est très joli, du coup je le prends pour mon nouveau blog hihi 

    Je pense ajouter un petit fond derrière et élargir un peu la page si ça ne dérange pas !

    18
    Friday 22nd September 2017 at 18:09

    Je te le prend o/

    • Voir les réponses
    19
    Monday 23rd October 2017 at 17:30

    je le prend

    il est super o-o

    20
    Sunday 5th November 2017 at 18:16

    Je le prend, il est beau. u.u

    21
    Saturday 16th December 2017 at 13:17

    je sais pas si je le prends et je le modifie mais normalement je devrais le prendre c:

    22
    Wednesday 27th December 2017 at 21:48

    Jte le pique ! ;)

    23
    Saturday 16th June 2018 at 15:54

    Je te pique ce très beau thème, merci à toi et ton travail.

    24
    Sunday 5th August 2018 at 13:41

    holà, juste pour dire que j'ai emprunté le css de ce magnifique thème ! je créditerais évidement ^^

    25
    Wednesday 10th July 2019 at 14:28

    Je le prends, il est magnifique ! Merci à toi pour ce travail de qualité :)

    26
    Sunday 11st August 2019 at 22:31

    je vais probablement m'en servir, merci !

    27
    Thursday 4th March 2021 at 18:40

    J'emprunte quelques codes du coup :D

    • Voir les réponses
    28
    Thursday 7th July 2022 at 15:43

    j'aime beaucoup :)

    c'est si simple et minimaliste, ça fait tout son charme !

    Suivre le flux RSS des commentaires


    Add comment

    Name / User name:

    E-mail (optional):

    Website (optional):

    Comment: