[nodebb-theme-tron] Tron Theme for NodeBB

julian

Themes can be plugins, you just have to create a plugin.json

Tanner

Beat me to it before I could edit fast enough

+1 cat.jpg for you, @julian

Tanner

Here are the new screenshots now that it's got a default background:

meetdilip

Cool !!!

Tanner

@esiao said:

And for the second point it's a bit tricky.

$('body').on('click',function(event){
if ($(this).hasClass('open-menu')) {
if (!$(event.target).is('.navbar-default.header') && !$(event.target).parents(".navbar-default.header").is(".navbar-default.header") ) {
$('.menu').toggleClass('close-menu');
$('body').toggleClass('open-menu');
}
}
});

You need to bind a click event on your body. Check if the sidebar is open (open-menu class in my case). And then see what was the event target and if it's different from the navbar (first condition) or from the childs of the navbar (second condition) which is tested by checking that the parent exist. And then doing your thing to close. In my case I'll alter my menu icon + I remove the class on body.

Hope that can help you

I can't seem to get this to work properly. What I have so far is this:

$('#site-wrapper').on('click',function(event){
if ($(this).hasClass('show-nav')) {
    if (!$(event.target).is('.site-menu') && !$(event.target).parents(".site-menu").is(".site-menu") ) {
        $('#site-wrapper').toggleClass('show-nav');
    }            
}

});

Yet no event occurs when I click the #site-wrapper section. Will fiddle around with it but until I jimmy it to work, anyone have a suggestion?

esiao

@Tanner That's because you need to bind the click on body. And then analyze the event target like you did.

Tanner

@esiao That didn't work either

This is what I have now:

$('body').on('click',function(event){
if ($('#site-wrapper').hasClass('show-nav')) {
    if (!$(event.target).is('#site-menu') && !$(event.target).parents("#site-menu").is("#site-menu") ) {
        $('#site-wrapper').toggleClass('show-nav');
    }            
}

});

esiao

@Tanner What does console.log(event.target) return ?

Tanner

TypeError: Cannot read property 'target' of undefined

Edit: after a refresh console says Uncaught ReferenceError: $ is not defined

a_5mith

That works for me in console. Try wrapping it with

$(window).on('action:widgets.loaded', function() {
---Existing Code Here---
});

Tanner

@a_5mith Wrapped it in what you said, and it still isn't doing it for me

esiao

@Tanner Oh so jQuery is not defined (or you had a bug). Is your script in a

$('document').ready(function () {
});

By the way you need to click on something in order to have a event.target. You need to include it in your code and click anywhere and then click on something specific.
And see what the console says.

Tanner

@esiao @a_5mith Works now! Figured out what was the issue: was loading the script before JQuery was loaded so it wasn't being recognized. Moved the <script> to a spot after JQuery and it works like a charm now, thanks a lot for the help!

a_5mith

@Tanner Good stuff, you can remove the bit I sent, see if it still works.

Tanner

NPM installation info and github info have been added to the OP. For those that missed it, it is as follows:

Installation

npm install nodebb-theme-tron

##Github

GitHub - Paaltomo/nodebb-theme-tron: Tron theme for NodeBB

Tron theme for NodeBB. Contribute to Paaltomo/nodebb-theme-tron development by creating an account on GitHub.

GitHub (github.com)

Happy theming!

Tanner

Currently the JS is not firing on my demo so I'll be working to fix this now. If anyone is around to help let me know.

Tanner

Updated to 0.0.11

Added header widget area
Increased speed on category info sliders
Fixed error with Javascript not firing
Fixed slide animation on menu tabs

Updated git and npm. More to come soon.

? Offline

Gave this a quick test on 0.60-dev. Looks like the menu slide-out isn't firing.

Tanner

Thanks, @Ted. I'll look into this soon.

DrZayas

Great Theme Design. I just tested it out and have noticed that it brakes the admin panel ? Has any one else had this issue