NodeBB Themes

Pewter Theme for NodeBB

Designed with gaming communities in mind. Highlights include a slide-in side menu (@kevin) and a sidebar on the home page (@planner). More widget examples for you to use in your own theme (although a dedicated widget mechanism will be something we will work on in the future).

Screenshots

main
sidebar;

Installation npm install nodebb-theme-pewter

Fork this theme on Github

https://dribbble.com/shots/4376207-Timuu-home-page

NodeBB theme for Timuu.

Demo: https://timuu.com

Github: https://github.com/timuu/nodebb-theme-timuu

Recent-cards: https://github.com/timuu/nodebb-plugin-recent-cards-timuu

Changelog

Added hover zoom to categories.
few minor bugs fixed
Recent cards are redesigned.

:squirrel:

##Information
Convoe's current theme that showcases the power and flexibility of NodeBB

Convoe Marketing

Here's a little description about M3: A beautiful, responsive theme developed to be a perfect experience no matter what device it's viewed on. It makes your site look great on all devices or screen resolutions. We picked color schemes and an appropriate font family comfortable to the eye. Built using less with mobile first approach down to the last pixel.

A "fat-free" editor with simplicity and elegance.

Switch to different categories with ease.

Any thoughts or suggestions would be nice as well.

🎉 nodebb-theme-oxide

NodeBB theme made to look similar to GitHub design.
Theme itself is not fully done yet, there might still be some places where CSS styling is missing, in addition, some visual components might need to be changed depending on your taste.

📚 Installation

npm i nodebb-theme-oxide

Installation is pretty simple, all you have to do is to log into your SSH, go into your main nodebb directory, then copy & paste the above command. It will install the theme for you automatically. After this step, you have to go into your ACP to enable it inside of Appearance > Themes section. Once you have selected the theme, it will ask you to Restart & Rebuild your NodeBB instance, do it. Enjoy this awesome theme! Wooo 👻 📄 Contributing Fork it! Create your feature branch: git checkout -b my-new-feature Commit your changes: git commit -am 'Add some feature' Push to the branch: git push origin my-new-feature Create PR! 🧐 Screenshots

Demo

screenshot
screenshot

nodebb-theme-material v2.0 is now published to npm. You can install it from the ACP "Plugins" page.

Please submit issues on the github page. https://github.com/pichalite/nodebb-theme-material

Demo: http://pichalite.com

EDIT: The theme has few options on it's ACP page to change certain UI behaviors like displaying menu items in the header like persona

EDIT: Updated screenshots. Demo running at pichalite.com

Screen Shot 2015-04-19 at 9.25.14 PM.png

Screen Shot 2015-04-19 at 9.25.42 PM.png

Screen Shot 2015-04-19 at 9.26.07 PM.png

Screen Shot 2015-04-19 at 9.26.25 PM.png

Screen Shot 2015-04-19 at 9.27.47 PM.png

Screen Shot 2015-04-19 at 9.28.44 PM.png

Peace is a simple theme with a sidebar navigation, it comes with a builtin bootswatch theme switcher.

More info and source https://github.com/barisusakli/nodebb-theme-peace

Screenshots

skins.gif

Categories

Category

Topic

Skin Switcher & Sidebar

0_1474391109585_upload-98e69fcb-07f7-4542-ab7c-a37361d269ff

0_1474391143180_upload-85f6aa8e-2e97-46c7-9635-5d739571cc1d

0_1474391194718_upload-88e826d9-a538-452d-861e-ba13e1be26f9

0_1474391228030_upload-26a1cf28-4f0c-4143-bfb2-ec38096d6c9b

0_1474391268901_upload-97150372-c320-4b33-aa10-96f17ffa5221

0_1474391305763_upload-48c2ba75-731a-4559-8560-5e5907c48b29

0_1474391334434_upload-5b2b801c-6a35-4fed-9249-30c8e50a5b61

0_1474391368466_upload-0db88073-8a93-4951-9cf1-107631c4d37d

0_1474391490739_upload-4e1b4017-4fbd-425f-988a-f3fb413fb973

Demo: http://slick.pichalite.com

Work in progress. Feedback welcome.

This theme is no longer for sale after M4. This will be the last version.
Thank you all for your support!

M4 is complete (for the most part) and available for sale with branding removed.

I hope it inspires you all.

Customizable homepage with custom slider (not shown)
Screen Shot 2014-06-14 at 7.35.23 PM.png

A better sidebar menu.
Screen Shot 2014-06-14 at 7.35.10 PM.png

Topic covers (a new approach to viral forum content")
Screen Shot 2014-06-14 at 7.37.45 PM.png

New social drop up menu.
Screen Shot 2014-06-13 at 6.22.44 PM.png

-_-

##Here's a little update from the first post.

Heres a preview of the profile edit template along with the profile image upload templates.

Screen Shot 2014-06-16 at 2.53.27 AM.png

Selecting an image to use for your profile.
Screen Shot 2014-06-16 at 2.53.41 AM.png

...or upload your own.
Screen Shot 2014-06-16 at 2.53.53 AM.png

Sleek and thin upload bar.
Screen Shot 2014-06-16 at 2.55.29 AM.png

One thing I have to do, and it will be a massive overhaul would be the main topic template. I'm definitely not proud of it. Wireframe it and just see what works. I'm up late but I changed the sidebar a little bit. In this theme I've envisioned it to be the central hub for almost everything cramming yet keeping it minimal at the same time.

The profile drop down menu (not shown) has been moved into the sidebar as well using the template conditions. @psychobunny has made one hell of a template system. Kudos. Lets make it even better.

Screen Shot 2014-06-16 at 2.39.37 AM.png

This design has been retired.

Hey everyone,

Its been a while since I actually took the time to create another theme as I've been busy taking on other projects. I will be open sourcing this as well, but until then you can check out a live preview of the theme.

The theme will be constantly updated at random times so if the site doesn't work, don't worry - it will be up eventually (usually no more than 24 hours). I will be putting this on Github (when I get the chance)

http://convoe.com:4567/

This is a live site as well, so please use the Sandbox category for testing.

Go ahead and feel free to use it, accepting pull requests, and please report issues.

https://github.com/cnvo/nodebb-theme-zenith

nbb classic.png

This is a classic forum inspired theme based off of Lavender that utilizes a more traditional approach to displaying forums without graphics or the pinterest- or metro-style blocks. For those who want a more classic feel to their forums.

Note: Work in progress.

Screenshot:

screenshot.jpg
Click here for larger screenshot

Installation

npm install nodebb-theme-classic

https://github.com/Paaltomo/nodebb-theme-classic

Alright, it's about that time again, where we release a new theme to coincide with a major launch (v0.5x). It's still a work in progress and I think we've got at least a week tops to be able to have this done and stable enough. Thought I'd get you all a bit excited to see what's in store:

Anyways, these are just mockups for the most part, and a bit of a mix of some older and newer shots. There's still a bit of a ways to go. Looking forward to actually getting this out and putting this live 🙂

New theme for nodebb community

ᑎᗝᗪᗴᗷᗷ 丅ᕼᗴᗰᗴ ᗴ᙭ᗝᗪᑌᔕ

https://github.com/exo-do/nodebb-theme-exodus

npm install nodebb-theme-exodus

alt text

Why exodus? Because i like a more classic layout with real responsive r , stylized buttons and different layouts on mobile and desktop.
I have introduced more than a thousand lines of new css code adjustments only for this theme and of course it is a fork a persona so all plugins will work the same way.

Development:
We first developed theme-exodo for our community based on vanilla, but we changed a lot of templates and we ended up with a theme that was too difficult to update and we have been many months on v0.7.x because of that
Now Exodus is the next step, it has all persona templates only the way of display post is a little different, i used flex box to keep post size minimum if needed and its show in a different way user info while reading topics.
It also has mobile improvements on topic list and we keeper a guild container with different media queries fixes for different layouts while keeping theme as light as possible
So now we hope theme-exodus will be easy upgradeable on upcoming core and persona changes.

On the way
Some new things will be available soon
like be able to show a panel with recent topics list while reading a topic
New pagination with sliders on mobile
More css fixes
etc

Optional Plugin Additions:
Following the plugin system we did our new homepage on a separate plugin so it can be used or not with the new theme.
All are published on npm and will be updated when needed

Homepage exodo

https://github.com/exo-do/nodebb-plugin-homepage-exodo
Its based on custom homepage so any user will be able to use the homepage or select another one like recent, categories etc on his profile
It will show recent template on a side and a sidebar with categories tiles and user block bellow
You can add some widgets on the homepage too

npm install nodebb-plugin-homepage-exodo Highlights

https://github.com/exo-do/nodebb-plugin-highlights
it will add a line to show who opened the topic or if someone of your friends write on it

npm install nodebb-plugin-highlights Ignore users

https://github.com/exo-do/nodebb-plugin-ignore-users
Fully compatible on hiding ignored users post

npm install nodebb-plugin-ignore-users Custom Exodo

https://github.com/exo-do/nodebb-plugin-custom-exodo
this was an ambitious plugin that we had on the past and it is now rebuilt for this theme
Will give you the ability to select near every color of the theme and personalize even fonts and backgrounds
it is still on development (still only in spanish) but it works nice, it will save the customization on db and or local storage so it is very fast and won't have any delay like other customization options
It also has some presets, light and night mode if you are lazy to select colors your own

npm install nodebb-plugin-custom-exodo

There is more on the way.
We like to build things for nodebb but we currently only 2 person so any PR (internationalizations 😰 ) and help on github , (also issues reports) will be appreciated

Finally

Live Demo: https://exo.do

Screens on next post

Compatibility: 1.3.0

tron logo.png

Tron theme for NodeBB. Comes with a CSS/JQuery push-right menu and slide-down category descriptions. More to come as time goes on.

Note: Work in progress.

Screenshots

Screenshot 1a.png

Screenshot 2b.png

##Screencast

##Installation

npm install nodebb-theme-tron

##Github

https://github.com/Paaltomo/nodebb-theme-tron

Screen Shot 2015-07-27 at 12.38.01 AM.png

Flip Logo.png

This is a Lavender-based theme that uses a CSS flip method to hide category information on the front page, allowing for a more photo-centric design. For those who want to display photos that take up as much real-estate as possible on the front page without having to sacrifice displaying category info.

Note: Work in progress.

##Screenshot
Flip Screenshot Small.png

##Screencast
http://youtu.be/MJrMGuJX5jg

##Installation
npm install nodebb-theme-flip

##Github
https://github.com/Paaltomo/nodebb-theme-flip

Hello NodeBB community, I'm here to introduce you a brand new theme that will available for all of you when it's ready 🙂
But first things first a little disclaimer.

Disclaimer

Thanks for all the support you showed up for galaxygraph.fr forum and it's theme. Unfortunately we won't be releasing the nodebb-theme-deep-space theme for several reasons.

The theme was thought only for GG community and because of that doesn't reply to the needs a NodeBB common user may have. It was done only in the purpose of serving some custom features and a slick look that go pair with what the community is about : graphism. I consider that the theme is not stable and modular enough to serve another NodeBB community. And finally after all the effort we've put in it to be unique, it would be kinda sad to find it elsewhere.

Bad news, means also good news to balance and that's exactly what I'm doing today. Let me introduce you nodebb-theme-minimalism

Minimalism

Here's what I planned to do, you can see how I work for creating the theme, what I want here is some feedback because I want this theme to be for the community and I wan't to know if it's worth it or no and finally if I should do it.
Also I count on you to find a new name for the theme since it's not that minimalistic or say that I'm wrong and stick with it.
I hope you'll like it, without more attending here it is

NodeBB theme minimalism preview
click for fullsize.

I will reuse some of the features I developed for galaxygraph (the box with post likers for instance)

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

home

home wide

category

topic + emoji

admin

Credits

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

Have Fun!

A little while ago, @psychobunny toyed with a theme called "Rocket", and eventually published it to npm. Not too much happened to it, although he later went on to create the Persona theme, which is now NodeBB's default.

Rocket ended up being a testbed for some experimental features that made it into NodeBB (and some that did not). (e.g. the groups' pages cover photos were originally in the user profiles section of Rocket themes)

A client of ours was interested in using this theme, so we fixed it up, removed the broken bits, polished the rough edges, and re-released it as a child theme of Persona (used to be a child theme of vanilla)!

Main Index

Category Dropdown

Install the theme via your ACP. 😄

So, turns out users /really/ like nightmode.

So while for some sites, the previous, much simpler nightmode will work fine, some will find their users demanding more complex functionality out of the nightmode as the site grows, or at least I did.

This is a far more complex setup, however- so if you find it intimidating, the simple night mode will work almost as well, with a third of the work.

So here's a more complex nightmode, with the following functionalities:

Saved state- It will remember a users preference, and flip the nightmode to it on load. Auto nightmode option- Like google maps, it flips nightmode on when its night, and off when it's day. Instead of a cluttered toggle, separated functions

Step 1: CSS

Grab notepad or nodepad++, and your favorite web browser for development. Open up the inspector (ctrl-shift-i on chrome), and carefully tweak your way to a working night mode, copy pasting each CSS rule you make to the txt document, removing any unrelated rules (Keep only things you change!).

Be detailed! Remember dismiss dialogs, search pages, group pages, user settings pages, composers, everything.

Once you have a full night mode CSS, save this file as nightmode.css

Step 2: Putting the CSS file on your server

Use filezilla or similar to throw nightmode.css into nodebb/public

Step 3: JS

Paste the following into your header:

<script> function nightmodeon(){ var el = document.getElementById('myStyles'); if ( el !== null ) { } else { var oLink = document.createElement("link") oLink.id = 'myStyles'; oLink.href = "/nightmode.css"; oLink.rel = "stylesheet"; oLink.type = "text/css"; document.body.appendChild(oLink); } } function daymode(){ var el = document.getElementById('myStyles'); if ( el !== null ) { el.parentNode.removeChild(el); } else { var oLink = document.createElement("link") oLink.id = 'myStyles'; oLink.href = "/nightmode.css"; oLink.rel = "stylesheet"; oLink.type = "text/css"; } } function autonightmode(){ var d = new Date(); var n = d.getHours(); if (n >= 21 || n <= 5) { nightmodeon() } else{ daymode() } } function nmSwitch(){ if (Number(localStorage.nmState) == 1) { localStorage.nmState = Number(localStorage.nmState)+1; modeSet() } else if (Number(localStorage.nmState) == 2) { localStorage.nmState = Number(localStorage.nmState)+1; modeSet() } else if (Number(localStorage.nmState) == 3) { localStorage.nmState = Number(localStorage.nmState)+1; modeSet() } else { localStorage.nmState = 1; } } function modeSet(){ if (Number(localStorage.nmState) == 1) { autonightmode(); console.log('modeAuto'); } else if (Number(localStorage.nmState) == 2) { daymode(); console.log('modeDay'); $(".nightmodeCSS").html(" "); } else if (Number(localStorage.nmState) == 3) { nightmodeon(); console.log('modeNight'); $(".nightmodeCSS").html(" "); } else { autonightmode(); localStorage.nmState = 1; console.log('modeElseAuto'); } } </script>`

You also need to create a HTML footer widget, and place this inside the widget. If you do not do this, it will not work.

<script> modeSet(); </script>

Step 4: Button

The button for this CAN be simple, but that will be absolutely baffling for the user, because it has three states, one less obvious then the others. You /will/ want to style this button to have three states, one for each mode, so the user can tell what mode they're in. However, if you just want to get it working and let the users sort it out, you can simply place this:

<button class="nightmodebutton" onclick="nmSwitch();"><span></span></button>

HOWEVER, there is a special place in hell for people who do that. Ideally, you should style the above button as "OFF" in your default CSS, style it as "ON" in your nightmode CSS, then add something like:

$(".[CLASS OF SOME EMPTY DIV HERE]").html("<style>.[BUTTONCLASS] span {color: #2196f3 !important;}</style>");

into "function autonightmode()", to give it an "Auto" state.

Hopefully that wasn't too complex, I'm aware it's a bit of a wall of text. Feel free to shoot me a chat if you have issues setting this up!