« [Signature à onglets] Spring card »

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

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

L'idée du fond transparent pour les onglets rend le tout vraiment très beau! *O*
Bravo pour cette signature et merci de la mettre en libre service teehee. c:

+8 points

Hello !

Merci beaucoup pour cette signature à onglet Smile

Je l'utilise actuellement pour ce forum Wink

Haha comme je connais pas grand chose en codage j'ai un peu bidouiller et finalement j'ai réussi à changer l'ordre des onglets ^^

Merci beaucoup ça va m'être utile ! :D

Superbe *-*

Merci ! Je l'utilise volontiers!

Coucou je pense l'utiliser elle est très jolie mici !!!

Woaw *-*
Alors c'est ça la magie du codage (encore un truc que je suis pas prête de savoir faire vu ma patience x) ) !
Elle est sublime, j'pense te la piquer :huhu:

Je vais l'utiliser en modifiant le texte et la police et les imagees :huhu:

Merci Gelso, c'est magnifique! *-*

Je veux bien l'utiliser aussi <3 c'est magnifique *O*

Bonsoir ^^

Alors merci pour tout :13onion:

je l'ai utilisé en changeant deux trois truc ^^ merci encore j'adore ma signature *o* :8onion11:

Bonjour ^^ merci beaucoup :13onion:

j'ai utilisé ton code ^^ changé ce qu'il fallait et voila tadaaaaaa :8onion11:

merki beaucoup j'adore ma nouvelle signature

Oh mon dieu Gelso je te vénère merci beaucoup ♥

Sujet: Re: [Signature à onglets] Spring card Mer 25 Nov 2015, 00:04

Coucou !

Tout d'abord, merci énormément pour la signature, elle est juste magnifique ! *o* Quelle chance on a que tu la mettes en libre service <3
Cependant j'ai un petit sushi... J'ai repris ta signature, modifié et ajouté plusieurs choses (ne t'en fais pas, le crédit est toujours là <3) mais si je colle le tout dans l'espace signature, ils me marquent "signature trop longue"... T___T Il n'y a pas de solution ? On ne peut pas utiliser le code iframe pour ce type de signature il me semble, non? Excuse moi si mes questions paraissent stupides, je n'y connais rien en codage XD

:yoyocoeur:

Sujet: Re: [Signature à onglets] Spring card Mer 25 Nov 2015, 11:19

Léa a écrit:: Coucou !

Tout d'abord, merci énormément pour la signature, elle est juste magnifique ! *o* Quelle chance on a que tu la mettes en libre service <3
Cependant j'ai un petit sushi... J'ai repris ta signature, modifié et ajouté plusieurs choses (ne t'en fais pas, le crédit est toujours là <3) mais si je colle le tout dans l'espace signature, ils me marquent "signature trop longue"... T___T Il n'y a pas de solution ? On ne peut pas utiliser le code iframe pour ce type de signature il me semble, non? Excuse moi si mes questions paraissent stupides, je n'y connais rien en codage XD

Pourquoi on n'pourrait-pas? Heberge-là quelque part et utilise la iframe pour la mettre dans ta signature. Devrait pas y avoir de problème (?) Ça me fait toujours plaisir de voir les transformations des membres ^^

Sujet: Re: [Signature à onglets] Spring card Mer 25 Nov 2015, 21:20

Hum... ben.. Quand j'ai voulu utiliser iframe, ça m'a affiché la page entière de mon forum au lieu de ma signature seule... Je suis pas douée XD

Sujet: Re: [Signature à onglets] Spring card Mer 25 Nov 2015, 23:35

Poste nous ton code ici avec la balise [*code][*/code], ça sera plus facile de comprendre où ça cloche ^^
Si ça t'affiche la page entière, c'est possible que ton adresse source soit mauvaise.

Par exemple

Code:: <iframe width="550" height="270" frameborder="0" scrolling="no" src="http://6elso.forumactif.fr/h2-signature-libre1">

Sujet: Re: [Signature à onglets] Spring card Jeu 26 Nov 2015, 21:07

C'est bon, le problème est réglé, merci beaucoup ! ^o^ Coeur

Le seul soucis, c'est le crédit qui -pour je ne sais quelle raison- n'est plus en dessous de la signature mais dans la signature même, en bas. Moi ça ne me dérange pas du tout, mais je me demandais pour toi ? (sachant que le crédit est moins visible du coup).... :/

Merci encore, sinon, pour cette très jolie signature *o*

Sujet: Re: [Signature à onglets] Spring card Ven 27 Nov 2015, 03:14

Parce que tu as fait en sorte que la div gelso appartienne à la div contenu au lieu d'en faire deux div indépendantes ^^

Tu as écrit :

Code:: <body>
<div id="contenu">...
<div id="gelso">...</div>
</div>
</body>

Au lieu de:

Code:: <body>
<div id="contenu">...</div>
<div id="gelso">...</div>
</body>

Je m'en fiche un peu s'il n'est pas à la bonne place, t'inquiète Smile

Contente que ça fonctionne et jolie personnalisation :p

Sujet: Re: [Signature à onglets] Spring card Ven 27 Nov 2015, 15:22

coucou

voilà moi j'ai essayé de l'utiliser mais sur ma signa ça s'affiche en longueur genre sans les images ni rien... comment ça se fait ?

Sujet: Re: [Signature à onglets] Spring card Ven 27 Nov 2015, 19:11

Je n'arrive pas à comprendre ton problème Alileanya scratch

J'ai rajouté une petite FAQ rikiki sur le premier post. Lis-la et si ça va toujours pas, montre moi ta sign pour que je comprenne mieux le problème ^^

Coucou.
Merci pour ce partage ! Je la met dans ma signa et bien sûr je garde la copyright !
Moi qui cherchais une signa' codée et bin j'ai trouvée (et sur les trois que j'ai tester seule la tiennes à bien marcher !)
Et aussi je me suis permis de la personnalisée, ça ne te dérange pas j'espère ?
Du coup merci.

Je la trouve superbe élégante, merci beaucoup ! Je ne m'y connais pas, mais je vais la tester.
Si j'ai un quoique je te dit. Smile

Edit : je ne sais pas du tout ou aller sur le forum actif, je n'ai pas saisis ? xD

Nice~ *_* good job ! C'est trop beow ! Merciiiiiiiiiiiii ♥ On peut modifier le tout à notre sauce ou pas ?

Au passage, j'adore ta signature codée actuelle. J'ai une question concernant le petit player adobe en bas. Comment peut-on l'obtenir et l'ajouter à sa signature codée ?

Sujet: Re: [Signature à onglets] Spring card

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

« [Signature à onglets] Spring card »

[Signature à onglets] Spring card

Sujets similaires

Sujets similaires

Rechercher

Résultats par : Messages Sujets
Recherche avancée

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