• Ice Cream [tuto]

    Par Nagalia dans Tuto Photofiltre Studio le 30 Juin 2012 à 00:10
    Texture
    PNG

    Merci à Shuchu pour le tuto (anciennement Chamimy)

    10 commentaires

  • Rin et Pikachu [Moyen]

    Par Nagalia dans Tuto Photofiltre Studio le 30 Juin 2012 à 00:08
    Texture
    C4D

    Merci à Shuchu pour le tuto (anciennement Chamimy)

    4 commentaires

  • Faire un render [Moyen]

    Par EtoileSosso dans Tuto Photofiltre Studio le 24 Juin 2012 à 11:22

    Faire un render

    [Merci  à Chamimy pour ce tuto]


    31 commentaires

  • Signature codée

    Par Nagalia dans Codes en vrac le 16 Juin 2012 à 23:14

    Après une demande, voilà un tuto pour faire une signature en css et html à mettre sur les forum. 
    /! Vérifiez que le forum accepte que les membres utilisent le html. 



    C'est joli, certes, mais comment on fait ça? Pour les EklaBloger, nous avons la chance de pouvoir créer une page html et de l'héberger directement:
    "Contenu => Gérer les fichier => Nouveau fichier" et nommez le "signature.html"
    /! Javascript activé!
    Pour les autres, sortez votre bloc note, notepad, ou un quelconque autre logiciel d'édition de texte. N'oubliez pas d'enregistrer en .html

    Nous allons créer une page html de A à Z voici donc la structure de base:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <script type="text/javascript">
    CONTENU JS
      </script>
           
      <style type="text/css">
    CONTENU CSS
      </style>
    </head>

        <body>
           
    CONTENU HTML     
            
        </body>
    </html>
     

    On va commencer par le javascript

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

      <script type="text/javascript">

    //<!--
                    function change_onglet(name)
                    {
    document.getElementById('onglet_'+anc_onglet)
    .className = 'onglet_0 onglet';
    document.getElementById('onglet_'+name).
    className = 'onglet_1 onglet';
    document.getElementById('contenu_onglet_'+anc_onglet)
    .style.display = 'none';
    document.getElementById('contenu_onglet_'+name).
    style.display = 'block';
                            anc_onglet = name;
                    }
            //-->   </script>
           
      <style type="text/css">
    CONTENU CSS
      </style>
    </head>

        <body>
           
    CONTENU HTML     
            
        </body>
    </html>
     

    Et on ne touche à rien!
    Ensuite, CSS:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">

            //<!--
                    function change_onglet(name)
                    {
    document.getElementById('onglet_'+anc_onglet)
    .className = 'onglet_0 onglet';
    document.getElementById('onglet_'+name).
    className = 'onglet_1 onglet';
    document.getElementById('contenu_onglet_'+anc_onglet)
    .style.display = 'none';
    document.getElementById('contenu_onglet_'+name).
    style.display = 'block';
                            anc_onglet = name;
                    }
            //-->
                   </script>

           
      <style type="text/css">
    .onglet,
    .onglet_0 {display:inline-block;
              PROPRIETE: VALEUR; }

     .contenu_onglet{display:none;
              height : Xpx; /* HAUTEUR */
              width : Xpx; /*LARGEUR*/
              overflow : auto;
              PROPRIETE: VALEUR;
    }

    </style>

    </head>

        <body>

    CONTENU HTML 

    </body>

    </html>

     

    Modifiez ce qui est en rouge pour personnaliser votre signature.
    Enfin, le HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">

            //<!--
                    function change_onglet(name)
                    {
    document.getElementById('onglet_'+anc_onglet)
    .className = 'onglet_0 onglet';
    document.getElementById('onglet_'+name).
    className = 'onglet_1 onglet';
    document.getElementById('contenu_onglet_'+anc_onglet)
    .style.display = 'none';
    document.getElementById('contenu_onglet_'+name).
    style.display = 'block';
                            anc_onglet = name;
                    }
            //-->
                   </script>

      <style type="text/css">

    .onglet,
    .onglet_0 {display:inline-block;
              PROPRIETE: VALEUR; }

    .contenu_onglet{display:none;
              height : Xpx; /* HAUTEUR */
              width : Xpx; /*LARGEUR*/
              overflow : auto;
              PROPRIETE: VALEUR;}

    </style>

    </head>

        <body>

            <div class="onglets">
    <span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">ONGLET 1</span>
    <span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">ONGLET 2</span>
    <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">ONGLET 3</span>
            </div>

              <div class="contenu_onglet" id="contenu_onglet_1er">
              CONTENU DU 1ER ONGLET
              </div>

              <div class="contenu_onglet" id="contenu_onglet_2eme">
              CONTENU DU 2EME ONGLET
              </div>

              <div class="contenu_onglet" id="contenu_onglet_3eme">
              CONTENU DU 3EME ONGLET
              </div>

            <script type="text/javascript">
            //<!--
                    var anc_onglet = '1er';
                    change_onglet(anc_onglet);
            //-->
            </script> 

    </body>

    </html> 

    Modifiez "ONGLET 1" "ONGLET 2" et "ONGLET 3" par les titre de vos onglet. Si vous voulez rajouter des onglet, il suffit de rajouter cette ligne:

    <span class="onglet_0 onglet" id="onglet_4eme" onmouseover="javascript:change_onglet('4eme');">ONGLET 4</span>

    sous

    <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">ONGLET 3</span>

    et cette ligne

    <div class="contenu_onglet" id="contenu_onglet_4eme">
              CONTENU DU 4EME ONGLET
              </div>

    sous

    <div class="contenu_onglet" id="contenu_onglet_3eme">
              CONTENU DU 3EME ONGLET
              </div>

    Si c'est votre 5eme onglet, remplacez 4 par 5 etc...

    Tout à la fin du code, il y a un petit passage de js en plus qui nous permet d'afficher la signature. "1er" indique que l'onglet visible par défaut est le premier. Si vous voulez qu'on voit d'abord le 2eme onglet, remplacez "1er" par "2eme"

    C'est bien beau tout ça, mais comme j'y met en signature? Au moyen d'une iframe ;)
    Enregister votre signature et hébergez là et récupérez l'adresse. Collez l'adresse dans ce code, puis mettez le dans votre signature:

    <iframe style="width: LARGEURpx; height: HAUTEURpx; display: block; margin-left: auto; margin-right: auto;" src="URL" frameborder="no" scrolling="no" width="320" height="240"></iframe>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript">

            //<!--

                    function change_onglet(name)

                    {

    document.getElementById('onglet_'+anc_onglet)

    .className = 'onglet_0 onglet';

    document.getElementById('onglet_'+name).

    className = 'onglet_1 onglet';

    document.getElementById('contenu_onglet_'+anc_onglet)

    .style.display = 'none';

    document.getElementById('contenu_onglet_'+name).

    style.display = 'block';

                            anc_onglet = name;

                    }

            //-->

                   </script>

           

      <style type="text/css">

    .onglet,

    .onglet_0 {display:inline-block;

              width: 150px;

              background: #a34626; 

              margin:auto;

              margin-bottom: -1px;

              padding:3px;

              border:1px solid black;

              border-top: 4px solid black;

              border-radius: 10px 10px 0 0;

              font-family : Impact;

              letter-spacing: 3px;

              text-align: center;

              -webkit-transition: 300ms;

              -moz-transition: 300ms;

              transition: 300ms;

    }

     

    .onglet:hover {background: #bd5f2b

          }

     .contenu_onglet{ font-size : 14px ; 

              background: #a34626;

              border-radius : 20px;

              border: 1px solid #000000;

              border-left: 6px solid black;

              border-right: 6px solid black;

              box-shadow: 0 0 10px black, inset 0 0 10px black;

              padding: 10px;                

              display:none;

              height : 200px;

              width : 600px; 

              overflow : auto;

              color: #e7c3b7;

              text-shadow : 1px 1px 0px black; 

    }

          .cadre { border-radius: 10px;

              background: rgba(0, 0, 0, 0.3);

              width: 400px;

              height: 187px;

              float: right;

              text-align: left;

              padding: 5px;

              box-shadow: 0 0 10px #ee7837, inset 0 0 5px black;

              overflow : auto; 

    }

    .contact {border: 1px solid black;

              border-left: 3px solid black;

              border-right: 3px solid black;

              background: rgba(238, 120, 55, 0.6);

              padding: 5px;

              margin-top: 10px;

              color: black

    }

          a {color: black;

              text-decoration: none;

              text-shadow: none;

              font-weight:bold;

          }

    </style>

    </head>

        <body>

            <div class="onglets">

    <center><span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">SIGNATURE</span>

    <span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">ANCIENS KITS</span>

    <span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">MOI</span>

    </center>

            </div>

              <center> <div class="contenu_onglet" id="contenu_onglet_1er">

    <img src="http://ekladata.com/LL_FFgnJyGMVWv_TAg6rnfpIIhk.png" alt=""><br/></div>

              <center> <div class="contenu_onglet" id="contenu_onglet_2eme">

                  <img src="http://ekladata.com/1RsvO8ELdqRX3DnRps1urL-MPSI.jpg"/><br/>

                  <img src="http://ekladata.com/qEqY2wyUKiY7IpIDa6ZhyGWFwJQ.png"/>

    </div>

              <center> <div class="contenu_onglet" id="contenu_onglet_3eme">

                  <div style="float:left"><img src="http://ekladata.com/d1b3rsARkHy-JOObf5r016zv8Ok.png"/><div class="contact"><a href="http://fanstasy-graph.eklablog.net">Blog</a> | <a href="http://nagalia.deviantart.com/">Deviantart</a></div></div>

                  <div class="cadre"><p>Je suis Nagalia!<br/>

                      16 ans, terminale S et voulant devenir web-designeuse ^^

                      <br/><br/>

                      J'adore dessiner, des personnages de manga ou fantastique genre des elfes. En fait, je dessine beaucoup des personnages sortant tout droit de mon imagination de folle XD Genre Nagalia, une elfe noire complètement sadique :P Bref voilà pour la petite histoire sur l'origine de mon pseudo. Vous l'aurez deviné, je suis fan d'héroïque fantasy!<br/>

                      Il faut également préciser que je suis une veritable accro au graph!<br/><br/>

                      Bref, vous voyez qu'on peut mettre vraiment ce qu'on veut dans cette signature, et sans aucune limite de caractère ;)</p> </div></div>

             <script type="text/javascript">

            //<!--

                    var anc_onglet = '3eme';

                    change_onglet(anc_onglet);

            //-->

            </script>             

    </body>

    </html>

     

     


    132 commentaires

  • Personnaliser les modules

    Par Nagalia dans Astuces Ekla le 12 Juin 2012 à 15:12
    Les déplacer

    Pour des raisons purement esthétiques, ce serai bien de pouvoir placer les module ou on veut. Par exemple dans le header ;) Déjà, il faut que les module existent sur votre blog.
    Pour l'exemple, j'ai pris le module des derniers visiteurs.

    Regardez dans le code source de votre page: 
        •"clique droit => Code source de la page"
        •Faites Ctrl+F pour chercher votre module



    •Surligné en orange, c'est le titre du module, qui doit être le résultat de votre recherche.
    •Encadré en bleu, vous remarquez l'id
    •Et enfin, ce qui est surligné en jaune, c'est ce que nous allons mettre dans le css pour pouvoir le déplacer.

    Voici maintenant ce que vous allez mettre dans votre css:
    #module_menuXXXXXX {position: absolute;
              top: Xpx;
              left: Xpx;
    }
    Remplacez XXXXXX par le nombre souligné en rouge dans le code source.

         •"position: absolute" permet de placer le module dans le coin en haut à gauche par défaut.
         •"top: Xpx" Remplacez X par un nombre de px. Cela indique à combien de px du haut de la page vous placez le module
         •"left: Xpx" Remplacez X par un nombre de px. Cela indique à combien de px de la gauche de la page vous placez le module

    Personnaliser

    Une fois que vous connaissez les id de vos modules, vous pouvez les modifier indépendamment en css. Par exemple, si je veux que mon module visiteur est un fond bleu, et que le module recherche n'en ai pas:
    #module_menu2827671 {position: absolute;
              top: Xpx;
              left: Xpx;
              background: rgba(90, 188, 189, 0.2);
              border-radius: 15px;
              box-shadow: 0 0 10px #7afeff ;}

    #module_menu2821246 {position: absolute;
              top: 188px;
              margin-left: 500px;
              background: none;}
    Vous pouvez ainsi modifier tous vos modules séparément. N'oubliez pas de changer mes valeurs (en rouge) par les votre, sinon ça ne risque pas de fonctionner ;)
    Note de Papasti:
    A noter que pour les modules prédéfinis, on peu y accéder sans connaitre l'id du module, comme ceci:
    .module_menu_type_lastvisitors{
              position: absolute;
              top: Xpx;
              left: Xpx;
              background: rgba(90, 188, 189, 0.2);
              border-radius: 15px;
              box-shadow: 0 0 10px #7afeff ;}

    Titre des modules personnalisés

    Vous voulez pouvoir personnaliser les titres de vos modules, en mettant une image par exemple? L'article est ICI

    317 commentaires