Catégories : changer la place des icônes de messages
2 participants
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
Catégories : changer la place des icônes de messages
Détails techniques
Version du forum : phpBB2Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)
Description du problème
Bonjour !Je reviens aujourd’hui vers vous pour un petit souci : dans mes catégories, j’aimerais placer l’image « pas de nouveaux messages », « nouveaux messages », « verrouillé » tout à droite : c’est-à-dire juste à côté du dernier message. Comme vous pouvez le voir sur le screen, il est pour l’instant dans la description du forum. Je me doute que c’est une question toute simple de px pour le « pousser » vers la droite, mais j’ai du mal à trouver la balise correspondante.
Voici le CSS correspondant :
- Code:
a {
text-decoration: none !important;
border-bottom-style: none !important;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a:hover {
text-decoration: none !important;
border-bottom-style: none !important;
}
/* ---------------------------- CATEGORIES (C) SUNHAE ---------------------------- */
.contener_cate {
width: 800px;
margin: auto;
}
.title_cate {
width:800px;
height: 55px;
background: #E76A5C;
font-weight: bold;
margin: auto;
outline: 1px solid white;
outline-offset: -5px;
}
.title_cate > h2 {
margin: 0;
text-align: center;
color: white;
text-transform: uppercase;
font: 22px fjalla one;
line-height: 55px;
}
.title_forumc {
height: 18px;
color: #DEB583;
font-size: 10px;
font-family: 'Fira Sans Condensed', sans-serif;
font-style: italic;
}
.title_forumc div {
display: inline-block;
min-width: 300px;
margin-right: 10px;
text-align: center;
}
.title_forumc img {
vertical-align: -1px;
margin: 0 3px;
}
.title_forumc a {
text-transform: uppercase;
color: #E99FAB !important;
font-size: 15px;
font-weight: bold;
}
.ss_contener_cate {
display: flex;
text-font: Arial;
font-size: 10px
color: var(--couleur_txt);
margin: 15px 0;
background-color: #F0F0F0;
}
.ss_contener_cate div:nth-child(1) {
width: 500px;
text-align: justify;
font-size: 10px;
line-height: 13px;
height: 57px;
overflow: auto;
}
.ss_contener_cate div:nth-child(1),
.ss_forum_cate:nth-child(1) {
scrollbar-color: #D8D7D5;) transparent;
scrollbar-width: thin;
}
.ss_contener_cate div:nth-child(2) img {
width: 41px;
}
.ss_contener_cate div:nth-child(2) {
width: 41px;
height: 57px;
overflow: hidden;
margin: 0 16px 0 13px;
}
.ss_contener_cate div:nth-child(3) {
font-size: 10px;
display: flex;
align-items: center;
}
.ss_contener_cate div:nth-child(3) a {
font-weight: bold;
font-style: italic;
color: #EE7D77; !important;
font-size: 12px;
}
.ss_contener_cate div:nth-child(3) strong a {
font-style: normal;
}
.ss_forum_cate {
background-color: #D8D7D5);
text-align: center;
font-family: 'Fira Sans Condensed', sans-serif;
color: #fff;
height: 23px;
line-height: 24px;
font-size: 10px;
margin-bottom: 20px;
overflow: auto;
}
.ss_forum_cate a {
color: #94253C !important;
text-transform: uppercase;
font-size: 10px;
}
/* ---------------------------- FIN CATEGORIES ---------------------------- */
Ainsi que le HTML :
- Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>
<!-- END switch_user_logged_in -->
<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="contener_cate">
<div class="title_cate">{catrow.tablehead.L_FORUM}</div> <br/>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="title_forumc">
<div>
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</div>
{catrow.forumrow.TOPICS} Sujets {catrow.forumrow.POSTS} Réponses
</div>
<div class="ss_contener_cate">
<div>
{catrow.forumrow.FORUM_DESC}
</div>
<div>
<!-- BEGIN avatar -->
{catrow.forumrow.avatar.LAST_POST_AVATAR}
<!-- END avatar -->
</div>
<div>
{catrow.forumrow.LAST_POST}
</div>
</div>
<div class="ss_forum_cate" id="subforums">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
<script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' - ')).removeAttr('id');
</script>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Merci d’avance pour votre aide !
Dernière édition par Lany_13 le Sam 23 Mai 2020 - 22:00, édité 1 fois
Re: Catégories : changer la place des icônes de messages
Bonjour,
Essaye de rajouter ce code dans ton CSS..
Bonne journée
Essaye de rajouter ce code dans ton CSS..
- Code:
/*Image Old New Lock*/
.old_new_lock {
float: right;
margin-left: 10px;
margin-top: 0px;
width: auto; /*Largeur des images*/
height: auto; /*Hauteur des images*/
}
Bonne journée
Invité- Invité
Re: Catégories : changer la place des icônes de messages
Bonjour, merci pour votre réponse !
Malheureusement, le code ne fonctionne pas
Malheureusement, le code ne fonctionne pas
Re: Catégories : changer la place des icônes de messages
Alors je sèche, je préfère laisser un vrai expert t'aider, je suis désolé ! Bon courage
Invité- Invité
Re: Catégories : changer la place des icônes de messages
Pas de soucis, merci en tout cas d'avoir essayé quelque chose
Re: Catégories : changer la place des icônes de messages
Oy o/
Je regarde ça. Je préfère voir les choses en live pour faciliter la chose, du coup je poste ça pour voir le lien (qui est en hide). :b
edit: ah bah forum en maintenance. XD Moyen d'enlever temporairement cette maintenance ? :/
Je regarde ça. Je préfère voir les choses en live pour faciliter la chose, du coup je poste ça pour voir le lien (qui est en hide). :b
edit: ah bah forum en maintenance. XD Moyen d'enlever temporairement cette maintenance ? :/
Re: Catégories : changer la place des icônes de messages
Bonsoir !
Voilà, c'est enlevé Merci !
Voilà, c'est enlevé Merci !
Re: Catégories : changer la place des icônes de messages
Re,
Je te remercie :>
L'image en question, c'est le bout suivant dans le code:
Du coup, tu peux remplacer le template par:
Pour rester dans la continuité de ton CSS, tu pourras donc modifier la div de l'image en la ciblant;
- en nth-child comme tu l'as fait: .ss_contener_cate div:nth-child(4) {css}
- ou en last-child: .ss_contener_cate div:last-child {css}
Pour centrer un peu mieux l'image, ça donnerait ça -toujours en CSS:
Le seul hic, c'est que ça écrase un peu le lastpost en réduisant sa largeur; pour ça, il faudrait soit réduire l'image, soit réduire la largeur de la description :b
edit: pour le padding: 8px 3px 0 0;, c'est surtout si la description ne viendra jamais agrandir le block du sous-forum; sinon, il faudra peut-être un vertical-top ou équivalent ^^
Je te remercie :>
L'image en question, c'est le bout suivant dans le code:
- Code:
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
Du coup, tu peux remplacer le template par:
- Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>
<!-- END switch_user_logged_in -->
<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="contener_cate">
<div class="title_cate">{catrow.tablehead.L_FORUM}</div> <br/>
<!-- END tablehead -->
<!-- BEGIN forumrow -->
<div class="title_forumc">
<div>
<a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</div>
{catrow.forumrow.TOPICS} Sujets {catrow.forumrow.POSTS} Réponses
</div>
<div class="ss_contener_cate">
<div>
{catrow.forumrow.FORUM_DESC}
</div>
<div>
<!-- BEGIN avatar -->
{catrow.forumrow.avatar.LAST_POST_AVATAR}
<!-- END avatar -->
</div>
<div>
{catrow.forumrow.LAST_POST}
</div>
<div>
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>
</div>
<div class="ss_forum_cate" id="subforums">
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
<script type="text/javascript">
jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' - ')).removeAttr('id');
</script>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Pour rester dans la continuité de ton CSS, tu pourras donc modifier la div de l'image en la ciblant;
- en nth-child comme tu l'as fait: .ss_contener_cate div:nth-child(4) {css}
- ou en last-child: .ss_contener_cate div:last-child {css}
Pour centrer un peu mieux l'image, ça donnerait ça -toujours en CSS:
- Code:
.ss_contener_cate div:last-child {
padding: 8px 3px 0 0;
}
Le seul hic, c'est que ça écrase un peu le lastpost en réduisant sa largeur; pour ça, il faudrait soit réduire l'image, soit réduire la largeur de la description :b
edit: pour le padding: 8px 3px 0 0;, c'est surtout si la description ne viendra jamais agrandir le block du sous-forum; sinon, il faudra peut-être un vertical-top ou équivalent ^^
Re: Catégories : changer la place des icônes de messages
Oh, merci beaucoup pour ton aide, ça fonctionne
Pour l'image, ce n'est qu'un essai, alors je pense en créer une autre en prenant en compte ce détail, en effet ! Merci beaucoup *-*
Pour l'image, ce n'est qu'un essai, alors je pense en créer une autre en prenant en compte ce détail, en effet ! Merci beaucoup *-*
Re: Catégories : changer la place des icônes de messages
Au plaisir ! :>
Sujets similaires
» Punbb: changer de place icônes de la gestion des messages
» Changer de place les icônes "New", "No new", "Lock"
» Comment changer les catégories de place
» Changer place titre catégories et forums
» Changer les icônes des catégories via CSS
» Changer de place les icônes "New", "No new", "Lock"
» Comment changer les catégories de place
» Changer place titre catégories et forums
» Changer les icônes des catégories via CSS
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