Forum customisation

[JAC]

Hi Mark,

I’d like some help customising two forums running NodeBB please if possible.

I wish to change the colours of the buttons below.

And how can I change the board stats widget to look similar to this…

As always, thank you! .

[DownPW]

@JAC said in Forum customisation:

I wish to change the colours of the buttons below.

.link-primary, .text-primary {
    color: var(--bs-link-color) !important;
}

@JAC said in Forum customisation:

And how can I change the board stats widget to look similar to this…

.border-secondary {
    --bs-border-opacity: 1;
    border-color: var(--bs-border-color) !important;
    border-radius: 10px !important;
}

[component="widget/board-stats"] .text-bg-secondary:first-child {
    color: var(--bs-link-color) !important;
    background-color: var(--bs-node-card-cap-bg) !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

[component="widget/board-stats"] .text-bg-secondary {
    color: var(--bs-link-color) !important;
    background-color: var(--bs-node-card-cap-bg) !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

[JAC]

Perfect @DownPW, thank you very much!

I’ll try these on the laptop later.

[phenomlab]

@JAC Worth noting that @DownPW (like myself) uses CSS variables, so if you copy this like for like, it won’t work. You’d need to use actual HEX values for colours etc.

[phenomlab]

@JAC said in Forum customisation:

I wish to change the colours of the buttons below.

I’d do this a bit different to @DownPW and be more specific with the target. Obviously, change #ffffff to whatever value you require

[component="post/actions"] a i, [component="post/actions"] span i {
    color: #ffffff !important;
}

This should produce something like the below (obviously not the dark background), and not white, but you get the idea.

The below CSS should not be used in this instance because it will target several other elements on the site and produce undesirable results

.link-primary, .text-primary {
    color: var(--bs-link-color) !important;
}

@JAC said in Forum customisation:

And how can I change the board stats widget to look similar to this…

I’d use something like this, which will target the widget background and the colour of the text in use

[component="widget/board-stats"] {
    background: #000000;
    color: #ffffff;
}

And the below, which will target the background and text colour of the header

[component="widget/board-stats"] h3 {
    background: red !important;
    color: yellow !important;
}

So the actual CSS you need is

[component="widget/board-stats"] {
    background: #194F90;
    color: #ffffff;
}
[component="widget/board-stats"] h3 {
    background: #000000 !important;
}
.widget-board-stats.border.border-secondary a {
    color: #FFC557;
}

This should produce

[JAC]

Thanks very much for all the guidance, I’m currently away and don’t have the laptop on me so I’ll get to these changes next week.