: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.

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.

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:

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

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...

@psychobunny said:

We have a celebrity, michael phelps remember?

I'm sure it was just Jeff.

EDIT: Thanks btw everyone for showing up

Can't wait for the next one. Thanks for answering all of our questions.

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.

@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.

@youhosi Thanks for the reminder!

Does anyone have any fake data I can use for testing?
...or is there a generator for this in the form of a plugin?

I've decided to dedicate my time to create a new theme.

Just keeps getting better.

@julian said in Majestic v4:

@trevor said in Majestic v4:

Its time for a refresh.

You're back!!

Like I never left.

@MJ said in Majestic v4:

@trevor welcome back

Thanks

@smartpunter said in Who is using NodeBB?:

I've launched my forum recently, plenty of work to do, but hopefully a good start: https://wewin.ru/

So far, it looks great!

Its time for a refresh.

Looks nice. Keep up the good work. Are you going to open source this?

IMO, featured posts should be at the top, and where you have the interstitial (where the featured posts currently are), you could put popular, or vice versa depending on best use case/data analysis.

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.

It can be done.

It cannot be accomplished using CSS alone, you need to modify the templates to get the structure right, and you might require an additional plugin to get the post content (description).

topic.title
topic.thumbnail
topic.content

...not sure what the apis are now, but that looks like the right structure you need.

@charles said in Zenith - Preview:

Haven't seen much activity and now the site is completely offline. Hey @trevor is this project still going? I hope so. It'll be nice that nodebb have another design style.

Sorry, I've been busy and sick lately. As soon as I get better, I will. Otherwise, I'll accept pull requests in the meantime depending on what it is that you're modifying/refactoring, etc.