[nodebb-theme-peace] Peace Theme for NodeBB

[baris]

Peace is a simple theme with a sidebar navigation, it comes with a builtin bootswatch theme switcher.

More info and source https://github.com/barisusakli/nodebb-theme-peace

Live Demo https://peace.nodebb.org/

Screenshots

Categories

Category

Topic

Skin Switcher & Sidebar

[HolyPhoenix]

Wow, I modified persona to set all of that info to fixed at the top of the post. This is better. Definitely like this.

[baris]

I rebuilt this theme for the upcoming NodeBB 3.0 release with BS5 support.
Updated main topic with new images and info. @julian already posted about it in our blog. https://nodebb.org/blog/bringing-back-better-bootswatch/

[cagatay]

thank you @baris

[Teemberland]

I need that skin switcher for Slick. I only need a default and dark.

[baris]

The skin switcher is fairly simple, the markup is in https://github.com/barisusakli/nodebb-theme-peace/blob/master/templates/partials/skin-switcher.tpl.

And the js code that handles the changing of themes is

$('[component="skinSwitcher"]').on('click', '.dropdown-item', function () {
	const skin = $(this).attr('data-value');
	$('[component="skinSwitcher"] .dropdown-item .fa-check').addClass('invisible');
	$(this).find('.fa-check').removeClass('invisible');
	require(['forum/account/settings', 'hooks'], function (accountSettings, hooks) {
		hooks.one('action:skin.change', function (hookData) {
			$('[component="skinSpinner"]').addClass('invisible');
		});
		$('[component="skinSpinner"]').removeClass('invisible');
		accountSettings.changeSkin(skin);
	});
});

[Teemberland]

@baris said in [nodebb-theme-peace] Peace Theme for NodeBB:

The skin switcher is fairly simple, the markup is in https://github.com/barisusakli/nodebb-theme-peace/blob/master/templates/partials/skin-switcher.tpl.

And the js code that handles the changing of themes is

$('[component="skinSwitcher"]').on('click', '.dropdown-item', function () {
	const skin = $(this).attr('data-value');
	$('[component="skinSwitcher"] .dropdown-item .fa-check').addClass('invisible');
	$(this).find('.fa-check').removeClass('invisible');
	require(['forum/account/settings', 'hooks'], function (accountSettings, hooks) {
		hooks.one('action:skin.change', function (hookData) {
			$('[component="skinSpinner"]').addClass('invisible');
		});
		$('[component="skinSpinner"]').removeClass('invisible');
		accountSettings.changeSkin(skin);
	});
});

@baris this theme is compatible with v2 right? I tried adding the skin switcher to Slick, but the moment I add the filterMiddlewareRenderHeader to hooks, I get an internal server error. Any ideas why?

[phenomlab]

@Teemberland no, it's for v3 only

[nodebb-theme-peace] Peace Theme for NodeBB

I rebuilt this theme for the upcoming NodeBB 3.0 release with BS5 support. Updated main topic with new images and info. @julian already posted about it in ou...

NodeBB Community (community.nodebb.org)

[baris]

I've setup a demo site for peace theme at https://peace.nodebb.org. Should we setup one for nodebb-theme-lavender as well?

[codenamejessica]

You can also see it at my site as well. https://discussions.codenamejessica.com (No this is not a selfless little plug), It's a BIG ONE!

---

Codename: Jessica

Linux Enthusiast | Adventurer | Smart Ass
My Site | Join the Forum

[codenamejessica]

@baris Hey I actually did find something "out of scope" for the Peace Template. I have disabled allowing members and guests to change skins. Although the little paint brush is still there, and registered users are able to change the skin.

---

Codename: Jessica

Linux Enthusiast | Adventurer | Smart Ass
My Site | Join the Forum

[baris]

@codenamejessica thanks for reporting, fixed in https://github.com/barisusakli/nodebb-theme-peace/commit/ca4e3aa5e9297dbca085f39ed332f33fdf8dd37d.

[codenamejessica]

That resolved the issue. Thank you! (Everyone else: Don't forget to rebuild & restart)

[codenamejessica]

You know, I am not one to nitpick over hard work. I think you have done amazing, and I am still trying to decipher all of the things in building a template. So, no complaints AT ALL! I am curious if this was intentional or an oversight.

Using the peace template is by far in my opinion one of my favorites, although I have a question about an odd situation that doesn't flow very well.

When you go into a topic: https://discussions.codenamejessica.com/topic/7/asking-a-question

There is no breadcrumb, or navigation back to the category's list of topics: https://discussions.codenamejessica.com/category/1/announcements

Was this to keep the screen cleaner for larger topics or just missed in the release?

---

Codename: Jessica

Linux Enthusiast | Adventurer | A Unicorn!
My Site | Join the Forum

[baris]

I didn't include everything in peace theme on purpose, if you want to bring back breadcrumbs you can include the partial <!-- IMPORT partials/breadcrumbs.tpl -->. If you are making alot of modifications it is probably better to fork it so you don't lose your changes when upgrading nodebb.

[codenamejessica]

@baris Thank you, yeah I already did that, fork will make the modification once I move the main site's header over and put it in its breadcrumb area. Anyways, I really appreciate how quickly you respond, and will continue to do my addons over time.