NodeBB customisation

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

[JAC]

@phenomlab Thanks Mark for the fast response.

Unfortunately the above change only changes the title colour?

[DownPW]

or just

a {
    color: #YOURCOLOR;
    text-decoration: none;
}

but this code change other things like title of topic or a hlink for example.

It all depends on what you want to get but the phenomlab method is better

For the difference of color you must use the same color code than the navbar

Here a good link for color code I use: https://htmlcolorcodes.com

[phenomlab]

@downpw Exactly - this is a bit more specific

.footer .pull-right span, .recent-cards .recent-card-container .recent-card .footer .category-item a  {
    color: #ffffff !important;
}

[phenomlab]

@downpw said in NodeBB customisation:

Here a good link for color code

One of my favourites along with this beauty
https://coolors.co/4381c1-bdadea-bea2c2-a37871-4e4b5c

[DownPW]

@phenomlab

Oh yeah he looks like very good

[JAC]

@downpw @phenomlab thanks all.

if you go to link you’ll see I now have sorted most of it, although I am still unable to match the nav bar colour to the hover cards colour despite this being the same colour hex. Am I doing something wrong?

[phenomlab]

@jac When you say navbar are you referring to this ?

[JAC]

@phenomlab Sorry, yes mate

[phenomlab]

@jac Find this value which is already set in your custom CSS

.navbar-default {
    background-color: #194F90;
}

And change background-color to your preference.

[JAC]

@phenomlab Thanks, will try that now.