Progress of the new Button Editor

Reading Time: 2 minutes

This post is a continuation of my previous post, if you haven’t read it, yet you can do so here.

This weekend I’ve been working on the new button editor. I already implemented the routes and controllers in my recent pushes to GitHub.

In the current state, custom CSS can be applied to the custom button. An early version of this editor has been published exclusively on our Discord, you can visit here.

The last thing I am working on since the beta release on discord is turning the editor into its own page. My plan is to include a section on the ‘links’ page similar to the already implemented edit button and page.

Below you can see an early version of that page.

The button above the collapsible example section uses the customized CSS set above for a convenient representation of the changes made by the user.

Currently, users can do anything that they can do with CSS. I’ve included an example button with the used CSS, which users can use to customize their own buttons.

In the current state, the button element can only be edited directly with CSS formatting. This might not be optimal for inexperienced users, and errors in the formatting could result in a broken button.

I’m planning to implement a user-friendly system for easy editing and customization, similar to the one you can see below.

Moreover, I briefly experimented with custom icons using an open icon library such as Font Awesome.

This one should be fairly to implement, and I’m planning to include this in the next update as well. I will need to add another database entry for this, which I will sneak into the next revision.

Update:

This is what the Button editor on the ‘Links’ section will look like

Progress of the custom icon editor.