Liste des sujets #001 - ModernBB

Bonjour ! Voici une petite liste des sujets !

Cette liste des sujets s'adapte à toutes les tailles de forum au dessus de 750px de large.
Le CSS est commenté de façon à permettre le changement des couleurs dominantes.
Elle est prévue pour être utilisée sur ModernBB.
Lorsqu'un nouveau message est posté, la barre sous le titre du sujet change de couleur. Vous pouvez changer la couleur selon vos goûts, dans le CSS.
Veillez à bien désactiver l'optimisation du CSS sur la feuille de style. (C'est activé automatiquement à la création du forum).
Un petit message fera apparaître les codes. En cas de soucis, n'hésitez pas à me MP ici ou sur Discord.

Enjoy !  

Aperçu :

Liste des sujets normale :

Spoiler:

Liste des sujets lorsqu'un nouveau message est posté :

Spoiler:

• Template topics_list_box :

Code:

<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
 <!-- BEGIN multi_selection -->
 <script type="text/javascript">

 function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}()
 {
 alert('MAIN');

 var all_checked = true;

 for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++)
 {
 if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}')
 {
 all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
 }
 }

 document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
 }

 function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}()
 {
 alert('ALL');

 for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++)
 {
 if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}')
 {
 document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
 }
 }
 }

 </script>
 <!-- END multi_selection -->

 <div class="lmemBack">
 
 <ul class="topiclist topics bg_none">
<!-- END header_table -->

<!-- BEGIN header_row -->
 <strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->

 <!-- BEGIN table_sticky -->
 </ul>
 
 

 <ul class="topiclist topics bg_none">
 <!-- END table_sticky -->

<div class="lmemAll">
  <div class="lmemLeftT">
    <div class="lmemLeftTbloc">
      <a class="lmemTopicTitle" href="{topics_list_box.row.U_VIEW_TOPIC}" data-type="{topics_list_box.row.L_TOPIC_FOLDER_ALT}">{topics_list_box.row.TOPIC_TYPE} {topics_list_box.row.TOPIC_TITLE}</a>
      <div class="lmemTopicDesc"><!-- BEGIN switch_description -->{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}<!-- END switch_description --></div>
    </div>
  </div>
  <div class="lmemLeftB">
    <div class="lmemAuth"> {topics_list_box.row.L_BY}<a href="lien">&nbsp;{topics_list_box.row.TOPIC_AUTHOR}</a></div>
    <div class="lmemPag"><!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->{topics_list_box.row.GOTO_PAGE_NEW}</div>
  </div>
<div class="lmemRight">
  <div class="lmemRbloc">{topics_list_box.row.LAST_POST_TIME}{topics_list_box.row.LAST_POST_IMG}</div>
  <div class="lmemRbloc">{topics_list_box.row.LAST_POST_AUTHOR}</div>
  <div class="lmemStat"><span>{topics_list_box.row.REPLIES}</span> messages</div><div class="lmemStat"><span>{topics_list_box.row.VIEWS}</span> vues</div>
  </div>
  <div class="lmemRight2">
  </div>
</div>

 
 
 <!-- BEGIN single_selection -->
 <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
 <!-- END single_selection -->

<span style="display:none"><dd class="lastpost">
 <!-- BEGIN avatar -->
 <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
 <!-- END avatar -->
</dd></span>


 <!-- BEGIN multi_selection -->
 <input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
 <!-- END multi_selection -->
 
 
<!-- END topic -->
<!-- BEGIN no_topics -->
<li class="row row1">
 <dl>
 <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt>
 </dl>
</li>
<!-- END no_topics -->

<!-- BEGIN bottom -->
</ul>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

• CSS à insérer dans la feuille de style :

Code:

/*LS Liste des sujets bleu*/
.lmemBack {
      background: white; /*Changer ici pour la couleur de fond du cadre de la liste*/
    padding: 10px 10px 1px 10px;
}
.lmemAll {
  width:100%;
  height:140px;
  background-color:#f3f3f3;
  background-image: url("https://i.servimg.com/u/f41/20/09/34/72/absurd10.png");
  position:relative;
      margin: 0px 0px 10px 0px;
}

.lmemLeftT {
  width:100%;
  height:100px;
  background:transparent;
}
.lmemLeftB {
  width:100%;
  height:40px;
  background:#e8e8e8;
  display:flex;flex-flow:row wrap; align-content:center; padding:10px 37% 10px 10px; justify-content:space-between;align-items: center;
}

.lmemAuth {
  background:#f8f8f8;
  height:20px;padding:3px 8px; line-height:110%;
  font-family: Open Sans, sans-serif; font-size:12px; text-transform:uppercase;font-weight:600; color:#777;border-radius:3px;
}

.lmemAuth a {
  text-decoration:none; font-weight:700; color:#4d7fc8;
}

.lmemPag {
  font-family:Open Sans, sans-serif;
  font-size:12px; color:#777;
}

.lmemPag .pagination span a:active,.lmemPag .pagination span a:link,.lmemPag .pagination span a:visited{
    text-decoration: none;
    background: rgba(255,255,255,0.75);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
    margin: 3px;
    color: #4d7fc8; /*Changer ici pour la couleur des liens des numéros de pages*/
    font-weight: 700;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
}
.lmemLeftTbloc {
  width:65%;
  height:100px;
}

.lmemTopicTitle {
  text-decoration:none;
  font-family:Raleway, sans-serif;
  font-size:30px; text-transform:uppercase;
  font-weight:700; letter-spacing:-1px;
  height:60px; display:flex; align-items:center; padding:15px;
  width:100%; position:relative;
  transition:0.25s ease-in-out;
}

a.lmemTopicTitle {
 color:#4d7fc8; /*Changer ici la couleur du titre*/
}
.lmemTopicTitle:hover {
  color:#8ebcde; /*Changer ici la couleur du titre au survol*/
}
.lmemTopicTitle strong {
    color: #777; /*Changer ici la couleur du type de sujet (note, annonce, annonce globale)*/
}
.lmemTopicTitle:before {
  content:"";
  width:100px;
  border-bottom:5px solid #8acae9;/*Changer ici la couleur de base de la barre indiquant de nouveaux messages postés*/
  position:absolute;
  bottom:5px;
}

.lmemTopicTitle[data-type="Nouveaux messages"]:before {
  border-bottom:5px solid #f5cb9a; /*Changer ici la couleur de la barre lorsque de nouveaux messages sont postés*/
}

.lmemTopicDesc {
  font-family:Lato, sans-serif; font-size:12px; padding:0px 35px;
  color:#888; display:flex;max-height:40px;line-height:2000%;
  align-items:center; background:#f3f3f3; width:110%; min-width:610px;
}

.lmemRight {
  width:35%;
  height:140px;
  position:absolute; top:0px;right:0px;
clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%);
background: linear-gradient(328deg, rgba(77,127,200,1) 0%, rgba(138,202,233,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
  display:flex;flex-flow:row wrap;
  justify-content:flex-end;align-content:space-between;
  padding:15px 0px;box-sizing:border-box;
 z-index:2;
}

.lmemRight2 {
  width:35%;
  height:140px;
  position:absolute; top:0px;right:0px;
clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%);
  webkit-clip-path: polygon(8% 0, 100% 0%, 100% 100%, 0 100%);
background: linear-gradient(328deg, rgba(77,127,200,0.5) 0%, rgba(138,202,233,0.5) 100%);/*Changer ici les couleurs du dégradé de fond de la bordure gauche du bloc*/
 right:10px;
}

.lmemRbloc {
  width:100%;background-color:white;
 height:25px;
  font-family:Open Sans, sans-serif;
  text-transform:uppercase; font-size:12px; font-weight:700;
  text-align:center; line-height:25px; color:#888;
  padding-left:20px; outline:3px solid rgba(255,255,255,0.15);
}

.lmemStat {
  width:45%; height:40px;
  text-align:center;
  font-family:Raleway, sans-serif;
  font-size:13px; text-transform:uppercase; display:flex;align-items:center; justify-content:center;color:white;
}

.lmemStat span{
  font-size:50px; font-weight:900; font-family:Open Sans, sans-serif;
  color:rgba(255,255,255,0.5);display:inline-block;padding-top:5px; margin:0px 10px;
  padding-bottom:8px; font-style:italic; letter-spacing:-2px;
}



Ouiiiii !!! Merci pour ce nouveau code.