Ichigooo !
AccueilAccueil  Règlement  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  

Le Deal du moment : -55%
Coffret d’outils – STANLEY – ...
Voir le deal
21.99 €

Cocktail Graph' :: Commandes :: Libres-services :: FichesPartagez
 


 « Fiche pour tutoriel »

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage


Cam's
Cerise

Cam's

Féminin
Messages : 688
Date d'inscription : 14/11/2011
Âge : 25
Logiciel graphique : Adobe Photoshop CS6

Contact et infos
Fiche pour tutoriel Empty


Message Sujet: Fiche pour tutoriel   Fiche pour tutoriel Icon_minitimeJeu 14 Mar 2013, 13:11
Voici un beau code à onglets pour vos tutoriels, au design du forum !

Voir ici : http://cams.graphforum.com/h11-code-tuto

Spoiler:

Code:
<!DOCTYPE HTML>
<html>
 <meta charset="utf-8">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta http-equiv="Content-Language" content="fr" />
 
 <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
        {
               width: 65px;
   height: 30px;
 margin-left:5px;
                margin-right:10px;
                padding:3px;
                border: 3px dashed #EFECFF;
 border-radius: 30px;
                font-family : Savoye LET;
 display:inline-block;
 background: #16437F
              
                
                
                
        }
        .onglet_0
        {
                 background: #16437F;
 font-family : "Savoye LET";
                font-size:25px;
 border: 3px dashed #EFECFF;
                border-radius: 25px;
                color: white;
        }

        .onglet_0:before
        {
              content : " ";
        }

        .onglet_1
        {
                
  
 font-family : "Savoye LET";
                font-size:25px;
 border: 3px dashed #EFECFF;
                border-radius: 25px;
                color: white;            
        }
 
 #onglet_4eme
 {
 margin-top:5px;
 width: 70px;
 }
 

      

        .contenu_onglet
        {
                font-family : "Palatino Linotype";
 font-size : 16px ;
                background: url('http://img15.hostingpics.net/pics/557345pattwiner2.png');
                border: 7px solid #16437F;
 width: 700px;
 height: 1000px;
 -webkit-border-radius: 5px 5px 5px 5px;
                -moz-border-radius:5px 5px 5px 5px;
                
                padding-top:5px;
                display:none;
 color: white;
 text-shadow: 3px 3px 3px 3px white;
 }
                
                    
        
 
 #contenu_onglet_1er
 {
 font-family : "Palatino Linotype";
 font-size : 16px;
                background: url('http://img15.hostingpics.net/pics/557345pattwiner2.png');
                border: 7px solid #16437F;
 width: 550px;
 height: 700px;
 
 }
 
 #contenu_onglet_2eme
 {
 width: 550px;
 height: 400px;
 }
 
 #contenu_onglet_3eme
 {
 width: 550px;
 height: 1500px;
 }  
 
 .en_tete
 {
 width: 400px;
 height: auto;
 background: #EFECFF;
 border: 2px solid #16437F;
 border-radius: 30px 10px 30px 10px;
 font-family: Trajan Pro;
 padding-right: 5px;
 padding-left: 5px;
 color: #6D79B0;
 }
 
 
      
        </style>
 
 </head>
 
 <center><div class="en_tete">
 Tutoriel - Nom du Tutoriel
 </div></center>
 
 <div class="systeme_onglets">
        <div class="onglets">
<center><span class="onglet_0 onglet" id="onglet_1er" onmouseover="javascript:change_onglet('1er');">Rendu</span>
<span class="onglet_0 onglet" id="onglet_2eme" onmouseover="javascript:change_onglet('2eme');">Ressources</span>
<span class="onglet_0 onglet" id="onglet_3eme" onmouseover="javascript:change_onglet('3eme');">Tuto</span>

</center>
        </div>
 
 <center>
 <div class="contenu_onglet" id="contenu_onglet_1er"><div style="
  background: url('http://img15.hostingpics.net/pics/557345pattwiner2.png') center;">
  

 <br>Ici mettre le rendu
 <br />
 <br>Voici le rendu : (pas touche à mes créas)
 <br />
 <br /><center><img src="http://i.imgur.com/rSRn41S.jpg" alt="Rendu" />
 <br /><img src="http://i.imgur.com/2rbxUml.jpg" alt="Rendusign" /></center>
 ©️Codage par Cam's - Ne pas copier
 </div></div></center>
 
 <center>
 <div class="contenu_onglet" id="contenu_onglet_2eme"><div style="
  background: url('http://img15.hostingpics.net/pics/557345pattwiner2.png') center;">
  

 <br>Voici toutes les ressources dont vous aurez besoin :
 <br />
 <br>Ici mettre les ressources
 <br />
 <br />©️Codage par Cam's - Ne pas copier
 
 </div></div></center>
 
 <center>
 <div class="contenu_onglet" id="contenu_onglet_3eme"><div style="
  background: url('http://img15.hostingpics.net/pics/557345pattwiner2.png') center;">
  

 <br>Et voici le tutoriel
 <br />
 <br>Ici mettre le tuto !
 <br />
 <br />©️Codage par Cam's - Ne pas copier
 
 </div></div></center>
 
 
 
 <script type="text/javascript">
        //<!--
                var anc_onglet = '1er';
                change_onglet(anc_onglet);
        //-->
        
 </script>
 
</html>

Mini tuto :

Pour pouvoir utiliser ce code il vous faut un forum test.
Vous allez dans votre panneau d'administration, puis dans modules, en bas de la page vous cliquez sur gérer les pages html puis vous en créez une.

Dedans vous mettez le code ci-dessus et vous enregistrez. Enfin pour pouvoir l'afficher sur les autres forums, il faut avoir recours à un iframe que vous écrivez dans votre post, comme ceci :

Code:
<iframe src="http://cams.graphforum.com/h11-code-tuto"frameborder="no" width="700 px" height="1000px" style="overflow : auto"></iframe>

Et hop le tour est joué!


Dernière édition par Cam's le Jeu 14 Mar 2013, 17:16, édité 1 fois


Quizda
Cerise


Un peu plus...
Rôle / Ancien rôle : Actuelle Mini Chef Gourmande - Ancienne Administratrice
Décris-toi :
Famille et relations : La famille des Gourmands ♥ Sweety-chan, Baballe-chan, Louve' mes anciens collègues et ceux présents ♥
Quizda

Féminin
Messages : 4446
Date d'inscription : 22/05/2012
Âge : 32
Logiciel graphique : Photoshop CS6

Contact et infos
http://quizda31.deviantart.com/
Fiche pour tutoriel Empty


Message Sujet: Re: Fiche pour tutoriel   Fiche pour tutoriel Icon_minitimeJeu 14 Mar 2013, 13:16
Super ! *-*
5 points pour ta team ! Merci du partage *o*

Edit : le code ne marche pas quand je l'utilise o/ ça s'affiche pas


Manon&Ana♥
Cerise

Manon&Ana♥

Féminin
Messages : 2817
Date d'inscription : 15/02/2012
Âge : 24
Logiciel graphique : Gimpy!

Contact et infos
http://www-studio-graph.forumactif.com/
Fiche pour tutoriel Empty


Message Sujet: Re: Fiche pour tutoriel   Fiche pour tutoriel Icon_minitimeJeu 14 Mar 2013, 15:22
Superbe ! C'est magnifique !
Merci d'avoir partagé ! ♥️
Est ce possible de l'utiliser sur un autre forum ? Smile


Cam's
Cerise

Cam's

Féminin
Messages : 688
Date d'inscription : 14/11/2011
Âge : 25
Logiciel graphique : Adobe Photoshop CS6

Contact et infos
Fiche pour tutoriel Empty


Message Sujet: Re: Fiche pour tutoriel   Fiche pour tutoriel Icon_minitimeJeu 14 Mar 2013, 16:50
Ah oui Quizda il faut mettre un iframe!

Merci !

Ana bien sur tant que tu laisses le crédit (: !


ÉDIT: Quizda comme ceci

Code:
<iframe src="http://cams.graphforum.com/h11-code-tuto"frameborder="no" width="700 px" height="1000px" style="overflow : auto"></iframe>


Quizda
Cerise


Un peu plus...
Rôle / Ancien rôle : Actuelle Mini Chef Gourmande - Ancienne Administratrice
Décris-toi :
Famille et relations : La famille des Gourmands ♥ Sweety-chan, Baballe-chan, Louve' mes anciens collègues et ceux présents ♥
Quizda

Féminin
Messages : 4446
Date d'inscription : 22/05/2012
Âge : 32
Logiciel graphique : Photoshop CS6

Contact et infos
http://quizda31.deviantart.com/
Fiche pour tutoriel Empty


Message Sujet: Re: Fiche pour tutoriel   Fiche pour tutoriel Icon_minitimeJeu 14 Mar 2013, 18:51
Merci :3


Miss Snow
Orange

Miss Snow

Féminin
Messages : 1659
Date d'inscription : 04/11/2012
Âge : 24
Logiciel graphique : Gimp 2.8 et PhotoScape

Contact et infos
Fiche pour tutoriel Empty


Message Sujet: Re: Fiche pour tutoriel   Fiche pour tutoriel Icon_minitimeDim 07 Avr 2013, 00:25
Merci beaucoup! Ca va me servir beaucoup de fois je pense! Wink


Invité

Anonymous


Contact et infos
Fiche pour tutoriel Empty


Message Sujet: Re: Fiche pour tutoriel   Fiche pour tutoriel Icon_minitimeJeu 01 Aoû 2013, 19:38
Merci !


Miru !
Orange

Miru !

Féminin
Messages : 164
Date d'inscription : 21/06/2013
Âge : 23
Logiciel graphique : photofiltre7

Contact et infos
Fiche pour tutoriel Empty


Message Sujet: Re: Fiche pour tutoriel   Fiche pour tutoriel Icon_minitimeLun 05 Aoû 2013, 22:33
Merci du partage


LadyErria
Cerise


Un peu plus...
Rôle / Ancien rôle : Modératrice à l'essai
Décris-toi :
Famille et relations :
LadyErria

Féminin
Messages : 2210
Date d'inscription : 23/10/2015
Âge : 40
Logiciel graphique : photoshop cc

Contact et infos
Fiche pour tutoriel Empty


Message Sujet: Re: Fiche pour tutoriel   Fiche pour tutoriel Icon_minitimeJeu 11 Fév 2016, 21:53
Merci beaucoup ^^


Contenu sponsorisé




Contact et infos
Fiche pour tutoriel Empty


Message Sujet: Re: Fiche pour tutoriel   Fiche pour tutoriel Icon_minitime
 

Fiche pour tutoriel

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Fiche pour boutique
» Fiche pour boutique 2
» Fiche pour galerie ou ce que tu veux
» Fiche pour Recette de Cuisine
» [pour tous les niveaux] Tutoriel constellation Lupus

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Cocktail Graph' :: Commandes :: Libres-services :: Fiches-