Catégories : changer la place des icônes de messages

[Lany_13]

Détails techniques

Version du forum : phpBB2
Poste 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 !

[Invité]

Bonjour,

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

[Lany_13]

Bonjour, merci pour votre réponse !
Malheureusement, le code ne fonctionne pas

[Invité]

Alors je sèche, je préfère laisser un vrai expert t'aider, je suis désolé ! Bon courage

[Lany_13]

Pas de soucis, merci en tout cas d'avoir essayé quelque chose

[mSyx]

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 ? :/

[Lany_13]

Bonsoir !
Voilà, c'est enlevé Merci !

[mSyx]

Re,
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 ^^

[Lany_13]

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 *-*

[mSyx]

Au plaisir ! :>