Carefree

How to Add Backgrounds to Categories on the Flarum Category Page

5,163 0

This article is sourced from a post on the official Flarum forum. It has been tested and works on CV 7.4.0; test it yourself on other versions.

Adding a separate background to each category on the category page is not difficult. However, there is one issue: if you use this, you can no longer use tag descriptions.

Modify the following file:

Plain Text
vendor/flarum/flarum-ext-tags/js/forum/dist/extensions.js

Change the following:

JavaScript
return m(
    'li',
    { className: 'TagTile ' + (tag.color() ? 'colored' : ''),
      style: { backgroundColor: tag.color() } },
    m(
        'a',
        { className: 'TagTile-info', href: app.route.tag(tag), config: m.route },
        m(
            'h3',
            { className: 'TagTile-name' },
            tag.name()
        ),
        m(
            'p',
            { className: 'TagTile-description' },
            tag.description()
        ),

To:

JavaScript
return m(
    'li',
    { className: 'TagTile ' + (tag.description() ? 'colored' : ''),
      style: { background: tag.description() } },
    m(
        'a',
        { className: 'TagTile-info', href: app.route.tag(tag), config: m.route },
        m(
            'h3',
            { className: 'TagTile-name' },
            tag.name()
        ),

Then go to Dashboard — Appearance — Custom CSS and add:

CSS
.SelectTagListItem-description {
    display: none;
}

How to use: In the Dashboard — Category Settings, enter the following in the description of each node:

Plain Text
url(http://xxx.com/xxx.jpg)

Replace http://xxx.com/xxx.jpg with the background image you want for each node.

The final result is shown below:

Result

Comments

(0)

No comments yet. Start the conversation.

Leave a comment