NodeBB customisation

JAC · 17 Dec 2021, 13:07

@phenomlab said in NodeBB - Created pages not found?:

@jac Done

fantastic! thank you very much for all the continued help as always .

JAC · 17 Dec 2021, 13:09

Thinking of changing the title font to blue (without the blue strip) is this possible?

Many thanks

phenomlab · 18 Dec 2021, 09:00

@jac Done

JAC · 20 Dec 2021, 15:27

@phenomlab said in NodeBB customisation:

@jac Done

Thanks mate for that.

I can’t get used to having the white background sorry to mess you around mate, is there any way to have the yellow background back with the blue writing sorry matey.

JAC · 20 Dec 2021, 18:16

@jac said in NodeBB customisation:

sorry to mess you around mate, is there any way to have the yellow background back with the blue writing sorry matey.

I know you’re a busy man Mark, just wanted to make sure that you’d seen this.

phenomlab · 21 Dec 2021, 08:31

@jac Done

JAC · 12 Jan 2022, 19:56

@phenomlab said in NodeBB customisation:

@jac Done

Many thanks as always

JAC · 1 Dec 2022, 19:56

@phenomlab

Hi Mark,

Is there any way to put a borer on these boxes or style them to match the other widgets? So for example like the quote link and hover colour?

Many thanks

JAC · wrote on 12 Jan 2022, 19:58

@jac also do you know if the “user reading discussion” plugin will enable to view who’s reading the thread on mobile?

DownPW · 1 Dec 2022, 20:21

@jac said in NodeBB customisation:

@phenomlab
Hi Mark,
Is there any way to put a borer on these boxes or style them to match the other widgets? So for example like the quote link and hover colour?

Many thanks

@JAC

Yeah it’s possible

example here for border color, background, or shadow, transparency, border radius :

.recent-cards .recent-card-container .recent-card {
    height: 200px;
    width: 100%;
    padding: 10px;
    position: relative;
    border: 1px solid #YOURCOLOR; /*border color*/
    box-shadow: 0px 0px 8px #YOURCOLOR; /*add a border shadow color*/
    background-color: #YOURCOLOR; /*background color*/
    border-radius: 5px; /*Radius*/
    margin-bottom: 10px;
    color: #YOURCOLOR; /* Text color*/
    opacity: 0.8; /*Opacity, trnasparency*/
}

Other example for categories and time :

.recent-cards .recent-card-container .recent-card .footer .category-item a,
.recent-cards .recent-card-container .recent-card .footer .sort-info {
    color: #YOURCOLOR;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}

@jac said in NodeBB customisation:

@jac also do you know if the “user reading discussion” plugin will enable to view who’s reading the thread on mobile?

EDIT:

Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile (we don’t see who read or talk at real time like on desktop).
But when a user is on a topic or write a comment, you see him on desktop.

I think this is normal because there is not enough free space in the header topic on mobile to display the avatars like on desktop

JAC · 1 Dec 2022, 20:17

@downpw said in NodeBB customisation:

@jac said in NodeBB customisation:
@phenomlab
Hi Mark,
Is there any way to put a borer on these boxes or style them to match the other widgets? So for example like the quote link and hover colour?

Many thanks
@JAC

Yeah it’s possible

example here for border color, background, or shadow, transparency, border radius :
.recent-cards .recent-card-container .recent-card {
    height: 200px;
    width: 100%;
    padding: 10px;
    position: relative;
    border: 1px solid #YOURCOLOR; /*border color*/
    box-shadow: 0px 0px 8px #YOURCOLOR; /*add a border shadow color*/
    background-color: #YOURCOLOR; /*background color*/
    border-radius: 5px; /*Radius*/
    margin-bottom: 10px;
    color: #YOURCOLOR; /* Text color*/
    opacity: 0.8; /*Opacity, trnasparency*/
}
Other example for categories and time :
.recent-cards .recent-card-container .recent-card .footer .category-item a,
.recent-cards .recent-card-container .recent-card .footer .sort-info {
    color: #YOURCOLOR;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}
@jac said in NodeBB customisation:

@jac also do you know if the “user reading discussion” plugin will enable to view who’s reading the thread on mobile?

Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile

Brilliant thank you very much for the information @DownPW

JAC · 12 Jan 2022, 20:40

@jac said in NodeBB customisation:

@downpw said in NodeBB customisation:
@jac said in NodeBB customisation:
@phenomlab
Hi Mark,
Is there any way to put a borer on these boxes or style them to match the other widgets? So for example like the quote link and hover colour?

Many thanks
@JAC

Yeah it’s possible

example here for border color, background, or shadow, transparency, border radius :
.recent-cards .recent-card-container .recent-card {
    height: 200px;
    width: 100%;
    padding: 10px;
    position: relative;
    border: 1px solid #YOURCOLOR; /*border color*/
    box-shadow: 0px 0px 8px #YOURCOLOR; /*add a border shadow color*/
    background-color: #YOURCOLOR; /*background color*/
    border-radius: 5px; /*Radius*/
    margin-bottom: 10px;
    color: #YOURCOLOR; /* Text color*/
    opacity: 0.8; /*Opacity, trnasparency*/
}
Other example for categories and time :
.recent-cards .recent-card-container .recent-card .footer .category-item a,
.recent-cards .recent-card-container .recent-card .footer .sort-info {
    color: #YOURCOLOR;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}
@jac said in NodeBB customisation:

@jac also do you know if the “user reading discussion” plugin will enable to view who’s reading the thread on mobile?

Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile
Brilliant thank you very much for the information @DownPW

How to do this .

phenomlab · 12 Jan 2022, 20:48

@downpw said in NodeBB customisation:

Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile (we don’t see who read or talk at real time like on desktop).

I think that’s just CSS set to hide on mobile viewport ?

phenomlab · wrote on 12 Jan 2022, 20:40

@jac said in NodeBB customisation:

How to do this

You should be able to use the (example) CSS provided by @DownPW

DownPW · 1 Dec 2022, 20:57

@phenomlab said in NodeBB customisation:

@downpw said in NodeBB customisation:

Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile (we don’t see who read or talk at real time like on desktop).

I think that’s just CSS set to hide on mobile viewport ?

Yeah maybe

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

How to do this

You should be able to use the (example) CSS provided by @DownPW

@JAC

Like said @phenomlab, you can use this CSS code on ACP/APPEARANCE/Custom CSS/LESS :

JAC · 13 Jan 2022, 22:19

@downpw said in NodeBB customisation:

@phenomlab said in NodeBB customisation:

@downpw said in NodeBB customisation:

Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile (we don’t see who read or talk at real time like on desktop).

I think that’s just CSS set to hide on mobile viewport ?

Yeah maybe

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

How to do this

You should be able to use the (example) CSS provided by @DownPW

@JAC

Like said @phenomlab, you can use this CSS code on ACP/APPEARANCE/Custom CSS/LESS :

Many thanks to both

JAC · 14 Jan 2022, 12:20

@jac said in NodeBB customisation:

@downpw said in NodeBB customisation:

@phenomlab said in NodeBB customisation:

@downpw said in NodeBB customisation:

Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile (we don’t see who read or talk at real time like on desktop).

I think that’s just CSS set to hide on mobile viewport ?

Yeah maybe

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

How to do this

You should be able to use the (example) CSS provided by @DownPW

@JAC

Like said @phenomlab, you can use this CSS code on ACP/APPEARANCE/Custom CSS/LESS :

Many thanks to both

Must try this tomorrow

JAC · 14 Jan 2022, 12:21

@jac said in NodeBB customisation:

@jac said in NodeBB customisation:

@downpw said in NodeBB customisation:

@phenomlab said in NodeBB customisation:

@downpw said in NodeBB customisation:

Hmm if you talk about nodebb-plugin-browsing-users, the don’t work on mobile (we don’t see who read or talk at real time like on desktop).

I think that’s just CSS set to hide on mobile viewport ?

Yeah maybe

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

How to do this

You should be able to use the (example) CSS provided by @DownPW

@JAC

Like said @phenomlab, you can use this CSS code on ACP/APPEARANCE/Custom CSS/LESS :

Many thanks to both

Must try this tomorrow

Would there be any reason why the colour shows differently in the nav bar and card slider?

Obviously needs a lot of work with the link colours etc.

phenomlab · 14 Jan 2022, 12:24

@jac Yes, because they are links that sit inside another DIV, so they will auto inherit from the a href CSS. You can override that with this (as an example - choose the colour you prefer)

.recent-card-body a {
    color: #ffffff;
}

JAC · wrote on 14 Jan 2022, 12:24

@phenomlab Thanks Mark for the fast response.

Unfortunately the above change only changes the title colour?

sudonix

NodeBB customisation

Related Topics

Whitespace fixes in Nodebb

[NODEBB] Stats

[NODEBB] Welcome Message

NodeBB Footer

Social icon (Nodebb)

NodeBB Discord Plugins

How to set a signature in NodeBB?

Customising NodeBB

sudonix

NodeBB customisation

Related Topics

Individual Categories