• Thème #6 Noir et orange

    Par Kalyna dans Thèmes le 19 Septembre 2017 à 19:48

    Thème simple que j'avais déjà fait dans les tons blancs, j'ai simplement changé les couleurs pour avoir un thème avec du texte blanc sur noir.

    (cliquez sur l'image pour agrandir)

    Thème

    Lire la suite...


    10 commentaires

  • Thème 5

    Par Kalyna dans Thèmes le 19 Septembre 2017 à 19:46

    Un de mes tout premiers thèmes en libre-service.


    Thème #4 Blue/Black

    Cliquez sur l'image pour agrandir

    - Créditer / Prévenir en commentaire ou par MP si vous prenez un header ou un thème.
    - Préciser quelque part sur votre blog que la créa est de moi si ce n'est pas déjà fait. (normalement c'est déjà noté dans le pied de page)

     

    / N'oubliez pas de mettre vos paramètres à zéro et de mettre le menu 1 à gauche. /

     
    ​@font-face {font-family: "Freebooter script";
         src: url('http://ekladata.com/OgzBcRIiUgWNatwo6A2G_wZVgNY/freeboter-script.ttf');} 
     @font-face {font-family: "shardee";
         src: url('http://ekladata.com/buT6KLqcsy1QYI3IQXoolCctrWk/Shardee.ttf');} 

    html,body { cursor : url("http://nsm08.casimages.com/img/2016/02/11//16021112391320257713965329.png"), auto; }

    #background {width: 1080px; background-image: url("http://nsm08.casimages.com/img/2016/02/10//16021006191520257713964283.png") ;}
    #body {background: url(http://3.bp.blogspot.com/-f2XX6_CJNNc/VCaHU7fHwJI/AAAAAAAAGig/ORo4Kah5u-Q/s1600/simple-gray-texture.jpg) repeat fixed   50% 0%;   }


    #header{height: 310px; background-image: url("http://ekladata.com/G4v652lwHmT_-qwOTXb6Oix9ww4/16021112243620257713965312.png");
        font-family: freebooter script;
        font-size: 80px;
        color: black;
        font-weight: none;
        text-align: center;
        text-shadow: 0 0 5px DeepSkyBlue, 0 0 5px deepskyblue, 0 0 5px navy;}

    #titre_header {top: 15px; 
        left: 790px;
    }

    #titre_header a {color: white;}

    #slogan_header {top: 90px;
        left: 880px;
        font-family: shardee;
        font-size: 35px;
        color: navy;
        font-weight: none;
        text-align: center;
        text-shadow: 0 0 5px white, 0 0 5px white, 0 0 5px white;}



    /*Menu a*/
    #menu {top: 265px;
        left: 0px;}

    #menu a {font-family: georgia;
        font-size: 15px;
        color: white;
        font-weight: bold;
        text-align: center;
        text-shadow: 0 0 5px navy, 0 0 5px cyan;}

    #menu a:hover {text-shadow: 0 0 5px indigo, 0 0 5px indigo;}

    ul#menu ul {padding-left: 3px;
        border: 1px solid white;
        margin-left: 45px;
        padding-top: 15px;
         background-image: url("http://nsm08.casimages.com/img/2016/02/10//16021006191520257713964283.png") ;}

    ul#menu ul a {text-align: left;
        padding-left: 3px;
        font-size: 14px;
        line-hight: 30px;
        height: 30px;}


    /*Menu1*/
    #menu1 {margin-left: 15px;
        width: 274px;
        background-image: url("http://nsm08.casimages.com/img/2016/02/10//16021006191520257713964283.png") ;}

    #menu1 .module_menu_titre { margin-right: 15px;
        height: 35px;
        line-height: 35px;
        font-family: georgia;
        font-size: 15px;
        color: white;
        font-weight: bold;
        text-align: center;
        text-shadow: 0 0 5px navy, 0 0 5px cyan;
        background-image: url("http://nsm08.casimages.com/img/2016/02/12//16021205045620257713968666.png") ;
        background-position: 0% 50%;
        border: 1px solid LightSkyBlue;
       }
           
    .module_menu_contenu {background-image: url("http://nsm08.casimages.com/img/2016/02/11//16021112290620257713965318.jpg");
        margin-right: 15px;
        margin-bottom: 30px;
        padding: 5px;
        color: white;
        border: 1px solid LightSkyBlue;
        font-family: arial;
        color: white;
        }

    .module_menu_contenu a {color: #0FC5EE;}
    .module_menu_contenu a:hover {color: #AC48AC;}

    /*Articles*/

    .module_titre {  margin-right: 15px;
        background-image: url("http://nsm08.casimages.com/img/2016/02/11//16021112290620257713965318.jpg");
        border-top: 2px solid LightSkyBlue;
        border-left: 1px solid LightSkyBlue;
        border-right: 1px solid LightSkyBlue;
        padding: 5px;
        height: 35px;
        line-height: 35px;
        font-family: georgia;
        font-size: 12px;
        color: white;
        font-weight: bold;
        text-align: center;
        text-shadow: 0 0 5px navy, 0 0 5px cyan;}

    .module_titre a {color: white;}
        
    .module_contenu {background-image: url("http://nsm08.casimages.com/img/2016/02/11//16021112290620257713965318.jpg");
        border-bottom: 1px solid LightSkyBlue;
        border-left: 1px solid LightSkyBlue;
        border-right: 1px solid LightSkyBlue;
        padding-left: 10px;
        padding-right: 5px;
        padding-bottom: 35px;
        padding-top: 5px;
        color: white;
        padding: 5px;
        text-align: justify;
        font-family: arial;
        font-size: 13px;
        margin-right: 15px;
        
    }

    .article_info {
        margin-bottom: 15px;
        font-size: 11px;
        font-weight: none;
        text-align: right;
        font-family: arial;
       color: grey;
       }

    .article_info a {color: #05B1E8;}

    /*modules*/

    .module_menu_type_search [name="q"] {width:85%; 
        border-radius: 2px;
        text-align: center; }


    .module_menu_type_newsletter input[name=subscribe] {width:85%; 
        border-radius: 3px; 
        margin-top: 5px;}

    .menu_shoutbox strong {
        color:#7DFFFF; 
        font-family: arial;
        font-size: 15px;  
        text-shadow: 0px 0px 5px navy, 0px 0px 5px navy;   }

    .menu_shoutbox {height: 300px;     
        text-shadow: 0px 0px 3px darkblue, 0px 0px 3px navy;
        font-family: arial;
        font-size: 13px;
        background-image: url("http://nsm08.casimages.com/img/2016/02/11//16021105302620257713966613.png"); }

    .module_menu_type_shoutbox [name="shoutbox_msg"]{width: 80%;
        margin-top: 5px;
        margin-bottom: 5px;}


    /*Footer*/

    #footer { height: 59px;
         line-height: 66px;
        background-image: url("http://ekladata.com/pjuKQ9QQas4vIiYxPpTKcSoIW8Y/16021101211620257713965364.png");
        background-repeat: no-repeat;
        background-position: 0% 100%;
        text-align: center;}

    #footer a {color: grey;}
    #footer::after{ text-align: bottom;
        height: 150px;
        font-size: 13px;
        font-family: arial;
        content: "Thème du blog by Kalyna";
        color: white; 
        text-shadow: 0 0 3px black; }

    /*commentaires*/

    div.commentheader {color: white;
        margin-bottom: 5px;
        padding: 2px;
        height: 25px;
        background: #0CA0CE;
    }

    .commentdate {
        text-shadow: none;
        font-size: 10px;
        padding: 2px;
        font-family: Arial;
        color: white;
        line-height: 15px;
    }

    .commentpseudo, .commentpseudo a {
        line-height: 22px;
        text-shadow: 1px 1px 0px navy;
        color: white;
        font-weight : bold;
        font-family: arial;
        font-size: 18px;
        }

    .commentnumber {margin-left: -5px;
        line-height: 25px;
        color: #380044;
        font-family: arial;
        font-size: 20px;
        font-variant: normal;
        font-weight : bold;
        text-align: center;
       }

    .comment_normal, .comment_admin {
        margin-left: 7px;
        border: 1px solid #0CA0CE;
        margin-bottom: 15px;
        width: 98%;
    }

    .comment_admin div.commentheader {
        background: #AD59AC;
        }

    .block-reply div.commentbody {padding: 4px;}

    .block-reply  .comment_admin {border: 1px solid #AD59AC;}


    .block-reply {
        border-left: 0px solid white;}

    .block-reply .commentpseudo a  {color: white;}

    .comment-reply>a {text-shadow: 1px 1px 0px black;
        margin-left: 10px; 
        border-radius: 3px;
        padding: 2px; 
        background: grey; 
        color: white;}

    .commentavatar img {margin: 3px;
        border-radius: 50px; 
        max-width: 55px; 
        border: 2px solid #AC48AC;
        box-shadow:  0 0 5px #AC48AC; }

     div.commentbody {padding-left: 5px;
        padding-right: 5px;
        padding-top: 3px;
        padding-bototm: 3px;
    }

    /*Visiteurs*/

    .module_menu_type_lastvisitors img {max-width: 45px; 
        opacity: 0.9; margin: 2px; 
        border-radius: 2px; 
        border: 1px solid navy; 
        box-shadow: 0 0 2px aqua, 0 0 2px aqua;
        margin: 5px; }

    .module_menu_type_lastvisitors img:hover {
        box-shadow: 0 0 3px aqua, 0 0 3px aqua, 0 0 3px white;
        border: 1px solid black;
        border-radius: 15px 0px 15px 0px;
        max-width: 45px;
        opacity: 1;
        margin: 5px;}

    #help_bubble {font-family: arial; 
        font-weight: bold; 
        padding: 5px;
        font-style : italic; 
        font-size: 12px; 
        border-radius: 3px; 
        border: 1px solid #1098C2; 
        color: white; 
        background-color: black; }

    /*menubar*/
    #menubar,
    #menubar a { color: white;text-shadow: 00 0 5px navy, 0 0 5px navy; font-family: arial; font-size: 12px;   }
    #menubar {color: navy; text-shadow: 0px 0px 5px white; font-family:arial; font-size: 12px; }
    .menubar_section li {color: white; text-shadow: 0 0 5px navy, 0 0 5px navy; font-family:arial; font-size: 12px;}

    #menubar { background-image: url("http://nsm08.casimages.com/img/2016/02/11//16021112243020257713965311.jpg");   }

    .menubar_button
    .menubar_section:hover,
    .menubar_section,
    .menubar_separation,
    .menubar_button,
    #menubar_logo,
    #menubar_favorites { background: none;}

    #menubar_hide,
    #menubar_show { background-image: url("http://nsm08.casimages.com/img/2016/02/11//16021101001920257713965349.png");}

    .menubar_section li {
               background:url("http://nsm08.casimages.com/img/2016/02/11//16021112524320257713965343.png")no-repeat; } 
    .menubar_section li:last-child {
                 background:url("http://nsm08.casimages.com/img/2016/02/11//16021112524320257713965344.png")no-repeat  ; border-radius: 5px;  }

     .menubar_section:hover div{ 
                       background-image: url("http://nsm08.casimages.com/img/2016/02/11//16021112290620257713965318.jpg")}

    #notifications_panel li{ background:url("http://nsm08.casimages.com/img/2016/02/11//16021112290620257713965318.jpg")}
    #notifications_panel li:hover { background:url("http://nsm08.casimages.com/img/2016/02/11//16021112571720257713965347.png") }
    #notifications_panel  .new_notification {  background:url("http://nsm08.casimages.com/img/2016/02/11//16021112571720257713965347.png")}
    #notifications_panel  li:last-child{  background:url("http://nsm08.casimages.com/img/2016/02/11//16021112290620257713965318.jpg");  }
    #notifications_panel  li:last-child:hover {  background:url("http://nsm08.casimages.com/img/2016/02/11//16021112571720257713965347.png");  } 

    #menubar_section_content,
    #menubar_section_appearance,
    #menubar_section_interactions,
    #menubar_section_manage,
    #menubar_section_account,
    #menubar_section_help,
    #menubar_notifications,
    #menubar_signin { background: none;}
    #menubar_favorites_btn, 
    #menubar_nofavorites_btn:hover {   background: url("/images/menubar/icon_nofavorite.png")no-repeat 50% 50%; }
    #menubar_favorites_btn:hover,
    #menubar_nofavorites_btn { 
          background: url("/images/menubar/icon_favorite.png")no-repeat 50% 50%; } 


    /*Fenetres*/

    .window_title{ font-family: gabriola;
        font-size: 22px;
    text-shadow: 0 0 5px purple, 0 0 5px indigo;}

    .window_handle_content {background-image:url("http://nsm08.casimages.com/img/2016/02/10//16021006191520257713964283.png");}
    .window_handle_left {background-image:url("http://nsm08.casimages.com/img/2016/02/10//16021006191520257713964283.png");}
    .window_handle_right {background-image:url("http://nsm08.casimages.com/img/2016/02/10//16021006191520257713964283.png");}
    .window_content_wrapper1 {background-image:url("http://nsm08.casimages.com/img/2016/02/10//16021006191520257713964283.png");} 
    .window_content_wrapper2 {background-image:url("http://nsm08.casimages.com/img/2016/02/10//16021006191520257713964283.png");} 
    .window_bottom_wrapper1 {background-image:url("http://nsm08.casimages.com/img/2016/02/10//16021006191520257713964283.png");} 
    .window_bottom_wrapper2 {background-image:url("http://nsm08.casimages.com/img/2016/02/10//16021006191520257713964283.png");}
    .window_bottom {background-image: url("http://nsm08.casimages.com/img/2016/02/10//16021006191520257713964283.png");} 
    .window_content {background-image: url("http://nsm08.casimages.com/img/2016/02/11//16021112243020257713965311.jpg");}
    .window_tabs {background-image: url("http://nsm08.casimages.com/img/2016/02/11//16021112243020257713965311.jpg");}


    .window_handle_left {border-radius: 12px 0px 0px 0px; 
                        -moz-border-radius:  12px 0px 0px 0px; 
                        -webkit-border-radius:  12px 0px 0px 0px} 

    .window_handle_right {border-radius: 0px 12px 0px 0px; 
                         -moz-border-radius:  0px 12px 0px 0px; 
                         -webkit-border-radius:  0px 12px 0px 0px}

    .window_bottom_wrapper1 {border-radius: 0px 0px 12px 12px; 
                            -moz-border-radius:  0px 0px 12px 12px; 
                            -webkit-border-radius:  0px 0px 12px 12px}

    .window_bottom_wrapper2 {border-radius: 0px 0px 12px 12px; 
                            -moz-border-radius:  0px 0px 12px 12px; 
                            -webkit-border-radius:  0px 0px 12px 12px}

    .window_content {border-radius: 0px 0px 5px 5px; 
                    -moz-border-radius: 5px; 
                    -webkit-border-radius: 5px}​

    2 commentaires

  • Accueil

    Par Kalyna dans Accueil le 19 Septembre 2017 à 19:21

    Blog créer dans le but de vous aider à personnaliser votre blog. Codes CSS & HTML, astuces ou encore thèmes et headers, j'espère que vous y trouverez votre bonheur.

    Bien évidemment, des règles de politesse s'imposent.

    • Rester poli / respectueux.
    • Évitez le langage SMS.
    • Pas de plagiat !


    Si vous avez besoin d'aide supplémentaire dans la réalisation de votre blog, (problème de code, recherche d'un tuto, mise en page, etc.) vous pouvez me contacter par MP ou via le forum. Soyez le plus clair et précis possible dans vos explications.

     


  • 4 codes en vrac (dont un qui sauve la vie)

    Par Kalyna dans Codages & Tutos le 19 Septembre 2017 à 19:21

    3 codes CSS pour personnaliser votre blog + 1 astuce qui sauve la vie.

     

    I- Sélectionner le texte :

    ::selection {background: #couleur; color: #couleur;}
    ::-moz-selection  {background: #couleur; color: #couleur;} 

    Sur ce blog, le texte sélectionné devient noir et le fond vert.

     

    II- Scrollbar de la page :

    Note : Le scrollbar c'est la barre de défilement qu'il y a à droite de l'écran. Sur ce blog, je l'ai mis en noir.

    /!\ Ne fonctionne pas avec tous les navigateurs.

    Pour les personnes utilisant chrome, vous pouvez voir que le scrollbar de mon blog à été personnalisé. Voilà le code :

    ::-webkit-scrollbar {
        width: xpx; /*-Largeur de toute la scrollbar fond+barre-*/
        height: 0px; /*-Hauteur automatiquement à 0-*/
    } 
    ::-webkit-scrollbar-track {
        background-color: #couleur; /*-Couleur du fond-*/
    }
     
    ::-webkit-scrollbar-thumb {
        background-color: #couleur; /*-Couleur de la barre qui défile-*/
    }

     

    III- Citation 

    Code pour personnaliser le bloc "citation" dans vos articles. Codes CSS en vrac 
    (C'est ce que j’utilise pour mettre en avant les codes CSS ou HTML dans mes articles.)

    blockquote {propriété: valeur;}

     

    IV - Annuler le JavaScript

    L'astuce qui sauve la vie quand on a entré un code JS qui fait tout planter !

    Rien de plus simple, ajoutez /?disablescripts à l'URL de votre blog et le JavaScript sera désactivé. Cela vous permettra ainsi d'avoir de nouveau accès à votre espace personnel et de retirer le mauvais code.

    Exemple :

    http://kaly-codes.ek.la/?disablescripts

    4 commentaires