How to show the gate further down in the post?

dev
1

Thanks for the great component! Would be it be possible to show the gate further down in the post? (Our topics all start with an image and we would like to show a good junk of text or even define a place in the topic where the gate goes up.) Any hint (eg css hacks) appreciated!

2 Likes
2

Yes I was wondering something similar – maybe a percentage setting that could be changed.

3

Currently, the content is hidden using the following technique (among others) :

  • The scrolling is disabled
  • The page’s content’s height is set to 100%

You could tweak these things. For example:

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

This will allow further scrolling:

This could be made prettier maybe by reducing the blue area shorter (¼ or ⅓ of the screen), shortening the white gradient as well…

You can also modify this:

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

Choose how many posts to show with CSS is tricky because they are on the same level as small actions, time gap and so on.
So, using CSS such as:

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

Will not always show the same number of posts from a topic to another.

4 Likes
4

This looks like it will be really useful for our forum. Can you tell me where this custom code should be added, e.g. in the settings for the component or in the theme CSS?

Many thanks in advance

5

Hi Jaime,

Your theme CSS or a separate component CSS – both are acceptable choices. Using a component allows for easy attachment to multiple themes, that would be the preferred way.

1 Like
6

Thanks @Arkshine. And after delving a bit more I think I need to clone or fork the repo for this component and then make my edits directly to the common CSS before importing the edited version back into Discourse? Is this correct?

1 Like
7

If you want to change some CSS, you can create a new component easily through the UI.

  1. Go to Admin → Customize
  2. Click on Install
  3. Then choose Create New. The type should be Component.
    image

That’s it! Attach it to your theme; then, you can Edit CSS/HTML.

You would usually want to fork either if you want to contribute to the original component on Github (by creating a Pull Request) or if you want to create your version. If you do that, you won’t receive any updates from the original component; that’s probably not what you want here!

1 Like
8

Thanks again. The issue I think is that the CSS property in my custom component will also be in the base component from the repo on Github.

Unless there is a way to specify that one component should override the other it seems necessary to just create a clone of the repo and use my edited version (which is working now, I just won’t get updates, as you say)

9

If your CSS doesn’t overwrite the original component, you can append !important in a rule. This should work.

.topic-in-gated-category .post-stream {
    max-height: 150vh !important;
    overflow: hidden !important;
}
1 Like
10

That works perfectly, thanks again for the help!

1 Like
11

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