Custom structure and more questions

AI-generated summary

The discussion revolves around customizing the Discourse theme structure. dgateles initially seeks help with integrating Font Awesome Pro and changing button classes to Bootstrap 4. After resolving the font issue, dgateles remains unclear on modifying HTML classes. Johani notes that Discourse isn’t built on Bootstrap, making class changes a complex task. They suggest a more practical approach: resetting unused button styles and adjusting others to match Bootstrap button styles, referencing the base styles in Discourse’s buttons.scss file.

Hello!

I have some questions about the theme structure and how to do some things.

  1. I’m trying to add font awesome pro with font files, so i have this arquives:
    Imgur: The magic of the Internet
    but won’t work: 404 not found.

  2. I want to change buttons to bootstrap 4 classes, how to do that?

Thanks!

Maybe look at Changing icons to Font Awesome Pro Version and Developing Discourse Themes & Theme Components

2 Likes

Fonts solved by myself, but looking at Developers guide, is not clear how to change classes of divs, buttons and others.

The fact is… Discourse is not built with Bootstrap. So, what you want to achieve will involve a lot of friction.

There are over 400 buttons used in the Discourse UI. If you were to change their default classes, you would end up having to override almost 200 templates and that’s just for handlebars. That is going to be a maintenance nightmare.

A more reasonable approach is to reset the button styles you’re not going to use and adjust the rest based on Bootstrap button styles.

The base styles for all the buttons in Discourse can be found here

discourse/app/assets/stylesheets/common/components/buttons.scss at main · discourse/discourse · GitHub

5 Likes