@glassdimly nice! Thanks for sharing 🙂
Most Voted Themes
-
Pewter Theme for NodeBBDesigned 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).
Screenshotsmain
Installation npm install nodebb-theme-pewter
sidebar;Fork this theme on Github
-
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 NodeBBConvoe 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-oxideNodeBB theme made to look similar to GitHub design.
📚 Installation
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 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! 🧐 Screenshotsnpm i nodebb-theme-oxide
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
-
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.pngA better sidebar menu.
Screen Shot 2014-06-14 at 7.35.10 PM.pngTopic covers (a new approach to viral forum content")
Screen Shot 2014-06-14 at 7.37.45 PM.pngNew 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.pngSleek and thin upload bar.
Screen Shot 2014-06-16 at 2.55.29 AM.pngOne 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)
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.
-
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
Installation
Click here for larger screenshotnpm install 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 🙂
-
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##Screencast
Tron Theme for NodeBB##Installation
npm install nodebb-theme-tron
##Github
-
This is just a simple theme based on persona that modifies the topic view with a sidebar.
Here is a screenshot when you are at the top of a topic.
Imgur ImgurAnd here is one when scrolled down.
Imgur ImgurThe sidebar is a bootstrap affix so it is always visible when you scroll down, useful when using infinite scroll as well.
The sidebar also reduces the width of the posts so I find it easier to read compared to long horizontal lines.
Reply, sort by and watch are always visible previously they would go out of screen.
There is a lot more room for browsing user images.
You can install it with npm i nodebb-theme-peace
-
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
Flip Theme for NodeBB
##Installation
npm install 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 🙂
Disclaimer
But first things first a little 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
MinimalismHere'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 isNodeBB theme minimalism preview
click for fullsize.I will reuse some of the features I developed for galaxygraph (the box with post likers for instance)
-
New theme for nodebb community
ᑎᗝᗪᗴᗷᗷ 丅ᕼᗴᗰᗴ ᗴ᙭ᗝᗪᑌᔕhttps://github.com/exo-do/nodebb-theme-exodus
npm install nodebb-theme-exodusalt 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
etcOptional Plugin Additions:
Homepage exodo
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 neededhttps://github.com/exo-do/nodebb-plugin-homepage-exodo
npm install nodebb-plugin-homepage-exodo Highlights
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 toohttps://github.com/exo-do/nodebb-plugin-highlights
npm install nodebb-plugin-highlights Ignore users
it will add a line to show who opened the topic or if someone of your friends write on ithttps://github.com/exo-do/nodebb-plugin-ignore-users
npm install nodebb-plugin-ignore-users Custom Exodo
Fully compatible on hiding ignored users posthttps://github.com/exo-do/nodebb-plugin-custom-exodo
npm install 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 ownThere 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 appreciatedFinally
Live Demo: https://exo.doScreens on next post
Compatibility: 1.3.0
-
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 Screenshots Creditsvariables.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 functionsStep 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!
Copyright © 2020 NodeBB | Contributors