Extended Appearance Settings

Kylo

Extended Appearance Settings

It can be so hard sometimes to choose best colors that go together while customizing Flarum and it's nightmare if you're using admin panel-only for adding some custom LESS/CSS/HTML - especially if you're a newcomer or less technical. I hope this extension speeds up your customization process and gives you some inspiration for your next Flarum theme as it does for me.

Colors

CodeMirror

Features

Live theme visualization with Pickr implementation
In-browser code editor powered by CodeMirror
Relocate sidebar to the right or keep it on the left
Prevent admin page from reloading after saving LESS/CSS/HTML changes
Integration with clarkwinkelmann/flarum-ext-scratchpad extension

Conflictions

This extension conflicts with the-turk/flarum-stargazing-theme package for now. I plan to release a new version for it in order to solve this confliction.

Installation

composer require the-turk/flarum-extended-appearance

Updating

composer update the-turk/flarum-extended-appearance
php flarum cache:clear

Usage

Just enable the extension and go to the "Appearance" settings.

Links

tolgaaaltas

Kylo Gradient settings would be nice for header.

DursunCan

Kylo You thought the preview well. Thanks dude.

Kylo

tolgaaaltas yeah, I thought that too but couldn't decide how to implement it - there are so many things to consider when you've restricted with two hex colors. Should gradients be applied directly into primary color (I mean all elements based on it) or just for the header? What about gradient angles, transitions and gradient type (linear or radial)? I think it'll be more reasonable to add custom CSS for any element (buttons, backgrounds etc.) that one wants to apply it.

rob006

You should fix LICENSE file in GitHub repository. Same for composer.json - there is no license definition there.

Kylo

rob006 oooppss I haven't noticed that until now. Thanks!

askvortsov

Congratulations, great work!

raafirivero

can't wait to test it out 🙂

datitisev

aleveltech You can add a footer using the Custom Footer setting in the Appearance tab of Flarum or use fof/custom-footer.

aleveltech

datitisev Thanks. Didn't know that before.

Hari

great work .. thanks

Ralkage

The only issue I noticed while using this extension is that the "OK" button doesn't work 😉 Alternatively, as a workaround, clicking outside of the color picker still applies your changes to the color squares.

Kylo

Ralkage it acts exact opposite on Firefox 🤔 It shouldn't apply any color changes until you hit that "Save" button which lies inside the Pickr component so you won't lose your previous scheme accidentally.

As a side note, color squares representing colors which will be applied on Flarum when you click "Save Changes" button so it's independent from the preview box

therealsujitk

Damn... This extension looks amazing!!

Artuu

therealsujitk I share that view.

fakruzaruret

CTRL + F does not work properley for code editor.

[deleted]

Gatsu

Could anyone make this extension compatible with beta 15?

iPurpl3x

Gatsu Maybe I will try to update it if @Kylo doesn't do it.

EvilExecutor

iPurpl3x https://discuss.flarum.org/d/22779-diff-for-flarum/132

I don't think the original author will be able to update this, sadly.