AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Forum à onglets, description en hover

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9753

    le Sam 26 Avr 2014 - 15:22

    Rappel du premier message :



    Plop,

    Ce LS est basé sur plusieurs tutoriels :

    → Le tutoriel de Sparrow (les descriptions cachées derrière l'illustration www) ;

    → Réalisé grâce à un tutoriel de sobade. (www).

    Catégories


    Version  phpBB2 ▬ CSS & HTML ▬ Descriptions en hover et jeu d'onglet

    Aperçu ▬ www


    CSS
    Code:
    /*********************************** CATEGORIES ***********************************/

    /***** MISE EN FORME STATISTIQUES *****/
    .stats_cate {
      position: relative;
      left: 17em;
      top: -4.5em;
      font-size: 25px;
      font-family: 'Carrois Gothic SC', sans-serif;
    }


    /***** COULEURS DES LIENS *****/
    a {
      color: black !important;
    }

    a:hover {
      text-decoration: none !important;
    }



    /***** MISE EN FORME DERNIER MESSAGE SUR UNE LIGNE *****/
    .last_mess {
      color: #333333;
      text-align: left;
      position: relative;
      top: -0.7em;
    }

    .last_mess a {
      color: #333333 !important;
      text-decoration: none !important;
    }



    /***** MISE EN FORME SOUS-FORUM *****/
    .sous-forum a{
      color: #C0C0C0 !important;
    }

    .sous-forum a:hover {
      color: #99CCFF !important;
    }

    .sous-forum {
      width: 350px;
     height: 50px;
      padding: 15px;
      color: #C0C0C0;
      background-color: #333333;
    }



    /***** MISE EN FORME NOM DU FORUM *****/
    a.forumlink:link {
      width: 100% !important;
     position: relative;
      left: 1em;
      top: 0.2em;
      font-size: 25px;
      font-family: 'Megrim', cursive;
    }



    /***** DESCRIPTION MASQUEE DERRIERE L'ILLUSTRATION *****/
    .cate {
      width: 620px;
      height: 120px;
      overflow: hidden;
      position: relative;
      top: -0.6em;
      left: -0.7em;
      background-color: #333333;
    }

    .cate_img {
      position: relative;
      z-index: 2;
      width: 620px;
      height: 120px;
      margin-left: 0px;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    .cate:hover .cate_img {
      margin-left: 650px;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    .cate_description {
      position: relative;
      z-index: 1;
      width: 607px;
      height: 70px;
      margin-top: -120px;
      text-align: justify;
      font-size: 11px;
      color: #8c8c8c;
      padding: 15px;
      overflow: auto;
    }



    /***** MISE EN FORME TITRE CATEGORIES *****/
    .cate_titre h2{
      clear: both;
      color: #DDDDEF !important;
      font-size: 25px;
      font-family: 'Carrois Gothic SC', sans-serif;
      text-transform: uppercase;
      position: relative;
      float: right;
      right: 1.2em;
      bottom: -1.1em;
    }

    .cate_titre h2:hover {
      color: #0D94B4 !important;
    }


    /***** FOND DU FORUM *****/
    .bloc_forum {
      width: 670px;
      height: 160px;
      background-color: #C0C0C0;
      padding: 15px !important;
    }
      

    /***** JEU D'ONGLET *****/
    /* les onglet */
    .systab .tab {
      float: right;
      position: relative;
     top: -2em;
      display: inline-block;
    }
          
    /* contenus associés aux onglets  */
    .systab .contents {
      color: #000;
      padding: 10px;
      position: relative;
      top: 0em;
      width: 598px;
      height: 100px;
    }
        
    /* style des onglets */
    .systab.s_float .tab,.systab.s_float .tab {
      display: block;
      margin: 5px;
    }

    /* flottement des conteneurs  */
    .systab.s_float .tabs,.systab.s_float .contents {
      float: middle;
    }

    /*********************************** FIN CATEGORIES ***********************************/



    Template index_box
    Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
     <tr>
     <td valign="bottom">
     <!-- BEGIN switch_user_logged_in -->
     <span class="gensmall">{LAST_VISIT_DATE}<br />
     {CURRENT_TIME}<br />
     </span>
     <!-- END switch_user_logged_in -->
     <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
     </td>
     <td class="gensmall" align="right" valign="bottom">
     <!-- BEGIN switch_user_logged_in -->
     <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
     <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
     <!-- END switch_user_logged_in -->
     <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
     </td>
     </tr>
    </table>
    <!-- BEGIN catrow --><!-- BEGIN tablehead --><table width="700" border="0" cellpadding="0" style="background-color: #C0C0C0;">
     <tr>
              <div class="cate_titre">{catrow.tablehead.L_FORUM}</div>
     </tr>
     <!-- END tablehead -->
     <!-- BEGIN forumrow -->
     <tr class="bloc_forum">
             <td style="padding: 10px; width: 10px; border: 1px solid #C0C0C0;"> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
              </td>
              <td style="position: relative; left: -0.2em; border: 1px solid #C0C0C0; display: inline-block;"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}" style="color: #486D76 !important;">{catrow.forumrow.FORUM_NAME}</a><div style="font-size: 11px; color: #151413; position: relative; left: 33em; top: -1.2em;">Clic sur nos couleurs ;)</div><div class="systab">
                
    <div class="selected2"><span style="padding-left: 4px; padding-right: 4px;"><div style="width: 40px; height: 20px; background-color: #7BCEB5;"></div></span>
      <div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div><br />
                <div class="last_mess"><span class="gensmall" id="last">{catrow.forumrow.LAST_POST}</span></div>
      <div class="stats_cate"><span style="color: #486D76;">{catrow.forumrow.POSTS}</span> messages <br /><span style="color: #486D76;">{catrow.forumrow.TOPICS}</span> sujets</div>
      </div>
                
    <div class="selected"><span style="padding-left: 4px; padding-right: 4px;"><div style="width: 40px; height: 20px; background-color: #99CC00;"></div></span>
      {catrow.forumrow.FORUM_DESC}</div>
                
                </div></td>
          
             </tr>
     <!-- END forumrow -->
     <!-- BEGIN catfoot -->
     <tr>
     <!-- BEGIN inc -->
     <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
     <!-- END inc -->
     <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
     </tr>
     <!-- END catfoot -->
     <!-- BEGIN tablefoot -->
    </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic+SC' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Megrim' rel='stylesheet' type='text/css'>
      
      <script type="text/javascript">
    jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');
      </script>



    Dans les descriptions de Forum
    Code:
    <div class="cate">
     
    <div class="cate_img">
     <img src="http://i57.servimg.com/u/f57/18/47/68/10/15610.png" />
    </div>
     
    <div class="cate_description">
     Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes. Et olim licet otiosae sint tribus pacataeque centuriae et nulla suffragiorum certamina set Pompiliani redierit securitas temporis, per omnes tamen quotquot sunt partes terrarum, ut domina suscipitur et regina et ubique patrum reverenda cum auctoritate canities populique Romani nomen circumspectum et verecundum. Siquis enim militarium vel honoratorum aut nobilis inter suos rumore tenus esset insimulatus fovisse partes hostiles, iniecto onere catenarum in modum beluae trahebatur et inimico urgente vel nullo, quasi sufficiente hoc solo, quod nominatus esset aut delatus aut postulatus, capite vel multatione bonorum aut insulari solitudine damnabatur. Iam in altera philosophiae parte. quae est quaerendi ac disserendi, quae logikh dicitur, iste vester plane, ut mihi quidem videtur, inermis ac nudus est. tollit definitiones, nihil de dividendo ac partiendo docet, non quo modo efficiatur concludaturque ratio tradit, non qua via captiosa solvantur ambigua distinguantur ostendit; iudicia rerum in sensibus ponit, quibus si semel aliquid falsi pro vero probatum sit, sublatum esse omne iudicium veri et falsi putat.
    </div>
    </div>
     
    <div style="clear: both;">
    </div>



    Et une page JS : Modules → HTML & JAVASCRIPT → Gestion des codes Javascript → "Activer la gestion des codes Javascript :" → Oui.
    Puis créer un nouveau JS et insérer ceci dans le champ :
    Code:
    $(function(){
          var d=function(){if($(this).is(".selected")) return;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])};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(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")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> 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)
        });

    Pensez à cocher "Sur toutes les pages".

    Un petit merci ou commentaire est toujours le bienvenu ^^
    - Mettre/laisser un crédit vers Never-Utopia est obligatoire.
    - Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


    Dernière édition par Halloween le Jeu 13 Avr 2017 - 20:40, édité 2 fois




    < / Libre service codage >
    avatar
    MOON LEE
    FémininAge : 24Messages : 149

    le Lun 26 Mai 2014 - 20:32

    Merci
    avatar
    Zibeline
    FémininAge : 33Messages : 84

    le Lun 26 Mai 2014 - 20:43

    C'est génial, merci  :kdo: :kdo: 
    Chrono
    MasculinAge : 26Messages : 14

    le Lun 26 Mai 2014 - 23:35

    Merci!
    avatar
    Asches
    FémininAge : 27Messages : 5

    le Mar 27 Mai 2014 - 1:19

    Comme c'est beau. Merci beaucoup !
    avatar
    Clémentine
    FémininAge : 26Messages : 223

    le Mer 28 Mai 2014 - 20:42

    Pas mal *o* merci



    avatar
    Elzeir
    FémininAge : 22Messages : 22

    le Jeu 29 Mai 2014 - 3:00

    Sa me plait bien, merci !
    Gedomaru
    FémininAge : 21Messages : 70

    le Jeu 29 Mai 2014 - 21:42

    merci! ^^
    avatar
    Féhéla
    FémininAge : 45Messages : 238

    le Jeu 29 Mai 2014 - 21:49

    merci !!
    GEnterZ
    MasculinAge : 20Messages : 63

    le Ven 30 Mai 2014 - 13:05

    Merci *-*
    avatar
    shibari
    MasculinAge : 23Messages : 277

    le Sam 31 Mai 2014 - 11:39

    danke **





    Merci Dakota pour ce kit.
    avatar
    Méandre.
    FémininAge : 20Messages : 95

    le Sam 31 Mai 2014 - 21:30

    Merci !
    Epoxy
    MasculinAge : 22Messages : 14

    le Dim 1 Juin 2014 - 14:01

    merci pour ce code =)
    avatar
    Patapou
    FémininAge : 19Messages : 15

    le Dim 1 Juin 2014 - 14:06

    Merci pour ce code
    avatar
    Raween
    FémininAge : 26Messages : 112

    le Dim 1 Juin 2014 - 18:37

    Merci beaucoup! ^^
    Njut
    FémininAge : 18Messages : 43

    le Dim 1 Juin 2014 - 20:30

    Génial *o*
    avatar
    Argy
    FémininAge : 20Messages : 98

    le Dim 1 Juin 2014 - 20:37

    Waaaao, j'suis vraiment dingue de tes créas Hallow' xD
    Merci ^^
    avatar
    Emma-Iseult
    FémininAge : 21Messages : 44

    le Dim 1 Juin 2014 - 21:19

    Merci, super beau !
    avatar
    Thorn
    MasculinAge : 17Messages : 432

    le Mer 4 Juin 2014 - 18:44

    Merci !



    avatar
    Cissy
    FémininAge : 25Messages : 63

    le Jeu 5 Juin 2014 - 0:37

    merci
    avatar
    Kinjiro
    MasculinAge : 19Messages : 80

    le Sam 7 Juin 2014 - 18:54

    Super sympas Thanks



    Licmac.
    FémininAge : 25Messages : 18

    le Mar 10 Juin 2014 - 19:14

    merci (:
    Narlya
    FémininAge : 16Messages : 20

    le Jeu 12 Juin 2014 - 18:01

    Merci du partage ! ^^
    avatar
    Hashirama
    MasculinAge : 20Messages : 63

    le Jeu 12 Juin 2014 - 19:25

    j'adore
    avatar
    Sunn
    MasculinAge : 23Messages : 24

    le Jeu 12 Juin 2014 - 22:31

    Merci !
    avatar
    Amiko
    FémininAge : 27Messages : 51

    le Sam 14 Juin 2014 - 13:55

    Merci énormément !
    Contenu sponsorisé


      La date/heure actuelle est Mer 15 Aoû 2018 - 17:06