Réduction de la barre catégorie ou "dézoom" du forum

[Jothenin]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Moi uniquement
Lien du forum : http://impulse-interregmed.forumactif.com

Description du problème

Bonjour à tous,

Cela fait longtemps que je n'avais pas posté sur un forum, ça me rappelle des souvenirs... Mais il arrive maintenant que je doive carrément en créer un .

Voici mon problème/interrogation.

Le design de modernBB est très sympa, j'adore la possibilité de pouvoir intégrer une bannière large en en tête qui pose bien le thème du forum et toutes les personnalisation. C'est assez moderne ( ;-) Blague de merde, mais humour de répétition car on doit la faire à chaque fois?)

Malheureusement, les autres versions (phpBB2 3 etc..) semblent ne pas permettre d'inclure de telles bannières (sauf erreur de ma part?).

Aussi, j'en viens à mon point:  

J'aimerais savoir si il est possible de réduire l'empatement vertical/hauteur de la barre "catégorie" . Celle ci prend beaucoup de place juste pour montrer les titres. Un empatement comme les autres versions de forum serait super, je me demande donc si il existe une manip pour diminuer cet espace en trop.
Plus globalement, toutes les catégories et sous catégories prennent trop d'espace vertical (on dirait qu'il y a un saut de ligne en dessous de la fin de chaque sous catégorie). Du coup, ça prend tout l'écran.

Si il n'existe pas de possibilité de réduire cet espace vertical "encombrant", existe t'il une sorte de fonction "zoom" du forum?
Pour avoir un affichage en dézoom (qui afficherait les polices en taille plus petites, et réduirait également par la même l'empatement des barres de catégories etc..), cela qui permettrait de pouvoir visualiser au moins 4-5 sous catégories directement sans avoir à faire défiler la page vers le bas beaucoup.
Faire le dézoom depuis le navigateur directement, je ne pense pas que beaucoup de gens le feront .

J'espère que ma demande est suffisamment claire?
Je vous remercie d'avance de toute contribution à la thématique. Et si il n'y a aucune solution, et bahh va falloir repasser à une autre version moins mignonne :/

Bonne journée

EDIT: En fin de compte, ce forum ci correspond un peu à ce que je souhaite ; une bannière assez large en haut en en tête,  et des barres de catégories de forum pas trop épaisses .

[Jothenin]

UP !

J'ai cru voir qu'il fallait modifier peut-être les templates? Mais alors je n'y connais pas grand chose et les quelques indications dans les tuto du site ne m'avancent pas beaucoup.

C'est simple ce que je souhaite obtenir.. mais compliqué à la fois semble t'il..

[Jothenin]

UP UP UP !  :/ . Allez, peut-être que ça peut vous motiver à répondre, en son et en image!

  ---->  

[Jothenin]

UP

[w00tw00t]

Bonjour Jothenin,

Sous ModernBB, vous pouvez facilement modifier la marge sous chaque catégorie/sous-forum en ajoutant/ajustant ce CSS :

Code:

.forabg {
    margin-bottom: 6px;
}

Vérifier sur plusieurs types de pages (page d'accueil, affichage d'une catégorie, affichage d'un forum, liste des sujets, ...) que le résultat est bien celui attendu.

Je reste à votre disposition pour plus de détails,

Cordialement,
w00tw00t

[Jothenin]

Bonjour,

Merci beaucoup!

Par contre, je suis un noob. Je suis allé dans Affichage --> Couleurs --> Feuilles de style CSS et j'ai tapé directement votre code dans l'espace (vide d'ailleurs), prévu à cet effet.

... ça n'a strictement rien donné/changé. Mais du coup je vois au moins quelle est la fonction à changer (en consultant la feuille CSS de base, ça met un espacement de 24 px (non modifiable) ).

Du coup, pouvez vous me guider un peu plus précisément?

Merci!

[w00tw00t]

Bonjour Jothenin,

Veuillez excuser ce délais de réponse, j'étais très prisé ces derniers jours.

Je viens d'essayer à nouveau, et j'ai bien une réduction de l'écart entre deux catégories :



Après application :



Est-ce bien l'effet attendu ?

Cordialement,
w00tw00t

[*Splash*]

Hum, sauf erreur de ma part, l'effet désiré est de réduire la hauteur du cadre des catégories (la partie en verte) et non l'espace entre deux catégories

[w00tw00t]

Bonjour,

Sur le second screen certaines catégories semblent moins espacées entre elles, mais bonne remarque effectivement *Splash*. D'ailleurs Jothenin, pouvez-vous préciser si vous souhaitez également personnaliser l'espacement au sein du contenu de chaque catégorie, comme peuvent aussi le suggérer vos captures d'écrans, et non son seul header (espace en vert) ?

Cordialement,
w00tw00t

[Jothenin]

Bonjour,

Merci beaucoup, c'est un excellent début. En effet, je souhaite diminuer la hauteur du cadre des catégories (espace en vert) et egalement la hauteur du cadre des topics (ou forum selon le vocabulaire utilisé dans le panneau d'admin il me semble, le cadre en blanc). Revoici un screenshot de l'effet désiré (agrandir les images pour vraiment voir la différence):

 Etat actuel

Etat recherché.  
Peut-être que le cadre en blanc est difficilement diminuable du fait que si on y met des modérateurs, un espace de texte y est prévu pour mettre son nom, ou un texte de description plus détaillé du forum?

Ensuite, si je comprends bien, je vais bien dans Affichage --> Couleurs --> Feuilles de style CSS, et je tape directement le code sur la page sur laquelle j’atterris?

Merci.

[*Splash*]

...Ensuite, si je comprends bien, je vais bien dans Affichage --> Couleurs --> Feuilles de style CSS, et je tape directement le code sur la page sur laquelle j’atterris?

Merci.

C'est la bonne procédure

[w00tw00t]

Bonjour Jothenin,

S'agissant de la modification de hauteur des entêtes (vertes), il vous faut tout d'abord modifier le template index_box. Il existe en effet une classe "lastpost" qui définie un padding sans redéfinition ultérieure possible, qu'il nous faut renommer en "lastpost2". Une fois connecté en tant que fondateur et ce template affiché, faites donc une recherche sur "lastpost" (guillemets inclus), et remplacer "lastpost" par lastpost2".

Vous pouvez ensuite ajouter ce code CSS dans votre feuille de style (et ajuster au besoin les valeurs, en particulier de padding) :

Code:

.forabg dd.lastpost2 {
    font-size: 1.3rem;
    line-height: 20px;
    width: 32%;
}

.forabg ul.topiclist .header dt {
    padding: 8px;
}

.forabg ul.topiclist .header dd.dterm {
    padding: 12px;
}

.forabg ul.topiclist .header dd {
    padding: 8px 0;
}

.btn-collapse {
    top: 12px;
}


Le résultat doit être quelque chose comme ça :


S'agissant de la réduction de la taille du contenu de chaque catégorie, vous pouvez insérer et ajuster (ce qui suppose également la modification de template décrite ci-dessus) :

Code:

.forabg .topiclist .row dd {
    padding-top: 8px;
    padding-bottom: 8px;
}

Rappelons aussi que pour l'espacement entre catégories, vous pouvez insérer et ajuster :

Code:

.forabg {
    margin-bottom: 6px;
}

Cordialement,
w00tw00t

[Jothenin]

Bonjour,

Merci beaucoup, c'est quasiment ça! Voici ce que j'obtient (en ajustant les valeurs données par le script, en général en divisant par deux)
:


--> La hauteur du cadre blanc est bien plus petit. J'ai également compris que certaines valeurs permettent de décaler la hauteur du texte. Et l'espacement entre catégories, bien compris aussi.     Cependant, pas compris pourquoi l'icone représentant une horloge reste fixe, quand les autres se décallent.

Egalement, et le plus important... Je ne vois pas de différence entre la hauteur du cadre verte de catégorie entre avant et après.. il y a bien 6 - 10 pixels à gratter!

J'ai bien modifié le template en remplacant les deux  " "lastpost" " trouvé en recherche et le code suivant est dans la feuille CSS:

[*Splash*]

Hi Jothenin,

Dans le template la ligne à modifier est celle-ci (ligne 29) :

Code:

<dd class="lastpost2"><i class="ion-android-time" data-tooltip="{L_LASTPOST2}"></i></dd>

Sur mon forum aucun décalage pour l'horloge

[Jothenin]

C'est tout bon! Parfait! En allant pour checker la ligne, il se trouve que le template avait été enregistré, mais qu'il fallait également "valider" pour l'activer.

Merci beaucoup, c'est tout bon =)

[*Splash*]

Super.

Il faudrait en faire de même pour le cadre de la liste des sujets et le cadre des annonces et notes