How to add a style class correctly?

Pirat

I'm already very close to understanding the engine, I think a couple of days and I will understand the basics
Now I need to understand the correct addition of classes and not to touch the core, so that I can update the engine
Here is an example of what I do with the kernel.

app.js
piece of code

null,
this3.content(),
m(
'aside',
{ className: 'Post-actions' },
m(
'ul',
null,
listItems(this3.actionItems().toArray()),
controls.length ? m(
'li',
null,
m(

i change it like this

null,
this3.content(),
m(
'aside',
{ className: 'Post-actions myclass' },
m(
'ul',
null,
listItems(this3.actionItems().toArray()),
controls.length ? m(
'li',
null,
m(

It works. I added myclass to the code and can work with it.

The problem is that it's wrong to do this, I want to know how to do it right.

luceos

Pirat the code this3 let's me assume you are editing files in assets/ most likely a .js file. This is not how you go about modifying Flarum because these css- and js files in the assets directory are actually regenerated and overwritten whenever you flush the cache, enable or disable an extension.

Instead you can best look at creating an extension, or for the upcoming Beta 8 you can use the site specific extend.php you can store in the root of your flarum installation directory. You can read about that on the docs repository: https://github.com/flarum/docs/blob/master/extend/index.md

Pirat

luceos Not really, I changed the root files and then I cleaned the cache myself.
vendor\flarum\core\js\forum\dist\app.js

clarkwinkelmann

Pirat the best would be to do that via an extension as already said in the other discussions.

Though if you really want to work on your own core modification, I suggest you edit javascript source files (in js/forum/src and use the Gulp command (in beta7 there's a script in the script folder I believe, you'll need npm for it to work) to regenerate the dist file. This will allow you to use the JSX syntax and all the latest javascript (is it es6, es2016, I never know) methods. This will also make it a lot easier to manage conflicts when you'll merge new core versions.

If you have properly created your own core copy of core outside of vendor (in a workbench folder ideally, and it doesn't look like you did from your last post), then editing dist files isn't technically wrong and should work and not be automatically wiped out. Though it will likely become complicated to maintain for the reasons already mentioned 🤷‍♂️

Pirat

clarkwinkelmann I need time to understand the whole concept.

jordanjay29

I'd encourage you to look at other extensions in the community (either in our Extensions tag here, or on flagrow.io) to see some good examples of how to work with Flarum.