Welcome

Halloween Index complets

Once Upon A Time

Halloween, LS codage Forumactif Index complets Index complet Once Upon A Time

PHPBB2

Non optimisé Le bloc du contexte affiche également les intrigues au clic du cercle gris. Des infobulles affiches le staff, les prédéfinis et les sous-forum. Les descriptions des groupes changent au clic. La maquette complète

Retour

Codage index complet Once Upon A Time acceuil Halloween Forumactif

CSS

/*--------------------------------- PA ---------------------------------*/

/* Fond */
.fondsgénéraux {
  background-color: #1B1B1F;
  width: 700px;
  padding: 15px;
  color: #767676;
}

.blocpa {
  width: 220px;
  padding: 15px;
  background-color: #141517;
}

.blocpa:hover {
  width: 220px;
  background-color: #141517;
  border-left: 2px solid #2F3C3E;
  border-right: 2px solid #2F3C3E;
}

/* Titres */
.titrePA1 {
  font-family: parisienne;
  font-size: 35px;
  color: #FE6D6D;
  z-index: 1px;
  position: relative;
}

.titrePA2 {
  font-family: parisienne;
  font-size: 25px;
  color: #F0F0F0;
  position: relative;
}

.titrePA2:hover {
  font-family: parisienne;
  font-size: 25px;
  color: #FE6D6D;
  position: relative;
}

.titrePA3 {
  font-family: parisienne;
  font-size: 25px;
  color: #FE6D6D;
  position: relative;
}

.titrePA3:hover {
  font-family: parisienne;
  font-size: 25px;
  color: #F0F0F0;
  position: relative;
}

/* Système onglets */
.paonglet {
  display: inline-block;
  cursor: pointer;
}

.contenu_paonglet {
  display: none;
  width: 250px;
  height: 360px;
  background-color: #141517;
}

.contenu_paonglet:hover {
  display: none;
  width: 250px;
  background-color: #141517;
  border-left: 2px solid #2F3C3E;
  border-right: 2px solid #2F3C3E;
}

/* Info-bulles staff */
.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}

d.info:hover {
  z-index: 25;
}
 
d.info span {
  display: none;
}
 
d.info:hover span {
  display: block;
  position: absolute;
  top: -2em;
 left: -2em;
  width: 120px;
  height: 50px;
  background-color: #1B1B1F;
  color: #16161A;
  text-align: center;
  font-weight: none;
}

/* Info-bulles prédef */
.info {
  position: relative;
  z-index: 24;
  text-decoration: none;
}
 
c.info:hover {
  z-index: 25;
}
 
c.info span {
  display: none;
}
 
c.info:hover span {
  display: block;
  position: absolute;
  top: -7.3em;
 left: -0.2em;
  border-radius: 50%;
  width: 85px;
  height: 85px;
  background-color: #1B1B1F;
  color: #16161A;
  text-align: center;
  font-weight: none;
}

/* Images Prédef */
.imgPA {
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

/* Images Staff */
.imgwidget {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.imgwidget:hover {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

/* Top Sites */
.tops {
  -moz-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
  width: 40px;
}

.tops:hover {
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  width: 40px;
}

/*--------------------------------- FIN PA ---------------------------------*/

HTML

<div class="fondsgénéraux">
 
<center>
 
<div class="titrePA1">
 Once Upon A Time
</div><img src="http://nsa31.casimages.com/img/2014/01/25//140125112012539200.png" style="margin-top: -50px; WIDTH: 100px; margin-left: 320px; opacity: 0.5px" />
</center>
 
<table>
 
<tbody>
 
<tr>
 
<td>
 
<center>
 <script type="text/javascript">
        //
        </script>
<div class="contenu_paonglets">
 
<div id="contenu_paonglet_contexte" class="contenu_paonglet">
 
<div class="titrePA2">
 Contexte
</div><img src="http://data2.whicdn.com/img/97872350/large.jpg" style="width: 200px" /> <br /><br />
<div style="TEXT-ALIGN: justify; WIDTH: 230px; HEIGHT: 150px; COLOR: #767676; OVERFLOW: auto;">
 Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque Haec nulla rerum nulla benevolentiae fides ab tyrannorum omnia Nam velit caritas erunt homines est nimirum atque ipse enim ullo esse velit ipse nulla omnibus amicitia usu omnium nec atque nulla in nec ergo est stabilis abundantia fidem semper suspecta neque potest suspecta sollicita erunt diligat tyrannorum omnibus usu ut est qua si abundantia stabilis usu ullo neque Haec suspecta omnium vivere si omnium de vivere abundantia Nam est disputabunt habent circumfluere caritas stabilis atque. <a href="http://rpgiletaitunefois.lesmots.net/t13-le-contexte" style="COLOR: #fe6d6d !important">La suite</a>
</div>
 
</div>
 
<div id="contenu_paonglet_encours" class="contenu_paonglet">
 
<div class="titrePA2">
 Actuellement ...
</div><img src="http://data2.whicdn.com/img/83773104/large.gif" style="WIDTH: 200px" /> <br /><br />
<div style="TEXT-ALIGN: justify; WIDTH: 230px; HEIGHT: 175px; COLOR: #767676; OVERFLOW: auto;">
 Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque Haec nulla rerum nulla benevolentiae fides ab tyrannorum omnia Nam velit caritas erunt homines est nimirum atque ipse enim ullo esse velit ipse nulla omnibus amicitia usu omnium nec atque nulla in nec ergo est stabilis abundantia fidem semper suspecta neque potest suspecta sollicita erunt diligat tyrannorum omnibus usu ut est qua si abundantia stabilis usu ullo neque Haec suspecta omnium vivere si omnium de vivere abundantia Nam est disputabunt habent circumfluere caritas stabilis atque.
</div>
 
</div>
 
</div><br />
<div class="paonglets">
 <span onclick="javascript:change_paonglet('contexte');" id="paonglet_contexte" class="paonglet_0 paonglet"><img src="http://i56.servimg.com/u/f56/18/71/36/65/sans_t10.png" /></span> <span onclick="javascript:change_paonglet('encours');" id="paonglet_encours" class="paonglet_0 paonglet"><img src="http://i56.servimg.com/u/f56/18/71/36/65/sans_t12.png" /></span>
</div>
 <script type="text/javascript">
        //
        </script><br /><br />
<div class="blocpa">
 
<div class="titrePA2">
 Liens utiles
</div><br /><select onchange="location = this.value" style="BACKGROUND-COLOR: #d3d3d3; WIDTH: 190px; COLOR: #16161a"> <option>Faites votre choix</option> <option value="#">Lien</option> <option value="#">Lien 2</option> <option value="#">Lien 3</option> <option value="#">Lien 4</option> <option value="#">Lien 5</option></select>
</div><br /><br />
<div class="blocpa">
 
<div class="titrePA2">
 Les manitou-tou
</div><d class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br /><a href="#" style="COLOR: #f0f0f0 !important">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕</f> <a href="#" style="COLOR: #f0f0f0 !important">MP</a></span></d> <d class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br /><a href="#" style="COLOR: #f0f0f0 !important">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕</f> <a href="#" style="COLOR: #f0f0f0 !important">MP</a></span></d> <d class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgwidget" /><span><e style="COLOR: #f0f0f0 !important; FONT-SIZE: 18px !important" class="titrePA1">Pseudo</e> <br /><a href="#" style="COLOR: #f0f0f0 !important">Profil</a> <f style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕</f> <a href="#" style="COLOR: #f0f0f0 !important">MP</a></span></d>
</div>
 
</center>
 
</td>
 
<td style="WIDTH: 20px">
 
</td>
 
<td>
 
<center>
 
<div style="WIDTH: 350px" class="blocpa">
 
<div class="titrePA2">
 Nos actualités
</div><br /><br />
<div style="TEXT-ALIGN: justify; WIDTH: 300px; HEIGHT: 150px; COLOR: #767676; OVERFLOW: auto">
 <span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br /><span style="COLOR: #fe6d6d; FONT-SIZE: 14px">☕ </span>Benevolentiae Nam homines in homines omnia erunt fides Nam in omnia omnibus vivere omnibus circumfluere locus nimirum ipse habent in abundantia omnium potest pro atque <a href="#" style="COLOR: #fe6d6d !important">La suite</a> <br /><br />
</div><br /><br />
<div class="titrePA2">
 Nos vedettes manquantes sont ...
</div>
 <br /><br /> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c> <c class="info"><img src="http://i56.servimg.com/u/f56/18/71/36/65/110.png" class="imgPA" /><span><br /><br /><d style="COLOR: #f0f0f0 !important; FONT-SIZE: 17px !important" class="titrePA1">Pseudo</d> <br /><a href="#" style="COLOR: #fe6d6d !important">Sa fiche</a></span></c>
</div><br />
<div style="WIDTH: 300px" class="blocpa">
 
<div class="titrePA2">
 Pensez à survoler tout élément suspect !
</div>
 
</div><br />
<div style="WIDTH: 350px" class="blocpa">
 
<div class="titrePA2">
 Si tu nous aimes, prouve-le !
</div><a href="#"><img src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" class="tops" /></a> <a href="#"><img src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" class="tops" /></a> <a href="#"><img src="http://www.renders-graphiques.fr/image/upload/normal/1079_render_Pomme.png" class="tops" /></a><br /><a href="#" style="FONT-FAMILY: georgia; COLOR: #fe6d6d !important"><em>Et sois récompensé</em></a>
</div>
 
</center>
 
</td>
 
</tr>
 
</tbody>
 
</table><br /><a style="color: #767676 !important;" href="http://ls-halloween.fr">© Halloween</a>
</div><link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Parisienne" />

Codage index complet Once Upon A Time catégories Halloween Forumactif PHPBB2

CSS

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

.hoverme {
          font-size: 11px;
          font-family: arial;
          color: #FE6D6D;
          text-align: center !important;
          margin-top: 10px;
        }

r:focus{
        background: #020202;
        z-index: 1;
        }

r span {
            z-index: 1;
            position: absolute;
            margin-top: -95px;
            margin-left: -135px;
              color: #F0F0ED;
            width: 180px;
             height: 55px;
              overflow: auto;
              background: #141517;
            padding: 15px;
            border-radius: 3px;
            transform: scale(0) rotate(-12deg);
          -webkit-transform: scale(0) rotate(-12deg);
          -ms-transform: scale(0) rotate(-12deg);
              transition: all .25s;
            }

r:hover span, r:focus span {
            z-index: 1;
            transform: scale(1) rotate(0);
          -webkit-transform: scale(1) rotate(0);
          -ms-transform: scale(1) rotate(0);
            }

/* Catégories */

.titrecategorie h2 {
          top: 1.5em;
          position: relative;
          font-size: 27px;
        font-family: parisienne;
          color: #FE6D6D !important;
          letter-spacing: 1px !important;
          z-index: 1;
        }

.cate_titre {
          text-align: center;
          margin: auto;
          background-color: #1B1B1F;
          width: 750px;
          height: 210px;
          border-radius: 130% 130% 0% 0%;
        }

.cate_footer {
          text-align: center;
          margin: auto;
          z-index: 1;
          position: relative;
          margin-top: -100px;
          background-color: #1B1B1F;
          width: 750px;
          height: 210px;
          border-radius: 0% 0% 130% 130%;
        }

.footer_texte {
          top: 5.5em;
          position: relative;
          font-size: 20px;
        font-family: parisienne;
          color: #FE6D6D !important;
          letter-spacing: 1px !important;
        }

.categorie {
          width: 750px;
          margin: auto;
          background-color: #1B1B1F !important;
          margin-top: -100px;
        }

/* New */
        .new01 {
          transform: rotate(5deg);
        }

/* Forum */

.forum {
          width: 700px;
          height: 120px;
          margin-left: auto;
          margin-right: auto;
          margin-top: 5px;
          margin-bottom: 5px;
          background: #141517;
          position: relative;
          padding: 2px;
          z-index: 2;
        }

a.forumlink {
          position: relative;
          display: block;
          width: 100%;
          color: #F0F0ED !important;
          text-align: left;
          font-family: parisienne;
          font-size: 22px;
          font-weight: bold;
          letter-spacing: 1px;
          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;
        }

a.forumlink:hover {
          letter-spacing: 2px;
          color: #FE6D6D !important;
          text-decoration: none !important;
          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 */
        .description {
          width: 280px;
          height: 80px;
          overflow: auto;
          background-color: #141517;
        text-align: justify;
          font-family: arial;
          font-size: 11px;
        }

/* Bloc derniers messages */

.bloccate {
          width: 180px;
        }

.stats_last
        {
          display: block;
          width: 160px;
          height: 75px;
          margin-left: -200px;
          margin-top: 30px;
          background: #E3A6A6;
          padding: 10px;
          border: 1px solid #2E2E2E;
          box-shadow: 2px 2px 10px #2E2E2E;
        -moz-box-shadow: 2px 2px 10px #2E2E2E;
          -webkit-box-shadow: 2px 2px 10px #2E2E2E;
        }

.stats {
          display: block;
          text-align: center;
          font-size: 10px;
          color: #7E2727;
          border-bottom: 1px solid #7E2727;
          padding-bottom: 4px;
          margin-bottom: 4px;
        }

.last_mess {
          display: block;
          text-align: center;
          font-size: 11px;
          color: #F0F0ED;
        }

.last_mess a{
          text-align: center;
          font-size: 11px;
          color: #F0F0ED;
        }

/* Sous-forum */

/*--------------------------------- 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"><div class="titrecategorie">{catrow.tablehead.L_FORUM}</div></div>

<div class="forum">
  
<table><tr>
  <td style="vertical-align: middle; padding: 10px;" class="bloccate"><nobr><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
    <span style="font-size: 11px;"><span style="COLOR: #fe6d6d; FONT-SIZE: 11px;">✘ {catrow.forumrow.TOPICS}</span> rebondissements dans <span style="COLOR: #fe6d6d; FONT-SIZE: 11px;">{catrow.forumrow.POSTS}</span> aventures.</span><br />
   </nobr> <center><div class="last_mess"><span class="gensmall" id="last">{catrow.forumrow.LAST_POST}</span></div>
<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>
    <p> <r class="hoverme">Hover Me!<span class="gensmall1">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span> </r> </p></center></td>
  <td style="vertical-align: middle;">
  {catrow.forumrow.FORUM_DESC}</td>
  <td><img class="new01" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    </td>
</tr></table>
    
    </div><br />

</div><div class="cate_footer"><br /><div class="footer_texte">Nom du forum</div></div>
  

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Parisienne" />

Descriptions des forum

Codage index complet Once Upon A Time qui est en ligne Halloween Forumactif PHPBB2

CSS

/* --------------------------------- QEEL --------------------------------- */

/* Fond */
.fondsgénéraux {
  background-color: #1B1B1F;
  width: 700px;
  padding: 15px;
  color: #767676;
}

.blocpa {
  width: 220px;
  padding: 15px;
  background-color: #141517;
}

.blocpa:hover {
  width: 220px;
  background-color: #141517;
  border-left: 2px solid #2F3C3E;
  border-right: 2px solid #2F3C3E;
}

/* Titres */
.titrePA1 {
  font-family: parisienne;
  font-size: 35px;
  color: #FE6D6D;
  z-index: 1px;
  position: relative;
}

.titrePA2 {
  font-family: parisienne;
  font-size: 25px;
  color: #F0F0F0;
  position: relative;
}

.titrePA2:hover {
  font-family: parisienne;
  font-size: 25px;
  color: #FE6D6D;
  position: relative;
}

/* Groupes */
.qeelonglet {
  display: inline-block;
  padding: 10px;
  cursor: pointer;
  font-family: parisienne;
  font-size: 25px;
  color: #F0F0F0;
  top: -2em;
  position: relative;
}

.qeelonglet_1 {
  color: #FE6D6D;
}
           
.contenu_qeelonglet {
  padding: 2px;
  display: none;
  height: 90px;
  width: 300px;
  overflow: auto;
  background-color: #1B1B1F;
  text-align: justify;
  font-family: arial;
  font-size: 11px;
  position: relative;
  top: -5em;
}

/* 24h */
#kaboum .row1 {
  background-color : transparent;
  color: #767676 !important;
}

/* Partenaires */
.part {
  width: 50px;
  opacity: 0.5;
}

.part:hover{
  opacity: 1;
  width: 100px;
  height: 35px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

/* Description des crédits */
.qeel1 { 
 width: 300px;
  height: 156px;
  overflow: hidden;
  border-left: 2px solid #2F3C3E;
  border-right: 2px solid #2F3C3E;
  background-color: #141517;
  color: #767676;
}

.qeel1_img {
  position: relative;
  z-index: 2;
  width: 300px;
  height: 156px;
  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;
}
   
.qeel1:hover .qeel1_img {
  margin-left: 400px;
  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;
}
   
.qeel1_description {     
  position: relative;
  z-index: 1;
  width: 270px;
  height: 156px;
  margin-top: -170px;
  text-align: justify;
  font-size: 11px;
  color: #8c8c8c;
  padding: 15px;
  overflow: auto;
}

/* Description des stats */
.qeel { 
 width: 250px;
  height: 173px;
  overflow: hidden;
  border-left: 2px solid #2F3C3E;
  border-right: 2px solid #2F3C3E;
  background-color: #141517;
  color: #767676;
}

.qeel_img {
  position: relative;
  z-index: 2;
  width: 250px;
  height: 173px;
  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;
}
   
.qeel:hover .qeel_img {
  margin-left: 400px;
  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;
}
   
.qeel_description {     
  position: relative;
  z-index: 1;
  width: 220px;
  height: 173px;
  margin-top: -170px;
  text-align: justify;
  font-size: 11px;
  color: #8c8c8c;
  padding: 15px;
  overflow: auto;
}

/* --------------------------------- QEEL --------------------------------- */

Index_body

{JAVASCRIPT}

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 
 <tr>
 <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
 </tr>
 
 
 <tr>
 <td class="row1" rowspan="3" align="center" valign="middle">
 <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
 </td>
 </tr>
 
</table>

<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td class="row1" align="center">
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span> 
 </td>
 </tr>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td valign="top" width="100%" class="row1" align="center">
 <table width="100%">
 <tr>
 <td width="55%" valign="middle" align="right">
 <table class="right">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span> 
 </td>
 </tr>

<tr>
 <td><span class="genmed">{L_PASSWORD}:</span> </td>
 <td><input class="post" type="password" size="10" name="password"/> </td>
 <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
 </tr>
 </table>
 </td>
 <td width="10%" align="center" valign="middle">
 <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
 </td>
 <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 
</form>

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="50%" valign="top">
 
 <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
 
 
 <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
 
 </td>
 <td width="50%" align="right">
 <span class="gensmall">
 <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
 <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
 <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
 
 
 <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 
 
 </span>
 </td>
 </tr>
</table>

<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td class="row1" align="center">
 <table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span> 
 </td>
 </tr>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
 <tr>
 <td valign="top" width="100%" class="row1" align="center">
 <table width="100%">
 <tr>
 <td width="55%" valign="middle">
 <table class="right">
 <tr>
 <td><span class="genmed">{L_USERNAME}:</span> </td>
 <td><input class="post" type="text" size="10" name="username"/> </td>
 <td>
 <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
 <span class="gensmall">{L_AUTO_LOGIN}</span> 
 </td>
 </tr>

<center><div class="fondsgénéraux"><center><div class="titrePA1">
 Once Upon A Time
</div>
 <img src="http://nsa31.casimages.com/img/2014/01/25//140125112012539200.png" style="width: 100px; margin-top: -50px; margin-left: 320px; z-index: 2px; opacity: 0.5px;" />
 <br /><br /><table><tr><td><center>
  <div class="qeel"><div class="qeel_img"><img src="http://nsa31.casimages.com/img/2014/01/25/140125020141331046.gif" style="width: 250px;" /></div><div class="qeel_description"><div class="titrePA2">Evil Queen says ...</div><br />Bienvenue dans notre monde ... merveilleux ? Tout dépend du point de vu.<span id="bert">{TOTAL_POSTS}
                </span>
                <script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/," Actuellement, ").replace(/message/,"aventures ont été vécues par");
                </script> <span id="matt">{TOTAL_USERS}
                </span>
                <script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"nos").replace(/membre enregistré/,"héros de contes, quels qu'ils soient.");
      </script><br />
      <span id="yosh">{NEWEST_USER}</span>
                <script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"En ce moment nous festoyons chez Granny en l'honneur de");
    </script></div></div><br />
  <div class="blocpa" style="font-size: 11px; text-align: justify; width: 220px; height: 100px; overflow: auto;"><div class="titrePA2">En ce moment ...</div><br /><span id="alpha">{LOGGED_IN_USER_LIST}</span>
                <script type="text/javascript">document.getElementById('alpha').innerHTML=document.getElementById('alpha').innerHTML.replace(/Utilisateurs enregistrés :/,"Voici qui rode dans les parages ... Méfies-toi de la reine petit effronté ! ");</script></div>
  <br />
  <div class="titrePA2">We said "yes"</div><div class="blocpa" style="font-size: 11px; text-align: justify; width: 220px; height: 80px; overflow: auto;"><center><a href="#"><img src="https://i.imgur.com/rlFMEdL.jpg" class="part" /></a> <a href="#"><img src="https://i.imgur.com/rlFMEdL.jpg" class="part" /></a> <a href="#"><img src="https://i.imgur.com/rlFMEdL.jpg" class="part" /></a> <a href="#"><img src="https://i.imgur.com/rlFMEdL.jpg" class="part" /></a> <a href="#"><img src="https://i.imgur.com/rlFMEdL.jpg" class="part" /></a> <a href="#"><img src="https://i.imgur.com/rlFMEdL.jpg" class="part" /></a> <a href="#"><img src="https://i.imgur.com/rlFMEdL.jpg" class="part" /></a> <a href="#"><img src="https://i.imgur.com/rlFMEdL.jpg" class="part" /></a><br /><a href="#" style="color: #F0F0F0 !important;">Et vous ?</a></center></div>
  </center></td><td width="20px"></td>
  <td><center><div class="blocpa" style="width: 300px; height: 100px;">
   
                    <script type="text/javascript">
            //
            </script><div class="qeelonglets"><nobr>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe1" onclick="javascript:change_qeelonglet('groupe1');">Groupe1</span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe2" onclick="javascript:change_qeelonglet('groupe2');">Groupe2</span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe3" onclick="javascript:change_qeelonglet('groupe3');">Groupe3</span>

</nobr> </div>

<div class="contenu_qeelonglets">
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe1">Groupe1</div>

<div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe2">Groupe2</div>

<div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe3">Groupe3</div>
             
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe4">Groupe4</div>
             
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe5">Groupe5</div>
             
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_groupe6">Groupe6</div>
   
    </div>
   
    <div class="qeelonglets"><nobr>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe4" onclick="javascript:change_qeelonglet('groupe4');">Groupe4</span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe5" onclick="javascript:change_qeelonglet('groupe5');">Groupe5</span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_groupe6" onclick="javascript:change_qeelonglet('groupe6');">Groupe6</span>

</nobr> </div>
        <script type="text/javascript">
            //
            </script>
   
    </div><br /><br /><br />
   
    <div class="blocpa" style="font-size: 11px; text-align: justify; width: 270px;"><div class="titrePA2">Coupez-leur la tête !</div><br />
    Quiconque attrapera l'un des frippons ayant osé parcourir nos bois durant 24 heures sera récompensé ! <div style="width: 250px; height: 60px; overflow: auto;"> <table id="kaboum">{L_CONNECTED_MEMBERS}
    <script type="text/javascript">
    jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 24 dernières heures : ','Voici les fuyards : '));
      </script></table></div>
    </div><br />
  <div class="qeel1"><div class="qeel1_img"><img src="http://data3.whicdn.com/img/87282614/large.gif" style="width: 300px;" /></div><div class="qeel1_description"><div class="titrePA2">Thanks</div><br />
    Forum optimisé pour Firefox. <br />Design réalisé par X, QEEL réalisé par <a href="https://rainyhalloween.wixsite.com/rainyhalloween">Halloween</a>. Merci également à nos membres d'être là, certains depuis plus longtemps que d'autres.</div></div></center></td></tr></table></center></div></center>

{CHATBOX_BOTTOM}
<br clear="all" />

<table border="0" cellspacing="3" cellpadding="0" align="center">
 <tr>
 <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
 <td><span class="gensmall">{L_NEW_POSTS}</span></td>
 <td></td>
 <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
 <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
 <td>  </td>
 <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
 <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
 </tr>
</table>

{AUTO_DST}

<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
 appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
 status: true,
 cookie: true,
 xfbml: true,
 oauth: true
});
//]]>
</script>

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

#onceuponatime #indexcomplet #forumactif #codage #libreservice

Halloween