How to put button in the corner of the screen?

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

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js

You can also find more detailed explanations of some of the most popular methods in that API here

3 Likes

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?

1 Like

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 :+1:

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.

2 Likes