Comment ajouter la colonne « Vues » dans la liste des sujets.
Je ne suis en aucun cas un développeur ou un programmeur. J’ai passé quelques heures à jouer avec le code CSS en utilisant la fonction Inspecter l’élément dans Google Chrome. J’ai réussi à faire afficher correctement la colonne des vues, et j’ai également redimensionné chaque colonne selon mes préférences. Vous êtes les bienvenus pour ajuster la largeur dans le code CSS ci-dessous. J’ai également ajouté des commentaires dans le code afin que vous puissiez facilement identifier quel code correspond à quelle colonne. Pour chaque colonne, il y a 2 zones (En-tête et Ligne). Ces largeurs doivent correspondre.
J’espère que cela vous aidera tous : @daming @bksubhuti @eddy2
Instructions
1. Créer un nouveau composant.
2. Copiez ce CSS
Utilisez ce CSS mis à jour ci-dessous au lieu du code fourni par @jordan.vidrine ci-dessus.
Option A) Ajouter la colonne Vues uniquement pour le bureau (Recommandé)
- Ajoutez le code CSS dans l’onglet Bureau.
Option B) Ajouter la colonne Vues pour le bureau et le mobile.
- Ajoutez le code CSS dans l’onglet Commun.
Option C) Ajouter la colonne Vues uniquement pour le mobile.
- Ajoutez le code CSS dans l’onglet Mobile.
Remarque : Si vous avez choisi l’Option B ou C…
Sur mobile, les 3 colonnes (Réponses, Vues, Activité) prennent trop de place et sont écrasées. Si vous avez besoin de cela pour le mobile, je vous suggère de supprimer l’une des 3 colonnes. Vous pouvez le faire en ajoutant Display: none aux deux zones (En-tête, Lignes) dans le code CSS ci-dessous pour la colonne que vous souhaitez masquer.
/* [Sujet] */
/* En-tête du sujet */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
width: 66%;
}
/* Ligne du sujet */
.full-width .contents .topic-list .topic-list-header .topic-list-data.default {
width: 66%;
}
/* [Réponses] */
/* En-tête des réponses */
.full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
width: 7%;
order: 2;
}
/* Lignes des réponses */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
width: 7%;
order: 2;
}
/* [Vues] */
/* En-tête des vues */
.full-width .contents .topic-list .topic-list-header .topic-list-data.views {
display: block;
width: 7%;
order: 3;
}
/* Lignes des vues */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
width: 7%;
order: 3;
display: flex;
justify-content: center;
align-items: center;
}
/* [Activité] */
/* En-tête de l'activité */
.full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
display: block;
width: 7%;
order: 4;
}
/* Lignes de l'activité */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
width: 7%;
order: 4;
}
@jordan.vidrine Si vous avez des révisions à apporter au CSS que j’ai écrit, faites-le moi savoir. Je ne sais pas exactement ce que je fais… mais ça marche lol.