[nodebb-theme-dark-rectangles] Dark Rectangles Theme

[frissdiegurke]

Hey this is my first theme for NodeBB.

It's a simple dark theme for NodeBB based on Vanilla theme for NodeBB.

Installation

npm install nodebb-theme-dark-rectangles

Distribution

Github
NPM

Screenshots

Credits

variables.less, static and templates modified from Lavender Theme for NodeBB.

Have Fun!

[julian]

Love it!

I can see gaming communities that would definitely take advantage of this theme.

[psychobunny]

Pretty cool - good job @frissdiegurke Do you have a live version of this running somewhere?

[frissdiegurke]

@psychobunny Nope. I haven't finished the related project yet, so I can launch them together ^^

Thanks for positive feedback

PS: added voting-system to theme now (sadly the server crashes every time I try to vote o_O need to find the reason ^^).

[wirehack7]

Hello, great theme!

How to use categories pictures for the categories? So they will be displayed as background for the category box, with the icon above it.

[frissdiegurke]

@wirehack7 works for me as expected. may you have forgotten to click 'save'?

Just the scaling may needs to be improved... will take a look at this.

[frissdiegurke]

updated, now the background-size is set to cover.

[wirehack7]

Okay thanks, it works.

I encountered a problem:

When there is a image in post, the image wont be fit in this box.

I am using this costum CSS:

.category-box .post-preview p img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    }

It is working with that now:

[frissdiegurke]

@wirehack7 Thanks! updated. As you've noticed I didn't test the theme with images I thought such simple issues wouldn't happen since the theme bases on vanilla ^^ but of cause within vanilla there is no recent replies box in home...

[wirehack7]

As some may noticed, when using emoji the smilies also get width and height of a big size, here is a workaround:

.category-box .post-preview p img:not(.emoji) {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    }

With the CSS3 :not() selector.

[frissdiegurke]

@wirehack7 or you simply don't use your width: auto; height: auto; This is why I left it out within the fix...

[wirehack7]

I am requesting a feature if this is possible:

Adding a warning if Javascript is disabled in browser, due the fact that nodeBB won't run that good without javascript (or this theme). Thanks!

[julian]

@wirehack7 NodeBB drop down to read-only mode when accessed without Javascript. Looks like it needs a bit of TLC, but otherwise still works.

[wirehack7]

Wont work with this theme. The screen is blank then: http://highxplosive.com

[julian]

Hm.. seems alright to me, actually. I'm seeing it loading the three categories (though the icons are messed up)

[wirehack7]

Okay, I deactivated JS via a Plugin in Chrome (NotScripts). When disabling JS in entire browser it works.
Sorry for my mistake.

[julian]

@wirehack7 Awesome, good to know

[meetdilip]

To be honest, never been a fan or Pink and Cyan.

PS : No intention to downplay anything

[wirehack7]

Seems to be broken for 0.4.x:

GET http://highxplosive.com/404 404 (Not Found) highxplosive.com/:25
Uncaught ReferenceError: require is not defined (index):35
Uncaught ReferenceError: $ is not defined dark-rectangles.js:1
Uncaught ReferenceError: require is not defined (index):567

[frissdiegurke]

@wirehack7 ya, will try to bring it up to date within next week