Skip to content

Custom Themes

Jump to bottom
Quinton Ashley edited this page Apr 1, 2020 · 12 revisions

Creating Custom Themes for Nostlan

As of v1.4 of Nostlan, users can create and use custom themes. You can make your own color palettes, styling rules, and even change the loading screens! When designing themes you should not require any resources to load from the internet. If you want to use a font for example include the font file in your theme's folder, then link to it locally in your css file.

Custom Theme Styling

Create a theme.css file to add color palettes and other style rules. The example below shows the default black, blue, and white color palettes of the Nintendo 3DS default theme.

.n3ds {
	--cover-color: #3f4044;
	--cover-text-color: #202125;
	--powerBtn-color: #5A86C7;
	--resetBtn-color: #009a6d;
	--openBtn-color: #DDBB62;
}

.n3ds.blue {
	--cover-color: #557eaa;
	--cover-text-color: #3a465e;
	--powerBtn-color: #3a465e;
	--resetBtn-color: #3a465e;
	--openBtn-color: #3a465e;
	--powerBtn-text-color: #5A86C7;
	--resetBtn-text-color: #009a6d;
	--openBtn-text-color: #DDBB62;
}

.n3ds.white {
	--cover-color: #ebebeb;
	--cover-text-color: #949494;
	--powerBtn-color: #ffa93a;
	--resetBtn-color: #ffa93a;
	--openBtn-color: #ffa93a;
	--powerBtn-text-color: #5A86C7;
	--resetBtn-text-color: #009a6d;
	--openBtn-text-color: #DDBB62;
}

Custom Content

The intro loading screen intro.html is displayed in Nostlan from a tag as guest content for security purposes.

<!DOCTYPE html>
<html>

<head>
	<title>intro n3ds</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./intro.css">
</head>

<body><img src="./intro.svg"></body>

</html>

guest content is isolated, meaning it does not have access to node.js functions and can not call any of Nostlan's functions. Want to use jQuery or another popular web dev library? By writing themes in Pug you can gain access to a set of local variables that store the paths to Javascript/CSS libraries for guest content usage.

const guestLibs = {
  bootstrap_css: node_modules + '/bootstrap/dist/css/bootstrap.min.css',
  jquery_js: node_modules + '/jquery/dist/jquery.min.js',
  jquery_slim_js: node_modules + '/jquery/dist/jquery.slim.min.js',
  material_design_icons_css: node_modules + '/material-design-icons-iconfont/dist/material-design-icons.css',
  three_js: node_modules + '/three/build/three.min.js'
};

Support Nostlan on Patreon 🤝

Clone this wiki locally