The Destiny
Listes de sujet
Ven 2 Avr - 23:11
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> </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 *****************/
- Code:
<iframe frameborder="0" scrolling="no" marginheight="0" style="width: 100%; height: 350px;" src="https://pisrale.forumactif.com/h17-lsspecial"></iframe>
[size=18][b]TYPE : PHPBB2[/b][/size]
<center><img style="width:100%;" src="https://nsm09.casimages.com/img/2021/04/02//OYz2Lb-listedesujets.jpg"/></center>
<h3>HTML</h3>
Dans [b]topic_list_box[/b] 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> </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 -->[/code]
<h3>CSS</h3>
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; }[/code]
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 *****************/ [/code]
The Destiny
Re: Listes de sujet
Ven 2 Avr - 23:13
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} {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; }
- Code:
<iframe frameborder="0" scrolling="no" marginheight="0" style="width: 100%; height: 350px;" src="https://pisrale.forumactif.com/h17-lsspecial"></iframe>
[size=18][b]TYPE : ModernBB[/b][/size]
<center><img style="width:100%;" src="https://nsm09.casimages.com/img/2021/04/02//OYz2Lb-listedesujets.jpg"/></center>
<h3>HTML</h3>
Dans [b]topic_list_box[/b] 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} {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 -->[/code]
<h3>CSS</h3>
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;
--groupe1:#3F00A7;
--groupe2:#A5005C;
--groupe3:#097B0A;
--groupe4:#FF7800;
--groupe5:#3094CF;
--groupe6:#97649B;
--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; }[/code]
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; } [/code]
|
|