Découvrir le conceptSans inscriptionMettez les créditsCommandes ouvertes
Le Deal du moment :
TCL C74 Series 55C743 – TV 55” 4K QLED 144 ...
Voir le deal
499 €

KoalaVolant
KoalaVolant
Mar 6 Avr 2021 - 13:02
Ce code fait partie du thème complet "Red Arrow" et est disponible en PHPBB2 et ModernBB


TYPE : PHPBB2



HTML



Dans topic_list_box il faut mettre cela :

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}() {
 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}() {
 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 -->

<table class="forumline subjects-total" width="100%" border="0" cellspacing="1" cellpadding="0">
 <!-- BEGIN pagination -->
 <tr>
 <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
 </tr>
 <!-- END pagination -->
 <!-- END header_table --><!-- BEGIN header_row -->
 <tr>
 <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
 </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
  
{topics_list_box.row.END_TABLE_STICKY}
 <tr class="subj-body">
          <td class="img-subj">
            <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
          </td>
          
          <td class="subj-tit-descr">
             <h2 class="topic-title">
 <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
 </h2>
            
 <div class="descrauth"><span class="genmed descrsbj">
 <!-- BEGIN switch_description -->{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}            <!-- END switch_description -->
 </span>            <span class="auth-naiss">{topics_list_box.row.TOPIC_AUTHOR}</span>
</div>
          </td>
          
          <td class="author-vuerep">          
                 <div class="authone">          <!-- BEGIN avatar -->
            <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                           <!-- END avatar -->
              <div class="author-mess">{topics_list_box.row.LAST_POST_TIME}<br /><span class="dern-rep">{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></div>
            </div>
            <div class="vues-mess"><span>{topics_list_box.row.VIEWS} vues / {topics_list_box.row.REPLIES} réponses</span></div>

          </td>
          
              
<!-- BEGIN multi_selection -->
 <td class="row2" align="center" valign="middle"><span class="postdetails"><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} /></span></td>
 <!-- END multi_selection -->
 </tr>
 <!-- END topic --><!-- BEGIN no_topics -->
 <tr>
 <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
 </tr>
 <!-- END no_topics --><!-- BEGIN bottom -->
 <tr>
 <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="colorpagination">
 <tr>
 <td> <span class="gensmall">{PAGINATION}</span></td>
 <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
 </tr>
 </table>
 </td>
 </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

CSS



Les couleurs marchent par les root. Voici donc le code à mettre avant, si vous n'avez pris aucun des codes déjà présents sur ce thème :

Code:
:root{ --main-color:#A3171A;
  --snd-color:#970000;
  --main-color-v:url('https://i.servimg.com/u/f30/19/45/51/53/fondbi10.jpg');
  --white:#fff;
  --black:#444;
  --grisc:#dedede;
  --griscc:#f0f0f0;
  
  --font1:'Anton', sans-serif;
--font2:'Kaushan Script', cursive;;
--font3:'Lato', sans-serif;}

  /* Ascenseur */
  
  ::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
::-webkit-scrollbar-thumb {background:var(--main-color); height:30px; border-radius:30px;}
::-webkit-scrollbar-corner {background:none;}
.cate-descr span, .redpres *{     scrollbar-color: var(--main-color) var(--white);
  scrollbar-width: thin; }

Puis le reste :

Code:
/********************** LISTE DE SUJETS PAR KOALAVOLANT ************************/

.subj-body{ display:flex; justify-content:space-between; margin:10px 0px; background-color:var(--gris4); padding:10px; }

  /* Pour le fond en image */
  
  .subj-tit-descr h2, .vues-mess{ background:var(--main-color-v); background-position:center; background-size:cover; clip-path: polygon(0% 0%, 96% 0, 100% 50%, 96% 100%, 0% 100%);
  display:flex; flex-wrap:wrap; position:relative; }
  .subj-tit-descr h2:after, .vues-mess:after{ position: absolute; content: ''; z-index:7;display: block; top: 0; left: 0; height: 100%; width: 100%;  background: var(--main-color);  
    mix-blend-mode: hard-light; }

/* Image sur le coté */

.img-subj{ width:30px; }
.img-subj img{ width: 43px;height: 68px;  object-fit: cover;}

/* Titre & Description */

.subj-tit-descr{ width:66%; }
.subj-tit-descr a.topictitle{ margin:0; padding:5px; color:var(--white); font-family:var(--font2); position:relative; z-index:99;
  font-weight:normal; font-size:19px; }
.subj-tit-descr .gensmall{ font-family: var(--font2); font-size: 12px; color: var(--gris2); }
.descrauth{ display: flex;    justify-content: space-between;  align-items: center; width: 93%; background-color:var(--white); padding:8px; }
.descrsbj{ display:block; width:85%; font-family:var(--font3); font-size:13px; line-height:15px; }

/* Vue Reponse et Auteur */
.authone{ display:flex; justify-content:space-between; align-items:center; padding:8px; background-color:var(--white); flex-direction:row-reverse; width:88%; }
.author-vuerep{ width:24%; display:flex; justify-content:space-between; flex-wrap:wrap; }
.vues-mess{ width:100%; font-family:var(--font1); font-size:11px; text-align:center; color:var(--white); font-weight:lighter; letter-spacing:1px; padding:5px 0px; display:flex; justify-content:center;}
.vues-mess span{ position:relative; z-index:99;  }
.auth-naiss{ font-family:var(--font1); font-size:14px; line-height:15px; text-align:center; font-weight:normal;  }
.auth-naiss a{ display:block; text-decoration:none; }
.auth-naiss a span{ text-align:center; }

.author-vuerep .lastpost-avatar{ position:relative; z-index:14; float:none; }
.authone .lastpost-avatar img{ border-radius: 50%;    border: 3px solid var(--four-color);     height: 45px;    width: 45px; object-fit:cover; }

.subj-dern .dern-rep{ background-color:var(--four-color); padding:5px; margin-left: -14px;  padding-left: 31px;position: relative;z-index: 5;
  margin-top: 2px; display: inline-block; font-size:13px; color:#fff; }
.subj-dern .dern-rep strong{ color:var(--white) !important; }

.author-mess{ font-size:10px; }

/*********************** FIN DES LISTES DES SUJETS PAR KOALAVOLANT *****************/


Dernière édition par KoalaVolant le Dim 21 Aoû 2022 - 19:43, édité 4 fois
KoalaVolant
KoalaVolant
Mar 6 Avr 2021 - 13:02
TYPE : ModernBB



HTML



Dans topic_list_box il faut mettre cela :

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="forumbg announcement">
 <ul class="topiclist topics">

 </ul>
 <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>
 </div>
 <div class="forumbg">
 <ul class="topiclist topics">
 <li class="header">
 <dl class="icon">
 <!--<dd class="dterm">-->
 <dd class="dterm">
 <!-- BEGIN multi_selection -->
 <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
 <!-- END multi_selection -->
 {topics_list_box.row.topic.table_sticky.L_TITLE}
 </dd>
 <dd class="posts"><i class="ion-android-chat" data-tooltip="{topics_list_box.row.topic.table_sticky.L_REPLIES}"></i></dd>
 <dd class="views"><i class="ion-eye" data-tooltip="{topics_list_box.row.topic.table_sticky.L_VIEWS}"></i></dd>
 <dd class="lastpost"><i class="ion-android-time" data-tooltip="{topics_list_box.row.topic.table_sticky.L_LASTPOST}"></i></dd>
 </dl>
 </li>
 </ul>
 <ul class="topiclist topics bg_none">
 <!-- END table_sticky -->

 <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
 <dl class="icon list-subj">
<div class="img-subj" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');"></div>

 <dd class="dterm topic-prempart" title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" {topics_list_box.row.ICON}>
 <!-- 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 -->
 <div class="topic-title-container">
 {topics_list_box.row.NEWEST_POST_IMG}
 {topics_list_box.row.PARTICIPATE_POST_IMG}
 {topics_list_box.row.TOPIC_TYPE}
 <h2 class="topic-title hierarchy">
 <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">
 {topics_list_box.row.TOPIC_TITLE}
 </a>
 </h2>
 </div>
 <div class="descrauthor"><!-- BEGIN switch_description -->
 <span class="topic-description">
 {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
 </span>
 <!-- END switch_description -->
 <span class="topic-author">
  {topics_list_box.row.L_BY}&nbsp;{topics_list_box.row.TOPIC_AUTHOR}
</span></div>
 {topics_list_box.row.GOTO_PAGE_NEW}
 <!-- BEGIN nav_tree -->
 {topics_list_box.row.TOPIC_NAV_TREE_NEW}
 <!-- END nav_tree -->
 </dd>
 
 <dd class="lastpost">
 <div class="lastpost1"> <span class="leftpost">
<span class="datepost">{topics_list_box.row.LAST_POST_TIME}</span>
<br/>{topics_list_box.row.LAST_POST_AUTHOR}<dfn>{L_LASTPOST}</dfn> {topics_list_box.row.LAST_POST_IMG}
</span>
<!-- BEGIN avatar -->
 <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
 <!-- END avatar --></div>
<div class="lastpost2"><span>{topics_list_box.row.VIEWS} {L_VIEWS} / {topics_list_box.row.REPLIES} {L_REPLIES}</span></div>
 </dd>
 <!-- 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 -->
 </dl>
 </li>
<!-- 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



Les couleurs marchent par les root. Voici donc le code à mettre avant, si vous n'avez pris aucun des codes déjà présents sur ce thème :

Code:
:root{ --main-color:#A3171A;
  --snd-color:#970000;
  --main-color-v:url('https://i.servimg.com/u/f30/19/45/51/53/fondbi10.jpg');
  --white:#fff;
  --black:#444;
  --grisc:#dedede;
  --griscc:#f0f0f0;
 
  --font1:'Anton', sans-serif;
--font2:'Kaushan Script', cursive;;
--font3:'Lato', sans-serif;}

  /* Ascenseur */
  
  ::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
::-webkit-scrollbar-thumb {background:var(--main-color); height:30px; border-radius:30px;}
::-webkit-scrollbar-corner {background:none;}
.cate-descr span, .redpres *{     scrollbar-color: var(--main-color) var(--white);
  scrollbar-width: thin; }

Puis le reste :

Code:
/**** LISTE DE SUJETS PAR KOALAVOLANT ************/

.forumbg, .topics.topiclist li{ background:none !important; box-shadow:none !important;}
.list-subj{ display:flex; justify-content:space-between; }

.img-subj{ background-size: 43px 68px;    background-repeat: no-repeat;    width: 43px;    height: 108px;    background-position: center;    margin: 0px 15px;}

.topic-prempart{         margin: auto;    padding: 0px !important; width:81% !important; }
.descrauthor{ width: 100%;  display: block; }

.topic-title-container, .lastpost2{ background:var(--main-color-v); background-position:center; background-size:cover; clip-path: polygon(0% 0%, 96% 0, 100% 50%, 96% 100%, 0% 100%);
  display:flex; flex-wrap:wrap; position:relative; }
.topic-title-container:after, .lastpost2:after{ position: absolute; content: ''; z-index:7;display: block; top: 0; left: 0; height: 100%; width: 100%;  background: var(--main-color);  
  mix-blend-mode: hard-light; }

.topic-title-container a{ margin:0; padding:10px; color:var(--white); font-family:var(--font2); position:relative; z-index:99;
  font-weight:normal; font-size:19px;   }
.topic-title-container a:hover{ color:var(--grisc); text-decoration:none; }
.topic-title-container img{ position:relative; z-index:99; }

.topiclist.topics li.row{ border:none; }

.descrauthor{ background-color:var(--white); padding:10px; }
.topic-author{ font-family:var(--font1); letter-spacing:1px;}

.lastpost{     display: flex;  flex-wrap: wrap; }
.lastpost1 .leftpost{ width:78%; }
.lastpost1{ display: flex;  align-items: center; background-color:var(--white); padding:5px; }
.lastpost2{     width: 100%;    font-family: var(--font1);    font-size: 11px;    text-align: center;    color: var(--white);    font-weight: lighter;    letter-spacing: 1px;  
  padding: 5px 0px; text-align:center;     display: flex;    justify-content: center;}
.lastpost2 span{ position:relative; z-index:99; text-align:center; }
.lastpost1 .lastpost-avatar{ width:50px; }

.topiclist.topics .lastpost-avatar img{     width: 50px;  height: 50px; }
.lastpost1 .datepost{ font-size:10px; }
Revenir en haut

Nos amis proches

Liste de sujets  Parto512 Logo WyvArtem