Editing CSS/Headers With an Extension

Frink

OrdinaryJellyfish For right now, all I want it to do, is this:

When activated, add css to the global css file
When de-activated, remove this extra css

In the future, I would like it to do this:

When activated, display a settings modal
The settings modal asks you to enter a hex value, or a color (e.g. blue)
The extension then adds this to the global css file so the color theme is blue

Is this completely crazy, or does it sound like something that might work?

OrdinaryJellyfish

Frink Custom CSS pretty much already does all that. You just have to insert the colors manually. A tool like your browser's "inspect element" would be good for this so you know what classes to specify.

Frink

OrdinaryJellyfish Ya, I was thinking something like that. Thing is, most people would rather use an extension to change the color of the forum instead of having to manually enter code. Just my thoughts. Eventually, this extension would probably do more than just change the color.

Razor

But if for example, users can individually choose, what colors they want, i think that would be nice.

Frink

Razor That's my thought entirely.

jordanjay29

Frink You can add CSS via any extension. Check out how one of Flarum's extensions do this.

Frink

jordanjay29 Does this auto-apply the css? Also, does it override the default flarum css?

luceos

Frink any extension that ships along additional css will have that css auto applied if enabled. As you can make use of LESS, which is a CSS compiler, you can override any LESS from core using an extension.

Frink

luceos OK. I am a real noob at PHP, CSS, and JS, but how would I make a settings modal?

luceos

Frink look at other extensions and copy the code from them, then adapt to your needs. It's how most (except Toby ? ) started writing extensions.

Pollux

Frink Also, do you have any suggestions as to my issue on my other thread here (last post)

Unfortunately not. I "learned" programming for Flarum as luceos called it:

luceos look at other extensions and copy the code from them, then adapt to your needs. It's how most (except Toby ? ) started writing extensions.

As I feel comfortable with CSS and quite comfortable with Javascript, I looked at other extensions which worked that way, but that's all I achieved until now. I'm still learning myself.

Frink

OK, I have attempted to make a basic extension that applies a .less file, but I am getting a 500 Internal Server Error. Here is the contents of my folder, and the contents of the files:

Structure:
less
~forum
~extension.less
bootstrap.php
composer.json

Contents of composer.json:

{
    "name": "zaptech/flarum-color-changer",
    "description": "Change the color of your flarum interface!",
    "type": "flarum-extension",
    "require": {
        "flarum/core": "^0.1.0-beta.6"
    },
    "extra": {
        "flarum-extension": {
            "title": "Color Changer"
        }
    }
}

Contents of bootstrap.php

<?php

use Flarum\Extend;
use Illuminate\Contracts\Events\Dispatcher;

return [
    (new Extend\Assets('forum'))
        ->asset(__DIR__.'/less/forum/extension.less')
];

Contents of extension.less

.global {

}

There is probably some really obvious and stupid mistake in here that I haven't seen. Any tips are appreciated!

luceos

Frink return [
(new Extend\Assets('forum'))
->asset(DIR.'/less/forum/extension.less')
];

This code is for the upcoming beta. If you run beta 7.1; you'll need to use the old way AddClientAssets.php ?

Frink

luceos Ok, I will edit it tomorrow! Thanks!

luceos

Also if you run into 500 errors, make sure you have debug enabled in your config.php and you check your storage/logs/flarum.log file first.

Frink

luceos I did enable debug and its don't give me an error. I didn't check the log, thanks for reminding me of that

Ralkage

@luceos one day I hope we can all collaborate on a developers hobo guide to writing extensions and adding all sorts of components that can be added such a settings modal ?

Frink

Ralkage such a settings modal

Sorry to seem like a royal twit, but being younger than 16, I haven't gotten too in-depth in the php and css side of things. I like to stick to straight html!

clarkwinkelmann

Frink Flarum frontend is a javascript single page app (SPA) so there's no "straight html" anywhere to be seen. This might be a bit unsettling at first but once you learn how SPA works, creating a settings modal is really one of the easiest and logical first steps in learning to add features to Flarum ?

Frink

clarkwinkelmann Yup. I forked @Davis custom footer extension, and played around with it. Essentially, it already does what I want to do. Thanks for the help!