How to put button in the corner of the screen?

[verilog15 (verilog)]

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?

[Johani (Joe)]

@verilog15

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

Can you please post a screenshot of where you want to add this button and what you want to happen when it’s clicked?

@verilog15

Where can I see a list of all the methods Discourse allows to use?

I think you’re referring to the plugin API. You can find all the methods in that API - with some examples - here

discourse/plugin-api.js at main · discourse/discourse · GitHub

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

Developer’s guide to Discourse Themes

So, you want to create Discourse themes? Not sure where to start? Or maybe you have created Discourse themes before, but want to learn how to do even more cool things. Well, you’ve come to the right place Developer’s guide to Discourse Themes Subjects include a general overview of Discourse themes, creating and sharing Discourse themes, theme development examples, searching for and finding information / examples in the Discourse repository, and best practices. Prerequisites: …

[verilog15 (verilog)]

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).

[Johani (Joe)]

@verilog15

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

What you’re looking for is called position: fixed and it’s a CSS property. You can read more about CSS positioning here

position

position: fixed makes the element stay in the same position (relative to the viewport) even if you scroll down.

@verilog15

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

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

EventTarget.addEventListener()

Is there any specific problem that you’re trying to solve that we can help you with?

[verilog15 (verilog)]

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?

[Johani (Joe)]

@verilog15

I have ruby files and js files

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

@verilog15

where the css/sass files go?

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.