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

    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
    Cupcake-11
    FémininAge : 20Messages : 31

    le Dim 27 Juil 2014 - 17:12

    Merci ♥
    avatar
    hirondelle
    FémininAge : 29Messages : 134

    le Dim 27 Juil 2014 - 21:09

    Merci beaucoup ♥
    avatar
    EricSouvaltzis
    MasculinAge : 19Messages : 47

    le Lun 28 Juil 2014 - 3:41

    Merci
    avatar
    Dydy
    FémininAge : 28Messages : 490

    le Lun 28 Juil 2014 - 13:11

    merci du partage ^^



    avatar
    Invité

    le Lun 28 Juil 2014 - 13:18

    Comme je n'arrive pas à charger l'aperçu j'ai besoin du code x)
    avatar
    Piratress
    FémininAge : 21Messages : 215

    le Jeu 31 Juil 2014 - 16:35

    Magique ! *w*
    J'adore!!
    avatar
    NaruChan
    FémininAge : 17Messages : 36

    le Jeu 31 Juil 2014 - 18:54

    Merci, je vais tester!
    avatar
    Drysfer
    MasculinAge : 29Messages : 71

    le Ven 1 Aoû 2014 - 16:15

    Merci.



    avatar
    Civin
    FémininAge : 21Messages : 11

    le Mar 5 Aoû 2014 - 0:14

    Wow ! Sans voix, très beau !
    avatar
    shala
    FémininAge : 26Messages : 213

    le Mar 5 Aoû 2014 - 1:09

    merci ^^



    avatar
    patriciadpt30
    FémininAge : 55Messages : 240

    le Jeu 7 Aoû 2014 - 21:23

    très beau merci



    Patricia :)
    avatar
    Filou
    FémininAge : 27Messages : 139

    le Ven 8 Aoû 2014 - 12:45

    *Mode curieux*
    avatar
    Bzzzz
    FémininAge : 34Messages : 86

    le Jeu 14 Aoû 2014 - 12:39

    Très joli codage merci du partage
    avatar
    Alyssa.B50
    FémininAge : 24Messages : 42

    le Ven 15 Aoû 2014 - 2:42

    Merci beaucoup :)
    avatar
    Clarisse
    FémininAge : 18Messages : 3938

    le Ven 15 Aoû 2014 - 13:28

    Merciii *O*
    avatar
    Lunara
    FémininAge : 32Messages : 95

    le Ven 15 Aoû 2014 - 21:37

    merci pour le partage !
    avatar
    Iguolta
    MasculinAge : 19Messages : 101

    le Mar 19 Aoû 2014 - 21:14

    Merci Very Happy




    Merci à Cruelly pour le kit Very Happy
    Merci beaucoup ^^:

    Merci Raeden Liddell Very Happy


    Merci Bubodox Very Happy


    Merci Shoki Very Happy
    avatar
    mackay
    MasculinAge : 30Messages : 124

    le Mar 19 Aoû 2014 - 21:46

    merci super
    avatar
    Asaëlle
    FémininAge : 26Messages : 124

    le Mer 20 Aoû 2014 - 21:45

    Merci
    avatar
    Le Dévoreur de temps
    MasculinAge : 39Messages : 69

    le Lun 25 Aoû 2014 - 0:48

    merci beaucoup
    avatar
    Sorako
    FémininAge : 21Messages : 94

    le Lun 25 Aoû 2014 - 11:30

    Wow j'adore merci !
    avatar
    Caine Lornan
    MasculinAge : 37Messages : 78

    le Lun 25 Aoû 2014 - 12:24

    Thanks
    avatar
    Tine
    FémininAge : 20Messages : 37

    le Mar 26 Aoû 2014 - 14:30

    Merci !
    avatar
    Lulucifer
    FémininAge : 23Messages : 24

    le Jeu 28 Aoû 2014 - 19:34

    Magnifique. ,w,
    J'en pleure tellement tout ce que tu codes est splendide. ,w,
    avatar
    TimeToSmile
    FémininAge : 20Messages : 49

    le Ven 29 Aoû 2014 - 18:59

    Incroyable
    Contenu sponsorisé


      La date/heure actuelle est Dim 16 Déc 2018 - 18:25