Votre 1er sujet
@ Maura Gallagher
Date d'inscription : 18/03/2024
- Code:
/*Corps des catégories*/
.cat_container { background: var(--l2);
border-radius: 0 0 2px 2px;
height: 114px;/*à modifier seulement si vous la voulez plus haute*/
padding: 10px;
margin: 0 0 4px;
display: flex;
font-size:10px;
}
/*Partie image new, no new etc.*/
.imgnew {
display: flex; /* Utilisation de flexbox pour aligner les éléments enfants */
justify-content: center; /* Alignement horizontal au centre */
height: 55px;
width: 55px;
background: var(--l1);
box-shadow: 0 0 2px var(--l1);
border-radius: 1px;
align-self: center; /* Alignement vertical au centre */
}
.imgnew img { width: 45px;
height: 45px;
border-radius: 1px;
padding: 1px;
align-self: center; /* Alignement vertical au centre */
}
/*Partie titre du forum et description*/
.titredescriforum {
width: 65%;}
/*titre forum*/
.titreforum { background: linear-gradient(45deg, #1b282b, #dba058);
background-color: #fff;
color: #fff !important;
font-family: 'Rozha One', 'Abril Fatface', serif;
letter-spacing: 2px;
margin: 5px;
text-align: center;
text-transform: uppercase;
border-radius: 7px;
}
.titreforum a { font-weight: normal;
font-size: 9px;
color: var(--l0);}
/*description*/
.descricat {
height: 67px; /*à modifier si vous changer la height de .cat_container*/
margin-top: 4px;
text-align: justify;
font-size: 10px;
overflow: auto;
line-height: 12px;
padding-left: 4px;
padding-right: 4px;
}
/*Partie liens forums*/
.liensforums { font-size: 0px;
overflow: auto;
width: 18%;
padding: 5px;
text-align: left;}
#liensforums2 a {
display: block;
text-transform: lowercase;
font-size: 11px;
}
#liensforums2 a::before {
color: #DD9F8C;
content: " ● ";
}
/*Partie nb de sujets et messages*/
.nbsujnotes { display: flex;
flex-wrap: wrap;
max-width: 60px;}
.nbsujnotes2 { background: var(--l1);
border-radius: 4px;
color: var(--d1);
font-size: 10px;
font-weight: 500;
text-align: center;
min-width: 60px;
display: flex;
justify-content: center;
align-items: center;}
.nbsujnotes2:nth-child(2) {margin-top:7px;
color:var(--d1);}
/*Partie dernier message posté*/
.derniermess {
max-width: 164px;}
/* titre avec écrit last song*/
.ti_derniermess { background-image: var(--fondcategorie);
background-size: 55%;
border-radius: 4px;
color: var(--l2);
font-family: 'Open Sans';
font-size: 11px;
font-style: normal;
text-transform: uppercase;
text-align: center;
letter-spacing: 0,5px;
margin: 0 0 0 21px;
min-width: 140px;
}
/*dernier avatar*/
.avatarcat { background: var(--l2);
border: var(--border1);
border-radius: 50px;
margin-top: -18px;
padding: 2px;
position: absolute;
}
.avatarcat img { border-radius: 50px;
width: 39px;
height: 39px;
object-fit: cover;}
/*lien vers dernier sujet et pseudo*/
.txt_derniermess {
border-radius: 7px;
margin: 5px 0 0;
padding: 6px 0 7px 32px; /*possible que 32px ne soit pas assez selon la version utilisée, vous pouvez augmenter si avatar empiète sur le texte*/
text-transform: lowercase;
height: 73px; /*à modifier si vous changer la height de .cat_container*/
display: flex;
line-height: 13px;
flex-wrap: wrap;
align-items: center;
}
.txt_derniermess a { font-size: 11px;}
.txt_derniermess br {
content: "";
margin: 2em 0 0 4em;
display: block;
font-size: 24%;
}
@ Maura Gallagher
Date d'inscription : 18/03/2024
html :
- Code:
<ul class="linklist top">
<!-- BEGIN switch_user_logged_in -->
<li>
<a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>derniers messages</a>
</li>
<li>
<a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>mes messages</a>
</li>
<!-- END switch_user_logged_in -->
<li>
<a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>messages sans réponse</a>
</li>
<!-- BEGIN switch_user_logged_in -->
<li>
<a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>marquer tous les forums comme lus</a>
</li>
<!-- END switch_user_logged_in -->
</ul>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="container_cat.forabg">
<div class="bp_cat small ticat bckcatego">
{catrow.tablehead.L_FORUM}
</div>
<div class="bp_cat light">
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="cat_container">
<div id="cate" class="imgnew">
<img src="{catrow.forumrow.FORUM_FOLDER_IMG}"/>
</div>
<div id="cate" class="titredescriforum">
<div class="titreforum">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</div>
<div class="descricat">
{catrow.forumrow.FORUM_DESC}
</div>
</div>
<div id="cate" class="liensforums">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
<span id="liensforums2">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</span>
</div>
<div id="cate" class="nbsujnotes">
<div class="nbsujnotes2">
{catrow.forumrow.TOPICS} <br/>SUJETS
</div>
<div class="nbsujnotes2">
{catrow.forumrow.POSTS} <br/>NOTES
</div>
</div>
<div class="derniermess">
<div class="ti_derniermess">
THE LAST SONG
</div>
<div class="avatarcat">
<!-- BEGIN avatar -->
{catrow.forumrow.avatar.LAST_POST_AVATAR}
<!-- END avatar -->
</div>
<div class="txt_derniermess">
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}"><br>{catrow.forumrow.LATEST_TOPIC_NAME}</a>
<!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}
</div>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
</div>
</div>
<!-- END tablefoot -->
<!-- END catrow -->
<!-- BEGIN switch_on_index -->
<ul class="linklist bottom">
<li>
<a href="{U_TODAY_ACTIVE}">sujets actifs du jour</a>
</li>
<li>
<a href="{U_TODAY_POSTERS}">top 20 des posteurs du jour</a>
</li>
<li class="last">
<a href="{U_OVERALL_POSTERS}">top 20 des posteurs du forum</a>
</li>
<!-- BEGIN switch_delete_cookies -->
<li>
<a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow"><i class="ion-trash-a"></i>supprimer les cookies</a>
</li>
<!-- END switch_delete_cookies -->
</ul>
<br/>
<!-- END switch_on_index -->
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var btn_collapse = $('<div></div>', {
class: 'btn-collapse'
});
var btn_collapse_show = $('<i></i>', {
class: 'ion-android-add-circle hidden',
'data-tooltip': '{L_EXPEND_CAT}'
}).appendTo(btn_collapse);
var btn_collapse_hide = $('<i></i>', {
class: 'ion-android-remove-circle',
'data-tooltip': '{L_HIDE_CAT}'
}).appendTo(btn_collapse);
var collapsed = [];
if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
collapsed = readCookie('collapsed').split(',');
}
$(document).on('click', '.btn-collapse', function() {
$(this).children('.ion-android-add-circle').toggleClass('hidden');
$(this).children('.ion-android-remove-circle').toggleClass('hidden');
$(this).parents('.forabg').toggleClass('hidden');
if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
collapsed = readCookie('collapsed').split(',');
}
if (!$(this).parents('.forabg').hasClass('hidden')) {
removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);
createCookie('collapsed', collapsed);
} else {
collapsed.push('' + $(this).parents('.forabg').data('cindex'));
createCookie('collapsed', collapsed);
}
});
$('.forabg').each(function(i) {
$(this).data('cindex', '' + i);
$(btn_collapse)
.clone()
.attr('id', 'forabg' + i)
.appendTo($(this).find('.header'));
if ($.inArray('' + i, collapsed) > -1) {
$(this).toggleClass('hidden');
$('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
$('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
}
});
});
function removeFromArray(item, array) {
var i = array.indexOf(item);
if (i > -1) {
array = array.splice(i, 1);
}
}
function createCookie(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
} else {
expires = "";
}
document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = encodeURIComponent(name) + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
}
return null;
}
//]]>
</script>
|
|