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 [image: 7EDGVLn.png] [image: BmZsSbW.png]; 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 [image: l4jdUZO.png] 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 [image: screenshot.png] [image: screenshot2.png]

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 [image: JCxyjxW.png] [image: bFlTEDk.png] [image: e8ElL4B.png] [image: J4NVDZa.png] [image: M5PorU2.png] [image: QY1Pkg6.png]

[image: n5HgDd8.png] [image: I3rN97i.png] [image: 3emPDyq.png] [image: hbkJjaA.png] [image: alvFb78.png] [image: UNZ2j3u.png] [image: Rl6ezMh.png] [image: 6FtGS30.png] [image: OLerlPA.png] 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) [image: 0ClAsEX.png] A better sidebar menu. [image: OAz94uz.png] Topic covers (a new approach to viral forum content") [image: ieRKu69.png] New social drop up menu. [image: s1DefgI.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. [image: noqRZdT.png] Selecting an image to use for your profile. [image: SEkQyeY.png] ...or upload your own. [image: CvIz3z6.png] Sleek and thin upload bar. [image: Fwxvhdb.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. [image: Hjzo4aF.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

[image: ItfGr20.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: [image: mn8XP46.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: [image: PMgv8tD.png] [image: TCFo1wx.png] [image: UE4u5gM.jpg] [image: JedZwhL.png] [image: zjL9Z5d.png] 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 [image: 71oWQTh.png] 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

[image: Ulp6PhJ.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 [image: MTCDK8a.png] [image: GdmEjW6.png] ##Screencast http://youtu.be/hJ_AKGplkgc ##Installation npm install nodebb-theme-tron ##Github https://github.com/Paaltomo/nodebb-theme-tron

[image: Uovil15.png]

[image: ppjSzM8.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 [image: 3c4YMka.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 [image: 823990minimalismnodebbtheme.jpg] 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 [image: home.png] [image: home_wide.png] [image: category.png] [image: topic_emotes.png] [image: admin.png] 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)! [image: 1.png] [image: 2.png] 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!