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 : 9754

    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
    Invité

    le Sam 14 Juin 2014 - 14:45

    Merci!
    avatar
    NaLu
    FémininAge : 23Messages : 119

    le Sam 14 Juin 2014 - 21:35

    merci ^^



    avatar
    KRBHylian
    MasculinAge : 24Messages : 12

    le Dim 15 Juin 2014 - 10:48

    Voyons voir ce que ça donne, merci o/.



    Hop80
    MasculinAge : 29Messages : 138

    le Dim 15 Juin 2014 - 16:13

    super jolie merci
    avatar
    P'tit loup
    MasculinAge : 35Messages : 438

    le Dim 15 Juin 2014 - 17:16

    Merciiiiii ça tombe bien, je cherchais justement quelque chose dans ce style ^^



    avatar
    Ishyyn
    FémininAge : 23Messages : 90

    le Dim 15 Juin 2014 - 21:19

    Merci  :hug2: 
    avatar
    Neko Mimi
    FémininAge : 28Messages : 162

    le Jeu 19 Juin 2014 - 13:47

    Y'a tellement de choix que c'est dur de se décider ♥



    avatar
    Cruelly
    FémininAge : 25Messages : 2572

    le Jeu 19 Juin 2014 - 19:31

    je vais tenter sa :)



    MON PROJET, venez donner votre avis sur mon futur forum :heart: :heart:
    avatar
    Etoile du Virtuose
    FémininAge : 18Messages : 86

    le Jeu 19 Juin 2014 - 19:35

    Merci



    avatar
    Ryoma
    MasculinAge : 30Messages : 420

    le Sam 21 Juin 2014 - 13:04

    Merci.
    avatar
    ewin
    MasculinAge : 19Messages : 5

    le Dim 22 Juin 2014 - 1:08

    Thanks ! :DDD
    avatar
    isKeiko
    FémininAge : 23Messages : 29

    le Dim 22 Juin 2014 - 19:24

    MERCI Very Happy !
    avatar
    Pinku
    FémininAge : 20Messages : 139

    le Lun 23 Juin 2014 - 12:36

    Veux voir :3
    avatar
    Doupi
    FémininAge : 29Messages : 59

    le Lun 23 Juin 2014 - 12:58

    Chouette idée merci, j'ai hâte de tester en vrai !
    avatar
    CaraDelevngnie
    FémininAge : 19Messages : 370

    le Lun 23 Juin 2014 - 15:10

    Elles sont superbes ! C'est vraiment magnifique je trouve, merci beaucoup *w*



    avatar
    Opaline
    FémininAge : 18Messages : 86

    le Lun 23 Juin 2014 - 21:46

    Merci beaucoup ! *^*



    Irisia Anderson
    FémininAge : 23Messages : 28

    le Mer 25 Juin 2014 - 18:32

    merci du partage
    avatar
    Onyx
    FémininAge : 24Messages : 3133

    le Sam 28 Juin 2014 - 7:36

    Merci ~



    avatar
    Ceecemel
    FémininAge : 20Messages : 36

    le Sam 28 Juin 2014 - 14:46

    beautyyyy !
    avatar
    Yuko1
    FémininAge : 19Messages : 26

    le Sam 28 Juin 2014 - 22:28

    Merci
    avatar
    Sun01
    FémininAge : 25Messages : 24

    le Dim 29 Juin 2014 - 13:38

    Magnifique, merciii. ♥
    avatar
    Skyfall
    FémininAge : 17Messages : 23

    le Dim 29 Juin 2014 - 17:20

    J'adore *a* Merci



    avatar
    Nyan-cat
    FémininAge : 19Messages : 326

    le Dim 29 Juin 2014 - 18:33

    merci <3



    avatar
    Kathee
    FémininAge : 25Messages : 667

    le Mar 1 Juil 2014 - 1:44

    ça a l'air terrible :o



    • Nous serions ravis de vous accueillir •


    • Venez donc voir ce petit petit fofo •
    avatar
    nuanciel
    FémininAge : 26Messages : 139

    le Mar 1 Juil 2014 - 11:50

    Très joli travail !
    Contenu sponsorisé


      La date/heure actuelle est Mer 19 Sep 2018 - 18:19