Welcome

Halloween Catégories

One Piece

Halloween, LS codage Forumactif Templates & Eléments Catégories Catégories One Piece

PHPBB2

Non optimisé Description du forum au survol de l'image

Retour

Codage catégories One Piece Halloween Forumactif

CSS

/* ------------------------------------- CATEGORIES ------------------------------------- */

/*** MISE EN FORME TITRES CATEGORIES ***/
    .cate_titre h2 {
      text-align: center;
      font-size: 32px;
      font-family: 'Julius Sans One', sans-serif;
      color: #322923;
    }

/*** MISE EN FORME DU CONTENU ***/
    .ensemble_forum {
      background-color: #EBE6E2;
      border-left: 3px solid #322923;
      border-right: 3px solid #322923;
      position: relative;
      height: 230px;
    }

.ensemble_forum1 {
      border-radius: 50px 50px 0px 0px;
      border-top: 3px solid #322923;
      border-left: 3px solid #322923;
      border-right: 3px solid #322923;
    }

/*** ILLUSTRATION QUI SUIT LE TITRE DE CATEGORIE ***/
    .illustration_cate {
      border-radius: 50px 50px 0px 0px;
    }

/*** MISE EN FORME NOM DU FORUM ***/

/* SIMPLE */
    a.forumlink_name {
      font-size: 22px;
      font-family: 'Lily Script One', cursive;
      color: #446059;
      position: absolute;
      left: 1.5em;
      margin-top: 20px;
    }

/* EN HOVER */
    a.forumlink_name:hover {
      color: #769E95;
      text-decoration: none !important;
    }

/*** MISE EN FORME DES STATISTIQUES ***/

/* SIMPLE */
    .stats {
      font-size: 14px;
      position: absolute;
      right: 5em;
      font-family: 'Open Sans Condensed', sans-serif;
      margin-top: 30px;
    }

/* EN HOVER */
    .stats:hover {
      font-weight: bold;
    }

/*** DESCRIPTION AU SURVOL DE L'IMAGE ***/
    .description {
      width: 500px;
      height: 150px;
      overflow: hidden;
      position: absolute;
      margin-top: 60px;
      left: 2em;
      background-color: #D3D1D1;
    }
     
    .description_img {
      position: relative;
      z-index: 2;
      width: 500px;
      height: 150px;
      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;
    }
     
    .description:hover .description_img {
      margin-left: 500px;
      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;
    }
     
    .description_desc {
      position: relative;
      z-index: 1;
      width: 470px;
      height: 90px;
      margin-top: -140px;
      text-align: justify;
      font-size: 11px;
      color: #446059;
      padding: 15px;
      overflow: auto;
      background-color: #D3D1D1;
    }

/*** MISE EN FORME DES SOUS-FORUM ***/

/* POSITIONNEMENT */
    .sous_forum {
      position: absolute;
      margin-top: 39px;
      right: 23em;
      width: 150px;
      height: 120px;
      overflow: auto;
      padding: 15px;
      background-color: #D3D1D1;
      font-family: 'Lily Script One', cursive;
      font-size: 11px;
    }

/* LIENS SIMPLES*/
    .sous_forum a{
      color: #446059;
    }

/* LIENS AU SURVOL */
    .sous_forum a:hover {
      color: #769E95;
      text-decoration: none !important;
    }

/*** DERNIERS MESSAGES AU SURVOL DE L'IMAGE ***/
    .derniers_news {
      width: 200px;
      height: 150px;
      overflow: hidden;
      position: absolute;
      margin-top: 38px;
      right: 2em;
      background-color: #373535;
    }
     
    .derniers_news_img {
      position: relative;
      z-index: 2;
      width: 200px;
      height: 150px;
      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;
    }
     
    .derniers_news:hover .derniers_news_img {
      margin-left: 500px;
      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;
    }
     
    .derniers_news_description {
      position: relative;
      z-index: 1;
      width: 170px;
      height: 50px;
      margin-top: -120px;
      text-align: center;
      font-size: 14px;
      color: #D3D1D1;
      padding: 15px;
      overflow: auto;
      background-color: #373535;
      font-family: 'Lily Script One', cursive;
    }

/* LIENS SIMPLES */
    .derniers_news_description a {
      color: #D3D1D1;
    }

/* LIENS AU SURVOL */
    .derniers_news_description a:hover {
      color: #769E95;
      text-decoration: none !important;
    }

/* ------------------------------------- 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>
    
    <div class="cate_titre">{catrow.tablehead.L_FORUM}</div><div class="ensemble_forum1"><img src="http://img11.hostingpics.net/pics/604824ImgHautCat.png" class="illustration_cate" />
      </div>
      
      
      
      <div class="ensemble_forum">
    <a class="forumlink_name" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> <div class="stats">Il y a {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</div>
   
    {catrow.forumrow.FORUM_DESC}

<div class="sous_forum"><span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
            <script type="text/javascript">
              jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
            </script></div>

<div class="derniers_news"><div class="derniers_news_img"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div><div class="derniers_news_description">{catrow.forumrow.LAST_POST}</div></div>
        <div style="clear: both;"></div></div>
      
      
     
      
    
    <div style="width: 100%; border-bottom: 3px solid #322923;"></div>
    <img src="{SPACER}" alt="" height="5" width="1" />
    <link href='http://fonts.googleapis.com/css?family=Julius+Sans+One|Lily+Script+One|Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

Descriptions des forums

<div class="description">
       
      <div class="description_img">
            <img src="http://i59.servimg.com/u/f59/17/97/89/15/sans_t10.png" />
      </div>
       
      <div class="description_desc">
            Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est. Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est. Nec minus feminae quoque calamitatum participes fuere similium. nam ex hoc quoque sexu peremptae sunt originis altae conplures, adulteriorum flagitiis obnoxiae vel stuprorum. inter quas notiores fuere Claritas et Flaviana, quarum altera cum duceretur ad mortem, indumento, quo vestita erat, abrepto, ne velemen quidem secreto membrorum sufficiens retinere permissa est. ideoque carnifex nefas admisisse convictus inmane, vivus exustus est.
      </div>
    </div>
     
    <div style="clear: both;">
    </div>

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

#onepiece #categories #forumactif #codage #libreservice

Halloween