NodeBB customisation

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?

DownPW · 14 Jan 2022, 12:29

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 · wrote on 14 Jan 2022, 12:29

@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 · 14 Jan 2022, 12:33

@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

sudonix

NodeBB customisation

Related Topics

NodeBB recent cards customisation

Whitespace fixes in Nodebb

NodeBB inline videoplayer

[NodeBB] greeting message

[NODEBB] Scroll Button

[NODEBB] Welcome Message

NodeBB Design help

Customising NodeBB

	.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/
	}

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

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

sudonix

NodeBB customisation

Related Topics

Individual Categories