NodeBB customisation

[JAC]

@phenomlab said in NodeBB customisation:

@jac It’s done mate.

Brilliant, many thanks Mark .

[JAC]

Hi Mark,

How do get an image to show at the top of the the page? I think I discussed this in a previous thread or possibly this one, to have like Stockport fans at the top of the page or a big banner that reflects what the forum is about.

[phenomlab]

@jac Like this ?

[JAC]

@phenomlab yes but without copying, so possibly somehow different . If not possible don’t worry.

Have requested the logo from @katos and once the logo is added and a banner or something like what you sent me it will look fantastic!

[JAC]

@jac said in NodeBB customisation:

@phenomlab yes but without copying, so possibly somehow different . If not possible don’t worry.

Have requested the logo from @katos and once the logo is added and a banner or something like what you sent me it will look fantastic!

But believe me although your ideas are fantastic and what you can do to customise the look and feel etc really is brilliant but it is not my intention to copy everything so please accept my apology if it comes across that way Mark.

[phenomlab]

@jac Not all all.

[JAC]

@phenomlab said in NodeBB customisation:

@jac Not all all.

Many thanks pal, really appreciate that.

[JAC]

@phenomlab said in NodeBB customisation:

@jac Like this ?

Revised and simplified CSS

.custom {
    background: #ffc557 !important;
    color: #00205c!important
}
.custom a {
    color: #00205c !important;
}
.custom2 {
    background: #194F90 !important;
    color: #ffffff;
}
.custom2 small {
    color: #ffffff;
    font-size: 40%;
}

I have a new stats widget at the bottom of the forum.

How do I style the widget so like you have done with the others?

Many thanks

[JAC]

@jac said in NodeBB customisation:

@phenomlab said in NodeBB customisation:

@jac Like this ?

Revised and simplified CSS

.custom {
    background: #ffc557 !important;
    color: #00205c!important
}
.custom a {
    color: #00205c !important;
}
.custom2 {
    background: #194F90 !important;
    color: #ffffff;
}
.custom2 small {
    color: #ffffff;
    font-size: 40%;
}

I have a new stats widget at the bottom of the forum.

How do I style the widget so like you have done with the others?

Many thanks

But if possible with white writing if it makes it easier to see.

Many thanks.

[JAC]

There is also an issue with the page styling.

Despite entering a new line the text wants to be bunched up together, I presume this is just an issue with the styling to correct it.

After the first full stop it the second part should be understood in smaller font realistically.

[phenomlab]

@jac I wrote a re-usable function for your forum that means it can be deployed anywhere - there are two choices - see below

Option 1

Option 2

This is set in the widget itself

The two styles are custom and custom2 and they are interchangeable. Option 2 is currently selected.

[phenomlab]

@jac Which page does this occur on ?

[JAC]

@phenomlab said in NodeBB customisation:

@jac Which page does this occur on ?

Absolutely fantastic mate, can’t thank you enough.

All the current custom pages that I have created do it unfortunately. They seem to bunch the text together, it’s probably because I haven’t styled it.

[phenomlab]

@jac Can you elaborate a bit more on this ? I see text on the pages, but that’s it. I also see this

What is the intention of this ?

[JAC]

@phenomlab said in NodeBB customisation:

@jac Can you elaborate a bit more on this ? I see text on the pages, but that’s it. I also see this

What is the intention of this ?

Sure…

Basically I want to display fixtures, results, tables etc so I have created custom pages for them all.

If you see here you’ll see that the text after the home fixtures & results in the widget is intended to display underneath the fixtures title but instead this just bunches up on the same line.

[phenomlab]

@jac Ok. I see this currently

The reason for this is that HTML markup can’t interpret a basic line break unless you tell it to do that with a <br> tag, so you need to remove the physical space and replace it with the line break code as shown below

This will then show

[JAC]

@phenomlab said in NodeBB customisation:

@jac Ok. I see this currently

The reason for this is that HTML markup can’t interpret a basic line break unless you tell it to do that with a <br> tag, so you need to remove the physical space and replace it with the line break code as shown below

This will then show

Fantastic Mark, I will fix the others later. I am looking to have big bold titles like last time, is this also possible with some styling?

Many thanks as always!

[JAC]

@jac sorry to be a pain.

Is there any way to change the user links to a yellow colour mate? Or is this generically set in NodeBB?

Many thanks.

[phenomlab]

@jac You should use the h element for this (header). See below example

[phenomlab]

@jac This should do it

.widget-board-stats a {
    color: #ffc557;
}