Comment afficher la porte plus loin dans le post ?

Dev
1

Merci pour ce super composant ! Serait-il possible d’afficher la porte plus bas dans le message ? (Nos sujets commencent tous par une image et nous aimerions montrer une bonne partie de texte, voire définir un endroit dans le sujet où la porte apparaît.) Tout indice (par exemple, des astuces CSS) est le bienvenu !

2 « J'aime »
2

Oui, je me posais une question similaire, peut-être un réglage en pourcentage qui pourrait être modifié.

3

Actuellement, le contenu est masqué en utilisant la technique suivante (entre autres) :

  • Le défilement est désactivé
  • La hauteur du contenu de la page est définie à 100 %

Vous pourriez ajuster ces éléments. Par exemple :

body.topic-in-gated-category {
    height: 200%;
}

Cela permettra de faire défiler davantage :

Cela pourrait être rendu plus joli en réduisant peut-être la zone bleue (¼ ou ⅓ de l’écran), en raccourcissant également le dégradé blanc…

Vous pouvez également modifier ceci :

.topic-in-gated-category .post-stream {
    max-height: 150vh;
    overflow: hidden;
}

Choisir combien de messages afficher avec CSS est délicat car ils sont au même niveau que les petites actions, le temps écoulé, etc.
Ainsi, utiliser du CSS tel que :

.post-stream > *:nth-child(n+6) {
    display: none;
}

n’affichera pas toujours le même nombre de messages d’un sujet à l’autre.

4 « J'aime »
4

Cela semble très utile pour notre forum. Pouvez-vous me dire où ce code personnalisé doit être ajouté, par exemple dans les paramètres du composant ou dans le CSS du thème ?

Merci d’avance.

5

Salut Jaime,

Le CSS de votre thème ou un CSS de composant séparé – les deux sont des choix acceptables. L’utilisation d’un composant permet de le rattacher facilement à plusieurs thèmes, ce serait la méthode préférée.

1 « J'aime »
6

Merci @Arkshine. Et après avoir approfondi un peu plus, je pense que je dois cloner ou forker le dépôt pour ce composant, puis apporter mes modifications directement au CSS commun avant de réimporter la version modifiée dans Discourse ? Est-ce correct ?

1 « J'aime »
7

Si vous souhaitez modifier du CSS, vous pouvez facilement créer un nouveau composant via l’interface utilisateur.

  1. Accédez à Administration → Personnaliser
  2. Cliquez sur Installer
  3. Choisissez ensuite Créer nouveau. Le type doit être Composant.
    image
    image519×357 5.62 KB

C’est tout ! Attachez-le à votre thème ; ensuite, vous pourrez Modifier CSS/HTML.

Vous voudriez généralement forker soit si vous souhaitez contribuer au composant d’origine sur Github (en créant une Pull Request), soit si vous souhaitez créer votre propre version. Si vous faites cela, vous ne recevrez aucune mise à jour du composant d’origine ; ce n’est probablement pas ce que vous voulez ici !

1 « J'aime »
8

Merci encore. Le problème, je pense, est que la propriété CSS de mon composant personnalisé sera également présente dans le composant de base du dépôt sur Github.

À moins qu’il n’y ait un moyen de spécifier qu’un composant doit en remplacer un autre, il semble nécessaire de simplement créer un clone du dépôt et d’utiliser ma version modifiée (qui fonctionne maintenant, je n’obtiendrai juste pas de mises à jour, comme vous le dites).

9

Si votre CSS ne surcharge pas le composant d’origine, vous pouvez ajouter !important dans une règle. Cela devrait fonctionner.

.topic-in-gated-category .post-stream {
    max-height: 150vh !important;
    overflow: hidden !important;
}
1 « J'aime »
10

Ça fonctionne parfaitement, merci encore pour votre aide !

1 « J'aime »
11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.