Tableau à onglet pour message d'accueil.

Tableau 2

Code:


         /* .systab .tab => les onglet */
        .systab .tab {
          padding: 2px 10px;
          margin-right: 5px;
          color: #000;
          background: #fff;
          border: 1px solid #000;
          cursor: pointer;
        }
        /* .systab .tab:hover => les onglets survolés */
        .systab .tab:hover {
          background: #b8efa1;
          color: #487f31;
          border-color: #487f31;
        }
        /* .systab .tab.selected => les onglets sélectionnés */
        .systab .tab.selected{
          color: #ccc;
          background: #333;
        }
        /* .systab .contents => les conteneurs des contenus associés aux onglets  */
        .systab .contents {
          margin-top: 1px;
          margin-bottom: 1px;
          color: #000;
          background: #fff;
          border: 1px solid #000;
          padding: 10px;
        }
        /* style des onglets si ils sont à gauche ou à droite */
        .systab.s_float .tab,.systab.s_float .tab {
          display: block;
          margin: 5px;
        }
        /* flottement des conteneurs si les onglets sont à gauche où à droite */
        .systab.s_float .tabs,.systab.s_float .contents {
          float: left;
        }
            /* #tab-bloc = ce tableau d'onglet / .tabs = conteneur des onglets */
        #tab-bloc .tabs {
          text-align: center;
          margin-bottom: 10px;
        }
        /* .tab = onglets */
        #tab-bloc .tab {
          border-radius: 5px;
          border: none;
          margin: 0 20px;
          background: none;
        }
        /* .tab.selected = onglet sélectionné*/
        #tab-bloc .tab.selected {
          background: #111;
          box-shadow: 0 0 5px #333;
          color: #eee;
          font-weight: bold;
        }
        /* .tab img = image dans les onglets */
        #tab-bloc .tab img {
          vertical-align: -3px;
        }
        /* .contents = conteneur des contenu */
        #tab-bloc .contents {
          border: 3px double #aaa;
          background: #eee;
          border-radius: 50px;
          padding: 25px;
        }
        /* #tab-staff = contenu associé à l'onglet staff */
        #tab-staff {
          background: url(http://i.imgur.com/KlbuC.jpg);
          width: 791px;
          height: 607px;
          border: 1px dotted #ccc;
          margin: auto;
        }
        #tab-staff table {
          color: #444;
          background: url(http://i.imgur.com/GEdKG.png);
          margin: 100px auto;
          font-weight: 30px;
          opacity: 0.8;
          border: 2px solid #ccc;
          border-radius: 5px;
        }
        /* #tab-bienvenue = contenu associé à l'onglet bienvenue */
        #tab-bienvenue {
          border-radius: 50px;
          border: 2px dashed #bbb;
          background: url(http://files.enjin.com.s3.amazonaws.com/393137/modules/forum/attachments/fluffy_1373775577.jpg);
          Background-size: 820px 240px;
    background-repeat: no-repeat;
    text-align: center;
          font-size: 20px;
          color: #333;
          text-shadow: 0 0 5px #fff;
        }
        /* #tab-bienvenue marquee = le marquee dans l'onglet bienvenue */
        #tab-bienvenue marquee {
          width: 400px;
          text-align: center;
        }
        /* #tab-regles = contenu associé à l'onglet règles */
        #tab-regles ul  {
          font-family: georgia, arial, serif;
          font-size: 17px;
          list-style: url(http://i.imgur.com/DMC6G.gif);
        }
        #tab-regles li {
          margin-bottom: 10px;
          color: green;
        }

Code:

       
<div class="systab" id="tab-bloc">
                      
 <div id="tab-regles">
                  <span><img src="http://i.imgur.com/8aDn6.gif" /> Les règles</span>                  
 <ul>
                          
 <li>
     1) Les messages agressifs ou diffamatoires, les insultes et critiques personnelles, les grossièretés et vulgarités et plus généralement tout message contrevenant aux lois françaises en vigueur sont interdits !                
 </li>
          
 <li>
     2) Les messages incitant à - ou évoquant - des pratiques illégales sont interdits ;si vous diffusez des informations provenant d'un autre site web, vérifiez auparavant si le site en question ne vous l'interdit pas. Mentionnez l'adresse du site en question par respect du travail de ses administrateurs !      
 </li>
          
 <li>
     3) Les doublons (poster deux réponses à la suite), les monoposts (un seul mot ou/et un smiley) ne seront pas tolérés, nous sommes des humains, diantre, non pas des machines ! Il en va de même du flood qui n'est accepté que dans le topic à flood. Et votre signature ne doit pas dépasser 250 pixels de haut, image et texte confondus. Dans le cas contraire, il vous sera demandé par Message Personnel de la modifier sous 48h. Temps au-delà duquel un administrateur ira la reformater avec ou sans votre consentement.                
 </li>
          
 <li>
     4) Merci de faire un effort sur la grammaire et l'orthographe. Style SMS INTERDIT ! Si vous avez de gros problèmes d'orthographe, merci de nous adresser un Message Privé.                
 </li>
          
 <li>
     5) La publicité est autorisée sur le forum, cependant, elle ne l'est que pour vos sites, forums et blogs. En aucun cas, les pubs pour les jeux sociaux et compagnie ne seront tolérées. De plus, vous pouvez toujours mettre un lien dans votre signature mais si le lien renvoie vers un site hors la loi, vous serez bannis si vous n'avez rien fait suite à un avertissement !                
 </li>
          
 <li>
     6) Le bouton "Recherche" vous sera utile afin de savoir si un sujet existe déjà; ne postez pas un nouveau sujet avant de vérifier s'il n'en existe pas déjà un.                  
 </li>
          
 <li>
     7) Tout message contrevenant aux dispositions ci-dessus sera édité ou supprimé sans préavis ni justifications supplémentaires dans des délais qui dépendront de la disponibilité des modérateurs. Tout abus entraînera un bannissement temporaire puis une résiliation de l'inscription si récidive. Internet n'est ni un espace anonyme, ni un espace de non-droits ! Nous nous réservons la possibilité d'informer votre fournisseur d'accès et/ou les autorités judiciaires de tout comportement malveillant. L'adresse IP de chaque membre est enregistrée afin d'aider à faire respecter ces conditions.                
 </li>
          
 <li>
     8 ) Ne publiez pas n'importe quoi n'importe où, vérifiez que quelqu'un n'a pas mis la même chose que vous en ligne ! Les administrateurs et modérateurs s'accordent le droit de retirer une vidéo, une musique, etc. publiée si son contenu n'est pas en accord avec le Forum.                
 </li>
          
 <li>
     9 ) Lors des rencontres IRL, toute action déplacée ou violente aura de lourdes conséquences sur le forum.                  
 </li>
          
 <li>
     10 ) Malgré tout, n'oubliez pas de vous amuser !              
 </li>
          
 </ul>
                      
 </div>
                      
 <div class="selected" id="tab-bienvenue">
                  <span><img src="http://i.imgur.com/Xq6ZJ.jpg" /> Bienvenue</span>                  
 <marquee direction="up">
                          
 <div>
      Welkom      
 </div>
          
 <div>
      أهلاً و سهلاً      
 </div>
          
 <div>
      Բարի գալուստ!      
 </div>
          
 <div>
      Xoş gəlmişsiniz!      
 </div>
          
 <div>
      Ongi etorri      
 </div>
          
 <div>
      歡迎      
 </div>
          
 <div>
      Bienvenue      
 </div>
          
 <div>
      Καλώς Ορίσατε      
 </div>
          
 <div>
      Aloha      
 </div>
          
 <div>
      ᑐᙵᓱ      
 </div>
          
 <div>
      ようこそ      
 </div>
          
 <div>
      환영합니다      
 </div>
          
 <div>
      ຍິນດີຕ້ອນຮັບ      
 </div>
          
 <div>
      Laipni lūdzam      
 </div>
          
 <div>
      Räxim itegez      
 </div>
          
 <div>
      Benvignùo      
 </div>
          
 <div>
      Merhbe      
 </div>
          
 <div>
      კეთილი იყოს თქვენი      
 </div>
          
 <div>
      Vælkomin      
 </div>
          
 <div>
      Добро пожаловать      
 </div>
          
 <div>
      Haykuykuy!      
 </div>
                        
 </marquee>
                      
 </div>
                      
 <div id="tab-staff">
                  <span><img src="http://i.imgur.com/enPmV.png" /> L'équipe</span>                  
 <table>
                        
 <tbody>
          
 <tr>
                          
 <td>
      <span style="color:red;font-weight:bold;">Admin :</span>      
 </td>
                          
 <td>
      <span>Titmoff, yao</span>      
 </td>
                        
 </tr>
          
 <tr>
                        
 </tr>
          
 <tr>
                          
 <td>
      <span style="color:blue;font-weight:bold;">Modo :</span>      
 </td>
                          
 <td>
      Galaad, Louwizz, Albinou, Bob, Léo, Cibou, Laetitia, Vivi-7, TheAmazingTink, Tanuki      
 </td>
                        
 </tr>
          
 <tr>
                        
 </tr>
        
 <tr>
        
 <td>
     <span style="color:#FF00FF; font-weight:bold">Dev : </span>    
 </td>
        
 <td>
     AHWHY, Aelis, Bobby, Dany, Friks    
 </td>
        
 </tr>
        
 </tbody>
          
 </table>
                      
 </div>
                    
</div>

Code:

$(function() {
            // clic sur un onglet
            var d = function() {
                // si l'onglet est déjà actif, ne rien faire
                if ($(this).is(".selected")) return;
                // affiche le contenu correspondant et on met l'onglet en sélectionné
                var a = $(this).closest(".systab");
                a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]);
                $(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1])
            };
            // pour chacun des systèmes d'onglets
            $("div.systab").each(function() {
                var a = $("> div", this).detach(),
                    c = this,
                    b;
                // on ajoute le conteneur d'onglet avant ou après ( si s_bottom )
                $(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ?
                    "tabs" : "contents") + '"></div>');
                $(a).each(function() {
                    b = $(this).children(":first");
                    b.is("span") ? (
                        $("> div.tabs", c).append($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove()
                });
                $("> div.contents", this).append(a);
                b = $(".content:first,.content.selected", this).last();
                $(b).addClass("selected").siblings().hide();
                $(b).data("tab").addClass("selected")
            }).on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d)
        });

Aperçu

Code:

 $(document).ready(function(){if (_userdata["session_logged_in"] == 0)
    $(function(){
    $('.class').remove();
    })});

Code:

$(document).ready(function(){if (_userdata["user_posts"] < 1)
$(function(){
$('.M14 , .M15 , .M16').remove();
})});

Spoiler:

Code:

 $(document).ready(function(){if (_userdata["session_logged_in"] == 0)
    $(function(){
    $('.class').remove();
    })});

Code:

$(document).ready(function(){if (_userdata["user_posts"] < 1)
$(function(){
$('.M14 , .M15 , .M16').remove();
})});