Forcer un redimensionnement automatique des icones de statut de sujet

[chattigre]

Bonjour,
Je me pose cette question :
J'ai des images de sujets / forums (annonce, note, nouveau...) devenues trop grandes suite à un changement graphique...
Comme cela représente environ 20 images à enregistrer, modifier, enregistrer, uploader, sélectionner dans le PA...
je voulais savoir si il existe un moyen (via le CSS je pense) d'imposer à ces images une taille maximum.

Précision :
Les images sont (comme par défaut) en arrière plan (à l'origine pour permettre la superposition des icones de sujet de type et autres... mais cet attribut peut leur être retiré si besoin car ces icones sont déplacées au début du titre

Merci d'avance
chattigre

[Jess Capa]

Bonjour

En inspectant la page on peut trouver la class correspondante. Je ne suis pas une professionnelle en la matière et je ne suis pas en phpBB3 donc je ne vous promets pas que ça fonctionnera sans impacter autre chose, ou fonctionnera tout court, mais dans le doute vous pouvez tenter le code suivant :

Code:

td.row1 img {
width:valeur;
}

[chattigre]

Bonjour

En inspectant la page on peut trouver la class correspondante. Je ne suis pas une professionnelle en la matière et je ne suis pas en phpBB3 donc je ne vous promets pas que ça fonctionnera sans impacter autre chose, ou fonctionnera tout court, mais dans le doute vous pouvez tenter le code suivant :

Code:

td.row1 img {
width:valeur;
}

En effet
ça ne fonctionne pas
Merci quand même pour l'idée

[Jess Capa]

Oui ça ne m'étonne pas, les class sont différentes selon les versions... Ce que vous pouvez faire c'est inspecter votre page via votre navigateur. Faites un clique droit sur l'élément qui vous intéresse, en l'occurrence l'une des icônes devenues trop grandes, et cliquez sur "inspecter l'élément" ou "examiner l'élément" (ça dépend des navigateurs). Qu'est-ce que vous voyez ?

EDIT: Votre forum étant en maintenance je n'ai pas accès à son contenu et ne peux malheureusement pas faire la manipulation par moi-même.

[chattigre]

Oui ça ne m'étonne pas, les class sont différentes selon les versions... Ce que vous pouvez faire c'est inspecter votre page via votre navigateur. Faites un clique droit sur l'élément qui vous intéresse, en l'occurrence l'une des icônes devenues trop grandes, et cliquez sur "inspecter l'élément" ou "examiner l'élément" (ça dépend des navigateurs). Qu'est-ce que vous voyez ?

EDIT: Votre forum étant en maintenance je n'ai pas accès à son contenu et ne peux malheureusement pas faire la manipulation par moi-même.

Oui pour la maintenance désolé Mais ce contenu en préparation ne doit pas être visible...
Et sinon, merci pour l'astuce que je connais, mais je n'ai pas trouvé la solution

[Jess Capa]

Si vous faites une capture d'écran de ce qui s'affiche en inspectant l'élément je pourrai sans doute vous aider, sinon quelqu'un qui connait les templates par défaut en phpBB3 pourra sûrement éclairer votre lanterne Bon courage

[chattigre]

Mon template topics_list_box (légèrement modifié par rapport au par défaut, pour le placement des icones de sujet de type ) :

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">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <dt>
                  <!-- 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.L_TITLE}
               </dt>
               <dd class="posts">{topics_list_box.row.L_REPLIES}</dd>
               <dd class="views">{topics_list_box.row.L_VIEWS}</dd>
               <dd class="lastpost"><span>{topics_list_box.row.L_LASTPOST}</span></dd>
            </dl>
         </li>
      </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>
         <span class="corners-bottom"><span></span></span></div>
      </div>
      <div class="forumbg">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <!--<dd class="dterm">-->
               <dd class="dterm" style="padding-left:0;">
                  <!-- 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" style="padding-left:45px;">{topics_list_box.row.topic.table_sticky.L_REPLIES}</dd>
               <!-- <dd class="authors">{topics_list_box.row.L_AUTHOR}</dd> -->
               <dd class="views">{topics_list_box.row.topic.table_sticky.L_VIEWS}</dd>
               <dd class="lastpost"><span>{topics_list_box.row.topic.table_sticky.L_LASTPOST}</span></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" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
            <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_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 -->
               {topics_list_box.row.NEWEST_POST_IMG}
               {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
               {topics_list_box.row.TOPIC_TYPE}
                <div class="topic-title-container"><span class="icones_sujets"></span><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>
               <!-- BEGIN switch_description -->
               <br />
               {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
               <!-- END switch_description -->
               <br />
               {topics_list_box.row.GOTO_PAGE_NEW}
               <span class="span-tab">{topics_list_box.row.L_BY} <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span>
               <!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->
            </dd>
            <dd class="posts">{topics_list_box.row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
            <dd class="views">{topics_list_box.row.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
            <dd class="lastpost">

                    <!-- BEGIN avatar -->
                    <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                    <div style="float:left;">
                    <!-- END avatar -->

               <span>{topics_list_box.row.LAST_POST_AUTHOR}&nbsp;<dfn>{L_LASTPOST}</dfn>
               {topics_list_box.row.LAST_POST_IMG}<br style="clear:left;" />{topics_list_box.row.LAST_POST_TIME}</span>

                    <!-- BEGIN avatar -->
                    </div>
                    <!-- END avatar -->
            </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>
   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

[Jess Capa]

Allons-y pour une deuxième tentative à l'aveugle !

Code:

dl.icon {
width:50px;
}

ou

Code:

dl.icon.forum-icon {
width:50px;
}

Modifiez la valeur comme vous l'entendez... Et si ça ne fonctionne pas, tentez de forcer la chose en modifiant la ligne en "width: 50px !important;". Sinon je passe mon tour !

[chattigre]

Alors passez votre tour
Merci quand même

[chattigre]

  Allô bonjour, il y a quelqu'un ?

[chattigre]

  Allô bonjour, il y a quelqu'un ?

[Tite-May]

Bonjour !

C'est la taille du background à changer.

Code:

.icon {

    background-size: 50px 50px !important;

}

Il faut changer les '50px' par ce que tu souhaites et après adapter la largeur de la zone en fonction de l'espacement nécessaire.
Si jamais ça change aussi là où il ne faut pas, il faut ajouter ".topiclist" devant ".icon"

Bonne journée !

[chattigre]

Bonjour !

C'est la taille du background à changer.

Code:

.icon {

    background-size: 50px 50px !important;

}

Il faut changer les '50px' par ce que tu souhaites et après adapter la largeur de la zone en fonction de l'espacement nécessaire.
Si jamais ça change aussi là où il ne faut pas, il faut ajouter ".topiclist" devant ".icon"

Bonne journée !

MERCI BEAUCOUP !
C'est parfait ou presque
Effectivement, cela redimensionne aussi les icônes des forums, j'aimerais bien que ces dernières soient un peu plus grosses, mais rajouter .topiclist ne fait rien
Merci beaucoup en tout cas
J'espère que ma demande est faisable, sinon, tant pis
chattigre

[Tite-May]

Hello !

Juste pour être sûre de comprendre, peux-tu me montrer, au niveau du chargement des images dans le PA, lesquelles doivent être redimensionnée ?
C'est tout à fait possible normalement.

[chattigre]

Toutes celles qui correspondent à la catégorie "icones des sujets" du PA (sauf celles de modération (supprimer, corbeiller, diviser, fusionner, verrouiller...) soit celles ci :

Image supprimée par chattigre

Voilà

[Neptunia]

Bonjour chattigre et Tite-May



Code fonctionnel sur un forum pas trop modifié et pas trop en maintenance.

Code:

.dterm {
    background-size: 50px 50px !important;
}

Ne pas oublier d'enlever le code précédent ...

[chattigre]

Code fonctionnel sur un forum pas trop modifié et pas trop en maintenance.

C'est à dire ?...

[Neptunia]

Ca veut dire que ton fofo étant en maintenance, j'ai testé sur le mien avec des templates d'origine.

Tant que la structure de base est préservée, ça fonctionnera.

[chattigre]

Oups, oui bien sur pardon, question bête
---
Neptunia, ce code n'a pas l'air de fonctionner sur aucune de mes images...
Surement un problème de templates en effet...

[Neptunia]

Ca n'agit que sur les icônes de l'onglet "Icônes de message" sans agir sur celles de l'onglet Icônes des sujets"

Tu as bien mis le point initial ?

[*Splash*]

Hi Hélène,
Ce code pose problème quand les templates sont modifiés effectivement

[chattigre]

PA - Images - Avancé - Je parle du 3e onglet... (de gauche à droite...)
En clair les images
Sujet
Sujet nouveau
Note
Note nouveau
et tous les autres...

[Tite-May]

bonsoir Chattigre,

Remplace le code que je t'ai donné tout à l'heure par celui-ci :

Code:

.topiclist.topics .icon {
    background-size: 50px 50px !important;
}

On cible un peu plus et tout est OK normalement (tu peux voir le rendu là : http://maven.forumactif.org/ )

Bises

[Tite-May]

Hello Chattigre,

As-tu réussi avec cette solution ou pas ?
(J'vais avoir besoin de mon forum donc je risque de retirer le rendu )

[chattigre]

Oui Tite-May, merci BEAUCOUP !
Désolé de ne pas avoir répondu plus tôt
Sujet !