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?

[image] 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? [image] 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 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 [image] Developing Discourse Themes & Theme Components Developer Guides Discourse Themes and Theme Components can be used to customize the look, feel and functionality of Discourse’s frontend. This section of the developer guides aims to provide all the reference materials you need to develop simple themes for a single site, right up to complex open-source theme components. This introduction aims to provide a map of all the tools and APIs for theme development. If you prefer a step-by-step tutorial for theme development, jump straight to: Themes vs. Theme Compon…

Thank you, I’ll take a look at the list of the methods. The screenshot: [image] 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).

[image] 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 [image] position CSS property - CSS | MDN The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left physical properties and the inset-block-start, inset-block-end, inset-inline-start, and inset-inline-end flow-relative logical properties can... position: fixed makes the element stay in the same position (relative to the viewport) even if you scroll down. [image] 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 [image] EventTarget: addEventListener() method - Web APIs | MDN The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target. Is there any specific problem that you’re trying to solve that we can help you with?

[image] verilog15: I have ruby files and js files 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 [image] 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.

How to put button in the corner of the screen?

Development

verilog15 (verilog) September 1, 2020, 7:57pm 5

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?

Topic		Replies	Views
How can one add a toggle button to the post menu and implement an action for that toggle button in a Discourse plugin? Development	4	1003	November 28, 2023
How do we add buttons next to the "New Topic" button? Product Support	2	1528	March 27, 2019
Can I make a custom button with CSS and HTML? Development	4	2172	November 18, 2022
Custom option in the topic admin panel? Development	1	879	August 25, 2018
How to embed a button into a Topic Post Development css	5	1218	August 24, 2026

How to put button in the corner of the screen?

Related topics