ACCUEIL
CREER UN FORUM
TOP FORUMS
COMMUNAUTE
FORUM D'ENTRAIDE
ESPACE MEMBRE
 
 
FAQ FAQ   Search Search     Register
It is currently Thu 17 May 2012 - 01:16 - créer un forum

[Tuto] Avoir un bloc avec des onglets.

Skip to content

Post new topic Reply to topic Goto page: 1, 2, 3 … 10, 11, 12  >
[Tuto] Avoir un bloc avec des onglets.
Author Message
Sploutch
Membre

Offline
Membre

Joined: 02 Jan 2006
Posts: 1,866
Niveau:
Point(s): 3,671
Moyenne: 1.97
Masculin
PostPosted: Fri 11 May 2007 - 12:20    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
Informations


Informations sur le tutoriel
Nom Un bloc avec plusieurs onglets.
Auteur By contact :Via ma fiche
Version1.0
Description
Un fois installé, ce script vous permet d'avoir un petit bloc contenant plusieurs onglets cliquable, avec à l'intérieur de chacun la possibilité d'y mettre du texte/images etc.
ExempleRegardez le bloc au titre de : Bloc avec Onglets ! [test] présent sur cette page ICI Voici un autre exemple ICI ou vous pouvez mieux vous rendre compte de ce qui est possible de faire. (Bloc qui est en ligne ?) Un autre style de ce qu'il est possible de faire avec cette capture d'écran ICI
Défaut(s)
  • Aucun au contraire ce bloc et totalement personnalisable et s’intègre parfaitement au thème de votre forum.

Difficulté
  • Installation: novice
  • Compréhension: initié

Templates à modifier
  • Overall_footer.tpl pour un affichage au bas de vos pages.
  • Overall_header.tpl pour un affichage en haut de vos pages.
  • OU TOUT AUTRES TEMPLATES DE VOTRE CHOIX

Testé sur
  • Navigateurs
    • Navigateur Firefox
    • Navigateur Internet explorer
    • Navigateur Opéra

  • Thèmes Xooit
    • SubMarine
    • PhpBB


A utiliser avec
  • Aucun en particulier, mais vous pouvez consulter ma liste de tutoriel ICI

A ne pas utiliser avec
  • Aucun particulièrement

Notes
    .
  • Attention dans l'exemple, le bloc avec des onglets est mis dans un bloc également. Donc ne pas en tenir compte
  • Comment mettre ce bloc dans un modul. Voir Tutoriel ICI





Installation
Il est conseillé d'effectuer une sauvegarde avant de réaliser ce tutoriel.Pour cela, cliquez sur le champs de texte et appuyez sur Ctrl+A et Ctrl+C. Ouvrez votre éditeur de texte préféré et faites Ctrl+V.


Ouvrez le template
Overall_header.tpl (pour affichage sur tout le haut de vos pages)
ou
Overall_footer.tpl (Pour affichage sur tout le bas de vos pages)

Cherchez
Code: Sélectionner - Agrandir

 L’endroit voulu pour votre affichage en haut ou en bas de la template



|Ajoutez |
Code: Sélectionner - Agrandir


<center><table width="100%" cellspacing="1" border="0" class="forumline">
            <tbody><tr>
            <th nowrap="nowrap" class="thTop" />
            </tr>
            <tr>
            <td class="row1"><center>
            <HTML>
            <HEAD>


            <style type="text/css">
            .colonnechamp {
             BORDER-TOP: 1px inset #F5F8FA;
             BORDER-BOTTOM: medium inset;
             BORDER-LEFT: 1px inset #F5F8FA;
             BORDER-RIGHT: 1px inset #26313B;
             BORDER-BOTTOM: medium none;
             FONT-SIZE: 11px;
             COLOR: #000000;
             FONT-FAMILY: verdana;
             BACKGROUND-COLOR: #FFCC66;
             TEXT-ALIGN: left
            }
            .tableheader1 {
             font-family: "Microsoft Sans Serif", Arial, Verdana;
             font-size: 12px;
             font-style: normal;
             line-height: normal;
             font-weight: bold;
             color: #FFFF00;
             height:30px;
             text-align: center;
             white-space: normal;
             border: 1px Aucune;
             background-color: #CCD9EC;
            }

            .colonnechamp2 {
             font-family: "Microsoft Sans Serif", Arial, Verdana;
             font-size: 12px;
             BORDER-TOP: #F5F8FA 1px solid;
             BORDER-BOTTOM: #26313B 1px solid;
             BORDER-LEFT: #F5F8FA 1px solid;
             BORDER-RIGHT: #26313B 1px solid;
             border-bottom: 1px solid #7D7D7D;
             FONT-SIZE: 11px; COLOR: #000000;
             FONT-FAMILY: verdana;
             BACKGROUND-COLOR: #EAEFF7;
            }

            input, textarea
            {
             border:1px solid #EAEFF7; background-image :url('/images/bgin_tEX.gif');
             background-color :#F0F3F9;
             color :#000;
             font-family :Verdana,Arial,Helvetica,sans-serif;
             font-size :11px;
             
            }

            .tablegen2 {
             font-family: "Microsoft Sans Serif", Arial, Verdana;
             font-size: 12px;
             color: #000000;
             background-color: #CCD9EC;
             text-align: left;
             border-top: 1px;
             border-right: 1px;
             border-bottom: 1px dotted #DEE7F3;
             border-left: 1px;
            }

            .tablegen2b {
             font-family: "Microsoft Sans Serif", Arial, Verdana;
             font-size: 12px;
             color: #000000;
             background-color: #CCD9EC;
             text-align: left;
             border-top: 1px;

             border-bottom: 1px;
             border-left: 1px;
            }

            .tablegen2c {
             font-family: "Microsoft Sans Serif", Arial, Verdana;
             font-size: 12px;
             color: #000000;
             background-color: #CCD9EC;
             text-align: left;
             border-top: 1px;
             border-right: 1px inset;
             border-bottom: 1px;
             border-left: 1px;
            }


            .tablegenleft {
             font-family: "Microsoft Sans Serif", Arial, Verdana;
             font-size: 12px;
             color: #000000;
             background-color: #CCD9EC;
             text-align: left;
             border-top: 1px Aucune;
             border-right: 0px inset;
             border-bottom: 1px dotted #DEE7F3;
             border-left: 1px inset;
            }
            select {
             font-family: "Microsoft Sans Serif", Arial, Verdana;
             font-size: 10px;
             font-style: normal;
             line-height: 1px;
             background-image: url('admin/modules/topics_ex/bgin.gif');
             border: 1px solid #EAEFF7;
             height: auto;
             width: auto
            }
            .tableonglet {
             font-family: "Microsoft Sans Serif", Arial, Verdana;
             font-size: 12px;
             border: 0px solid;
             margin: 0px;
             padding: 0px;
             width: 100%;
             color: #000000;
             border-collapse: collapse;
            }
            .tableheader2 {
             font-family: "Microsoft Sans Serif", Arial, Verdana;
             font-size: 12px;
             BORDER-TOP: #F5F8FA 1px solid;
             BORDER-BOTTOM: #26313B 1px solid;
             BORDER-LEFT: #F5F8FA 1px solid;
             BORDER-RIGHT: #26313B 1px solid;
             border-bottom: 1px solid #7D7D7D;
             FONT-SIZE: 11px;
             COLOR: #000000;
             FONT-FAMILY: verdana;
             BACKGROUND-COLOR: #EAEFF7;
             font-style: normal;
             font-variant: small-caps;
             text-align: center;
            }
            .fontadmintoics {
             font-family: "Microsoft Sans Serif", Arial, Verdana;
             font-size: 12px;
             font-style: normal;
             text-align: justify;
            }
.Style2 {color: #FFFFFF}
            a:link {
   color: #000000;
}
a:visited {
   color: #FFFFFF;
}
</style>
            <SCRIPT language="javascript" type="text/javascript">
            <!-- Definir les Styles des onglets -->
            <!--BEG_HEAD
             function Onglet(nom, tailleX, tailleY, tailleXOg, tailleYOg, initOg ){
               this.nom = nom;
               this.tailleX = tailleX;
               this.tailleY = tailleY;
               this.tailleXOg = tailleXOg;
               this.tailleYOg = tailleYOg;
               this.onglets = new Array();
               this.currentOnglet = null;
               this.currentSelOnglet = null;
               this.initOg = initOg;
               this.clsEna = "ongletTextEna";
               this.clsDis = "ongletTextDis";
               this.clsSp = "ongletSpace";
               this.clsMiddle = "ongletMiddle";
               this.clsMain = "ongletMain";
               this.colorOver = "#F7810F";
               this.add = addOnglet;
               this.displayHeader = displayOngletHeader;
               this.displayFooter = displayOngletFooter;
             
               this.changeOnglet = changeOnglet;
               this.onOngletOver = onOngletOver;
               this.onOngletOut = onOngletOut;
             }
             
             function addOnglet( og ){
              this.onglets[this.onglets.length] = og;
             }
             
             function displayOngletHeader(){
              var html = "";
              html += "<TABLE width=" + this.tailleX + " height=" + this.tailleY + " cellspacing=0 cellpadding=0>";
              html += "<TR><TD><TABLE cellpadding=0 cellspacing=0 height=" + this.tailleYOg + " width=100%><TR>";
               
              for( var i=0; i < this.onglets.length; i++ ){
                  html += "<TD width=" + this.tailleXOg + " height=" + this.tailleYOg + " title=\"" + this.onglets[i].libOg + "\" id=ogO" + this.nom + i + " class=" + ((this.initOg == i)?this.clsEna:this.clsDis) + " onclick=\"" + this.nom + ".changeOnglet(this, 'og_" + this.nom + i + "')\" onmouseover=\"" + this.nom + ".onOngletOver(this)\" onmouseout=\"" + this.nom + ".onOngletOut(this)\">" + this.onglets[i].titreOg + "</TD>";
                  html += "<TD class=" + this.clsSp + " width=5>&nbsp;</TD>";
              }
              html += "<TD class=" + this.clsSp + ">&nbsp;</TD></TR><TR><TD height=5 colspan=" + (this.onglets.length*2 + 1) + " class=" + this.clsMiddle + ">&nbsp;</TD></TR></TABLE></TD></TR><TR><TD class=" + this.clsMain + " height=" + (this.tailleY - this.tailleYOg)+ ">";
              document.write(html);
             }
             
             function displayOngletFooter(){
              var html = "";
              html += "</TD></TR></TABLE>";
              document.getElementById("og_" + this.nom + this.initOg).style.display = "";
              this.currentOnglet = document.getElementById("og_" + this.nom + this.initOg);
              this.currentSelOnglet = document.getElementById("ogO" + this.nom + this.initOg);
              document.write(html);
             }
             
             function OngletItem(titreOg, libOg ){
              this.titreOg = titreOg;
              this.libOg = libOg;
             }
             
             function changeOnglet( srcOg, srcTab ){
              this.currentSelOnglet.className = this.clsDis;
              this.currentOnglet.style.display = "none";
              this.currentSelOnglet.style.color="";
              this.currentSelOnglet = srcOg;
              this.currentOnglet = document.getElementById(srcTab);
              this.currentSelOnglet.className = this.clsEna;
              this.currentOnglet.style.display = "";
             }
             
             function onOngletOver( srcOg ){
              if( srcOg != this.currentSelOnglet ){
               srcOg.style.cursor = "hand";
               srcOg.style.color = this.colorOver;
              }else{
               srcOg.style.cursor='default';
               srcOg.style.color = "";
              }
             }
             
             function onOngletOut( srcOg ){
              srcOg.style.color="";
             }
             
             function ongletstyle(){
             // Ici définition et personnalisation de l'onglet !
              mystyle="<STYLE>";
             
              // Les entete d'onglet
              // Définition onglet sélectionné
mystyle="<STYLE>";
// Les entete d'onglet
// Définition onglet sélectionné
mystyle +=".ongletTextEna {BORDER-TOP: #F5F8FA 1px solid; BORDER-BOTTOM: #26313B 1px solid; BORDER-LEFT: #F5F8FA 1px solid; BORDER-RIGHT: #26313B 1px solid; BORDER-BOTTOM: medium none; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: verdana; BACKGROUND-COLOR: #FFFFFF; TEXT-ALIGN: left style=overflow:scroll} ";
// Définition Onglet non sélectionné
mystyle +=".ongletTextDis {BORDER-TOP: #F5F8FA 1px solid; BORDER-BOTTOM: #26313B 1px solid; BORDER-LEFT: #F5F8FA 1px solid; BORDER-RIGHT: #26313B 1px solid; BORDER-BOTTOM: medium none; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: verdana; BACKGROUND-COLOR: #FFFFFF; TEXT-ALIGN: left}";
// Milieu
// Trait espace entre entete onglet et espace entre corpt et enetete
mystyle +=".ongletSpace {BORDER-BOTTOM: #80add6 1px solid}";
//espace entre entete onglet et corp des onglets !
mystyle +=".ongletMiddle {BORDER-RIGHT: #26313B 1px solid; BORDER-TOP: medium none; FONT-SIZE: 1px; BORDER-LEFT: #F5F8FA 1px solid; BORDER-BOTTOM: #000 0px solid; BACKGROUND-COLOR: #E3EE4E}";
// corp de l'onglet
// Corp de l'onglet
mystyle +=".ongletMain {BORDER-TOP: #26313B 0px solid; BORDER-BOTTOM: #26313B 1px solid; BORDER-LEFT: #F5F8FA 1px solid; BORDER-RIGHT: #26313B 1px solid; BACKGROUND-COLOR: #A19E9E}";
mystyle +="</STYLE>";
// Les valeurs de ces éléments sont modifiable ? souhait sauf le nom de la classe !
document.write(mystyle);

              // Les valeurs de ces éléments sont modifiable à souhait sauf le nom de la classe !
              document.write(mystyle);
             } // fin de func JS
             ongletstyle();
             var monOnglet = new Onglet("monOnglet", 900, 30, 150, 20, 0);

             monOnglet.add(new OngletItem("&nbsp;<img src=http://nsa25.casimages.com/img/2011/01/08/110108113549142983.png>", "Dfp's News"));
             monOnglet.add(new OngletItem("&nbsp;<img src=http://nsa25.casimages.com/img/2011/01/08/11010811374365821.png>", "Matchs"));
             monOnglet.add(new OngletItem("&nbsp;<img src=http://nsa25.casimages.com/img/2011/01/08/110108113846937785.png>", "Résultats"));
             monOnglet.add(new OngletItem("&nbsp;<img src=http://nsa26.casimages.com/img/2011/01/08/110108114023333111.png>", "Serveur DFP"));
             monOnglet.add(new OngletItem("&nbsp;&nbsp;By sploutch&nbsp;&nbsp;&nbsp;<img src=http://img5.xooimage.com/files/3/c/4/final-1327eb.gif>", "Options"));
              //monOnglet.displayHeader();
            //  End -->
                </SCRIPT>

            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></HEAD>
            <BODY>
            <SCRIPT language="javascript" type="text/javascript">
               
              monOnglet.displayHeader();
            //  End -->
                </SCRIPT>

            <!--  onglet 0-->
            <div id=og_monOnglet0 style="DISPLAY: none;top:0px;left:0px;width:auto; height:auto">
             <table border="0" cellpadding="3" cellspacing="0"  align="center">
               <tr>
             <td valign="top">
            <!--  texte à modifier  -->
                         
             les maps de match amical ont été choisies (in ze tutur, in ze momory of ze dirt, doggy ztyle)<br />

VICTOIRE DE LA POULE G !!!!!<br />

deuxième serveur pour train et matchs en ligne !!<br />

topic <a href="http://dfpteam.xooit.fr/t351-2e-serveur.htm#p6381">ici</a><br />

Inscription à la TNT DIRT 2011<br />

Toutes les explications <a href="http://dfpteam.xooit.fr/t243-TNT-Dirt2011.htm">ici</a><br />

Grouillez vous si vous voulez faire le prologue (ne compte pas pour le classement final)
            </br />
            <!--  fin du texte à modifier  -->
             </td>
               </tr>
             </table>
            </div>
            <!--  fin onglet 0 -->

            <!--  onglet 1-->
            <div id=og_monOnglet1 style="DISPLAY: none;top:0px;left:0px;width:auto; height:auto">
             <table border="0" cellpadding="3" cellspacing="0"  align="center">
               <tr>
             <td valign="top">
            <!--  texte à modifier  -->
            <br />
             SLIP J1 DFP vs XRT date ? définir (surement samedi ou dimanche)</br \>
Joueurs dispo:Godii,Slumpy,Keclem,Crystal,Migli,Saifer</br \>

LU à venir:</br \>

Topic de la rencontre <a href="http://dfpteam.xooit.fr/t331-S-L-I-P-DFP-vs-XRT.htm">ici</a></br \>

TNT DIRT prologue les 14/15/16 janvier</br \>

topic de la rencontre <a href="http://dfpteam.xooit.fr/t350-TNT-DIRT-2011-Prologue-des-14-15-et-16-janvier.htm">ici</a></br \>

Match amical vs AML 21 janvier en 6vs6</br \>

LU à venir</br \>
Topic de la rencontre <a href="http://dfpteam.xooit.fr/t314-Demande-de-match-fun-AML-animal-s-vs-DfP.htm">ici </a>
            </br>
            <!--  fin de texte à modifier  -->
             </td>
               </tr>
             </table>
            </div>
            <!--  fin onglet 1 -->

            <!--  onglet 2-->
            <div id=og_monOnglet2 style="DISPLAY: none;top:0px;left:0px;width:auto; height:auto">
             <table border="0" cellpadding="3" cellspacing="0"  align="center">
               <tr>
             <td valign="top">
             <!--  texte à modifier  -->
              XRT J5 vs XDT² victoire 15/5 \o/               
             <!--  fin de texte à modifier  -->
             </td>
               </tr>
             </table>
            </div>
            <!--  fin onglet 2 -->
            <!--  onglet 3-->
            <div id=og_monOnglet3 style="DISPLAY: none;top:0px;left:0px;width:auto; height:auto">
             <table border="0" cellpadding="3" cellspacing="0"  align="center">
               <tr>
             <td valign="top">
             <!--  texte à modifier  -->
             <br \>
             <a href="tmtp://#join=dfp_dirt"> Rejoindre le serveur de la DFP </a>
             </br \>
             <a href="tmtp://#addbuddy=r.i._asimov"> Ajouter Slumpy dans votre liste d'amis </a>       
             </br \> 
             <!--  fin de texte à modifier  -->
             </td>
             </td>
               </tr>
             </table>
            </div>
            <!--  fin onglet 3 -->
           
        <!-- INFO:*************ATTENTION ne pas modifier cet onglet ! Pour tout souhait de modification, merci de prendre contact avec moi avant  ! ********* ! -->   
        <!--  onglet 4-->
            <div id=og_monOnglet4 style="DISPLAY: none;top:0px;left:0px;width:auto; height:auto">
             <table border="0" cellpadding="3" cellspacing="0"  align="center">
               <tr>
             <td valign="top">
           <!--  texte à modifier  -->
           <td width="65" class="row1"><td onClick="javascript:alert('Validez votre choix et patientez vous allez être redirigé  -  WEBMASTER : NE PAS MODIFIER LE CODE ! Merci. ')">
<span class="Style2"><img src="http://img4.xooimage.com/files/0/0/9/menu_cert_non_gage-115be70.png" border="0">&nbsp;<b>Message :</b><br>
<b> Onglet destiné à me faire connaitre.&nbsp;Cliquez pour me visiter :</b></span><br><br>
<a href="http://aubonendroit.com.xooit.com/portal.php"><img src="http://img3.xooimage.com/files/3/0/8/icon_latest_reply-37cbc.gif" width="7" height="7" border="0"></a>&nbsp; <a href="http://aubonendroit.com.xooit.com/portal.php" target="_blank"><img src="http://img47.xooimage.com/files/a/d/a/signaturesploutch-17cd429.png" width="40" height="40" border="0">&nbsp;Sploutch-land</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://sploutchsploutch.free.fr"><img src="http://img3.xooimage.com/files/3/0/8/icon_latest_reply-37cbc.gif" width="7" height="7" border="0"></a>&nbsp; <a href="http://sploutchsploutch.free.fr" target="_blank"><img src="http://img46.xooimage.com/files/d/e/b/robot-1359f8d.png" width="40" height="40" border="0">&nbsp;Site des téléchargements</a><br />
<a href="http://www.sploutchrecherche.fr.nf/"><img src="http://img3.xooimage.com/files/3/0/8/icon_latest_reply-37cbc.gif" width="7" height="7" border="0"></a>&nbsp; <a href="http://sploutchgratuits.site.voila.fr/GoogleContact" target="_blank"><img src="http://img2.xooimage.com/files/2/0/8/mail_receive-fe6aa0.png" width="40" height="40" border="0">Me contacter</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.sploutchrecherche.fr.nf/"><img src="http://img3.xooimage.com/files/3/0/8/icon_latest_reply-37cbc.gif" width="7" height="7" border="0"></a>&nbsp; <a href="http://www.sploutchrecherche.fr.nf/" target="_blank"><img src="http://img10.xooimage.com/files/b/4/f/kappfinder-183be7.png" width="40" height="40" border="0">&nbsp;Site recherche-Net</a> <br />
<a href="https://www.paypal.com/fr/cgi-bin/webscr?cmd=_flow&SESSION=Fok0CFix9NvV3A-LuqUEi4zKEpauOQ-rqzeZWPQaYoxqHzf806vWT-F-sRO&dispatch=50a222a57771920b6a3d7b606239e4d529b525e0b7e69bf0224adecfb0124e9b61f737ba21b08198ad5733caaf944cbac24b2728ea935a7c"><img src="http://img3.xooimage.com/files/3/0/8/icon_latest_reply-37cbc.gif" width="7" height="7" border="0"></a>&nbsp;&nbsp; <a href="https://www.paypal.com/fr/cgi-bin/webscr?cmd=_flow&SESSION=Fok0CFix9NvV3A-LuqUEi4zKEpauOQ-rqzeZWPQaYoxqHzf806vWT-F-sRO&dispatch=50a222a57771920b6a3d7b606239e4d529b525e0b7e69bf0224adecfb0124e9b61f737ba21b08198ad5733caaf944cbac24b2728ea935a7c" target="_blank"><img src="http://img5.xooimage.com/files/4/a/c/paypal_mark_60x38-26bfec.gif" alt="Image"width="35" height="30" border="0"> Me faire un don</a>&nbsp;&nbsp;&nbsp;<a href="http://aubonendroit.com.xooit.com/portal.php"><img src="http://img3.xooimage.com/files/3/0/8/icon_latest_reply-37cbc.gif" width="7" height="7" border="0"></a>&nbsp; <a href="http://sploutchgratuits.voila.net/Radios.html" target="_blank"><img src="http://img43.xooimage.com/files/d/8/b/radio-188239d.gif" width="40" height="40" border="0">&nbsp;Radio Live</a><br />
             <br /><a href="http://www.copyrightfrance.com/phtml/p_logo1.php" title="Attention sous Copyright. Tout droits réservé" target="_blank" class="Style6"><font size="1">Copyright </font></a>&nbsp;
              <script type="text/javascript">
    today=new Date();
    y0=today.getFullYear();
    // end hiding --->
              </script>
              <span class="Style2"><font size="1">2008&nbsp;-
              <script type="text/javascript">
              </script>
              <script type="text/javascript"><!--today=new Date();
    y0=today.getFullYear();
    // end hiding --->
              </script>
              <script type="text/javascript">
    <!--- Hide from old browsers
    document.write(y0);
    // end hiding --->
              </script>
              </font>
              <font size="1">- Design by Sploutch - All Right Reserved ©</font><font size="1"> </font></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.copyrightfrance.com/phtml/p_logo1.php" target="_blank"><img src="http://img10.xooimage.com/files/a/9/f/logsc7-f2cf1.gif" border="0"></td></td>
            <br />
            <!-- INFO:*************ATTENTION ne pas modifier a partir de cette ligne, car votre bloc sera déformé et ne s'affichera pas correctement sur votre page ! Pour tout souhait de modification, merci de prendre contact avec moi avant  ! *********  -->
                            <td width="65" class="row1"><td onClick="javascript:alert('Validez votre choix et patientez vous allez être redirigé  -  WEBMASTER : NE PAS MODIFIER LE CODE ! ')"><div align="right"><span class="Style2"><font size="1"></font><a href="http://sploutchgratuits.site.voila.fr/GoogleContact" target="_blank"><img border="0" src="http://img47.xooimage.com/files/a/d/a/signaturesploutch-17cd429.png" /></a></span></div></td></td>
                     </td>
             
          </tr>
</div>
            </table>
           
            <!--  fin onglet 4 -->

              <script language="javascript" type="text/javascript">
            monOnglet.displayFooter();
            </script></BODY></HTML></center>

           

           
            </td>
            </tr>
            </tbody></table></center>



Sauvegardez


-Modifiez bien sur les titres des onglets ainsi que le contenue de ceux-ci.

-Vous pouvez tout modifier avec quelques connaissances html (couleur, taille, police etc)
-Vous pouvez également augmenter la taille du bloc ( contours du bloc ou il y à les onglets) en modifiant le % ici dans le script qui est de 30% (vous ne pouvez dépasser les 100 % )
Mettre les onglet de couleur différente.
Cherchez :
Code: Sélectionner - Agrandir

mystyle +=".ongletTextEna {BORDER-TOP: #F5F8FA 1px solid; BORDER-BOTTOM: #26313B 1px solid; BORDER-LEFT: #F5F8FA 1px solid; BORDER-RIGHT: #26313B 1px solid; BORDER-BOTTOM: medium none; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: verdana; BACKGROUND-COLOR: #006600; TEXT-ALIGN: left}";


Modifiez le code couleur a cet endroit :
Code: Sélectionner - Agrandir

BACKGROUND-COLOR: #006600;

Exemple ici

Changer la couleur des titres des onglets ( par exemple : Acceuil )
Cherchez :
Code: Sélectionner - Agrandir

.tableonglet {
font-family: "Microsoft Sans Serif", Arial, Verdana;
font-size: 12px;
border: 0px solid;
margin: 0px;
padding: 0px;
width: 100%;
color: #000000;
border-collapse: collapse;
}

Modifiez le code couleur a cet endroit :
Code: Sélectionner - Agrandir

color: #000000;


Modifier les titres des onglets
Cherchez :
Code: Sélectionner - Agrandir

 modifier les titres
    monOnglet.add(new OngletItem("&nbsp;Accueil&nbsp;", "Accueil"));
         monOnglet.add(new OngletItem("&nbsp;Votre titre ICI&nbsp;", "Cat&eacute;gorie"));
         monOnglet.add(new OngletItem("&nbsp;Téléchargements gratuit !", "Article"));
         monOnglet.add(new OngletItem("&nbsp;Le sploutch-site&nbsp;", "Options"));


Modifiez (Accueil,Votre titre ICI,Téléchargements gratuit !,Le sploutch-site) :
Code: Sélectionner - Agrandir

&nbsp;Accueil&nbsp;
&nbsp;Votre titre ICI&nbsp;
&nbsp;Téléchargements gratuit !
&nbsp;Le sploutch-site&nbsp;



Modifier le corp de l'onglet :
Cherchez :
Code: Sélectionner - Agrandir

    ongletstyle();
       var monOnglet = new Onglet("monOnglet", 500, 100, 150, 20, 0);


Modifiez la valeur :
Code: Sélectionner - Agrandir

500


Ajouter un onglet (ou plus)
Cherchez :
Code: Sélectionner - Agrandir

 monOnglet.add(new OngletItem("&nbsp;Accueil&nbsp;", "Accueil"));
 monOnglet.add(new OngletItem("&nbsp;Votre titre ICI&nbsp;", "Cat&eacute;gorie"));
 monOnglet.add(new OngletItem("&nbsp;Téléchargements gratuit !", "Article"));
 monOnglet.add(new OngletItem("&nbsp;Le sploutch-site&nbsp;", "Options")); 

Après un retour à la ligne, ajoutez :
Code: Sélectionner - Agrandir

    monOnglet.add(new OngletIte("&nbsp;Le sploutch-site&nbsp;;", "Options"));

Cherchez :
Code: Sélectionner - Agrandir

<!--  onglet 3-->
<div id=og_monOnglet3 style="DISPLAY: none;top:0px;left:0px;width:auto; height:auto">
 <table border="0" cellpadding="3" cellspacing="0"  align="center">
   <tr>
 <td valign="top">
 Le sploutch-site !
             <a href="http://aubonendroit.com.xooit.com" target="_blank"> Cliquez-ICI<a/>
 </td>
 </td>
   </tr>
 </table>

</div>
<!--  fin onglet 3 -->

Après un retour à la ligne, ajoutez :
Code: Sélectionner - Agrandir

    <!--  onglet 3--><div id=og_monOnglet3 style="DISPLAY: none;top:0px;center:0px;width:auto; height:auto"> 
     <table border="0" cellpadding="3" cellspacing="0"  align="center">
       <tr> 
     <td valign="top">
    texte
     </table>
    </div>
    <!--  fin onglet 3 -->


Une fois fait, n'oubliez pas de changer le N° de l'onglet à ces emplacements :
Code: Sélectionner - Agrandir


<!--  onglet 3-->
<div id=og_monOnglet3


Dans l'exemple le N° sera de 4 et ainsi de suite suivant le nombre d'onglet ajouté.


Fin du tutoriel By
_______________________

[MOD] Eau | Sploutch-land | Formulaire d'aide aux tutos | Recherche-Net | Aqua-Tim |
Listing my tutos | Radio | Site | Contact | Smileys Fun | Arcades | Proposez un logiciels |

Last edited by Sploutch on Thu 24 Feb 2011 - 18:49; edited 23 times in total
Forum
Author Message
themalin
Membre

Offline
Membre

Joined: 19 Apr 2006
Posts: 30,853
Point(s): 70,170
Moyenne: 2.27
Firefox Mac
PostPosted: Fri 11 May 2007 - 13:49    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
bonjour
je viens de voir
excelent le bloc onglet
mais sur ton exemple quand on clique sur le télécharger c'est normal d'avoir une pop up
_______________________
Forum
Author Message
Sploutch
Membre

Offline
Membre

Joined: 02 Jan 2006
Posts: 1,866
Niveau:
Point(s): 3,671
Moyenne: 1.97
Masculin
PostPosted: Fri 11 May 2007 - 13:54    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
Sur quel "télécharger" tu parles ?

Y à pas de télécharger !

Y à 4 onglets !

1) Accueil
2) Votre titre ICI
3) Téléchargements gratuit !
4) Le sploutch-site

Mais pas télécharger ...

Dans le code donné dans le tuto aucune popup n'est mise !
_______________________

[MOD] Eau | Sploutch-land | Formulaire d'aide aux tutos | Recherche-Net | Aqua-Tim |
Listing my tutos | Radio | Site | Contact | Smileys Fun | Arcades | Proposez un logiciels |
Forum
Author Message
themalin
Membre

Offline
Membre

Joined: 19 Apr 2006
Posts: 30,853
Point(s): 70,170
Moyenne: 2.27
Firefox Mac
PostPosted: Fri 11 May 2007 - 13:56    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
en cliquant sur votre titre ici j'ai eu une pop up qui s'est ouverte
_______________________
Forum
Author Message
Sploutch
Membre

Offline
Membre

Joined: 02 Jan 2006
Posts: 1,866
Niveau:
Point(s): 3,671
Moyenne: 1.97
Masculin
PostPosted: Fri 11 May 2007 - 13:58    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
C'est complètement impossible, l'onglet et le contenue de celui-ci est vide !

Quelle était cette pub ? (popup)
_______________________

[MOD] Eau | Sploutch-land | Formulaire d'aide aux tutos | Recherche-Net | Aqua-Tim |
Listing my tutos | Radio | Site | Contact | Smileys Fun | Arcades | Proposez un logiciels |
Forum
Author Message
themalin
Membre

Offline
Membre

Joined: 19 Apr 2006
Posts: 30,853
Point(s): 70,170
Moyenne: 2.27
Firefox Mac
PostPosted: Fri 11 May 2007 - 14:02    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
je n'ai pas regarder mais bon je pense que ça vient plus du reste du forum vu que j'au des pop ups qui se lancent quand on va sur ton forum ça à du s'ouvrir au moment ou j'ai cliquer dessus donc ça c'est confondu
_______________________
Forum
Author Message
Sploutch
Membre

Offline
Membre

Joined: 02 Jan 2006
Posts: 1,866
Niveau:
Point(s): 3,671
Moyenne: 1.97
Masculin
PostPosted: Fri 11 May 2007 - 14:05    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
C'est tout a fait sa !
Je garantit que ce script ne contient aucune popup !
_______________________

[MOD] Eau | Sploutch-land | Formulaire d'aide aux tutos | Recherche-Net | Aqua-Tim |
Listing my tutos | Radio | Site | Contact | Smileys Fun | Arcades | Proposez un logiciels |
Forum
Author Message
Bulbiteam
Membre

Offline
Membre

Joined: 14 Jun 2007
Posts: 37
Niveau:
Point(s): 68
Moyenne: 1.84
Firefox Windows XP (ou plus ancien) Masculin Capricorne (22déc-19jan) 狗 Chien
PostPosted: Sun 17 Jun 2007 - 13:43    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
heu quesqu'il faut modifié je comprend pas
Forum
Author Message
themalin
Membre

Offline
Membre

Joined: 19 Apr 2006
Posts: 30,853
Point(s): 70,170
Moyenne: 2.27
Firefox Mac
PostPosted: Sun 17 Jun 2007 - 15:09    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
bonjour
tu dois créer un bloc custom pour cela
panneau admin
portail
gerer les module
tu crée un nouveau module et ensuite tu suis le tuto en mettant le code donné
_______________________
Forum
Author Message
Bulbiteam
Membre

Offline
Membre

Joined: 14 Jun 2007
Posts: 37
Niveau:
Point(s): 68
Moyenne: 1.84
Firefox Windows XP (ou plus ancien) Masculin Capricorne (22déc-19jan) 狗 Chien
PostPosted: Sun 17 Jun 2007 - 17:21    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
oui mais je reussi pas a le faire je le créé est il y a rien
Forum
Author Message
themalin
Membre

Offline
Membre

Joined: 19 Apr 2006
Posts: 30,853
Point(s): 70,170
Moyenne: 2.27
Firefox Mac
PostPosted: Sun 17 Jun 2007 - 17:22    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
tu crée le module est il n'y a rien??
c'est normal ensuite tu cliques sur <>
puis tu mets le code donné

puis gérer les pages
gérer
tu insères le module créer sur ton portail
_______________________
Forum
Author Message
Bulbiteam
Membre

Offline
Membre

Joined: 14 Jun 2007
Posts: 37
Niveau:
Point(s): 68
Moyenne: 1.84
Firefox Windows XP (ou plus ancien) Masculin Capricorne (22déc-19jan) 狗 Chien
PostPosted: Sun 17 Jun 2007 - 17:23    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
bon sa remarche mais je trouve pas se qu'il faut modifié je cherche mais sur les autre tuto souvent il y a des couleurs mais le je bloque si tu veux voir mon forum :http://bulbiteam.leforum.eu/portal.php?pid=1

Edit : J'ai enfin trouvé mais merci de ton aide
Forum
Author Message
rupti
Membre

Offline
Membre

Joined: 20 Apr 2006
Posts: 2
Point(s): 3
Moyenne: 1.50
PostPosted: Wed 12 Sep 2007 - 02:11    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
Bonsoir,

Je n'arrive pas à modifier la taille du corps de la table correspondant à l'onglet. Autrement dit, là où apparait le paragraphe à écrire. Cela fait maintant plus de 4h que je cherche et j'arrive a bout !!! lol Sad

Comment faire ?
Forum
Author Message
Sploutch
Membre

Offline
Membre

Joined: 02 Jan 2006
Posts: 1,866
Niveau:
Point(s): 3,671
Moyenne: 1.97
Masculin
PostPosted: Wed 12 Sep 2007 - 08:46    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
Bonjour,
Dans le script, les explications sont données pour les différentes options et possibilité.
Exemple (entre autre) :
Code: Sélectionner - Agrandir
      // corp de l'onglet
      // Corp de l'onglet
      mystyle +=".ongletMain {BORDER-TOP: #26313B 0px solid; BORDER-BOTTOM: #26313B 1px solid; BORDER-LEFT: #F5F8FA 1px solid; BORDER-RIGHT: #26313B 1px solid; BACKGROUND-COLOR: #CCD9EC}";
      mystyle +="</STYLE>";
      // Les valeurs de ces éléments sont modifiable à souhait sauf le nom de la classe !

_______________________

[MOD] Eau | Sploutch-land | Formulaire d'aide aux tutos | Recherche-Net | Aqua-Tim |
Listing my tutos | Radio | Site | Contact | Smileys Fun | Arcades | Proposez un logiciels |
Forum
Author Message
Publicite Xooit

Offline




PostPosted: Wed 12 Sep 2007 - 08:46    Post subject: Publicite Xooit
Author Message
rupti
Membre

Offline
Membre

Joined: 20 Apr 2006
Posts: 2
Point(s): 3
Moyenne: 1.50
PostPosted: Wed 12 Sep 2007 - 12:52    Post subject: [Tuto] Avoir un bloc avec des onglets. Reply with quote
Merci, j'ai fini par trouver vers 4h30 du matin lol Smile . Je n'avais en fait pas fait le rapprochement entre

Code: Sélectionner - Agrandir
 <!--BEG_HEAD
   function Onglet(nom, tailleX, tailleY, tailleXOg, tailleYOg, initOg ){ 


et

Code: Sélectionner - Agrandir
ongletstyle();
   var monOnglet = new Onglet("monOnglet", 500, 100, 150, 20, 0);


Je n'avais pas compris que la taille du corps de l'onglet dépendait du "500". Je suis alors rentré dans

Code: Sélectionner - Agrandir
// corp de l'onglet
      // Corp de l'onglet
      mystyle +=".ongletMain {BORDER-TOP: #26313B 0px solid; BORDER-BOTTOM: #26313B 1px solid; BORDER-LEFT: #F5F8FA 1px solid; BORDER-RIGHT: #26313B 1px solid; BACKGROUND-COLOR: #CCD9EC}";
      mystyle +="</STYLE>";
      // Les valeurs de ces éléments sont modifiable à souhait sauf le nom de la classe !
 

et j'y est même ajouté des width="200px" pour tenté de modifié mais rien à faire. J'ai même tenté de modifié les fonctions !!! lol. Pour  te dire à quel point j'étais désespéré mdr.
Tout cela alors que c'était en fait tt simple mais encore fallait t-il faire le rapprochement.

En tout cas chapeau à toi pour ce script !!! Very Happy
Forum
Display posts from previous:   
Reply to topic Page 1 of 12 Goto page: 1, 2, 3 … 10, 11, 12  >




Portal | Index | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Powered by phpBB © 2006 - 2012 phpBB Group |
 
© 2003-2012 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401