« [Signature à onglets] Spring card »

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

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

   //
   </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).

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

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

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

Sujet: Re: [Signature à onglets] Spring card

» |Signature à onglets|Les onglets dansants !
» Signature à onglets !
» Signature à onglets
» Help ! Viendez m'aider ;~; signature à onglets...
» LS #1 by N. - Signature codée (avec onglets)

« [Signature à onglets] Spring card »

[Signature à onglets] Spring card

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Recherche avancée

Page 2 sur 2	Aller à la page : 1, 2