Grid : besoin d'aide pour personnaliser l'affichage

[orpheus]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://empiredesouvenirs.forumactif.com/f18-analyse-des-dvd-et-blu-ray

Description du problème

Bonsoir à tous !

Maintenant que le template Grid est ouvert, je me permets de solliciter votre aide afin de personnaliser son affichage sur un de mes forums.

Actuellement, l'affichage s'effectue ainsi sur mon forum :

Voir l'image:

Mon but serait de :
- Supprimer l'avatar sur la gauche de l'image.
- Supprimer les deux icônes qui apparaissent (l'oiseau rose et Pikachu).
- Déplacer le nombre de vues/réponses, idéalement en dessous de la date et l'heure.
- Et enfin, modifier la couleur blanche par une couleur plus en harmonie avec le design de mon forum.

Concrètement, je souhaiterai que ça ressemble à quelque chose comme ceci :

Voir l'exemple:

Je vous remercie d'avance pour votre aide.

[orpheus]

un petit up s'il vous plait !

[Stefano123]

Mon but serait de :
- Supprimer l'avatar sur la gauche de l'image.
- Supprimer les deux icônes qui apparaissent (l'oiseau rose et Pikachu).
- Déplacer le nombre de vues/réponses, idéalement en dessous de la date et l'heure.
- Et enfin, modifier la couleur blanche par une couleur plus en harmonie avec le design de mon forum.

Bonjour,

Je vous donne ces codes, mais peut-être que d'autres personnes ici, surement plus calées que moi, pourront vous donner de meilleurs codes et de meilleures solutions !  
Mettre ceci dans votre feuille de style CSS à part, car si ces codes ne sont pas bons, vous pourrez les zapper facilement !
En espérant que ces codes n'auront pas de coïncidence avec d'autres codes !

- Supprimer l'avatar sur la gauche de l'image :

Code:

.topic-card .author-avatar img {
  border: 1px solid transparent;
  width: 0px;
  height: 0px;
  border-radius: 0%;
  background-color: transparent;
  overflow: hidden;
  display: block;
  font-size: 0;
}

- Supprimer les deux icônes qui apparaissent (l'oiseau rose et Pikachu). Pour info, j'ai aperçu que le Pikachu !

Code:

.card-footer .time img {
  width: 0;
}

- Et enfin, modifier la couleur blanche par une couleur plus en harmonie avec le design de mon forum.
Vous pouvez modifier la couleur : #fdd :

Code:

.topic-card .card-content {
  background-color: #fdd;
}

- Déplacer le nombre de vues/réponses, idéalement en dessous de la date et l'heure.
Cette modification, je pense qu'elle s'effectue dans la nouvelle template :  topics_grid_box

Bon week-end,

cordialement,

[orpheus]

Bonjour Stefano123,

Je vous remercie pour votre aide !
Après test, les codes que vous m'avez proposé fonctionnent mais par contre, l'oiseau rose apparaît toujours.



Encore merci pour tout car franchement, le résultat est assez plaisant.

Il subsiste encore une question également : comment modifier la couleur du texte ? Car le gris ne ressort pas des masses et j'aimerai que les descriptions des topics soient en noir.

[Stefano123]

Bonjour Stefano123,

Je vous remercie pour votre aide !
Après test, les codes que vous m'avez proposé fonctionnent mais par contre, l'oiseau rose apparaît toujours.



Encore merci pour tout car franchement, le résultat est assez plaisant.

Il subsiste encore une question également : comment modifier la couleur du texte ? Car le gris ne ressort pas des masses et j'aimerai que les descriptions des topics soient en noir.

Bonjours,

Toujours dans la feuille de style :

- Pour modifier la couleur du texte : #

Code:

.topic-card .description {
  color: #797979;
}

Dans le lien que vous donner ci-dessus dans votre demande: -  L'oiseau rose que vous décrivez n'apparait pas pour moi, je ne le vois pas dans l'affichage GRID
https://empiredesouvenirs.forumactif.com/f18-analyse-des-dvd-et-blu-ray



Dans votre : Panneau d'administration / Affichage / Images et Couleurs / Gestion des images / Mode Avancé :
Vous avez des Icônes ou images que vous pourriez zapper, exemple comme l'icône de l'oiseau rose :

Car, enlevez des icônes ou images avec des codes de style et que vous pourriez peut-être les enlever dans le Mode Avancé :
Regarder dans Mode Avancé : si les icônes ou image que vous décrivez ne se trouvent pas dedans avant de les zapper avec des codes, il serait plus judicieux de les enlever par là s'ils' y sont !  

Bonne journée...

[orpheus]

Après vérification, l'oiseau rose apparaît lorsque je suis connecté et sert à indiquer lorsqu'une personne a publié dans un topic.
Je l'avais d'ailleurs placé dans « Mini sujet - Participation » dans le panneau d'administration.

Bien sûr, je pourrais les supprimer tout simplement des images de mon forum mais c'est uniquement sur l'affichage Grid que je souhaite obtenir une interface épuré.

Maintenant si on ne peut pas intervenir pour cette dernière icône, c'est pas grave.

Bonne soirée, et encore merci pour votre aide.

Je laisse le sujet ouvert le temps d'obtenir une aide pour déplacer les icônes du nombre de vues/réponses.

[Stefano123]

Bonjour,



Les petits blocs de vues et de réponse :
Vous pouvez un peu les customiser si vous le souhaitez :
Voici quelques codes à rajouter dans la feuille de style :

- Réglé la marge gauche ou droite :

Code:

.topic-card .stats span:first-child {
  margin-right: 4px;
}

- Changer la couleur de fond, arrondir les bords, élargir ou rétrécir :

Code:

.topic-card .stats span {
  background-color: #263238c2;
  border-radius: 2px;
  padding: 4px 10px;
  display: inline-flex;
  gap: 5px;
}

Changer la couleur du texte, réglé la dimension du texte :

Code:

.topic-card .stats {
  color: #fff;
  font-size: 12px;
}

Dans l'image que vous montez, vous voulez que c'est 2 petits blocs soient en dessous de la date, C'est ça ?
Si c'est bien ça, je regarderai ça un peu plus tard !



Cordialement,

[orpheus]

Ah ces codes pourraient être sympa à appliquer, je les testerai demain voir ce que ça donne.

Dans l'image que vous montez, vous voulez que c'est 2 petits blocs soient en dessous de la date, C'est ça ?
Si c'est bien ça, je regarderai ça un peu plus tard !

Oui c'est bien ça. Où du moins, j'aimerai qu'ils soient à un endroit autre que sur l'image des topics et j'ai pensé qu'en dessous de la date serait une place cohérente pour les mettre.

[Stefano123]

Bonjour,

Je me suis rendu dans la template "topics_list_box", en question et voulu déplacer les 2 petits blocs là où vous vouliez,
Je n'ai pas pu faire cette manœuvre, car j'ai l'impression que ces 2 petits blocs "vues" et "réponses" font partie du cadre avec l'image !
À moins que quelqu'un vienne et puisse vous modifier ça dans la template ou CSS ! Tout est possible !
Je suis désolé, je ne peux pas aller plus loin dans votre demande d'aide, je ne suis pas assez calé et de peur de vous faire faire une bêtise.

Par contre, une dernière modif est encore possible, c'est de pouvoir déplacer les 2 petits blocs en haut de l'image.



Le code que je vous aie donné ci-dessus :
- Changer la couleur de fond, arrondir les bords, élargir ou rétrécir :

Ajoutez ceci à la fin :

Code:

 position: relative;
  bottom: 110px;

Ce qui vous donnera ceci :     ci, vous voulez descendre un peu plus les blocs, il s'agit du "bottom" mettre mois de px !

Code:

.topic-card .stats span {
  background-color: #263238c2;
  border-radius: 2px;
  padding: 4px 10px;
  display: inline-flex;
  gap: 5px;
  position: relative;
  bottom: 110px;
}

Bonne journée,

Cordialement,

[Milouze14]

Salut orpheus et Stéfano ,


orpheus,

Si tu veux déplacer les petits boutons, il faut le faire dans ce nouveau template:
En attendant supprime le style que tu as déposé dans ta feuille de style, tu pourras ajouter dans le template le style désiré.
Ensuite dans le template tu vas avoir des lignes comme celles-ci:

Code:


<!--<div class="author-avatar" title="{topics_grid_box.row.L_CREATED_ON_BY}"> {topics_grid_box.row.TOPIC_AUTHOR_AVATAR} </div>-->

En fait cette ligne correspond à l'avatar mais ne sera pas affichée.
Et ce sur plusieurs lignes afin d'afficher vraiment l'essentiel.
Le fait de mettre au debut de la ligne:

Code:

<!--

et
à la fin

Code:

-->

Annule l'affichage .



Tout au début j'ai placé un style:

Code:


<style>
  /*on change la couleur de police ici*/  
  .topic-card .M14_stats{color: #fff;font-size: 12px;}
.topic-card .M14_stats span:first-child {margin-right: 4px;}
  /*on change la couleur de fond ici*/
.topic-card .M14_stats span {
    background-color: #263238c2;
    border-radius: 2px;
    padding: 4px 10px;
    display: inline-block;
}
  
</style>


La class "stats" a été supprimé et remplacé par "M14_stats" ici:

Code:

              
 <div class="M14_stats" align="right">
                                        <span title="{L_VIEWS}" data-tooltip="{L_VIEWS}">
                                    <img src="{ILLIWEB_URL}icon-eye.svg"> {topics_grid_box.row.VIEWS}
                              </span>
                                          <span title="{L_REPLIES}" data-tooltip="{L_REPLIES}">
                                           <img src="{ILLIWEB_URL}icon-bubble.svg"> {topics_grid_box.row.REPLIES}
                                    </span>
            </div>


Dans le template topics_grid_box :
Affichage/Templates/Général/topics_grid_box


Remplaces tout le contenu par celui-ci pour ta version PHPBB2:

Code:


<style>
  /*on change la couleur de police ici*/  
  .topic-card .M14_stats{color: #fff;font-size: 12px;}
.topic-card .M14_stats span:first-child {margin-right: 4px;}
  /*on change la couleur de fond ici*/
.topic-card .M14_stats span {
    background-color: #263238c2;
    border-radius: 2px;
    padding: 4px 10px;
    display: inline-block;
}
  
</style>

<!-- BEGIN topics_grid_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
<table class="forumline grid-forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr class="grid_forumheader">
      <th align="center" nowrap="nowrap">&nbsp;{topics_grid_box.row.L_TITLE}</th>
   </tr>
   <!-- BEGIN pagination -->
   <tr>
      <td class="row1" align="right"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END pagination -->

   <tr><td class="row2">
         <div class="grid-section">

            <!-- END header_table -->

            <!-- BEGIN header_row -->
            <tr class="grid_forumheader">
               <td class="row3 grid_gensmall_title"><span class="gensmall">&nbsp;<strong>{topics_grid_box.row.L_TITLE}</strong></span></td>
            </tr>
            <!-- END header_row -->

            <!-- BEGIN topic -->
            <!-- BEGIN line_sticky -->
            <tr><td class="row3 sticky-separator"></td></tr>
               <tr><td class="row2">
               <div class="grid-section">
            <!-- END line_sticky -->
<!-- BEGIN table_sticky -->
                     <tr><th align="center" nowrap="nowrap">&nbsp;{topics_grid_box.row.topic.table_sticky.L_TITLE}</th></tr>
                     <tr><td class="row2">
                           <div class="grid-section">
                              <!-- END table_sticky -->
                              <div class="topic-card {topics_grid_box.row.ROW_ALT_CLASS}">
                                 <a href="{topics_grid_box.row.U_VIEW_TOPIC}">
                                    <div class="cover-image" style="--cover-image: url('{topics_grid_box.row.U_FB_IMAGE}');">
<!--<div class="posts-icon {topics_grid_box.row.FOLDER_CLASSNAME} {topics_grid_box.row.TOPIC_READ_STATUS}" style="background-image:url('{topics_grid_box.row.TOPIC_FOLDER_IMG}');" title="{topics_grid_box.row.L_TOPIC_FOLDER_ALT}"></div>-->
<!--<div class="topic-type {topics_grid_box.row.FOLDER_CLASSNAME}">{topics_grid_box.row.TOPIC_TYPE}</div>-->
<!--<div class="author-avatar" title="{topics_grid_box.row.L_CREATED_ON_BY}"> {topics_grid_box.row.TOPIC_AUTHOR_AVATAR} </div>-->
                     </div>
                  </a>
                  <div class="card-content">
                     <div>
<!--<span class="participate-check">{topics_grid_box.row.PARTICIPATE_POST_IMG}</span>-->
                        <div class="topic-title-container">
                           <!-- BEGIN single_selection -->
                           <input type="radio" name="{topics_grid_box.FIELDNAME}" value="{topics_grid_box.row.FID}" {topics_grid_box.row.L_SELECT} />
                           <!-- END single_selection -->
                           <h2 class="topic-title hierarchy">
                              <a href="{topics_grid_box.row.U_VIEW_TOPIC}" class="topictitle"> {topics_grid_box.row.TOPIC_TITLE} </a>
                           </h2>
                        </div>
                     </div>
                     <div class="description"> {topics_grid_box.row.FIRST_POST_TEXT_110} </div>
                     <div class="card-footer">
<div class="avatar-footer">
<!-- BEGIN avatar -->
<!-- <span class="lastpost-avatar">{topics_grid_box.row.topic.avatar.LAST_POST_AVATAR}</span>-->
<!-- END avatar --> {topics_grid_box.row.LAST_POST_AUTHOR} <!--{topics_grid_box.row.NEWEST_POST_IMG}-->
                        </div>
<div class="time" title="{L_LASTPOST}">
<i class="ion-android-time"></i> {topics_grid_box.row.LAST_POST_TIME} <!--{topics_grid_box.row.LAST_POST_IMG}-->
                        </div>
                                                        
                            
                     </div>
                                                     <div class="M14_stats" align="right">
                                        <span title="{L_VIEWS}" data-tooltip="{L_VIEWS}">
                                    <img src="{ILLIWEB_URL}icon-eye.svg"> {topics_grid_box.row.VIEWS}
                              </span>
                                          <span title="{L_REPLIES}" data-tooltip="{L_REPLIES}">
                                           <img src="{ILLIWEB_URL}icon-bubble.svg"> {topics_grid_box.row.REPLIES}
                                    </span>
            </div>
                  </div>
               </div>
               <!-- END topic -->
               <!-- BEGIN no_topics -->
               <tr>
                  <td>
                     <div class="posts-section posts-empty row1">
                        <strong>{topics_grid_box.row.L_NO_TOPICS}</strong>
                     </div>
                  </td>
               </tr>
               <!-- END no_topics -->



               <!-- BEGIN bottom -->
            </div></td></tr>
      <!-- END bottom -->

      <!-- BEGIN footer_table -->
</table>
<!-- END footer_table -->


<!-- BEGIN spacer -->
<br />
<!-- END spacer -->

<!-- END row -->
<!-- END topics_grid_box -->


Penses a enregistrer puis à valider en cliquant respectivement sur  puis

Le visuel après les changements:




Si la hauteur de la partie grise te semble trop haute:



Tu peux ajouter ce style dans le template:

Code:

  .topic-card .cover-image{height:100px!important;}

a++

[orpheus]

Bonjour Milouz et Stefano

Je viens de procéder à quelques essais avec les modifications de template et franchement c'est super, ça correspond à ce que je recherchais !

Encore un grand merci à vous deux pour votre aide, je classe le sujet en résolu !