:squirrel:

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

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.

I'm using NodeBB locally. I love it! I've been experimenting with the theming and just tinkering with stuff in my spare time. (easter egg)

Here's some examples:

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)

A better sidebar menu.

Topic covers (a new approach to viral forum content")

New social drop up menu.

-_-

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

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

Selecting an image to use for your profile.

...or upload your own.

Sleek and thin upload bar.

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.

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.

Build software better, together

GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.

GitHub (github.com)

Selectors

.class Selects all elements with .class
#id Selects all elements with #id
* Selects all elements
div Selects all <div> elements
div, p Selects all <div> and <p> elements
div > p Selects all <p> elements with a parent of <div>
div + p Selects all <p> elements placed immediately after <div> elements
div~ul Selects all <p> elements preceded by <div> elements
-_-

Attributes
[attribute] Selects all elements with the specified attribute
[attribute=value] Selects all elements where the specified attribute is equal to ‘value’
[attribute~=value] Selects all elements with an attribute containing the word ‘value’
[attribute|=value] Selects all elements with an attribute list starting with ‘value’
[attribute^=value] Selects all elements with an attribute beginning with ‘value’
[attribute$=value] Selects all elements with an attribute ending with ‘value’
[attribute*=value] Selects all elements with an attribute containing the substring ‘value’

-_-

Pseudo-classes
a:link Selects all unvisited links
a:visitedSelects all visited links
a:hover Selects links on mouse hover
a:active Selects the active link element
p::after Insert content after <p> element
p::before Insert content before <p> element
input:checked Selects every checked <input> element
input:disabled Selects every disabled <input> element
p:empty Selects every <p> element with no children
input:enabled Selects every enabled <input> element
p:first-child Selects every <p> element that is the first child of its parent
p::first-letter Selects the first letter of every <p> element
p::first-line Selects the first line of every <p> element
p:first-of-type Selects every <p> element that is the first <p> element of its parent
input:focus Selects the <input> element which has focus
input:in-range Selects <input> elements with a value within a specified range
input:invalid Selects all <input> elements with an invalid value
p:lang(language) Selects all <p> elements with a lang attribute equal to ‘language’
p:last-child Selects every <p> element which is the last child of its parent
p:last-of-type Selects every <p> element which is the last <p> element of its parent
:not(p) Selects every element that is not a <p>
p:nth-child(2) Selects every <p> element that is the second child of its parent
p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
p:only-of-type Selects every <p> element that is the only <p> element of its parent
p:only-child Selects every <p> element that is the only child of its parent
input:optional Selects <input> elements with no ‘required’ attribute
input:out-of-range Selects <input> elements with a value outside a specified range
input:read-only Selects <input> elements with the ‘readonly’ attribute specified
input:read-write Selects <input> elements with the ‘readonly’ attribute not specified
input:required Selects <input> elements with the ‘required’ attribute specified
:root Selects the documents root element
::selection Selects the portion of an element that is selected by a user
#id:target Selects the current active #id element
input:valid Selects all <input> elements with a valid value

Hopes this helps you guys!

Well, after using the dual composer feature on a few sites besides this one such as the one on Dillinger, Ghost, Discourse and a few other sites, I've come to the conclusion that the dual composer is a failure for the use of a forum for many reasons.

When you are composing something, you want as much space as possible to write. I feel squeezed and constrained in a sense because I have this window pane to the right of me taking up half the space to write on. I'm sure there are mixed feelings about this, but if I had to choose whether I wanted the double pane view or the single WYSIWYG editor, I would definitely choose WYSIWYG.

Use cases and many sites have successfully deployed this feature in unique ways keeping the logical approach as simple as possible. When you bold something you should be able to see it right then and there, and that goes for any type of formatting within the composer. I'm wondering what made you guys choose this over something more simplistic. There is completely no way possible this would work successfully for mobile (and I see why there is a mobile composer template created) and while the new mobile template for the composer can be useful in some ways, it ultimately was unnecessary.

Okay, so Discourse has it where you can hide the preview pane, okay cool - not. That still doesn't solve the problem here because you still can't see what you've formatted unless you reenable that pane again, so again its total bullshit.

When I think of a dual pane, I think of diff editors to compare edited changes, not for writing on a forum of any kind at all. Whoever originally thought this would be pretty neat for a forum should be banned for life of any form of UX that involves forums (and it doesn't originate here, so you guys are in the clear).

So was it the community or was it your own deduction as to what competitors/other sites have or was it because it was easier to implement because the preview pane is already there (basically a no brainer)?

In a UX standpoint its annoying to have so much wasted and unnecessary space just to see a live preview of your post when you can just see it using the WYSIWYG approach. I understand why the tabs were removed and the logic there was pretty flawed because I mean... who wants to click back and forth just to see if what you've typed is how you want it.

-_-
####**What started this topic: **
@psychobunny said

Yeah it's based on screen size. Right now the templates are identical... we're not actually sure if its a good idea to build two different composers, but it's there for now until we figure out what we're doing with it grinning
https://community.nodebb.org/topic/1928/what-is-composer-mobile/7

I would create a new thread on this, but eh, theres no feature to split or merge threads... yet.

Here's what we got now.

I went flat and changed the color scheme with a few suggestions, yes, I gave in... LOL! I moved this to a test server for the development of the design working sections at a time (because I'm lazy...)

Next screenie to be continued...

@djensen47 Well, a little more or less but that pretty much sums up the pros and cons of both NodeBB and Discourse.

I used Discourse before I used NodeBB, but found them both at the same time. I was going to originally use Discourse for my community (Convoe), but changed my mind pretty quickly. I had a hard time trying to customize Discourse to make it as unique as possible as to show its capabilities. Yet, this involved so much gutting of the handlebars (template system used for Discourse) and when it was time to update, the site was so broken, it was like a waiting game.

NodeBB uses a set of templates that are easy to understand and modify and even though Convoe speaks for itself as an example of NodeBB's capabilities, I'm sure it can go further - out of this world, as far as customization goes.

Discourse is slowly reminding me of a more refined supercharged vBulletin and I can definitely bet most sites that use Discourse will all look alike. We will attempt to jump that "same-look" hurdle most forums suffer from because of the difficulty in their customization. - We all want familiarity, but most of us want a unique aesthetic look - something fresh, new, and bold.

As good as it sounds (not really)... its on the profile and it takes 1 click to check their join date and one click back to return to the topic. -_-. Its not hard to do, but its useless information in the topic itself - thats just my opinion. The only dates I'd want to see is when that user posted in the topic. That's about it.

@a_5mith Yes, confusing. When a new user selects their texts and bolds it they see asterisks outside the word. Now we know what that means because we are tech savvy and know the basics of Markdown, but for someone who has never seen it before, it can be quite confusing.

Another thing for example is that I use my 13 inch MacBook with the resolution at 1440 x 990 max, so my browser has to always be near maximized in width to even see both the write and preview panes.

I've not found a wysiwyg editor yet that can actually post legible code either.

See Quora example below.

See Medium example below.

See Xenforo example below.

###Now take a look at this double pane crap.
NodeBB

Discourse

Ghost

Thanks @baris @psychobunny @julian! I really appreciate it! I've been a bit busy lately drawing up something unique but I have to learn those variables so that's slowing me down a bit. Otherwise the product is so awesome, its my motivation lol (if that makes sense)!

@psychobunny That would be an honor, I don't mind at all.

I believe you should have as many partials in your main template as efficiently as possible to cut down on redundant code. Here I'll write the standard for a good rule of thumb on how you should organize your templates and all the code within in them.

Any redundant JS scripts should be in their own partial to be reused in other templates if need be.

Take full advantage of the NBB API so that you extend your template even further. For example using <!-- IF loggedIn --> condition can greatly improve UX and conversions rates on your site. Having some type of call to action or banner within these will let the user know that they aren't logged. OR when they are logged in, show something else. You can come up with some pretty crafty ideas. But yeah, do what you can with the existing API.

You can only do so much with the templates but is that good enough? Maybe, maybe not, but it does work when you plan out the logical flow and hopefully not get lost in the div's and such. For example on the Majestic Theme, the topic covers are pretty complex and one can easily get lost in the flow of what's going on. Here's a screenshot of the topics UI.

Now lets take a little peek at whats under the hood;

Now there's way more to this, but this is just a little example of how I control the topic covers. The only reason why I'm posting this is because I'm quite certain it would take a while to replicate without all of the other partials in this one template (not shown for obvious reasons).

You can also do stuff like this to take control over pluralization of your template: post<!-- IF !topics.unreplied -->s<!-- ENDIF !topics.unreplied -->
Which would mean, if you don't have any posts, remove the s in post, otherwise its posts. Neat huh?

Anyone else have any cool things they've done with the template system so far in their existing theme? Share some of your ideas here.

Which one looks better?

@a_5mith Its an example, when I used Xenforo before in the past, I took out those options so that users couldn't use the alignment, font resizing, font families, etc.

I'm complaining about the need to add all of the extra crap such as the asterisk - most users don't even use it because of the same reason I am complaining about. This is just a forum, nothing more than a forum so no, theres no need for all of the complication when formatting your post.

I like Markdown, more so than BBCode. I'm talking about having the "live editing" visible first then maybe in another tab or so, you can alter the Markdown manually, not in the first place. WYSIWYG is definitely not a step backwards, more so developers tend to implement it in the worse way. I gave some examples here and like I said, and I will stand strongly by this... the side by side preview is for developers and not the average user (the average user being your neighbor, your grandma, your uncle), and we can even go as far as psychological studies and using kids from the ages of 11-15 year olds to decide whether or not the side by side panes vs the WYSIWYG-type of editor is better for them - they will definitely use the WYSIWYG-like editor. Demographically speaking, your site will attract certain type of individuals just solely based on the type of editor you're using and the efficiency you will get out of it. Otherwise you will get a bunch of people typing without any care to format. Then they have to read up on Markdown, what it is and how to use it - most people won't even go as far as the URL linking.

Posts should be uniform and simple to read.

Thats the result of - a composed post, which has nothing to do with what I am talking about.

Ghost has a modal box that shows "Markdown Help"... Well what the hell? Thats so much trial and error of having to format and its just too much going on. Leave the advanced stuff to the more advanced individuals. I don't feel that you should force a user to study and learn Markdown if they don't want to.

I like this - I think our user pages definitely need some work so I'm glad I finally have somebody to steal some ideas from

My goal is to inspire you. I think I'm accomplishing just that, lol.

@julian - thanks again.

I think the biggest thing to tackle is the topic.tpl ... Making it more unique than it already is, minimal (not too much as it would be a UX issue then), and beautiful. That will be tough...

So here's what mine looks like as an example, maybe you can copy it or get some ideas. I'll leave this here for everyone else as well.

###HTML

<div class="mentions-card" data-username="{username}" data-uid="{uid}">
	<a class="mentions-logo" href="//convoe.com/" target="_blank">
		<span class="logo-mentions">
			<span class="mentions-sr">Convoe site navigation</span>
		</span>
	</a>
	<div class="mentions-hero-image mentions-image-cover"></div>
    <div class="mentions-card-img-container">
        <a href="/user/{userslug}"><img class="img-circle" src="{picture}" /></a>
        <i title="{statusTitle}" class="account-online-status fa fa-circle status {status}"></i></li>
    </div>
	<h4 class="mentions-title">{name}</h4>
	<div class="mentions-description">{signature}</div>
	
	<ul class="mentions-card-stats mentions-stats">
	  <li class="mentions-counter"><span title="{reputation}"></span> <small class="mentions-counter-is">Rep</small></li>
	  <li class="mentions-counter"><span title="{postcount}"></span> <small class="mentions-counter-is">Posts</small></li>
	  <li class="mentions-counter"><span title="{followerCount}"></span> <small class="mentions-counter-is">Followers</small></li>
	  <li class="mentions-counter"><span title="{profileviews}"></span> <small class="mentions-counter-is">Views</small></li>
	</ul>
</div>

###CSS

.mentions-card {
  display: inline-block;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -webkit-backface-visibility: hidden;
  .mentions-logo {
	position: absolute;
	left: 10px;
	width: 30px;
	height: 30px;
	line-height: 34px;
	background: rgba(0, 0, 0, 0.8);
	color: #FFF;
	text-decoration: none;
	top: 10px;
	outline: 0;
	text-align: center;
	.logo-mentions {
                // OPTIONAL BRAND IMG
		//background-image: url(YOURLOGO);
		//background-color: #4B4276;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: cover;
		height: 30px;
		width: 30px;
		display: block;
	}
  }
  .mentions-sr {
	position: absolute;
	top: -9999px;
	left: -9999px;
  }
  .mentions-hero-image {
	height: 60px;
  }
  .mentions-image-cover {
	//NOT IMPLEMENTED YET
  }
  .mentions-card-img-container {
	margin-top: -30px;
	display: inline-block;
	overflow: hidden;
	border: 3px solid #FFF;
	background-color: #FFF;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	
	.status {
		position: absolute;
		right: 74px;
		top: 30px;
		font-size: 10px;
	}

    img {
     width: 50px;
	 display: block;
    }
  }
  .mentions-title {
	letter-spacing: -0.04em;
	margin: 4px 0 2px;
	padding: 0 40px;
	line-height: 1;
	.mentions-at {
		font-weight: 100;
		margin-right: 2px;
	}
  }
  .mentions-description {
	display: block;
	color: rgba(0, 0, 0, 0.6);
	word-break: break-word;
	letter-spacing: -.02em;
	font-size: 13px;
	margin: 0;
	padding: 0 40px;
	line-height: 1.4;
	width: 220px;
	margin: 0 auto;
	p {
		white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    -o-text-overflow: ellipsis;
	    -ms-text-overflow: ellipsis;
	}
  }
  .mentions-stats {
	letter-spacing: -.04em;
	margin: 6px 0 10px;
	padding: 0 10px;
	line-height: 1;
	.mentions-counter {
		font-size: 18px;
		font-weight: 700;
		display: inline-block;
		margin: 0 6px;
		.mentions-counter-is {
			font-size: 10px;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.3);
			display: block;
			text-transform: uppercase;
			margin-top: 2px;
		}
	}
  }
}

###RESULT

One thing to note is my Bootstrap is extremely customized and much of it has been stripped out to save from loading unnecessary stuff I'd prob never use. so your popovers won't really look like mines unless you're willing to go that extra mile. But, still, this should be a pretty good example nevertheless. Last but not least theres NO CHAT BUTTON on this! Add your own if you want.

Love it. Can't wait to submit merge requests.

300? Not cool, and getting absolutely ridiculous since we don't really have control over this spam situation, we have to take matters into our own hands via blocking IPs, disallowing registrations, etc. - whatever we have at our disposal due to a lack of spam settings. So, this needs to be escalated, reviewed, and a solution needs to be resolved as to how to handle this better so that the bots cannot register an account period. Sooner or later someone (like me) will complain, blog about it, and say this has to be the spammiest forum system I've seen in a while and with the lack of account registration restrictions, I refuse to use it over a system that has a robust solution for combating these types of annoyances/problems. Ignoring this and deferring it much long will backfire in the long run.

(Not me ranting, just concerned.)

On a side note, this should be in the core instead of a plugin - or at least worked with closely with the dev team. We shouldn't have to wait on the plugin author to update something that's vital to the application, in which case, spam protection is vital.

Congrats on the new release.

I think the biggest changes are the new chat interface, replies to this post, and the zen mode for the composer.