[AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu [AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile

Message par Invité Jeu 9 Mar 2023 - 11:21

Détails techniques


Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://gemurama.com/

Description du problème

Bonjour,

J'aimerais réduire l'affichage de la liste des sujets sur mobile et/ou tablette de cette manière :

[AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile DtqU9Zv

Est-ce que c'est possible de le faire ou non ? Smile Si oui, comment ?

Merci d'avance pour votre aide Smile
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile

Message par R.P. Gryphus Jeu 9 Mar 2023 - 16:29

Bonjour Zlork! Very Happy

Essaies ce CSS et dis-moi si le résultat est celui désiré :

Code:
@media (max-width: 750px) { /* EXCLUSIF AUX ÉCRANS D'UNE LARGEUR ÉGALE OU INFÉRIEURE À 750px */

  .forum-lastpost > avatar-default,
  .forum-lastpost i,
  .posts-lastpost > avatar-default,
  .posts-lastpost i {
    display: none; /* SUPPRESSION DE L'AVATAR ET DES ICÔNES DANS LA BOÎTE 'DERNIERS MESSAGES' */
  }

  .forum-lastpost-inner,
  .posts-lastpost-inner {
    margin-left: 0; /* MARGE GAUCHE DE L'ARRIÈRE PLAN DU TEXTE DANS LA BOÎTE 'DERNIERS MESSAGES' */
    font-size: 10px; /* TAILLE DE LA POLICE POUR L'AUTEUR ET LA DATE */
    line-height: normal; /* INTERLIGNE */
  }

  .darkmode.forum-lastpost,
  .darkmode.posts-lastpost {
    background: #2E3238; /* CHANGE LA COULEUR DE L'ARRIÈRE PLAN */
    border-top: 1px solid rgba(255,255,255,0.1); /* AJOUT D'UNE BORDURE SEMI-TRANSPARENTE */
  }

  .forum-description,
  .posts-description {
    margin-bottom: 0; /* SUPPRESSION DE LA MARGE SÉPARANT LA DESCRIPTION DU FORUM ET LA BOÎTE 'DERNIERS MESSAGES' */
  }

  .forum-lastpost,
  .posts-lastpost {
    padding: 4px 16px; /* MARGE ENTRE LE CONTENU DE LA BOÎTE 'DERNIERS MESSAGES' ET SON CONTENANT (AFFECTE LA TAILLE DE L'ARRIÈRE-PLAN) */
  }

  .forum-lastpost-time,
  .posts-lastpost-time {
    float: right; /* ALIGNEMENT DE LA DATE À DROITE */
  }

  .forum-lastpost.topic-title,
  .posts-lastpost.topic-title {
    font-size: 10px; /* TAILLE DE LA POLICE DU LIEN VERS LE DERNIER MESSAGE */
    text-overflow: initial; /* CETTE DÉCLARATION AINSI QUE LES 2 SUIVANTES DEVRAIENT PERMETTRE L'AFFICHAGE DU LIEN EN ENTIER */
    overflow: visible;
    white-space: normal;
    text-transform: uppercase; /* LETTRES DU LIEN EN MAJUSCULE */
  }

}
R.P. Gryphus

R.P. Gryphus
**

Messages : 86
Inscrit(e) le : 17/02/2023

https://sanguo-sengoku.goodforum.net/
R.P. Gryphus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile

Message par Invité Jeu 9 Mar 2023 - 17:21

Bonjour,

[AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile IaMifGQ

Voilà donc le résultat. Pas vraiment ce que je veux donc mais on est pas loin.
Et attention, je souhaite ce résultat uniquement dans la liste des sujets, pas sur la page d'accueil Smile
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile

Message par R.P. Gryphus Jeu 9 Mar 2023 - 17:44

Ah pardon, dans ce cas fais bien sûr de supprimer le CSS que je t'ai proposé plus tôt et remplace le par celui-ci :

Code:
@media (max-width: 750px) { /* EXCLUSIF AUX ÉCRANS D'UNE LARGEUR ÉGALE OU INFÉRIEURE À 750px */
 
  .posts-lastpost > .avatar-default,
  .posts-lastpost i {
    display: none; /* SUPPRESSION DE L'AVATAR ET DES ICÔNES DANS LA BOÎTE 'DERNIERS MESSAGES' */
  }
 
  .posts-lastpost-inner {
    margin-left: 0; /* MARGE GAUCHE DE L'ARRIÈRE PLAN DU TEXTE DANS LA BOÎTE 'DERNIERS MESSAGES' */
    font-size: 10px; /* TAILLE DE LA POLICE POUR L'AUTEUR ET LA DATE */
    line-height: normal; /* INTERLIGNE */
  }
 
  .darkmode.posts-lastpost {
    background: #2E3238; /* CHANGE LA COULEUR DE L'ARRIÈRE PLAN */
    border-top: 1px solid rgba(255,255,255,0.1); /* AJOUT D'UNE BORDURE SEMI-TRANSPARENTE */
  }
 
  .posts-description {
    margin-bottom: 0; /* SUPPRESSION DE LA MARGE SÉPARANT LA DESCRIPTION DU FORUM ET LA BOÎTE 'DERNIERS MESSAGES' */
  }
 
  .posts-lastpost {
    padding: 4px 16px; /* MARGE ENTRE LE CONTENU DE LA BOÎTE 'DERNIERS MESSAGES' ET SON CONTENANT (AFFECTE LA TAILLE DE L'ARRIÈRE-PLAN) */
  }
 
  .posts-lastpost-time {
    float: right; /* ALIGNEMENT DE LA DATE À DROITE */
  }
 
}
R.P. Gryphus

R.P. Gryphus
**

Messages : 86
Inscrit(e) le : 17/02/2023

https://sanguo-sengoku.goodforum.net/
R.P. Gryphus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile

Message par Invité Jeu 9 Mar 2023 - 19:02

Merci on avance Very Happy

[AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile RNVu00a

Je voudrais aligner avec le titre si possible ?
Et je voudrais tester la date et heure à coté du pseudo et non au dessous Smile
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile

Message par R.P. Gryphus Jeu 9 Mar 2023 - 19:51

Zlork a écrit:
Je voudrais aligner avec le titre si possible ?
Et je voudrais tester la date et heure à coté du pseudo et non au dessous Smile

Oui en fait le code que j'ai proposé était supposé mettre la date à droite, mais j'ai oublié une déclaration, donc re-voici le code avec la correction :

Code:
@media (max-width: 750px) { /* EXCLUSIF AUX ÉCRANS D'UNE LARGEUR ÉGALE OU INFÉRIEURE À 750px */
 
  .posts-lastpost > .avatar-default,
  .posts-lastpost i {
    display: none; /* SUPPRESSION DE L'AVATAR ET DES ICÔNES DANS LA BOÎTE 'DERNIERS MESSAGES' */
  }
 
  .posts-lastpost-inner {
    font-size: 10px; /* TAILLE DE LA POLICE POUR L'AUTEUR ET LA DATE */
    line-height: normal; /* INTERLIGNE */
  }
 
  .darkmode.posts-lastpost {
    background: #2E3238; /* CHANGE LA COULEUR DE L'ARRIÈRE PLAN */
    border-top: 1px solid rgba(255,255,255,0.1); /* AJOUT D'UNE BORDURE SEMI-TRANSPARENTE */
  }
 
  .posts-description {
    margin-bottom: 0; /* SUPPRESSION DE LA MARGE SÉPARANT LA DESCRIPTION DU FORUM ET LA BOÎTE 'DERNIERS MESSAGES' */
  }
 
  .posts-lastpost {
    padding: 4px 16px; /* MARGE ENTRE LE CONTENU DE LA BOÎTE 'DERNIERS MESSAGES' ET SON CONTENANT (AFFECTE LA TAILLE DE L'ARRIÈRE-PLAN) */
  }
 
  .posts-lastpost-time {
    float: right; /* ALIGNEMENT DE LA DATE À DROITE */
  }

  .posts-lastpost-author,
  .posts-lastpost-time {
    width: auto;
  }
 
}
R.P. Gryphus

R.P. Gryphus
**

Messages : 86
Inscrit(e) le : 17/02/2023

https://sanguo-sengoku.goodforum.net/
R.P. Gryphus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile

Message par Invité Jeu 9 Mar 2023 - 21:06

Merci beaucoup Smile

On y est presque :

[AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile Mg2kNyq

J'aimerais pour finir que la date s'approche du pseudo. Pas collé mais avec un ou deux espace Smile
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile

Message par R.P. Gryphus Jeu 9 Mar 2023 - 23:19

Dans ce cas remplace ceci :

Code:
  .posts-lastpost-time {
    float: right; /* ALIGNEMENT DE LA DATE À DROITE */
  }

Par ceci :

Code:
  .posts-lastpost-time {
    margin-left: 10px; /* MARGE ENTRE L'AUTEUR ET LA DATE */
  }

Et ajustes selon ta préférence. Smile
R.P. Gryphus

R.P. Gryphus
**

Messages : 86
Inscrit(e) le : 17/02/2023

https://sanguo-sengoku.goodforum.net/
R.P. Gryphus a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile

Message par Invité Ven 10 Mar 2023 - 0:13

Merci beaucoup ! Smile

Je cloture
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum