Ichigooo !


Partagez | 
 


 « [Signature à onglets] Spring card »

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : Précédent  1, 2
AuteurMessage


Gelso
Fraise


Un peu plus...
Rôle / Ancien rôle :
Décris-toi : Je mords quand j'ai faim. Et j'ai souvent faim... *sort les crocs*
Famille et relations :
avatar

Féminin
Messages : 177
Date d'inscription : 16/03/2015
Logiciel graphique : Ps ; Ai

Contact et infos
http://gelsoice.deviantart.com/


Message Sujet: [Signature à onglets] Spring card   Dim 17 Mai 2015, 18:53

Rappel du premier message :

Coucou les ptits loups Smile
Voici une petite signature codée libre d'utilisation. Vous êtes autorisés à changer images et couleurs (et texte évidement du moment que vous gardez le "copyright")


Suivez les commentaires pour vous y retrouver Smile

Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style type="text/css">

@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);

#contenu{
 width: 500px;
 height: 232px;
 background-image: url("http://cdns2.freepik.com/photos-libre/_53-17137.jpg"); /* Changer le motif de fond. Pour avoir une couleur unie, effacer le style background-image et écrire "background-color: #xxx;" à la place avec la couleur désirée */
 border-radius: 20px;
 box-shadow: 3px 3px 3px 0px rgba(55,55,55,0.2);
 -webkit-box-shadow: 3px 3px 3px 0px rgba(55,55,55,0.2);
 background-size: cover;
 background-attachment: scroll;
 overflow-y: hidden;
 overflow-x: hidden;
 color:rgb(50,100,90); /* Changer la couleur du texte */
}

#contenu:hover{
 overflow-y:auto; }

#nav{
 border-radius: 20px 20px 0px 0px;
 }

#nav, .paragraphe, #para-moi, .oneline{
 background-color: rgba(255, 225, 180, 0.7); /* Changer la couleur du fond de la barre de navigation et des blocs de texte + définir son opacité allant de 0 (0%) à 1 (100%) */
 }


#contenu, .paragraphe, #para-moi, .oneline{
 border: 1px solid rgb(150,150,100); /* Changer la couleur de la bordure de la signature et des blocs de texte */
 }

li{
 display: inline-block;
 margin-left:55px;
 font-family: 'Pacifico', cursive;
 padding-top:0px;
 padding-bottom:5px;
 color:rgb(50,100,90); /* Changer la couleur du texte des onglets inactifs */
}
ul{
 margin:0px;}

.onglet{
        display:inline-block;
        webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;  
        transition-duration: 1s;}
 
.onglet_0{
        webkit-transition-duration:1s;
        -moz-transition-duration:1s;
        -o-transition-duration:1s;  
        transition-duration:1s;}
 
.onglet_1{
            
        webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;  
        transition-duration: 1s;
        -webkit-transform:scale(1.3,1.3);
        -moz-transform:scale(1.3,1.3);
        -o-transform:scale(1.3,1.3);
        -ms-transform:scale(1.3,1.3);
        color: #a08764;  /* Changer la couleur du texte de l'onglet actif */ }

.contenu_onglet{
        
        display: none;}
 
#contenu_onglet_1er{
 text-align:center;}
 
#photo{
 width: 120px;
 height: 150px;
 border-radius: 20px;
 border: 1px solid rgb(150,150,100);
 box-shadow: 3px 3px 3px 0px rgba(55,55,55,0.2);
 -webkit-box-shadow: 3px 3px 3px 0px rgba(55,55,55,0.2);
 float:left;
 margin:10px 0px 0px 10px;
 background:url("http://img15.hostingpics.net/pics/3776029802.jpg") no-repeat;  /* Changer l'image dans l'onglet "moi" (120x150px) */
 }
 
#para-moi{
 width: 300px;
 min-height: 130px;
 height: auto;
 border-radius: 20px;
 float:right;
 padding: 10px;
 margin:10px 10px 0px 0px;
 text-align:justify; /* Changer "justify" par "left" si vous voulez plutôt que le texte soit aligné à gauche ("right" pour droite et "center" pour centré) */
 font-size:10pt;
 font-family: 'PT Sans Narrow', sans-serif;
 }
 

.autosize-gift{
 max-width:480px;
 height:auto;
 border-radius: 20px;
 margin:10px 10px 00px 10px;}
 
.oneline{
 width: 460px;
 border-radius: 10px;
 padding: 0 10px 0 10px;
 margin:0px 10px 10px 10px;
 text-align: center;
 font-size:10pt;
 font-family: 'PT Sans Narrow', sans-serif; }
.paragraphe{
 width: 460px;
 height: auto;
 border-radius: 20px;
 padding: 10px;
 margin:10px;
 text-align:justify; /* Changer "justify" par "left" si vous voulez plutôt que le texte soit aligné à gauche ("right" pour droite et "center" pour centré) */
 font-size:10pt;
 font-family: 'PT Sans Narrow', sans-serif; }
 
#gelso{
 width: 500px;
 text-align: center;
 font-size: 7pt;
 font-family: 'PT Sans Narrow', sans-serif;
 color: rgba(100,80,50,0.5);
 text-shadow: 3px 3px 3px 0px rgb(55,55,55,);
}
 
</style>

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

</head>

<body>
<div id="contenu">
    <div id="nav">
     <ul><li><span id="onglet_1er" class="onglet_1 onglet" onmouseover="javascript:change_onglet('1er');">Signature</span></li>
        <li><span id="onglet_2eme" class="onglet_0 onglet" onmouseover="javascript:change_onglet('2eme');">Moi</span></li>
        <li><span id="onglet_3eme" class="onglet_0 onglet" onmouseover="javascript:change_onglet('3eme');">Cadeaux</span></li>
        <li><span id="onglet_4eme" class="onglet_0 onglet" onmouseover="javascript:change_onglet('4eme');">♥️</span></li>
        </ul>
    </div>
    
   <div id="contenu_onglet_1er" class="contenu_onglet">
   <img alt="" src="http://i.imgur.com/tEBBxqU.png"> <!-- Signature 500x200px ou même rapport -->
   </div>

   <div id="contenu_onglet_2eme" class="contenu_onglet">
   <div id="photo"></div> <div id="para-moi">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur justo blandit, vehicula nisl nec, ultrices ex. Integer blandit elit ex. Mauris malesuada vulputate condimentum. In tristique neque lacus, vel vehicula nisl vestibulum a. Donec porta tristique arcu vitae interdum. Curabitur sollicitudin feugiat aliquet. Cras non mollis ante. Etiam semper in ipsum a rhoncus. Duis massa arcu, pulvinar et dictum sed, viverra non erat.</div> <!-- A remplacer par votre texte -->
   </div>
  
   <div id="contenu_onglet_3eme" class="contenu_onglet">
   <img class="autosize-gift" alt="" src="http://i.imgur.com/tEBBxqU.png">
   <div id="thanks" class="oneline">Merci M. Renard !</div>
   </div>

   <div id="contenu_onglet_4eme" class="contenu_onglet">
   <div class="paragraphe"><p>Ici j'aimerais écrire un ou plusieurs paragraphes.</p>
  
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur justo blandit, vehicula nisl nec, ultrices ex. Integer blandit elit ex. Mauris malesuada vulputate condimentum.</p></div>
  
   <div class="oneline">Tandis que là une ligne suffira =) </div>
   </div>
  
</div><div id="gelso">MERCI GELSO POUR LA SIGNATURE CODÉE ♥️</div>

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

</body>
</html>

Faites-moi savoir si ça vous plait ou si vous comptez l'utiliser strw_content

EDIT:

Quand je mets le code dans ma signature, ça m'indique "signature trop longue", comment faire?
Le code comporte trop de caractère pour être directement mis dans la signature. Vous devez donc procéder indirectement en l’hébergeant sur une page web externe et en l'intégrant grâce à une iframe.

Comment l’héberger ailleurs?
Si vous avez un forumactif, vous pouvez héberger votre signature sur une de ses pages. Vous allez dans le panneau d'administration, dans l'onglet "module" vous avez une section "HTML & JAVASCRIPT", cliquez sur "Gestion des pages HTML". Ajoutez ensuite une page HTML (mode avancé) et coller le code de la signature. Faites vos modifications (faites une copie dans le presse-papier au cas où vous auriez été déconnecté (time out)). Validez.
Vous aurez alors une url d'une page contenant uniquement la signature.

Iframe? Qu'est ce que je dois écrire dans la signature exactement?
Ceci devrait faire l'affaire:
Code:
<iframe width="550" height="270" frameborder="0" scrolling="no" src="#">
Remplacez '#' par votre url.

Si vous avez un autre problème, postez un petit message ci-dessous en oubliant pas de montrer votre résultat (en utilisant l'iframe s'il vous plait).

•••••••••••••••••••••••••••••••••••••••••••



Dernière édition par Gelso le Ven 27 Nov 2015, 19:07, édité 1 fois

AuteurMessage


Invité

avatar


Contact et infos


Message Sujet: Re: [Signature à onglets] Spring card   Ven 23 Sep 2016, 19:29

Merci pour le partage, cette signature sera indispensable pour ma reprise du RP ^^


Invité

avatar


Contact et infos


Message Sujet: Re: [Signature à onglets] Spring card   Sam 22 Oct 2016, 18:59

Merci beaucoup je vais l'utiliser ! Mais sais-tu comment modifier l'image du renard ? J'ai essayé et ça ne marche pas ;-;


Auby
Orange

avatar

Féminin
Messages : 13
Date d'inscription : 06/01/2017
Âge : 15
Logiciel graphique : Gimp

Contact et infos


Message Sujet: Re: [Signature à onglets] Spring card   Sam 06 Mai 2017, 18:19

Merciii, c'est pile ce que je recherchais, c'est parfait ! **


Contenu sponsorisé




Contact et infos


Message Sujet: Re: [Signature à onglets] Spring card   

 

[Signature à onglets] Spring card

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 2 sur 2Aller à la page : Précédent  1, 2

 Sujets similaires

-
» Personnalisation de la signature
» Signature codée avec onglets
» Disparition des onglets dans l'écran du Dispacher
» DEMANDEZ VOTRE SIGNATURE POUR LA PARTICIPATION AMICALE PSP "LE CYGNE"
» [ABANDON] Une page d'accueil à onglets

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Cocktail Graph' :: Commandes :: Libres-services :: Signatures (avec ou sans onglets)-