Multiple themes


  • GNU/Linux

    I have seen how much the NodeBB theme can be customized. Many of them make it look completely Elite. It will be nice to have a drop down menu on top or bottom where we can try available NodeBB themes. That will help new comers understand that they just landed on a wonderful platform.


  • Admin

    At present, languages and themes are a global option, and there are no plans to make themes user-selectable, but you never know... if there is enough interest, we might devote some time to make this happen 🙂


  • GNU/Linux

    I mean just on this site. Or may be a theme demo link where others can notice. I really love some themes @psychobunny posted on Admin Extra.


  • Plugin & Theme Dev

    Since the effort between just on this site and on all NodeBB sites shouldn't differ and this site should be just an example of NodeBB without any source-customization...
    I think within the ACP it would be nice to instead 'use' themes have '(de)activate' like in plugins and add drag&drop to order the themes (maybe even a new Tab 'Active Themes' for clear view).
    If more than one theme is activated the user should be allowed to choose between them.

    +1


  • Admin

    Seems like there's demand for user selectable themes 😄



  • Just came here to ask for this exact feature. So a big +1 from myself for allowing users to select their own themes. 🙂



  • @a_5mith sagte:> Just came here to ask for this exact feature. So a big +1 from myself for allowing users to select their own themes. 🙂

    Users should choose a theme from admin preselected themes 🙂
    So themes tested and allowed by the admin and the users choose the prefered theme / design.



  • @pwFoo I ended up doing it with jquery, go to my website (in my signature) and you'll see a light icon in the bottom right where you adjust the width, this changes the look of my theme.



  • Themes on the NODEBB community forums website will be definitely attractive.
    Switching themes is something I wanted to try immediately when I firstly landed to your website.



  • @a_5mith
    I think it's toggle some css styles?
    Interesting/ simple solution to switch between some defined styles / designs (light, dark, some colors, ...).

    Thanks for sharing.



  • @pwFoo It adds a class name to the body of the page, then the CSS is adjusted to suit. 👍



  • @a_5mith
    Where did you add your css styles?
    Custom CSS / Custom JS?

    admin -> theme -> customize



  • @pwFoo Yepp, this is the javascript to add the button and the ability to store the chosen theme.

    <script>
    $(window).on('action:widgets.loaded', function() {
      if (!$('.panel.lights-out').length) {
       var panel = $('<div class="panel lights-out pointer"><div class="panel-body text-center"><i class="fa fa-lightbulb-o fa-2x"></i></div></div>');
    $('.overlay-container').append(panel);
    panel.on('click', function() {
        enabled = !$('body').hasClass('lights-out');
        $('body').toggleClass('lights-out',  enabled);
        localStorage.setItem('user:theme', enabled ?  'lights-out' : '');
    });    
    }
    });
    </script>
    
    
    <script>
    $('document').ready(function() {
    var theme = localStorage.getItem('user:theme');
    if (theme) {
        $('body').addClass(theme );
    }
    });
    </script>
    

    That will add a class called lights-out to your body, so you would then add new custom CSS to everything you wanted to change by doing

    body.lights-out {
    background: none repeat scroll 0 0 #181818;
    color: #fff;
    }
    

    etc, so whatever the normal class is, just add body.lights-out before it.

    Took a few hours, but doing it in Firebug then adding the code into custom CSS is easier.



  • I think adding a user style change settings in nodebb would be a good option. Especially that other forum engines like discourse have this feature for a long time.


Log in to reply
 

Suggested Topics

  • 3
  • 2
  • 1
  • 7
  • 3
| |