A few suggestions for NodeBB



  • 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

    0_1450196913087_sun79.png
    Moon

    0_1450196931085_moon144.png
    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.
    0_1450197735858_Knirpsel.PNG
    Now it's white and grey. Is it possible to make the background black and the text and icons white?


  • GNU/Linux

    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.


  • Anime Lovers

    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.


  • Admin

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


  • Admin

    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 :)


  • Global Moderator

    @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. :)



  • @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.


  • Global Moderator

    @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.



  • @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 :(


  • Global Moderator

    @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.



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

    and how?



  • @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

    0_1452443205874_Knipsel.PNG

    and the avatars on the comments

    0_1452443369758_Knipsel.PNG

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

    0_1452443420422_Knipsel.PNG

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

  • Plugin & Theme Dev

    @MJ for the users page you need this

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



  • @pichalite said:

    @MJ for the users page you need this

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

    not working :(


  • Anime Lovers

    For the icon user menu icon:

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


  • Plugin & Theme Dev

    @MJ

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

    or

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


Log in to reply
 


Looks like your connection to NodeBB was lost, please wait while we try to reconnect.