Welcome

Halloween Catégories

Naruto, onglets

Halloween, LS codage Forumactif Templates & Eléments Catégories Naruto, forum à onglets

PHPBB2

Non optimisé Le premier onglet affiche l'illustration du forum et sa description au survol, le second affiche les sous-forum, le dernier message et les statistiques

Retour

Codage catégories Naruto forum à onglet Halloween Forumactif

CSS

/*********************************** 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 ***********************************/

Index_box

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 
 <span class="gensmall">{LAST_VISIT_DATE}<br />
 {CURRENT_TIME}<br />
 </span>
 
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>
<table width="700" border="0" cellpadding="0" style="background-color: #C0C0C0;">
 <tr>
          <div class="cate_titre">{catrow.tablehead.L_FORUM}</div>
 </tr>
 
 
 <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>
 
 
 <tr>
 
 <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
 
 <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
 </tr>
 
 
</table><img src="{SPACER}" alt="" height="5" width="1" />
<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>

Descriptions des forums

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

Créer une page javascript

Et une page JS : Modules → HTML & JAVASCRIPT → Gestion des codes Javascript → "Activer la gestion des codes Javascript :" → Oui. Puis créer un nouveau JS, cocher "toutes les pages" et insérer ceci dans le champ :

$(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)
    });

Dernière modification : 25 April 2020 23 : 33.

#naruto #categories #forumactif #codage #libreservice

Halloween