NodeBB customisation

[phenomlab]

@jac Done

[JAC]

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

@jac Done

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

[JAC]

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

Many thanks

[phenomlab]

@jac Done

[JAC]

@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]

@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]

@jac Done

[JAC]

@phenomlab said in NodeBB customisation:

@jac Done

Many thanks as always

[JAC]

@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]

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

[DownPW]

@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]

@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]

@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]

@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]

@jac said in NodeBB customisation:

How to do this

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

[DownPW]

@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]

@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]

@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]

@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]

@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;
}