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



    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
    Sacagawea
    FémininAge : 23Messages : 236

    le Jeu 8 Mai 2014 - 20:09

    J'aime bien ce rendu ^^
    Merci du partage !  :gentleman: 
    avatar
    Dearborn
    FémininAge : 24Messages : 109

    le Jeu 8 Mai 2014 - 21:40

    Super :3
    avatar
    Irony
    FémininAge : 20Messages : 102

    le Lun 12 Mai 2014 - 12:18

    Magnifique, merciii. ♥ *-*
    avatar
    Belle Morte
    FémininAge : 21Messages : 42

    le Ven 16 Mai 2014 - 16:46

    Merci :)
    Golhbul
    MasculinAge : 36Messages : 16

    le Ven 16 Mai 2014 - 18:45

    Merci... cheers 
    avatar
    Lime
    FémininAge : 22Messages : 32

    le Sam 17 Mai 2014 - 15:19

    Merci du partage. ☻
    avatar
    Xperience
    FémininAge : 21Messages : 156

    le Lun 19 Mai 2014 - 15:37

    Ca gère !



    avatar
    Yumi-chan
    FémininAge : 25Messages : 67

    le Mar 20 Mai 2014 - 0:07

    Merci pour ce travail ! :3
    avatar
    Chocolakato
    FémininAge : 28Messages : 795

    le Mar 20 Mai 2014 - 15:36

    Tu dois être une des personnes les plus remerciées au monde x')



    avatar
    Apokalip'z
    MasculinAge : 25Messages : 290

    le Mar 20 Mai 2014 - 15:58

    C'est clair ^^
    Merci Hallow' c'est encore magnifique comme d'hab' Wink



    avatar
    Arfgang
    MasculinAge : 27Messages : 59

    le Mer 21 Mai 2014 - 10:11

    C'est super beau, chapeau ^^



    avatar
    thib56
    MasculinAge : 23Messages : 32

    le Mer 21 Mai 2014 - 10:26

    Merci.
    avatar
    Yser
    FémininAge : 20Messages : 46

    le Mer 21 Mai 2014 - 14:02

    Magnifique ! Un grand merchi du partage !
    avatar
    Leoguillem
    MasculinAge : 18Messages : 137

    le Mer 21 Mai 2014 - 14:06

    J'aiiiiiiime !
    Je te l'emprunte !



    - Je signe Marabout -
    avatar
    Ay.am.e
    FémininAge : 20Messages : 123

    le Mer 21 Mai 2014 - 14:08

    Merci !
    avatar
    Hayate747
    MasculinAge : 28Messages : 196

    le Mer 21 Mai 2014 - 17:30

    Merci ! :'D
    avatar
    Kame-Chan
    FémininAge : 27Messages : 53

    le Mer 21 Mai 2014 - 22:50

    J'adore le rendu ! l'effet et superbe merci beaucoup o/
    avatar
    NathanaelSane
    FémininAge : 25Messages : 73

    le Jeu 22 Mai 2014 - 17:42

    C'est bow o/ merci beaucoup!
    avatar
    Nerria
    FémininAge : 20Messages : 44

    le Ven 23 Mai 2014 - 12:57

    Ca à l'air bien mais j'ai du mal à visualiser le resultat avec l'image, Very Happy merci du partage.
    avatar
    Leelo
    FémininAge : 27Messages : 149

    le Sam 24 Mai 2014 - 15:08

    merci
    avatar
    Loreleï
    FémininAge : 20Messages : 20

    le Sam 24 Mai 2014 - 18:22

    C'est grandiose 8D. Les codeurs sont vraiment des magiciens !
    avatar
    Hopyes
    FémininAge : 30Messages : 79

    le Sam 24 Mai 2014 - 18:53

    le rendu est class
    avatar
    Framboaz
    FémininAge : 25Messages : 15

    le Sam 24 Mai 2014 - 22:31

    Super même si j'ai du mal à visualiser ! Je vais essayer de ce pas ^^
    avatar
    Mitsuomi73
    MasculinAge : 26Messages : 42

    le Lun 26 Mai 2014 - 16:19

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Mer 15 Aoû 2018 - 18:54