Custom Header

[esiao]

Here's a new plugin I did to change/create custom headers, thanks to @Xevious for the tips and enjoy it

NodeBB Custom Header

This plugin allows you to set a list of images that will be displayed randomly with a nice crossfade effect on your forum as backgrounds. The first purpose is to create custom header banners but you can target anything and do as you want.

Installation & Setup

Get the latest version of the plugin with

npm install nodebb-plugin-custom-header

Then go to the ACP > Plugins > Custom Header
There will be some examples of how to use the plugin.

First you need to define a jQuery selector, it can be anything you want in order to catch NodeBB themes or your own.
Then it's obvious you just gives the links to the images you want to use.

Example & Tips

Let's say you want to change the background of the NodeBB navbar.
Youd need to target #header-menu
Then create the list of images you want to use.

Tips :

• The plugin uses the background-color of the element to create the fade effect when you come on the forum, then captures the ajax events to change the background during navigation with a crossfade effect.
• Change the default css to have something that suits your needings (obviously white icons are better on images than grey ones).

Here's an example of a custom navbar

Here's the result on a custom theme to give you an overview of what that plugin is able to do.

First image

And another one

[A Former User]

This is beautiful @esiao. It is utterly stunning.

[Hưng Thành Nguyễn]

Awesome plugin, this make nodebb more beautiful

[Hưng Thành Nguyễn]

@esiao The problem is it can only work when users are logged in?
When logged out it's not working so the white icon appear with the white background

[esiao]

@Hưng-Thành-Nguyễn It's working when user is not logged in too. Have you a link to send me in order to see what's wrong ?
Also I'll suggest you to change the background of the navbar for something darker where you can see the icons because you're not immune of broken images links or bugs.

[Hưng Thành Nguyễn]

@esiao it's: http://demo.chuyentranphu.com
it's only working with logged in user
I changed background to #333 for now

[esiao]

@Hưng-Thành-Nguyễn The plugin is creating the object successfully you can see it here :
http://demo.chuyentranphu.com/api/plugins/custom-header
If I run the script in the console it's working so that's not user related. After inspecting the compiled js code it seems like the main.js of the plugin didn't get compiled in it.
I think you have to restart the server maybe the file didn't get compiled. Start your NodeBB with ./nodebb dev and check that
info: [plugins] Loaded plugin: nodebb-plugin-custom-header is present.

And that this is present too

info: [meta/js] Successfully minified.
info: [meta/js] Retrieved Mapping.
info: [meta/js] Compilation complete

[Hưng Thành Nguyễn]

@esiao I run ./nodebb dev
and it said:
warn: [plugins/nodebb-plugin-custom-header] Mapped path 'images => /root/tpc/nod e_modules/nodebb-plugin-custom-header/public/images' not found.
any idea?

[Hưng Thành Nguyễn]

@esiao I've just figured out that it conflicted with the emoji-extened plugin. It is because of the emoji-extended plugin to make it crashed.
Thank you for an awesome plugin.

[esiao]

@Hưng-Thành-Nguyễn Oh this is not normal. Glad you solved the problem but this is a bug I'll update the plugin. I've forgotten to remove this from the config.
edit : version 0.0.2 is out.

[Hưng Thành Nguyễn]

@esiao nice. Thank you

[Hưng Thành Nguyễn]

@esiao it knock down the composer in mobile see the screenshot for detail

[esiao]

@Hưng-Thành-Nguyễn Are you sure this is linked to my plugin ? I don't see what's wrong with the banner and the composer. Is that the fact that the keyboard is over the composer ? Because I think this is normal. Can you be more specific with a screenshot without the plugin to see what's wrong. Thanks.

[a_5mith]

This is a problem on android anyway, it's made worse with the kitchen sink icon plugins going to a second line. It's not possible for the android browser to know where the keyboard is, so it doesn't adjust.

[Ninja Scott]

This is extremely annoying in Android. Would a possible fix be to add more space under the composer for mobile devices so that you can scroll? As it stands now https://community.nodebb.org you can just barely see the input text box to compose a message. And maybe set the focus to the composing text box so that gets thrown to the top of the window...? Just a thought.

There is a screen shot from an earlier post: https://community.nodebb.org/topic/548/-nodebb-plugin-gallery-lightbox-gallery-plugin/11

[a_5mith]

The composer is a modal, and as such doesn't scroll. It is full screen on Android. There is no extra space other than what's on the screen already. You can't remove the topic title bar, it's needed to create a topic, you could remove the tags, but they're a fundamental part of the system, the kitchen sink, meh. I only use it for uploading images. But again, kind of needed.

The only other option would be a two step process, so, the first modal, enter topic title and tags, click next, get a full screen text window to enter the post. Then submit.

Adding space at the bottom wouldn't make a difference unfortunately. As the modal is designed to use the full available width and height on mobile. This is not an issue on iOS, because iOS keyboards adjust the page height properly when it's loaded.

[Ninja Scott]

Interesting. And a real bummer. A lot of my traffic comes from mobile and a lot of that is Android. I wonder if that will ever get sorted out.

[Hưng Thành Nguyễn]

@esiao without it, the composer will go full screen. Just looks fine.

[esiao]

New version 0.0.3

• Fixed an issue with the crossfade div not being destroyed resulting in an infinite pool of them.

I'll recommend to update.

[esiao]

New version 0.1.0
Updated for NodeBB v0.6.0 compatibility.