NodeBB customisation

phenomlab · 8 Oct 2021, 11:27

Is there any way to have the tag background In blue, with white writing and the number to be in yellow? but to all be together?

Yes. See CSS below

 .tag-item {
    border-radius: 4px 0px 0px 4px;
    vertical-align: middle;
    float: left;
    width: auto;
    background-color: #194F90;
    color: #ffffff;
    font-weight: 500;
    position: relative;
    padding: 8px 5px 4px 10px;
    height: 39px;
    padding-right: 10px;
}
.tag-topic-count.human-readable-number {
    float: left;
    width: auto;
    margin-top: 0px;
    background-color: #FFC557;
    color: #333;
    padding: 8px 4px 0px 4px;
    border: 0;
    text-align: center;
    min-width: 50px;
    border-radius: 0px 4px 4px 0px;
    height: 39px;
}

Looks like this

phenomlab · 8 Oct 2021, 11:28

@jac said in NodeBB customisation:

Itz probably a longshot anyway, but is there any way to change the link colour on the quotes to yellow?

Like this ?

 blockquote .plugin-mentions-user.plugin-mentions-a {
    color: #ffc557;
}

JAC · 8 Oct 2021, 11:27

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

Is there any way to have the tag background In blue, with white writing and the number to be in yellow? but to all be together?

Yes. See CSS below

 .tag-item {
    border-radius: 4px 0px 0px 4px;
    vertical-align: middle;
    float: left;
    width: auto;
    background-color: #194F90;
    color: #ffffff;
    font-weight: 500;
    position: relative;
    padding: 8px 5px 4px 10px;
    height: 39px;
    padding-right: 10px;
}
.tag-topic-count.human-readable-number {
    float: left;
    width: auto;
    margin-top: 0px;
    background-color: #FFC557;
    color: #333;
    padding: 8px 4px 0px 4px;
    border: 0;
    text-align: center;
    min-width: 50px;
    border-radius: 0px 4px 4px 0px;
    height: 39px;
}

Looks like this

That looks absolutely amazing! Thank you very much!!

phenomlab · wrote on 8 Oct 2021, 11:27

@jac You need to add the CSS though… Don’t forget

JAC · 8 Oct 2021, 11:28

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

Itz probably a longshot anyway, but is there any way to change the link colour on the quotes to yellow?

Like this ?
 blockquote .plugin-mentions-user.plugin-mentions-a {
    color: #ffc557;
}

Yes mate, brilliant mate, will apply these changes later.

Great to see how a few changes make it look a lot better

phenomlab · wrote on 8 Oct 2021, 11:28

@jac Yep. Admittedly, I’ve taken some of the theming from Sudonix, but I’m ok with that.

JAC · 8 Oct 2021, 16:54

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

look a bit more professional and cleaner

Had another go at this. The best I’ve come up with is
 .recent-cards .recent-card-container .recent-card .recent-card-body {
    height: 143px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    max-width: 200px;
    line-height: 1.2;
    white-space: nowrap;
}
Which looks like the below

Thanks mate for all the efforts. I’ll leave it how it is for now and wait and see if it can be fixed sometime. Thank you for the efforts mate .

JAC · 8 Oct 2021, 16:56

Going to implement all of the above now…

As for the footer widget I can’t remove the NodeBB text as I’m not on the laptop you, I’m happy to include phenomlab on there for all your efforts and continued help?

Maybe something live Version 1 in the footer and then when a significant change is made the version number can be updated.

phenomlab · wrote on 8 Oct 2021, 16:56

@jac said in NodeBB customisation:

As for the footer widget I can’t remove the NodeBB text as I’m not on the laptop you, I’m happy to include phenomlab on there for all your efforts and continued help?

Done

JAC · 8 Oct 2021, 17:09

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

Itz probably a longshot anyway, but is there any way to change the link colour on the quotes to yellow?

Like this ?
 blockquote .plugin-mentions-user.plugin-mentions-a {
    color: #ffc557;
}

For some reason this didn’t appear to work, would this change make any URLs in a quote yellow too?

Many thanks.

phenomlab · 8 Oct 2021, 17:23

@jac No - that just targets the mention name.

JAC · 8 Oct 2021, 17:26

@phenomlab said in NodeBB customisation:

@jac No - that just targets the mention name.

For some reason it hasn’t worked mate?

Would there be a way to change the URL colour in quote to stand out or is that too difficult?

Many thanks as always!

JAC · 8 Oct 2021, 17:27

@jac said in NodeBB customisation:

@phenomlab said in NodeBB customisation:

@jac No - that just targets the mention name.

For some reason it hasn’t worked mate?

Would there be a way to change the URL colour in quote to stand out or is that too difficult?

Many thanks as always!

I think it’s because the mentions colour is set to white, I’ll find the other colour and change it.

phenomlab · 8 Oct 2021, 17:31

@jac said in NodeBB customisation:

I think it’s because the mentions colour is set to white, I’ll find the other colour and change it.

Use this

 blockquote .plugin-mentions-user.plugin-mentions-a {
    color: #ffc557 !important;
}

phenomlab · 8 Oct 2021, 17:32

@jac said in NodeBB customisation:

Would there be a way to change the URL colour in quote to stand out or is that too difficult?

Can you send me a URL where this is an issue to save me trawling through your forum ?

JAC · wrote on 8 Oct 2021, 17:31

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

I think it’s because the mentions colour is set to white, I’ll find the other colour and change it.

Use this
 blockquote .plugin-mentions-user.plugin-mentions-a {
    color: #ffc557 !important;
}

Fantastic mate, that’s sorted it

JAC · 8 Oct 2021, 17:34

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

Would there be a way to change the URL colour in quote to stand out or is that too difficult?

Can you send me a URL where this is an issue to save me trawling through your forum ?

Sure… here

JAC · wrote on 8 Oct 2021, 17:34

It’s probably my fault as I’ve chosen a background colour that natively clashes, would you prefer me to change the quote colour instead?

phenomlab · 8 Oct 2021, 19:01

@jac Use this

 blockquote a {
    color: #ffc557;
}

You’ll need a hover class as well otherwise the text will disappear when hovered over - use this

 blockquote a:hover {
    color: #db9716;
}

JAC · 8 Oct 2021, 20:20

@phenomlab said in NodeBB customisation:

@jac Use this
 blockquote a {
    color: #ffc557;
}
You’ll need a hover class as well otherwise the text will disappear when hovered over - use this
 blockquote a:hover {
    color: #db9716;
}

Worked a treat mate, thank you very much as always, a massive help!

sudonix

NodeBB customisation

Related Topics

Forum customisation

Whitespace fixes in Nodebb

Forum Icons NodeBB

[NODEBB] Stats

NodeBB Footer

[NodeBB] username cards

NodeBB Discord Plugins

NodeBB Design help

	.tag-item {
	border-radius: 4px 0px 0px 4px;
	vertical-align: middle;
	float: left;
	width: auto;
	background-color: #194F90;
	color: #ffffff;
	font-weight: 500;
	position: relative;
	padding: 8px 5px 4px 10px;
	height: 39px;
	padding-right: 10px;
	}
	.tag-topic-count.human-readable-number {
	float: left;
	width: auto;
	margin-top: 0px;
	background-color: #FFC557;
	color: #333;
	padding: 8px 4px 0px 4px;
	border: 0;
	text-align: center;
	min-width: 50px;
	border-radius: 0px 4px 4px 0px;
	height: 39px;
	}

	blockquote .plugin-mentions-user.plugin-mentions-a {
	color: #ffc557;
	}

	.recent-cards .recent-card-container .recent-card .recent-card-body {
	height: 143px;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 200px;
	max-width: 200px;
	line-height: 1.2;
	white-space: nowrap;
	}

	blockquote .plugin-mentions-user.plugin-mentions-a {
	color: #ffc557 !important;
	}

sudonix

NodeBB customisation

Related Topics

Individual Categories