How can I add some custom html to the bottom of the categories page?


(Alex Flom) #1

How can I add some custom html to the bottom of the categories page?


How do I add a message to the Categories page?
(Kane York) #3

You can add some HTML to the bottom of every page by going to Admin -> Customize -> CSS/HTML -> Footer. (Click the phone icon to edit the mobile view version.)


(Alex Flom) #4

I understand, but I want to add it to edit only the categories page…


(Simon Cossar) #5

The categories page adds the class categories-list to the body. You could try putting the html you want to add inside of a div that is hidden, and then only shown on the categories-list page.

<div class="categories-footer">
    // Your content here
</div>
// css
.categories-footer {
    display: hidden;
}

.categories-list .categories-footer {
    display: block;
}

(Alex Flom) #6

Thanks Simon,

I guess this can work.
But probably a more elegant solution will be to create a custom page with the html and design I want, and add to that page every category’s last posts.
Than I will have my own custom designed catagories page with dynamic content.
I assume this is possible with the API?


(Sam Saffron) #7

Mockup of what you are trying to do? we can add a plugin outlet


(Alex Flom) #8

Hi,
What is a plugin outlet?
I am trying to achieve something like this (category page):


(Sam Saffron) #9

Not really following can you take a screenshot of our categories page and pencil in where you are trying to insert stuff?


(Alex Flom) #10

After the categories and above the footer.
But I also want to change how the categories boxes look.
So I think it will be easier to create my own page and dynamically include in it the latest posts of each category using the discourse api.


(Mittineague) #11

My guess is in templates/discovery/categories.hbs here

  </div>
  {{ plugin-outlet "after-content" }}
  <footer class='topic-list-bottom'></footer>
{{/if}}

* though I don’t know why the footer class is topic-list-bottom when it is in categorues


(Simon Cossar) #12

Here’s the code for it. The comments at the top tell you enough to get going - I did a ‘hello world’ to try it out.

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/helpers/plugin-outlet.js.es6

It looks like, as @Mittineague wrote, the template you want to get at is app/javascripts/discourse/templates/discovery/categories.hbs . That template does not have a plugin outlet, but it sounds like they would be willing to add one.

If you want to completely override the template you can create a plugin with a folder structure that mirrors the template’s position in Discourse. for example:

custom-category-page/assets/javascripts/discourse/templates/discovery/categories.hbs.

Your categories.hbs will override the default one. You need a plugin.rb file at the base of the plugin that registers the categories.hbs template:

register_asset "javascripts/discourse/templates/discovery/categories.hbs"


(Sam Saffron) #13

Sounds to me like you are trying to override the entire template as opposed to extend it. Look at my theme to see an example of how it is done: Sam's personal "minimal" topic list design