Some feedback from the lovely folk at my forum

[a_5mith]

Rather than admin and developer feedback, I've got some from a users perspective. So,

• mobile - needs to say when the last post was and who by, not when the topic was started.
• user selectable skins - the white of my forum is new and refreshing for some, but not so for the people whom are used to my old dark background. So being able to select a range of skins would be great.

That's more or less it for now.

[julian]

Thanks

#2 would take a fair bit of work, since we'd have to refactor the theming system to allow all installed themes to be active and routed. Not impossible, but difficult, so I wouldn't count on it happening soon...

#1 I totally agree with, though this is controlled on the theme level.

[psychobunny]

For #2, if its just skins, it might be easy to build something that changes your skin... maybe. Julian's right about the themes though, that would be a pain in the @$$ to build

And yeah for #1

[a_5mith]

@psychobunny Yeah, I don't think changing themes is necessary, as it means everyone has a different experience to deal with. Whereas if one person has a white background, another has a black background with white text, it's the same experience, it just suits people better.

Although am I right in thinking that skins currently only work on Vanilla?

[psychobunny]

Bootswatch themes, yeah. Really though you could just do something like this in the custom CSS ACP:

body.theme-dark {
   background: black
}

body.theme-dark other-elements {
   // theme as necessary
}

And then, put a button somewhere (perhaps right next to the resizer button on the bottom right) that adds the .theme-dark class to the body. Save the chosen "theme" in localStorage so you can add that when they reload. Probably could do this all in the custom CSS and custom JS tabs with a bit of work, without having to write a plugin at all (although that'd be cool to have)

[a_5mith]

@psychobunny If I knew how to do half of that, I'd be all over it. However doing it in custom css would be a better idea as I do have quite a lot of custom CSS running.

But yeah, thinking about it, maybe a "lights off" button would be better, as my old forum was basically black and white...

I shall find some tutorials, if you could inform me on how to save to localStorage in the case of NodeBB that would be great.

[psychobunny]

I started writing out the code for you, but I have a better idea, I'll break it up into smaller chunks and make mini-tutorials out of them

[a_5mith]

@psychobunny You deserve more internets than you get.

[psychobunny]

if you could inform me on how to save to localStorage in the case of NodeBB

It's actually something in vanilla JS, not NodeBB specific.

Getting the theme:

$('document').ready(function() {
  var theme = localStorage.getItem('user:theme');
  $('body').addClass(theme);
});

and setting the theme:

localStorage.setItem('user:theme', someTheme);

[a_5mith]

@psychobunny Right, I've got most of the CSS sorted, is there an easy way of adding a button next to the width one without editing the theme, so I can update in the future without needing to mess about with git?

I also assume this will toggle between adding and removing the class? Or will they have to clear cache for it to reset?

[a_5mith]

ReferenceError: lights is not defined
localStorage.setItem('user:theme', lights-out);

I've so not got the hang of this.

[psychobunny]

It should be in quotes I was assuming you'd have it as a variable - so in your case it would be 'lights-out'

[trevor]

@psychobunny said:

Bootswatch themes, yeah. Really though you could just do something like this in the custom CSS ACP:

body.theme-dark {
   background: black
}

body.theme-dark other-elements {
   // theme as necessary
}

And then, put a button somewhere (perhaps right next to the resizer button on the bottom right) that adds the .theme-dark class to the body. Save the chosen "theme" in localStorage so you can add that when they reload. Probably could do this all in the custom CSS and custom JS tabs with a bit of work, without having to write a plugin at all (although that'd be cool to have)

Yep, its possible I've tested this.

[a_5mith]

@trevor
Works nicely in fact.

[a_5mith]

@psychobunny Hey buddy, right, I've got this working fantastically, however, when I click the lightbulb, it also affects the width. Other that that, it works brilliantly.

Any idea on how to seperate these? Excuse the awful code, but it looks like:

<script>
$(window).on('action:widgets.loaded', function() {
var panel = $('<div class="panel-body text-center"><i class="fa fa-lightbulb-o fa-2x"></i></div>');
$('.panel.resizer').append(panel);
panel.on('click', function() {
    localStorage.setItem('user:theme', 'lights-out');
    var theme = localStorage.getItem('user:theme');
  $('body').toggleClass(theme);
});    
});
</script>

I used toggleclass so it could be clicked again, to reset it. Is this ok? Hmm, another issue is that whenever you visit a new page, it adds the lightbulb again, creating a new topic adds about 4 lightbulbs. Oh and it doesn't save the setting to localStorage, a refresh changes it back to default. I imagine my code is completely wrong though.

[baris]

@a_5mith update to latest version of lavender and change your code to

<script>
$(window).on('action:widgets.loaded', function() {
var panel = $('<div class="panel 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() {
    localStorage.setItem('user:theme', 'lights-out');
    var theme = localStorage.getItem('user:theme');
  $('body').toggleClass(theme);
});    
});
</script>

Let me know if it works.

[a_5mith]

@baris Hey bud, that solved 1 of the 3 issues. Each page load still brings up a new icon though, nor does it remember the option.

Lavender was updated to 0.0.66 and Vanilla to 0.0.80 if that helps.

[baris]

This should fix the icon being added on each page load and remembering

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

To remember the theme on page load

<script>
$('document').ready(function() {
    var theme = localStorage.getItem('user:theme');
    if (theme) {
        $('body').addClass(theme );
    }
});
</script>

Obviously I didn't test any of this code

[a_5mith]

@baris Getting closer, it remembers the theme, but the button doesn't display anymore.

EDIT: Cleared my localstorage. When the theme is "normal", the button is there, when it is set to 'lights-out' the button vanishes. So I'd need the button to toggle it back if required. (If possible)

[baris]

Updated the code in the previous post, body and the button had the same class so changed the selector to if (!$('.panel.lights-out').length) {