Creating Themes

Time for some fun. We're going to make a simple Static Ultra theme from scratch to show you how to do it.

First, go to your themes folder, and create a new folder in there. Name it "my-theme".

Open that folder, and create a new file called index.html. Also create one called css.css.

Open index.html for editing, and paste in the following:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My Theme</title>
		<link rel="stylesheet" href="css.css">
	</head>
	<body>
		<div class="wrap">
			<div class="banner">
				<!-- [STATIC_ULTRA_WEBSITE_TITLE] -->
			</div>
			<div class="main">
				<div class="page-content">
					<div class="breadcrumb">
						<!-- [STATIC_ULTRA_BREADCRUMB] -->
					</div>
					<div class="page-content">
						<!-- [STATIC_ULTRA_PAGE_CONTENT] -->
					</div>
				</div>
				<div class="sidebar">
					<div class="navigation">
						<!-- [STATIC_ULTRA_NAVIGATION] -->
					</div>
					<div class="theme-switcher">
						<!-- [STATIC_ULTRA_THEME_SWITCHER] -->
					</div>
				</div>
			</div>
			<div class="footer">
				<!-- [STATIC_ULTRA_FOOTER] -->
			</div>
		</div>
	</body>
</html>

You may have noticed the theme references a main.css. Static Ultra themes use relative URLs so you can develop the theme as it's own standalone thing, and it will automatically transform your src's and href's to the correct URLs when it pulls the theme into your website.

So let's create that main.css. Create a new file in the same folder as the theme's index.html called main.css. Open it up for editing and pop in the following:

*
{
	margin:0;
	padding:0;
	font-size:1rem;
}

a
{
	color:brown;
}

body
{
	background-image:url(mountain.jpg);
	background-size:cover;
	background-attachment:fixed;
	background-repeat:no-repeat;
	font-family:georgia, serif;
}

.wrap
{
	width:960px;
	max-width:100%;
	margin:1rem auto;
	background:rgba(255,255,255,0.75);
	padding:1rem;
	border-radius:1rem;
}

code
{
	background:rgba(0,0,0,0.05);
}

.banner
{
	text-align:center;
	font-size:2rem;
	font-weight:bold;
	color:green;
	letter-spacing:0.5rem;
	padding-bottom:0.5rem;
	border-bottom:solid 1px grey;
	margin-bottom:0.5rem;
}

.main
{
	display:flex;
}

.page-content
{
	margin-right:0.5rem;
}

.sidebar
{
	margin-left:0.5rem;
}

/* Left column stuff */

.breadcrumb
{
	margin-bottom:1rem;
}

/* Right column stuff */

.navigation
{
	width:300px;
}

.navigation ul
{
	display:block;
	margin:0;
}

.navigation li
{
	display:block;
	border-bottom:solid 1px grey;
	margin-bottom:0.5rem;
	padding-bottom:0.5rem;
}

.theme-switcher
{
	width:300px;
	text-align:center;
}

/* Footer */

.footer
{
	padding-top:0.5rem;
	border-top:solid 1px grey;
}

.footer p
{
	margin:0;
}

The theme uses a background image, so download this image and put it in the same folder.

Last but not least, you need to tell Static Ultra that the theme exists! Open up config.js for editing and look for the following:

// Themes you have installed on your site!
this.THEME_IDS = 
[
	[ 
		"default",
		"Static Ultra Default"
	]

];

You've probably already figured out what to do:

// Themes you have installed on your site!
this.THEME_IDS = 
[
	[ 
		"default",
		"Static Ultra Default"
	],

	[ 
		"my-theme",
		"My Theme"
	]
];

Visit your site and switch to the new theme. And you're done! I hope this gives you enough information to make your own Static Ultra themes. You can also download more Static Ultra themes for free here.


Next, we're going to look at adding sections (folders). For example you might wanna have a section for your blog, or different categories.

» Adding Folders