Bonjour à tous,

Petit message pour spécifier que la commande est toujours d'actualité :)

Merci à vous o/

Bonjour à tous o/

En temps normal, je n'aurais pas up aussi vite mais vu qu'on a déjà, avec l'équipe, tâché d'arriver nous-même au résultat voulu, je me permets donc de upper pour vous spécifier qu'on a presque atteint notre but mais qu'il reste cependant deux "bugs" à devoir régler (jusqu'ici, on a pas trouvé)

C'est donc un code hybride entre le LS d'Onyx et une précédente commande.

Cela risque peut-être de piquer les yeux de certains d'entre vous mais nous débuttons en codage (ou plutôt, nous sommes vachement rouillés) donc voyez-nous plutôt comme les scientifiques qui multiplient les expériences pour obtenir un résultat plutôt brouillon

Voici le forum sur lequel le codage est le plus avancé : https://azrae-rpg.forumactif.com/
Vu qu'on est plusieurs à bosser dessus, nous avons chacun notre fofo "test" x)

Aperçu de ce que cela donne actuellement :



Voilà le code du template :

Code:

<link href='http://fonts.googleapis.com/css?family=Lobster|Great+Vibes' rel='stylesheet' type='text/css' />
  <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 class="cate" width="100%" border="0" cellspacing="0" cellpadding="0"><tbody>
  <tr>
    <td width="100%" valign="middle" align="center">
      <span class="cate_title">
        {catrow.tablehead.L_FORUM}
      </span>
    </td>
  </tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
     
  <tr>  <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td align="center" valign="center">
         
      <div class="forum">
              <div class="forum_top">
  <div class="forum_top_left">
                        <span class="forumlink">
        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
                {catrow.forumrow.FORUM_NAME}
              </a>
      </span>
            <br />
            <span class="forum_stats">
              Sujets: <em>{catrow.forumrow.TOPICS}</em> | Messages: <em>{catrow.forumrow.POSTS}</em>
            </span>
          </div>
          <div class="forum_top_right">
            <span class="forum_last_mess">
              <span id="forum_last_mess2">
                {catrow.forumrow.LAST_POST}
              </span>
            </span>
            <script type="text/javascript">
              jQuery('#forum_last_mess2').html(jQuery('#forum_last_mess2').html().replace(/<br>/g,'')).removeAttr('id');
            </script>
          </div>
        </div>
      <div class="forum_bloc_sous_forums">
                    <div class="cate-orme">{catrow.forumrow.FORUM_DESC}
            <div class="ss-forum"><div style="text-align: center;width: 100%;margin: auto;">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
              <script type="text/javascript">$('.ss-forum').each(function(){$(this).html($(this).html().replace(/>, /g,"><br />"));});</script>
            </div>
            <script type="text/javascript">
              jQuery('#forum_sous_forums2').html(jQuery('#forum_sous_forums2').html().replace(/, /g,'<br />')).removeAttr('id');
            </script>
          </div>
          <div class="forum_bottom">
         
        </div>
      </div>
    </td>
  </tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
  </tbody></table>
<!-- END tablefoot -->
<!-- END catrow -->

Et le code du CSS:

Code:

/******************************************************* DÉBUT CATÉGORIES *******************************************************/


/*Catégorie*/
.cate {
  margin: auto;
  margin-bottom: 10px;
  padding-bottom: 5px;
  background-color: #0f120f;
  border: 2px solid #1f1d1a;
  width: 900px;
}

/*Fond du titre de la catégorie*/
span.cate_title {
  display: block;
  background-image: url('https://2img.net/r/hpimg4/pics/781032956965Sanstitre.png');
  width: 900px;
  margin: 15px;
  padding: 5px;
}
/*Titre de la catégorie*/
.cate_title h2 {
  display: block;
  margin: 0px;
  padding: 0px;
  font-family: 'Great Vibes';
  font-size: 36px;
  text-shadow: 0px 0px 5px #000000;
  color: #23709e;
  font-weight: normal;
  letter-spacing: 1px;
}


/*Bloc de chaque forum*/
.forum {
  width: 740px;
  height: 199px;
  margin: auto;
  margin-bottom: 10px;
  padding: 10px;
  background-image: url('https://2img.net/image.noelshack.com/fichiers/2014/48/1416945713-pattern.png');
  text-align: center;
  color: #7b848f;
}


/*Section du haut du forum*/
.forum_top {
  width: 718px;
  height: 30px;
  margin: auto;
  padding: 10px;
  background-color: #1f1d1a;
  border: 1px solid #161412;
}

/*Section de gauche avec le titre et les stats*/
.forum_top_left {
  float: left;
  width: 430px;
  text-align: left;
}
/*Titre du forum*/
a.forumlink {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-shadow: 1px 1px 1px #000000;
  color: #23709e!important;
  font-style: italic;
  font-weight: normal;
  letter-spacing: 2px;
  padding-bottom: 5px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}
/*Titre du forum survolé*/
a.forumlink:hover {
  text-decoration: none!important;
  letter-spacing: 4px;
}
/*Statistiques*/
.forum_stats {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

/*Section de gauche avec le dernier message*/
.forum_top_right {
  position: relative;
  float: left;
  width: 278px;
  margin-left: 10px;
  text-align: left;
}
/*Dernier message*/
.forum_last_mess {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #7b848f;
}
/*Placement du titre du dernier message*/
.forum_last_mess a {
  display: block;
  margin-left: 0px;
  margin-bottom: 3px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
/*Placement de l'image du dernier message*/
.forum_last_mess span > a:nth-last-of-type(1) img {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 0px;
  margin-left: -25px;
  width: 24px;
  height: 14px;
}
/*Mise en forme de l'auteur du dernier message*/
.forum_last_mess a.gensmall, .forum_last_mess a.gensmall strong {
  display: inline;
  margin-left: 5px;
  margin-bottom: 0px;
  font-family: arial;
  font-style: normal;
  font-weight: normal!important;
  font-variant: normal;
  font-size: 12px;
  text-shadow: 1px 1px 1px #101010;
}


/*Section du bas du forum*/
.forum_bottom {
  position: relative;
  width: 740px;
  height: 137px;
  margin: auto;
  margin-top: 10px;
}


/* Container */
.cate-orme{
  width: 740px;
  min-height: 120px;
  max-height: 215px;
  display: flex;
}
/* CSS pour les sous-forums plus hauts */
.cate-orme > .large{
  height: 215px !important;
}
/* Style de l'image de fond */
.cate-orme > img{
  position: absolute;
  opacity: 1;
  z-index: 1;
  -o-transition: ease-in 0.75s;
  -moz-transition: ease-in 0.75s;
  -webkit-transition: ease-in 0.75s;
  transition: ease-in 0.75s;
}
/* Diminution de l'opacité au survol */
.cate-orme:hover > img{
  opacity: 0.1;
}
/* Style de la description & de l'ensemble des sous-forums */
.cate-orme > .desc, .cate-orme > .SI, .cate-orme > .fin, .cate-orme > .ss-forum{
  -o-transition: ease-in 0.75s;
  -moz-transition: ease-in 0.75s;
  -webkit-transition: ease-in 0.75s;
  transition: ease-in 0.75s;
  height: 120px;
  padding: 5%;
  overflow: auto;
  z-index:2;
}
/* Le texte est transparent par défaut. */
.cate-orme > .desc, .cate-orme > .ss-forum{
  opacity: 0;
}
/* S'il n'y a pas d'image de fond, le texte apparaît. */
.cate-orme > .SI{
  opacity: 1 !important;
}
.cate-orme > .SI ~ .ss-forum{
  opacity: 1 !important;
}
/* Affichage de la description & de l'ensemble des sous-forums au survol */
.cate-orme:hover > .desc, .cate-orme:hover > .ss-forum{
  opacity: 1;
}
/* Taille du bloc de description s'il y a des sous-forums */
.cate-orme > .desc, .cate-orme > .SI{
  width: 75%;
  padding: 5px 25px;
  text-align: justify;
}
/* Taille du bloc de description s'il n'y a pas de sous-forums */
.cate-orme > .fin{
  width: 100%;
  padding: 5px 25px;
  text-align: justify;
}
.cate-orme > .fin ~ .ss-forum{
  width: 0px !important;
  padding: 0 !important;
}
/* Taille du bloc des sous-forums */
.cate-orme > .ss-forum{
  width: 25%;
  padding: 5px 25px 5px 0;
  display: flex;
}


/******************************************************* FIN CATÉGORIES *******************************************************/

Bref, vous pouvez voir qu'on a réussi à remettre la colonne avec les images messages mais que celle-ci est non seulement surdimensionnée mais elle n'est pas reprise dans le bloc qui contient actuellement l'image.

Le second problème est au niveau de la taille de la zone catégorie mais on se doute qu'une fois le première problème réglé, le second se réglera automatiquement aussi

Nous y sommes presque et nous continuons de chercher au cas où même si là, pour l'instant, nous n'avons pas trouvé la solution.

Au plaisir de vous lire o/

Bonjour à tout le monde !

Après quelques jours d'efforts intenses pour notre cerveau, nous avons fini par obtenir l'effet recherché !

La commande n'a donc plus lieu d'être :)

Merci à NU pour ses Libres Services et ses nombreux tutos qui nous ont aidés !

Nous ne manqueront pas de vous citer allégrement sur la PA de notre futur forum.

L'équipe d'Oncmelia Minor

Merci d'être venu nous tenir au courant :) ! J'archive le sujet et bon courage ︎