A few suggestions for NodeBB

MJ

I'm using NodeBB now for 3 months on 2 websites. And some users have a few suggestions that you guys maybe can put in.

Night/Day mode
The theme is very white and when it's dark people want the site dark. Is it possible to put a 'moon' icon in the right corner between chat and the profile picture. When it's clicked nightmode will turn on, and the website is dark with grey text. The moon icon is after clicking a sun. When the user clicks on the sun, the daymode will turn on, and the website is white with black text (like the standard persona theme).

Sun

Moon

Icons from Flaticon.com and free to use

Square avatars
People from my second website hate the round avatars. They want them square like other forums. Is it possible to make a switch in admin panel so you can change the avatars from round to square? It would be pretty awesome!

Closed topics
Another question was to remove the lock-icon from a closed topic. And make the topic title ~~Like this~~. So users know that the topic is locked. I don;t know if this is possible, but maybe it's an idea to build it in. (not for me, cause I think it's confusing, but I'm listing all the things people said on my websites)

Remove topics/threads from recent list from a category
I have a 'bullshit board' on my forum. Every day a few topics are made in this category, and some people don't like it, when every time these threads are listed in the recent list.

Is there a way to don't get them listed in the recent list of threads? Or can it build in, in the software. It would be on our forum a very good addon.

Change to full numbers
If a thread reach the 1000 posts/views it is changed to 1.0K. Like now it's 1.1K and you can tell if there are 1102 views or 1193 views. Is it possible to change it to a full number?

And the last one!

Is it possible to change the colors of the upper bar.

Now it's white and grey. Is it possible to make the background black and the text and icons white?

frissdiegurke

The first one could be implemented within a plugin, seems like a neat idea. You could create an extra topic within Plugin Requests.
The second one can be accomplished by custom styles within ACP:

[component="user/picture"], [component="header/userpicture"], .user-icon, .user-img, .avatar, .avatar-wrapper {
    border-radius: 0!important;
}

I might have missed some occurrence.

The third one as well

[component="category/topic"] {
  [component="topic/header"] {
    text-decoration: line-through;

    > * {
      text-decoration: none;
    }
  }

  [component="topic/locked"] {
    display: none;
  }
}

(not tested)

The next one I don't know what to do about.

The one with full numbers I could provide a dirty hack:

.human-readable-number:before {
    content: attr(title);
    font-size: 20px;
}
.human-readable-number {
    font-size: 0;
}

The last one should work by setting the less variables defined by bootstrap

@navbar-default-color:             #777;
@navbar-default-bg:                #f8f8f8;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);

// Navbar links
@navbar-default-link-color:                #777;
@navbar-default-link-hover-color:          #333;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         #555;
@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color:       #ccc;
@navbar-default-link-disabled-bg:          transparent;

// Navbar brand label
@navbar-default-brand-color:               @navbar-default-link-color;
@navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
@navbar-default-brand-hover-bg:            transparent;

// Navbar toggle
@navbar-default-toggle-hover-bg:           #ddd;
@navbar-default-toggle-icon-bar-bg:        #888;
@navbar-default-toggle-border-color:       #ddd;

Try to play with these values (within custom styles in ACP). If the devs didn't get off the standard bootstrap way this should work.

HolyPhoenix

I make my avatars square with round borders from the admin panel via the stylesheet override. Super simple and effective. I don't see a reason for the styling as a setting.

I haven't looked at closed topics closely, but I'm guessing this could also be done via styling fairly easily. At least the addition of the line through the text, not sure about the icon removal as that depends on whether or not its added via css. Again, this is via styling override in the admin panel. I like the icons myself.

Color of the upper bar can be done via styling (once again) override in the admin panel as well, quite easily.

julian

Custom styling, or a custom theme, that'd be what I'd go for.

psychobunny

That night/day mode... There's a topic for that already, @a_5mith's forum has it working: http://35hz.co.uk/

Click on the lightbulb

a_5mith

@psychobunny Been a bit neglected recently, CSS needs to be updated.

I posted my full code somewhere a few months ago for anyone that wants to hunt it down and use it.

MJ

@psychobunny said:

That night/day mode... There's a topic for that already, @a_5mith's forum has it working: http://35hz.co.uk/

Click on the lightbulb

I see, but it's only the background (if you click on a thread and use it on that page) so it's not really usefull.

a_5mith

@MJ said:

@psychobunny said:

That night/day mode... There's a topic for that already, @a_5mith's forum has it working: http://35hz.co.uk/

Click on the lightbulb

I see, but it's only the background (if you click on a thread and use it on that page) so it's not really usefull.

It does everything, it seems they've changed the code for the text boxes. I'm going to redo it today/tomorrow. You can make changes to anything you want as long as you know the CSS class.

MJ

@a_5mith said:

It does everything, it seems they've changed the code for the text boxes. I'm going to redo it today/tomorrow. You can make changes to anything you want as long as you know the CSS class.

I try to learn it, but I fail a little bit

a_5mith

@MJ said:

@a_5mith said:

It does everything, it seems they've changed the code for the text boxes. I'm going to redo it today/tomorrow. You can make changes to anything you want as long as you know the CSS class.

I try to learn it, but I fail a little bit

I'm in the middle of redesigning mine. I'll post the code when it's done so it can be tweaked to suit individual forums. Although I'm still running lavender. So might not work for persona.

Firebug for Firefox will give you each class from the inspect element tool. Or right click in firebug and copy CSS path.

MJ

Is it possible to remove the online/offline button in the avatar?

and how?

MJ

@HolyPhoenix said:

I make my avatars square with round borders from the admin panel via the stylesheet override. Super simple and effective. I don't see a reason for the styling as a setting.

Can you share the code please?

I have also square avatars with round borders, but not everywhere on the site they are square with round borders. Like the profile picture in the corner

and the avatars on the comments

and on the user page, the uploaded avatars (the standard avatars are with round borders).

Is this also with your code? I use this code

[component="user/picture"], [component="header/userpicture"], .user-icon, .user-img, .avatar, .avatar-wrapper, .users-box, .registered-user {
border-radius: 12px!important;}

pichalite

@MJ for the users page you need this

.users-box img { border-radius: 12px }

MJ

@pichalite said:

@MJ for the users page you need this

.users-box img { border-radius: 12px }

not working

HolyPhoenix

For the icon user menu icon:

.header #user_dropdown img, .header #user_dropdown .user-icon { border-radius:25%; }

pichalite

@MJ

.users-container .users-box img { border-radius: 12px; }

or

.users-box img { border-radius: 12px !important; }