Accueil
Créer un forumTitre des sujets (index) qui ne se réduisent pas malgré la limite de caractères
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Titre des sujets (index) qui ne se réduisent pas malgré la limite de caractères
par ErynGold Lun 1 Jan 2024 - 17:31
Détails techniques
Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 29/01/23
Lien du forum : https://rise-of-the-abyss.forumactif.com/
Description du problème
Bonjour !Je rencontre un souci avec la longueur des titres des sujets sur mon index. J'ai pourtant indiqué dans le panneau d'administration > structure et hiérarchie > Longueur du titre du sujet affiché dans la colonne "Derniers messages" : 15 mais cela n'a pas l'air d'être pris en compte. Comme si quelque chose bloquait le crop du titre. Ça fait la même chose sur les titres dans la page des sujets... J'ai oublié une balise forumactif ou quelque chose comme ça ?
Voici mon template index_box :
- Code:
<style>
.roa-gb {
background-image: url(https://i.imgur.com/iAhtF5W.png);
background-size: cover;
border-radius: 4px;
width: 1150px;
height: 365px;
padding: 128px 72px 66px 72px;
margin-bottom: 30px;
margin-top: 110px;
}
.roa-ttl-gb {
background-image: url(https://i.imgur.com/zClzofR.png);
width: 1010px;
height: 124px;
display: flex;
background-repeat: no-repeat;
background-size: contain;
justify-content: flex-end;
align-items: flex-end;
}
.roa-ttl-gb p {
margin-bottom: 18px;
color: #fff;
text-align: justify;
font-family: Roboto;
font-size: 12px;
font-style: italic;
font-weight: 300;
width: 300px;
height: 63px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.05);
padding: 12px;
}
.roa-liens-gb {
width: 1009px;
display: flex;
gap: 10px;
margin-top: 8px;
flex-direction: row;
align-items: center;
}
.roa-liens-gb a {
width: auto;
background-color: var(--roa-rouge);
border-radius: 3px;
color: #fff;
text-align: center;
padding: 7px 9px;
font-family: Roboto;
font-size: 16px;
transition: .3s ease;
font-style: italic;
font-weight: 500;
text-transform: lowercase;
}
#roa-gb-plus {
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
padding: 0 !important;
justify-content: center;
align-items: center;
margin-left: 55px;
}
#roa-gb-plus img {
width: 19px;
}
/* CATEGORIES */
.forums .roa-hover {gap: 11px!important;}
.forums .roa-hover a:hover {
background-color: var(--sombre);
transition: .3s ease;
}
.forums .roa-hover a {
transition: .3s ease;
}
.forums .roa-hover:hover {background-color: transparent;}
.roa-cate-simple {
width: 1100px;
height: 493px;
border-radius: 4px;
background-color: var(--sombre);
margin-bottom: 26px;
display: flex;
}
.roa-sf-dr-wrap {
margin: 22px 0px 0px 23px;
display: flex;
height: auto;
flex-direction: column;
gap: 21px;
}
.roa-sf {
margin-top: 10px;
}
.roa-sf a {
width: 258px;
background-color: var(--roa-rouge);
border-radius: 3px;
text-align: center;
display: block;
color: #fff;
text-align: center;
margin-top: -10px;
font-family: Roboto;
font-size: 16px;
font-style: italic;
font-weight: 500;
text-transform: lowercase;
padding: 5px 0px;
}
.roa-dr {
width: 258px;
border-radius: 3px;
background-color: var(--fond-fonce);
display: flex;
flex-direction: column;
height: 117px;
text-align: center;
justify-content: center;
z-index: 2;
align-items: center;
gap: 3px;
color: white;
}
.roa-dr img {
width: 28px;
margin-bottom: -5px;
margin-left: -4px;}
.roa-ps-icon-wrap {
display: flex;
align-items: center;
}
.roa-dr #ttl-rp {
text-transform: lowercase !important;
font-size: 15px;
font-style: italic;
font-weight: 600;
transition: .5s;
color: var(--roa-rouge) !important;
}
.roa-dr a:hover #ttl-rp {transition: .5s; color: var(--fond-gris)!important;}
.roa-dr span {font-weight: 300;}
.roa-dr span,
.roa-dr strong {
font-size: 14px;
font-family: Roboto;
text-transform: uppercase;
}
.roa-dr strong {
font-weight: 700;
}
.icon-dr {
width: 28px;
margin-top: -2px;
}
#roa-icon-nr {
width: 116px!important;
position: absolute;
margin-top: 413px;
z-index: 1;
margin-left: 70px;
}
.roa-ss-cate {
width: 797px;
height: 100%;
background-size: cover;
background-position: center;
margin-left: 22px;
display: flex;
flex-direction: column;
padding: 0px 23px 13px 23px;
gap: 10px;
border-radius: 0px 4px 4px 0px;
justify-content: flex-end;
align-items: center;
}
.roa-nom-ss-cate {
display: flex;
flex-direction: row;
width: 100%;
position: relative;
top: 25px;
gap: 9px;
align-items: center;
flex-wrap: wrap;
}
.roa-nom-ss-cate span a {
color: #fff;
font-family: Abril Fatface;
font-size: 44px;
text-transform: uppercase;
font-weight: 400;
}
.roa-border {
color: transparent;
height: 4px;
background-color: white;
border-radius: 2px;
flex-grow: 4;
}
.roa-desc-ss-cate {
color: #fff;
text-align: justify;
font-family: Roboto;
font-size: 13px;
overflow: auto;
height: 96px;
width: 750px;
font-style: italic;
font-weight: 300;
padding: 13px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.05);
}
.roa-desc-ss-cate::-webkit-scrollbar {display: none;}
/* CATEGORIE OUVRAGES D'ANTAN */
.forums .roa-hover a {box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.40);}
/* INFORMATIONS */
#c1 .forums {
display: flex;
padding: 25px 25px 0px;
flex-direction: row-reverse;
}
.forums {padding: 25px 25px 1px;}
#c1 .roa-cate-simple:first-child {
overflow: hidden;
width: 538px;
height: 685px;
}
#c1 .roa-cate-simple:first-child .roa-sf-dr-wrap {
margin: 0;
margin-top: 551px;
margin-left: 265px;
justify-content: center;
position: absolute;
margin-left: 270px;
width: 0px;
flex-direction: column-reverse;
align-items: center;
}
#c1 .roa-cate-simple:first-child .roa-sf {
display: flex;
flex-direction: row;
align-items: flex-end;
}
#c1 .roa-cate-simple:first-child .roa-hover {
flex-direction: row;
display: flex;
align-items: flex-end;
gap: 4px;
}
#c1 .roa-cate-simple:first-child .roa-sf a {
padding: 5px 9px;
width: auto;
}
#c1 .roa-cate-simple:first-child .roa-dr {
width: 485px;
flex-direction: row;
height: 59px;
justify-content: space-around;
}
#c1 .roa-cate-simple:first-child .roa-dr #ttl-rp {
margin-right: 5px;
}
#c1 .roa-cate-simple:first-child .roa-dr img {
margin-bottom: -2px;
margin-left: -14px;
}
#c1 .roa-cate-simple:first-child #roa-icon-nr {
margin-top: -114px;
margin-left: 242px;
}
#c1 .roa-cate-simple:first-child .roa-ss-cate {
width: 538px;
flex-direction: column-reverse;
justify-content: flex-start;
margin-left: 0px;
}
#c1 .roa-cate-simple:first-child .roa-nom-ss-cate {
width: 98%;
top: -122px;
left: 1px;
}
#c1 .roa-cate-simple:first-child .roa-nom-ss-cate span a {
font-size: 32px;
}
#c1 .roa-cate-simple:first-child .roa-desc-ss-cate {
height: 191px;
position: relative;
width: 485px;
top: 15px;
margin-bottom: 134px;
}
#c1 .roa-cate-simple:first-child .roa-dr span {
font-size: 14px;
display: flex;
font-family: Roboto;
text-transform: uppercase;
align-items: center;
gap: 6px;
}
/* PERSONNAGE */
#c1 .roa-cate-simple:nth-child(2) {
width: 538px;
height: 399px;
margin-right: 24px;
align-items: flex-end;
display: flex;
justify-content: center;
}
#c1 .roa-cate-simple:nth-child(2) .roa-border, #c1 .roa-cate-simple:nth-child(3) .roa-border { display: block !important;}
#c1 .roa-cate-simple:nth-child(2) .roa-sf-dr-wrap, #c1 .roa-cate-simple:nth-child(3) .roa-sf-dr-wrap {
position: absolute;
margin-bottom: 21px;
display: flex;
align-items: center;
width: 502px;
}
#c1 .roa-cate-simple:nth-child(2) .roa-hover, #c1 .roa-cate-simple:nth-child(3) .roa-hover {
display: flex;
flex-direction: row;
width: auto;
margin-bottom: 104px;
gap: 3px;
position: relative;
z-index: 2;
}
#c1 .roa-cate-simple:nth-child(3) .roa-hover {
margin-bottom: 30px;
}
#c1 .roa-cate-simple:nth-child(2) .roa-sf a, #c1 .roa-cate-simple:nth-child(3) .roa-sf a {
width: auto;
padding: 5px 10px;
height: 29px;
}
#c1 .roa-cate-simple:nth-child(2) .roa-ss-cate, #c1 .roa-cate-simple:nth-child(3) .roa-ss-cate {
margin: 0;
flex-direction: column-reverse;
width: 538px;
}
#c1 .roa-cate-simple:nth-child(2) .roa-desc-ss-cate {
width: 502px;
height: 56px;
margin-top: 219px;
text-align: center;
position: absolute;
}
#c1 .roa-cate-simple:nth-child(2) .roa-dr, #c1 .roa-cate-simple:nth-child(3) .roa-dr {
width: 496px;
flex-direction: row;
margin-left: -23px;
height: 47px;
justify-content: space-around;
}
#c1 .roa-cate-simple:nth-child(2) .roa-dr span, #c1 .roa-cate-simple:nth-child(3) .roa-dr span {
display: flex;
align-items: center;
gap: 6px;
}
#c1 .roa-cate-simple:nth-child(2) .roa-dr img, #c1 .roa-cate-simple:nth-child(3) .roa-dr img {
margin: 0;
margin-top: 2px;
margin-left: -13px;
}
#c1 .roa-cate-simple:nth-child(2) .roa-nom-ss-cate span a, #c1 .roa-cate-simple:nth-child(3) .roa-nom-ss-cate span a {
font-size: 32px;
}
#c1 .roa-cate-simple:nth-child(2) .roa-nom-ss-cate, #c1 .roa-cate-simple:nth-child(3) .roa-nom-ss-cate {
margin-top: 256px;
}
#c1 .roa-cate-simple:nth-child(3) .roa-nom-ss-cate {
margin-top: 124px;
}
#c1 .roa-desc-ss-cate strong {font-weight: 500;}
#c1 .roa-cate-simple:nth-child(2) #roa-icon-nr {
margin-top: 164px;
z-index: 1;
margin-left: -16px;
}
#c1 .roa-cate-simple:nth-child(3) #roa-icon-nr {
margin-top: 90px;
z-index: 1;
margin-left: -16px;
}
/* GESTION ET OUTILS */
#c1 .roa-cate-simple:nth-child(3) {
position: absolute;
width: 538px;
height: 263px;
align-items: flex-end;
display: flex;
margin-right: 562px;
margin-top: 422px;
justify-content: center;
}
#c1 .roa-cate-simple:nth-child(3) .roa-desc-ss-cate {
display: none;
}
/* CATEGORIES INVERSEES */
#c2 .roa-cate-simple:nth-child(2),
#c2 .roa-cate-simple:nth-child(4),
#c2 .roa-cate-simple:nth-child(6),
#c2 .roa-cate-simple:nth-child(2) .roa-sf-dr-wrap,
#c2 .roa-cate-simple:nth-child(4) .roa-sf-dr-wrap,
#c2 .roa-cate-simple:nth-child(6) .roa-sf-dr-wrap,
#c2 .roa-cate-simple:nth-child(2) .roa-nom-ss-cate,
#c2 .roa-cate-simple:nth-child(4) .roa-nom-ss-cate,
#c2 .roa-cate-simple:nth-child(6) .roa-nom-ss-cate,
#c2 .roa-cate-simple:nth-child(2) .roa-desc-ss-cate,
#c2 .roa-cate-simple:nth-child(4) .roa-desc-ss-cate,
#c2 .roa-cate-simple:nth-child(6) .roa-desc-ss-cate {
transform: rotateY(180deg);
}
#c2 .roa-hover {
display: flex;
flex-direction: column;
gap: 20px!important;
}
/* HRP ET ARCHIVES */
#c3 .roa-cate-simple {
width: 538px;
height: 236px;
}
#c3 .roa-sf-dr-wrap {
position: absolute;
width: 471px;
}
#c3 .roa-dr, #c3 .roa-desc-ss-cate {
display: none;
}
#c3 .roa-hover {
display: flex;
justify-content: flex-end;
gap: 6px;
row-gap: 21px!important;
margin-top: 96px;
position: relative;
flex-wrap: wrap;
right: -10px;
}
#c3 .roa-hover a {
width: auto;
padding: 5px 10px;
}
#c3 .roa-nom-ss-cate {
margin-bottom: 136px;
margin-left: -25px;
}
#c3 .roa-nom-ss-cate a {
text-transform: lowercase!important;
font-size: 65px;
}
#c3 .roa-border {
margin-top: 10px;
}
#c3 .roa-cate-simple:nth-child(2) {
position: absolute;
margin-top: -262px;
margin-left: 564px;
}
#c3 #roa-icon-nr {display: none;}
</style>
<!----------------------------------------------->
<!-- CATEGORIES -------------->
<div class="roa-gb">
<div class="roa-ttl-gb">
<p>« Le <strong>guidebook</strong> rassemble toutes les informations à connaître impérativement avant de commencer une fiche. Lisez-le dans son <strong>intégralité</strong>. »</p>
</div>
<div class="roa-liens-gb">
<a href="#" class="roa-hover">règlement</a>
<a href="#" class="roa-hover">contexte</a>
<a href="#" class="roa-hover">chroniques d'avalon</a>
<a href="#" class="roa-hover">grimoire des âmes</a>
<a href="#" class="roa-hover">livre des ombres</a>
<a href="#" class="roa-hover">système de jeu</a>
<a href="#" class="roa-hover">staff & crédits</a>
<a href="#" class="roa-hover" id="roa-gb-plus"><img src="https://i.imgur.com/5pT8tWt.png" /></a>
</div>
</div>
</div>
<!----------------------------------------------->
<!-- BARRE DE GESTION -------------->
<div class="links_bar" style="color: transparent;margin: 4px -9px;">
<!-- BEGIN switch_user_logged_in -->
<span>
<!-- Messages depuis la dernière visite -->
<a id="lastvisit_posts" href="{U_SEARCH_NEW}">Messages depuis la dernière visite</a> •
<!-- Messages sans réponses -->
<a id="posts_unanswered" href="{U_SEARCH_UNANSWERED}">Message sans réponses</a>
</span>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_in -->
<!-- END switch_user_logged_in -->
</div>
<!-- Conteneur d'une catégorie -->
<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="category" id="{catrow.tablehead.ID}">
<!-- Titre catégorie -->
<div class="cate_title">{catrow.tablehead.L_FORUM}</div>
<!-- Conteneur liste des forums -->
<div class="forums">
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<!-- Affichage d'un forum -->
<div class="roa-cate-simple">
<div class="roa-sf-dr-wrap">
<div class="roa-sf">
<div class="roa-hover">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
<script type="text/javascript">$('.roa-hover').each(function(){$(this).html($(this).html().replace(/,/g,""));});</script>
</div>
<div class="roa-dr">
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}"><span id="ttl-rp">{catrow.forumrow.LATEST_TOPIC_TITLE}</span></a>
<!-- END switch_topic_title -->
<span>{catrow.forumrow.USER_LAST_POST}</span>
</div>
<img id="roa-icon-nr" src="{catrow.forumrow.FORUM_FOLDER_IMG}" />
</div>
<div class="roa-ss-cate">
<div class="roa-nom-ss-cate">
<div class="roa-border" style="display: none;">*</div>
<span><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></span>
<div class="roa-border">*</div>
</div>
<p class="roa-desc-ss-cate">{catrow.forumrow.FORUM_DESC}</p>
</div>
</div>
<!-- Fin affichage d'un forum -->
<!-- END forumrow -->
<!-- BEGIN tablefoot -->
</div>
<!-- Fin liste des forums -->
</div>
<!-- END tablefoot -->
<!-- END catrow -->
<!-- Fin du conteneur de catégorie -->
<!----------------------------------------------->
<!-- BARRE DE GESTION -------------->
<!-- BEGIN switch_on_index -->
<div class="links_bar">
<!-- Supprimer des cookies du forum -->
<!-- BEGIN switch_delete_cookies -->
<a class="specials_links right" style="margin: 0px -9px;" href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}"
rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
<!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->
Merci d'avance !
ErynGold- Nouveau membre
- Messages : 20
Inscrit(e) le : 03/08/2021 -
Re: Titre des sujets (index) qui ne se réduisent pas malgré la limite de caractères
par ErynGold Lun 1 Jan 2024 - 20:13
Finalement, j'ai trouvé seul! Enfin, c'est une solution alternative et ça ne me dit pas pourquoi le forum n'applique pas cette limite de mots pourtant renseignée... Mais ça fonctionne!
Voici le code que j'ai utilisé :
merci quand même! ^^
Voici le code que j'ai utilisé :
- Code:
#ttl-rp {
white-space: nowrap;
text-overflow: ellipsis;
width: 130px;
display: block;
overflow: hidden;
}
merci quand même! ^^
ErynGold- Nouveau membre
- Messages : 20
Inscrit(e) le : 03/08/2021 -
Sujets similaires» Tronquer le titre des sujets dans "Derniers sujets" (caractères max)
» Titre des sujets dans les sous-forums qui débordent dans l'image d'index
» Css limité en nombre de caractères ?
» Comment mettre une limite minimale du nombre de caractères dans les messages?
» - Augmenter la limite de caractères des messages
» Titre des sujets dans les sous-forums qui débordent dans l'image d'index
» Css limité en nombre de caractères ?
» Comment mettre une limite minimale du nombre de caractères dans les messages?
» - Augmenter la limite de caractères des messages
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum