AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Personnalisation d'une signature à 4 onglets

    lisounette7
    lisounette7
    FémininAge : 30Messages : 56

    Jeu 8 Sep 2016 - 9:06

    Bonjour,
    J'aimerais savoir si la signature en LS d'Onyx
    https://www.never-utopia.com/t59769-signature-avec-4-onglets-lateraux
    ici présente pourrait être personnalisable.
    J'aimerais pouvoir y mettre 6 onglets, voire 8, au lieu de 4.
    Merci d'avance de vos réponses :3


    Dernière édition par lisounette7 le Sam 24 Sep 2016 - 0:57, édité 1 fois
    • Revenir en haut
    lisounette7
    lisounette7
    FémininAge : 30Messages : 56

    Sam 10 Sep 2016 - 10:34

    petit up :)
    • Revenir en haut
    Yukiji
    Yukiji
    MasculinAge : 24Messages : 115

    Sam 10 Sep 2016 - 17:30

    Coucou, je peux te le faire, mais ça serait possible de m'envoyer le code de la signature ? Sous hide ou par mp ? -fleeeemme-



    (c) sygea
    • Revenir en haut
    lisounette7
    lisounette7
    FémininAge : 30Messages : 56

    Sam 10 Sep 2016 - 17:54

    Ouki je t'envoie ça par mp de suite :)
    Merci beaucoup :3
    • Revenir en haut
    lisounette7
    lisounette7
    FémininAge : 30Messages : 56

    Ven 16 Sep 2016 - 10:00

    Un petit up Wink
    • Revenir en haut
    lisounette7
    lisounette7
    FémininAge : 30Messages : 56

    Mar 20 Sep 2016 - 16:45

    2ème petit up Very Happy
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 23 Sep 2016 - 0:51

    Salut!

    Je sais pas où en est Yukiji, mais bon, je vais peut-être essayer un truc de mon bord. First, tu parles de mettre 6 à 8 onglets. C'est 6 ou c'est 8? Quel nom pour les onglets? On en rajoute genre 2 de plus en hauteur de chaque côté?



    • Revenir en haut
    lisounette7
    lisounette7
    FémininAge : 30Messages : 56

    Ven 23 Sep 2016 - 12:24

    Coucou,
    - Pour le nombre d'onglets, c'est 8 si c'est possible, 6 sinon.
    - Pour les noms d'onglets, comme je sais à peu près où les modifier, n'importe, mais s'il faut absolument quelque chose: perso2, perso3, perso4, perso5, perso6, (perso7, perso8,) crédits
    - Deux en plus de chaque côté me va, si c'est plus simple de les mettre au-dessus et en dessous, ça me va aussi, du moment que les onglets sont là Wink
    - petite précision, les 5 ou 7 premiers onglets sont aussi pour mettre des images si ça peut t'aider :) le dernier onglets, pour les crédits :3 (les images font 600px*338px)
    Merci beaucoup Very Happy
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 23 Sep 2016 - 21:56

    Comme ça?

    http://libertia.forum-canada.com/h19-signature-machin



    • Revenir en haut
    lisounette7
    lisounette7
    FémininAge : 30Messages : 56

    Ven 23 Sep 2016 - 23:23

    Owaaa *o*
    C'est juste parfait *o*
    Je suis sincèrement sans voix, tu as été super rapide pour un résultat parfait *o*
    Merci beaucoup beaucoup beaucoup, c'est juste ce que je voulais *o*
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 24 Sep 2016 - 0:24

    Bah c'est mon code à la base alors je le connais bien ^^

    Bref, je te file le code :

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title>Signature</title>
      <meta name="author" content="Onyx" />
      <base target="_blank" />
      <style type="text/css">
        /*Enlève les marges inutiles*/
        body {
        margin: 0px;
        }
       
        /*Liens*/
        a {
        color: #C3A7CF;
        text-decoration: none;
        }
        /*Liens survolés*/
        a:hover {
        color: #d2c3d9;
        }
         
        /*Corps de la signature*/
        .sign_onyx {
        width: 685px;
        height: 400px;
        margin: auto;
        background: #482d52;
        position: relative;
        color: #c4c4c4;
        font-family: 'Arial';
        font-size: 12px;
        z-index: 1;
        }
             
        /*Blocs qui contiennent les onglets et leur contenu*/
        .sign_onyx_bloc {
        position: absolute;
        width: 25px;
        height: 100px;
        overflow: hidden;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        }
        /*Apparition du contenu des blocs au survol de leur onglet*/
        .sign_onyx_bloc:hover {
        width: 660px;
        height: 400px;
        }
         
        /*Bloc 1*/
        #sign_onyx_1 {
        left: 0px;
        top: 0px;
        }
        /*Bloc 2*/
        #sign_onyx_2 {
        right: 0px;
        top: 0px;
        }
        /*Bloc 3*/
        #sign_onyx_3 {
        left: 0px;
        top: 100px;
        }
        /*Bloc 4*/
        #sign_onyx_4 {
        right: 0px;
        top: 100px;
        }
        /*Bloc 5*/
        #sign_onyx_5 {
        left: 0px;
        bottom: 100px;
        }
        /*Bloc 6*/
        #sign_onyx_6 {
        right: 0px;
        bottom: 100px;
        }
        /*Bloc 7*/
        #sign_onyx_7 {
        left: 0px;
        bottom: 0px;
        }
        /*Bloc 8*/
        #sign_onyx_8 {
        right: 0px;
        bottom: 0px;
        }
     
        /*Onglets*/
        .sign_onyx_onglet {
        position: absolute;
        height: 16px;
        width: 92px;
        padding: 4px;
        padding-top: 6px;
        text-align: center;
        background: #86708E;
        z-index: 2;
        color: #ffffff;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        }
         
        /*Onglet 1*/
        #sign_onyx_onglet_1 {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        top: 37px;
        left: -38px;
        }
        /*Onglet 2*/
        #sign_onyx_onglet_2 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        top: 37px;
        right: -38px;
        }
        /*Onglet 3*/
        #sign_onyx_onglet_3 {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        top: 37px;
        left: -38px;
        width: 91px;
        border-right: 1px solid #482d52;
        }
        /*Onglet 4*/
        #sign_onyx_onglet_4 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        top: 38px;
        right: -38px;
        width: 91px;
        border-right: 1px solid #482d52;
        }
        /*Onglet 5*/
        #sign_onyx_onglet_5 {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        bottom: 37px;
        left: -38px;
        width: 91px;
        border-right: 1px solid #482d52;
        }
        /*Onglet 6*/
        #sign_onyx_onglet_6 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        bottom: 37px;
        right: -38px;
        width: 91px;
        border-left: 1px solid #482d52;
        }
        /*Onglet 7*/
        #sign_onyx_onglet_7 {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        bottom: 37px;
        left: -38px;
        width: 91px;
        border-right: 1px solid #482d52;
        }
        /*Onglet 8*/
        #sign_onyx_onglet_8 {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        bottom: 37px;
        right: -38px;
        width: 91px;
        border-left: 1px solid #482d52;
        }
         
        /*Chagement de couleur des onglets au survol*/
        .sign_onyx_bloc:hover .sign_onyx_onglet {
        background: #482d52;
        }
       
        #sign_onyx_3:hover {
        left: 0px;
        top: 0px;
        }
        #sign_onyx_4:hover {
        right: 0px;
        top: 0px;
        }
        #sign_onyx_5:hover {
        left: 0px;
        bottom: 0px;
        }
        #sign_onyx_6:hover {
        right: 0px;
        bottom: 0px;
        }
        #sign_onyx_3:hover #sign_onyx_onglet_3 {
        top: 137px;
        }
        #sign_onyx_4:hover #sign_onyx_onglet_4 {
        top: 138px;
        }
        #sign_onyx_5:hover #sign_onyx_onglet_5 {
        bottom: 137px;
        }
        #sign_onyx_6:hover #sign_onyx_onglet_6 {
        bottom: 137px;
        }
         
        /*Contenus*/
        .sign_onyx_contenu {
        position: absolute;
        width: 625px;
        height: 390px;
        padding: 5px;
        text-align: center;
        background: #482d52;
        }
       
        /*Contenu normal du début*/
        #sign_onyx_contenu_0 {
        top: 0px;
        left: 25px;
        height: 190px;
        }
        /*Contenu 1*/
        #sign_onyx_contenu_1 {
        top: 0px;
        left: 25px;
        }
        /*Contenu 2*/
        #sign_onyx_contenu_2 {
        top: 0px;
        right: 25px;
        }
        /*Contenu 3*/
        #sign_onyx_contenu_3 {
        top: 0px;
        left: 25px;
        }
        /*Contenu 4*/
        #sign_onyx_contenu_4 {
        top: 0px;
        right: 25px;
        }
        /*Contenu Signatures*/
        #sign_onyx_contenu_5 {
        bottom: 0px;
        left: 25px;
        }
        /*Contenu 6*/
        #sign_onyx_contenu_6 {
        bottom: 0px;
        right: 25px;
        }
        /*Contenu 7*/
        #sign_onyx_contenu_7 {
        bottom: 0px;
        left: 25px;
        }
        /*Contenu crédits*/
        #sign_onyx_contenu_8 {
        bottom: 0px;
        right: 25px;
        }
         
        /*Ajout d'une barre de défilement dans les contenus*/
        .sign_onyx_contenu_in {
        overflow: auto;
        height: 390px;
        margin-right: -5px;
        padding-right: 5px;
        }
      </style>
    </head>
    <body>
      <div class="sign_onyx">

        <div id="sign_onyx_contenu_0" class="sign_onyx_contenu">
          <div class="sign_onyx_contenu_in">
            Contenu de base
            <br />
          </div>
        </div>

        <div id="sign_onyx_1" class="sign_onyx_bloc">
          <div id="sign_onyx_onglet_1" class="sign_onyx_onglet">
            Onglet 1
          </div>
          <div id="sign_onyx_contenu_1" class="sign_onyx_contenu">
            <div class="sign_onyx_contenu_in">
              Contenu onglet 1
            </div>
          </div>
        </div>

        <div id="sign_onyx_2" class="sign_onyx_bloc">
          <div id="sign_onyx_onglet_2" class="sign_onyx_onglet">
            Onglet 2
          </div>
          <div id="sign_onyx_contenu_2" class="sign_onyx_contenu">
            <div class="sign_onyx_contenu_in">
              Contenu onglet 2
            </div>
          </div>
        </div>

        <div id="sign_onyx_3" class="sign_onyx_bloc">
          <div id="sign_onyx_onglet_3" class="sign_onyx_onglet">
            Onglet 3
          </div>
          <div id="sign_onyx_contenu_3" class="sign_onyx_contenu">
            <div class="sign_onyx_contenu_in">
              Contenu onglet 3
            </div>
          </div>
        </div>
       
        <div id="sign_onyx_4" class="sign_onyx_bloc">
          <div id="sign_onyx_onglet_4" class="sign_onyx_onglet">
            Onglet 4
          </div>
          <div id="sign_onyx_contenu_4" class="sign_onyx_contenu">
            <div class="sign_onyx_contenu_in">
              Contenu onglet 4
            </div>
          </div>
        </div>
       
        <div id="sign_onyx_5" class="sign_onyx_bloc">
          <div id="sign_onyx_onglet_5" class="sign_onyx_onglet">
            Onglet 5
          </div>
          <div id="sign_onyx_contenu_5" class="sign_onyx_contenu">
            <div class="sign_onyx_contenu_in">
              Contenu onglet 5
            </div>
          </div>
        </div>
       
        <div id="sign_onyx_6" class="sign_onyx_bloc">
          <div id="sign_onyx_onglet_6" class="sign_onyx_onglet">
            Onglet 6
          </div>
          <div id="sign_onyx_contenu_6" class="sign_onyx_contenu">
            <div class="sign_onyx_contenu_in">
              Contenu onglet 6
            </div>
          </div>
        </div>
       
        <div id="sign_onyx_7" class="sign_onyx_bloc">
          <div id="sign_onyx_onglet_7" class="sign_onyx_onglet">
            Onglet 7
          </div>
          <div id="sign_onyx_contenu_7" class="sign_onyx_contenu">
            <div class="sign_onyx_contenu_in">
              Contenu onglet 7
            </div>
          </div>
        </div>

        <div id="sign_onyx_8" class="sign_onyx_bloc">
          <div id="sign_onyx_onglet_8" class="sign_onyx_onglet">
            Crédits
          </div>
          <div id="sign_onyx_contenu_8" class="sign_onyx_contenu">
            <div class="sign_onyx_contenu_in">
              Codage par <a href="http://www.never-utopia.com/u27">Onyx</a> de <a href="http://www.never-utopia.com/">Never-Utopia</a>.
            </div>
          </div>
        </div>

      </div>
    </body>
    </html>

    Et à mettre dans ta signature :
    Code:
    <iframe src="LIEN DE LA PAGE HTML" frameborder="0" style="display: block; margin: auto; width: 685px; height: 400px;"></iframe>



    • Revenir en haut
    lisounette7
    lisounette7
    FémininAge : 30Messages : 56

    Sam 24 Sep 2016 - 0:30

    Merci énormément *o*
    Je sais, mais avoir une réponse dans la journée est bien plus que ce que je pensais possible ^^"
    Si tu veux que je te donne les liens sur lesquels je risque d'utiliser ton travail, n'hésite pas à demander, je t'enverrai ça en MP :)
    Encore merci, je me mets de suite à remplir ça pour le forum *o*
    • Revenir en haut
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 24 Sep 2016 - 0:45

    Ce n'est pas nécessaire ^^

    Si le sujet est terminé, n'oublies pas de mettre l'icône Personnalisation d'une signature à 4 onglets Termine



    • Revenir en haut
    lisounette7
    lisounette7
    FémininAge : 30Messages : 56

    Sam 24 Sep 2016 - 0:58

    Oki doki Very Happy
    Ah oui, j'avais oublié ^^"
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 22 Nov 2024 - 0:26