• Codes

     Codes 

    Rubrique créée en avril 2013.

  • Traduire son blog en anglais

    ► Vous avez la possibilité d'installer un code HTML afin de traduire votre blog en différentes langues, l'anglais par exemple. ça peut toujours être utile.

    Pour cela, installer ce code dans un module ou un articles qui sera accessible à tous le monde. Remplacez "URL" par le lien de votre blog et remplacez "text".

    <p>​<a href="http://translate.google.com/translate?hl=en&amp;sl=fr&amp;tl=en&amp;u=URL/" target="_blank">TEXT</a></p>

    Voici ce que ça donne :

    English !

    Après je doute que quelqu'un qui ne parle pas votre langue lise votre blog...


    7 commentaires
  • Champs de texte

    ► Vous avez la possibilité de personnaliser le champs de texte

    Pour ça, mettez ce code et remplacez "IMG" par votre image, elle sera répétée.

    Code CSS :

    #background input[type="text"]#background select#background textarea {
    backgroundurl(IMG);
    }

    Plus d'informations sur le blog de Mikuru. Si vous avez des questions n'hésitez pas.


    8 commentaires
  • ► Vous avez la possibilité de mettre une lueur derrière le texte comme l'exemple ci-dessous :

    Mettre une lueur derrière le texte

    Pour mon blog j'ai choisi de mettre une lueur derrière texte du contenu, des menus, des titres et des commentaires. Voici mon code :

    .comment_admin  {text-shadow0px 0px 5px black ;}
    .comment_normal   {text-shadow0px 0px 5px black ;}
    .module_menu_titre   {text-shadow0px 0px 5px black ;}
    #menu1  {text-shadow0px 0px 5px black ;}

    #menu2  {text-shadow0px 0px 5px black ;}

    .module_titre  {text-shadow0px 0px 5px black ;}
    .module_contenu  {text-shadow0px 0px 5px black ;}

    La première ligne concerne les commentaires de l'auteur.

    La deuxième les commentaires des visiteurs.

    La 3ème les titres des menus 1 et 2.

    La 4ème et la 5ème le menu 1 et 2.

    La 6ème le titre des articles.

    La dernière les articles.

    Vous pouvez changer les trois valeurs comme vous le souhaitez (0, 5...) et "black" par la couleur de votre choix en anglais.

    Les sélecteurs ont été pris sur le blog de Nesumi, et le code sur le blog de Nagalia.

    Si vous avez des questions n'hésitez pas !


    6 commentaires
  • ► Vous avez la possibilité de changer le modèle de notifications, pour ça il suffit de prendre ce modèle et de le modifier comme vous le souhaitez :

    Changez les notifications

    En blanc, les anciennes notifications, en bleu clair les nouvelles, et en bleu foncé quand vous passez la souris dessus.

    Après avoir remplacez par les couleurs ou les images que vous souhaitez, mettez ce code en remplaçant "IMG" par l'url de votre modèle :

    #notifications_panel a,#notifications_panel divbackground:url(IMG)no-repeat;}


    17 commentaires
  • ► Vous avez la possiblité de changer le curseur, pour ça vous pouvez en trouver sur cursor 4-U. Il suffit de prendre le code css.

    Mettre et personnaliser un curseur

    Si vous souhaitez faire votre curseur vous-même ou le modifier il suffit de le créer sur votre logiciel de graphisme, puis de l'héberger. Prenez le code de cursor 4-U et remplacez tous les liens par le lien de votre curseur.


    3 commentaires
  • ► Si votre fond est trop grand, voici une astuce pour mettre votre fond en position fixe.

    Mettez ce code et remplacer par "URLIMG" par l'url de votre fond.

    body {
    background-imageurl(URLIMG;
        background-reapeatREAPEAT fixed;
    background-attachmentfixed ;}


    45 commentaires
  • ► Vous pouvez mettre un header de plus de 400 ko mais pour ça il faut mettre le code.

    Mettez ce code, en remplaçant "HAUTEUR" par la hauteur du header et "URLIMG" par l'url de l'image. Cliquez ici pour hébergez votre image.

    #header {
    height:HAUTEURpx;
    background:transparent url(URLIMG)center top no-repeat;
    }


    32 commentaires
  • ► Vous avez la possibilité de changer les fenêtres (par exemple les visiteurs, les articles...) (Source : Aimielisa)

    Petit exemple : (Clique pour voir en taille réelle)

    Changer les fenêtre

     Pour la première ligne, choisissez la hauteur du titre.

    Pour la deuxième ligne, choisissez la couleur du titre.

    Pour la 3ème, 4ème et avant dernière ligne mettez la création qui au fond du titre. Dans mon cas j'ai fait une création orange.

    Pour la dernière mettez votre création qui sera au fond, là où il y aurait le texte. Par exemple moi là c'est la partie rose avec Haruhi Suzumiya.

    Le code : 

    .window_handle{height: HauteurDuTitrepx;
    .window_title{colorCouleurDuTitre;
    .window_handle_content{background:url(FondDuTitrel'URLrepeat-x;
    .window_handle_left{background:url(FondDuTitrel'URL) no-repeat;
    .window_handle_right{background:url(FondDuTitrel'URL) no-repeat;
    .window_content{background:url(FondTexteURL);}

     Avec le code ci-dessus, vous ne pourrez avoir seulement le titre, et non les bords autour, pour les bords autour, c'est le code ci-dessous cette image.

    Changer les fenêtres

     

     Je vous conseille de mettre la même image que celle du titre, à la place de "UrlImage" 

    vous mettez le lien de votre image. Voici le code :

    .window_content_wrapper1{background:url(UrlImagerepeat-y top left;

    .window_content_wrapper2{background:url(UrlImagerepeat-y top right;
    .window_bottom_wrapper1{background:url(UrlImageno-repeat 0% 0%;}
    .window_bottom{background:url(UrlImage);}
    .window_bottom_wrapper2{background:url(UrlImageno-repeat 100% 100%;}

     Après si vous souhaitez changer le contour des boutons en normal et survolé comme ceci :

     

    Changer les fenêtres 

    -------------------

    Changer les fenêtres

    Pour changer le texte, par exemple ci-dessus dans la partie rouge vous devez juste remplacer "CouleurTexte" par la couleur de votre choix en anglais ou avec des sélecteur (ce genre là : #ffffff). (Attention : écrire un message fait partit des liens) Le code :

    .window{font-size:15 ;color:Couleur texte ;}

    Pour changer la couleur des liens, par exemple ci-dessus dans la partie bleu remplacer "CouleurLien"

    par la couleur de votre choix en anglais. Le code :

    .window_content a {color:CouleurLien;}  

    Et en survolé, remplacer "CouleurSurvolé" :

     

    .window a:hover {
        color:CouleurSurvolé;}

     

    Maintenant si vous voulez modifier les messages privés :

    Changer les fenêtres

    Th {background-image :url(UrlImageFondDate);
    -moz-box-shadow0px 0px 0px couleur en anglais;
        Text-shadow 0px 0px 5px couleur en anglais}

    Dans mon cas j'ai laissé "couleur en anglais" car je ne souhaitais pas de lueur externe. 

    Pour changer la couleur de "Date" ... Voici le code, remplacez "Couleurchoisi" par 

    la couleur de votre choix.

    .window_title{color:Couleurchoisi

     Vous trouverez plus d'informations à la source où j'ai trouvé le code, elle explique beaucoup mieux et il y a plus d'informations. C'est surtout pour moi, pour m'y retrouver quand je refais le thème pour savoir de quoi j'ai besoin. En cas de problème demandez-moi ou demandez à Aimielisa.

     


    24 commentaires
  • ► Pour choisir la couleur du surlignage je vous invite à aller regarder sur le blog de Mikuru.

    Petit exemple :

    ::selection background-colororangecolorwhite}  

    Surligner

     


    36 commentaires
  • ► Quand vous regardez les visiteurs sur un blog, et que vous passez votre souris sur l'un des visiteurs, il y a une bulle qui vous indique le pseudo de la personne. Petit exemple :

    Bulles indications

    Vous pouvez choisir la couleur (par exemple là c'est orange) du fond, la couleur du texte et l'opacité. Prenez le code ci-dessous et à la place de "red" mettez votre couleur en anglais, ou un code couleur qui sera le fond de la bulle. Et à la place du "white" choissisez la couleur du texte. Vous pouvez régler l'opacité en remplaçant/laissant "0.90". En cas de problèmes n'hésitez pas à me demander. Le code :

    #help_bubble

    {
    background-color:red;
    color:white
    opacity:0.9;
    }

    NEW : Vous pouvez choisir le contour

    en remplaçant la couleur, ce qui est après "Border"

    merci à Kiwaki !

    #help_bubble

    {
    border1px solid #FFFFFF;
    background-color:#FFB5B4;
    color:#46484b;
    opacity:0.8;
    }

    New : Pour arrondir le contour

    ;border-radius80px;}

    Merci à Neibi !


    38 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique