Custom CSS (along with header & footer) is not stored in files, but in the database (table settings > custom_less not sure what key exactly). Since your question asks about editing "outside the admin panel", I assume that you mean the custom CSS under Appearance settings, but if you want to modify the core CSS, an extension might be better for this, as editing source directly from the vendor folder is not recommend and changes will be lost when you update Flarum.

  • [deleted]

  • Post #5
  • Edited

You can use an external file to handle all CSS rather than store it in the database. I take this route as I prefer to use an editor rather than just plain text and the window within the custom CSS view is too small to work with once your CSS gets more complex.

It's a feature of extend.php in the Flarum root.

    Custom CSS in apperance is always a priority and if the body background changes there is a conflict with the dark mode.
    My idea is to change the CSS directly in the relevant files and then on update to compare the files and make the changes again manually.
    For example, the default fonts seem too small to me. Most people already use HiDPI monitors. Also, this white background by default is very tiring for the eyes when reading longer.
    Let the developers think about it.
    Thanks for the answers.
    I asked because in CSS inspectors I see that the rules are loaded from the "assets" path.

    [deleted]
    How exactly should I do this?
    I guess I need to create a directory where I can place my rules and describe this in the appropriate file?
    "Flarum\Extend"
    The default default path I guess is Vendor?
    Does this mean I need to create "Flarum\Extend" in "Vendor"

        NikolayIvanov Flarum extensions work in the backend via a mechanism called "extenders", which are kind of a declarative way of establishing what the extension does. In practice, this looks like an array of instances of Flarum/Extend/SomeExtenderName classes, with various methods called. (although there's nothing magic about that namespace; extensions can add their own extenders too).

        Individual Flarum installations also come with an extend.php file, where you can add extenders outside of an extension. The rationale for this is supporting lightweight per-site customizations without needing to publish and maintain an extension as a package.

        For less, all you need to do is add the following to your extend.php array:

        (new \Flarum\Extend\Frontend('forum'))
        ->css(PATH_TO_YOUR_CUSTOM_LESS_FILE),

        That being said, I am curious: why not just use the appearance section of the admin dashboard?

            askvortsov
            I use it but obviously for rules like "body background" that conflict with "dark mode", I have to edit the file directly. Also, for example, some extensions have their own CSS and in order for the changes to be visible, the file must also be changed directly.

                NikolayIvanov Interesting... The custom less added via appearance is compiled after everything else, so assuming the same levels of css specifity and the same degree of use of !important, it should override other values.

                If you want to define values for both light and dark mode, you can use:

                .define-colors(@config-dark-mode);
.define-colors(false) {
    // Light mode less here
}
.define-colors(true) {
    // Dark mode less here
}

                    askvortsov
                    Thanks for the help. I'll have to edit my Custom CSS. Now my custom CSS is:

                    .Post-body {
    font-size: 16px;
}
body {
    background: #f7f8e4;
    font-size: 16px
}
.App-header {
    background: #f7f8e4;
}
.Post-body pre {
background: #c3f5b5;
color: #111;
}
.Post-body code {
background: #c3f5b5;
color: #111;
}
.Post-body blockquote {
border-top: 2px dotted #797979;
border-bottom: 2px dotted #797979;
}
.Dropdown-menu {
background: #f7f8e4;
}
.DiscussionList:not(.DiscussionList--searchResults) .read .DiscussionListItem-title {
    color: #3e3e3e;
}
.DiscussionListItem-info {
color: #797979
}
.ReplyPlaceholder {
    border-color: #a9a9a9;
    font-size: 16px;
}
.ComposerBody-header h3, .ComposerBody-header h3 input, .ComposerBody-header h3 a {
    font-size: 16px;
}
.Dropdown-menu > li > a, .Dropdown-menu > li > button, .Dropdown-menu > li > span {
font-size: 16px;
}
.DiscussionListItem-info {
    font-size: 12px;
}
.Header-title {
    font-size: 24px;
}
.Post-body blockquote {
    color: #3e3e3e;
}
.FormControl {
font-size: 16px;
}
.TextEditor textarea {
    font-size: 16px;
}

                      askvortsov
                      Where am I wrong?
                      The forum does not work with this code:

                      <?php

/*
 * This file is part of Flarum.
 *
 * For detailed copyright and license information, please view the
 * LICENSE file that was distributed with this source code.
 */

use Flarum\Extend;

return [
    // Register extenders here to customize your forum!
    (new \Flarum\Extend\Frontend('forum'))
    ->css(my.less),
];

                          NikolayIvanov have you cleared cache? Flarum doesn't serve multiple files, it compiles them into one. And serves that. You'll need to clear cache every time you make changes.

                              askvortsov
                              To clear the cache from both the admin panel and the storage / cache directory
                              Is my code in extend.php wrong? Otherwise my.less is empty for the test and is in the root directory.

                                  NikolayIvanov if your less file is empty, it will have no effect, since it's just added together with the rest of the less.

                                    NikolayIvanov it's a PHP file, strings need quotes. Also it's safer to use a full path:

                                    ->css(__DIR__ . '/myfile.less'),