Its worth noting this might be a bit like making a request for Notepad++ to turn into microsoft word.

Its just a totally different purpose. NodeBB is amazing, but its not facebook. Most of us wouldnt want it to be! NodeBB is largely focused around the forum conversation experience, and does a great job at it. Social Networks are less about conversations, and more about statuses, in a way, so are handled differently. I suppose a good way to put it is forums are topic and category focused, and social networks are profile focused.

You might look at the following softwares, if you want to roll something like Facebook or Myspace.

HumHub - The flexible Open Source Social Network Kit for Collaboration

HumHub is a free social network software and framework built to give you the tools to make teamwork easy and successful.

API for building activity streams and news feeds

Stream, scalable news feeds and activity streams as a service. iOS, Android and web.

pump.io

PeepSo | Homepage

The Next Generation Social Networking Plugin For WordPress - Your Community. Your Way. It's SO easy!

exo_admin

eXo Platform | Digital Workplace Software for Medium and Large Enterprises

eXo Platform, an Open Source Digital Workplace Software, provides medium and large enterprises with modern intranet, Collaboration tools and knowledge management solutions

And if you're looking for something more like reddit

Telescope: Build your own Hacker News, Reddit, or Product Hunt.

Are all quite capable projects.

You could probably manage to get NodeBB to do what you want, mind. Its very customizable and flexible. But you'd be swimming upriver.

However! If you want to run a forum with a few extra social network like features tagged on, then plugins might absolutely be your best choice!

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:

1. Saved state- It will remember a users preference, and flip the nightmode to it on load.
2. Auto nightmode option- Like google maps, it flips nightmode on when its night, and off when it's day.
3. 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!

Hey.

I'm not sure about posting CSS tweaks in here, but I figured this'd be useful to many people. This should work on almost all themes, and will replace the arrow at the top right of the composer, eg this:

With a drag bar that can be used to resize the composer to any size, eg this:

This does not add any additional functionality to the composer- this ability already exists, this just makes it easier to use and more user-transparent that the option is available.

To use:
Just paste the below CSS at the bottom of your Custom CSS:

/*Custom Composer Bar Tweak by Arc*/ .composer .resizer .trigger i:before { content: "\f0c9"; cursor: n-resize; } .composer.maximized .resizer .trigger i:before { content: "\f0c9"; cursor: n-resize; } .composer .resizer { position: absolute; width: 100%; top: 10px; height: 0; cursor: n-resize; } .composer .resizer .trigger i { margin-left: -10%; position: relative; color: #FFF; font-size: 14px; } .composer .resizer .trigger { position: relative; display: block; width: 110%; height: 20px; top: -10px; margin: 0 auto; margin-left: -11px; background: rgba(0,0,0,0.1); border: 0px solid #E4E4E4; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 0%; line-height: 20px; -o-transition:.3s ease-in-out; -ms-transition:.3 ease-in-outs; -moz-transition:.3s ease-in-out; -webkit-transition:.3s ease-in-out; transition:.3s ease-in-out; } .composer .resizer .trigger:hover { background: rgba(0,0,0,0.2); -o-transition:.3s ease-in-out; -ms-transition:.3 ease-in-outs; -moz-transition:.3s ease-in-out; -webkit-transition:.3s ease-in-out; transition:.3s ease-in-out; }

As my first tweak seems to have been well liked, here's another one from my site.

At least for my site, the #1 most requested feature was a night mode. It wasnt too hard to make, but I found a lot of questions here on the nodeBB community about how to implement one, so I figured some people could benefit from this!

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 nightmode(){
     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"; 
 
         document.body.appendChild(oLink);
     }
 }
 </script>

Save that.

Step 4: Button

Make a button for nightmode, most likely in a HTML widget under extend, but wherever you want.

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

Works well. Style it as you like with css- your site now has night mode!

@Pixel I'm- a little worried by the prospect of the flag button becoming a "call flight attendant" button.

I think you really need to ask yourself something first:

Do YOU want the forum you're making? Would you love to interact with the community you're creating? Would you register for your own site?

Because if you're in this to make money, you will fail. Cultivating a community is a labor of love, not a game. If you try to play this like a game, the community will eat you alive. And from your list, you're approaching creating a community in the same way a pickup artist approached women. And you'll get the same results. A lot of one night stands, but no user commitment or community.

The utter failure of Beme despite millions in marketing is proof of this. They did almost everything you listed, and are in the process of crashing into the ground. The internet is more fickle then you can imagine, and smarter then you're expecting. They recognize marketing plays, and they dont like it.

What you need to do is-

1. Make sure your community is about something you're passionate about, and isnt too general.
2. Start the site. No marketing bullshit, no waitlists, no invites, just start it. Dont astroturf, dont shadowpuppet. Start threads, and talk to your friends.
3. Open the gates. Advertise, dont market. Put yourself out there, let people know you exist in a straight forward, honest way. Dont play games, just open the gates.
4. Survive. Look at every successful forum today- then look at the internet archive. The most successful forums grow slowly and consistantly. You'll talk to yourself and your friends for easily 3 months. Then it will grow. If success is in the cards for you, which is simply a matter of how saturated your market and how good your ads are, it will take years. Not months, years. Expect at least 2 years before you're able to even think about going "hands off" on your community.

I've run various forums across various software suits in the past, and this is the method I've always taken. Look at NeoGAF, Something Awful, Reddit, 4chan- They all followed the steps above.

The internet is all about passion and determination. Simply go about this in a honest, straight forward ways, and stick with it. It'll take awhile, dont give up. Thats what success on the web is all about- loving it, and never surrendering.

As a forum owner, I can say that redactor does have some notable standing issues for people running active communities, ranging from sterilization to backwards compatibility with formatting, to lack of compatibility with plugins and general confusion for the community. It's a great plugin, but far from ready to be a default.

I use DO's imaging once a month and then prayer and ritualistic sacrifices to prevent crashes the other 30 days.

@bhamrick Fair enough! I just figured it'd be fair to point out that marketing gimmicks are iffy at best- I find users appreciate honesty and straight forward business a lot.

After some more research, I found a solution:

.topic [data-username="USERNAME"] .poster-avatar

Will select just one user's avatar

Hey.

On my forum, we have Halos around the avatars, set with:

.poster-avatar{
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: -webkit-box-shadow 0.3s ease;
    transition: box-shadow 0.3s ease;
    -webkit-box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.06);
}
.poster-avatar:hover{
    -webkit-box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 0px 6px rgba(0, 0, 0, 0.1);
}

Now, I was hoping to dynamically color these Halos for staff groups, so I found this topic:
https://community.nodebb.org/topic/3185/name-color-for-groups-or-username/6

With this nice block of CSS:

a[href*="groups/administrators"] span.label {
background-color: red !important;;
padding: 2rem;
}

So I figured, "Hey, thats awesome. Then I should be able to use CSS selectors to color the Halos.

However, after- extensive testing, I cant figure out what

a[href*="groups/administrators"]

is trying to select, or get it to work, at all.

I thought maybe

a[href*="groups/coloradorks-staff"] .poster-avatar{
box-shadow: 0 0 0 6px rgb(255, 0, 0);
}

would work- but obviously .poster-avatar isn't a child of this selector. Is this just selecting links to the groups page? If so, how does it work in the original case?

@frissdiegurke said in IP displaying on feeds and mentions:

Check the url within config.json.

Well, that was easy. Thanks for the quick fix!

Hey!

I'm pretty sure I set something up wrong here, and just realizing it. I just spotted that all mentions, and RSS feeds for my site appear to point to the IP of my site, instead of the URL. See here. Any ideas what could be causing this?

Hey, this looks cool.

However, I'm curious, in what ways is this better then RoboNitori with the new posts RSS feed?

Modified Material, Its the theme that, to me, feels the smoothest and most feature rich.

http://coloradorks.com/

Looks sexy. I particularly like the display of 5 threads from each category, that is nice indeed. On larger screens, displaying 3 categories per row instead of two could do a lot for information density, I think.

This would be amazing for me as well. Make it so any user below X posts can receive chats and use them, but cannot start them with other users- other users have to message first. Then after that post threshold they can message normally.

@exodo Anything I do will always be a hack, rule one of things I produce. I do spagetti code like some sort of horrible, programming emnem.

@a_5mith

That is a good midway method, if much less copy and paste ease of set up for more complex tweaks then just changing out 2 or 3 divs.

However, besides the automode, that is inarguably more elegant programmatically way to accomplish that!

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:

1. Saved state- It will remember a users preference, and flip the nightmode to it on load.
2. Auto nightmode option- Like google maps, it flips nightmode on when its night, and off when it's day.
3. 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!