User verilog15 is trying to create a plugin in Discourse and is having trouble figuring out how to add a button in the corner of the screen that stays in place when scrolling. Johani suggested posting a screenshot of the desired button location, which verilog15 provided.
Johani explained that to make the button stay in place, verilog15 can use the CSS property position: fixed. For the button’s click event, Johani recommended using an event listener.
However, verilog15 is still unsure about where to place the CSS/SCSS files in their plugin. Johani advised looking at the folder structure of existing official plugins, such as discourse-math or discourse-assign, and placing the SCSS files in the _ROOT_/assets/stylesheets/ directory.
Hello community!
I’m trying to study how to create a plugin in Discourse. Currently, I’m trying to figure out how to put a button in the corner of the screen and if clicked, handle the request. How can I do it? It’s really basic but I could not figure it out.
Also, I saw in some plugins, calls like includePostAttributes and decorateWidget. Where can I see a list of all the methods Discourse allows to use?
Can you please post a screenshot of where you want to add this button and what you want to happen when it’s clicked?
I think you’re referring to the plugin API. You can find all the methods in that API - with some examples - here
You can also find more detailed explanations of some of the most popular methods in that API here
Thank you, I’ll take a look at the list of the methods.
The screenshot:
As you can see I added a small circle in the corner that represents the button. The button should float in air (meaning if I scroll down, it should still be in the corner). The logic that will be executed once clicked, I will try to add myself but to make it more clear, currently I’m trying to understand how it will open an alert box (just for practice).
What you’re looking for is called position: fixed and it’s a CSS property. You can read more about CSS positioning here
position: fixed makes the element stay in the same position (relative to the viewport) even if you scroll down.
I’m not really sure what you’re trying to accomplish here but if you only want an alert box to open when you click on a button, then you’ll need an event listener. You can read more about those here
Is there any specific problem that you’re trying to solve that we can help you with?
Thanks again for the information. I’m familiar with all that. I think my problem is that I don’t understand where the css should go. I have ruby files and js files but where the css/sass files go?
Nice 
Since you mentioned that you already have ruby files, I’m guessing that you’re working on a plugin, right?
So, to answer your question
I would recommend that you look at the folder structure of some of our existing official plugins like this one
https://github.com/discourse/discourse-math
or this one
https://github.com/discourse/discourse-assign
If you look at those, you’ll notice that the SCSS stylesheets are always placed in
_ROOT_/assets/stylesheets/
and that’s where your SCSS files should go if you’re making a plugin.
