Time for some fun. We're going to make a very simple Static Ultra theme from scratch to show you how to do it. The theme we're making isn't the most elegant theme in the world...
...but it should suffice to show you can to create your own Static Ultra themes. Anything you can do in a traditional website theme, you can also do in a Static Ultra theme, so if you're good at that sorta thing, you'll have a lot of fun making Static Ultra themes!
First, go to your su-themes folder, and create a new folder in there. Name the folder "my-theme".
Open that folder, and create a new file called "theme.html". Open it up for editing, and paste in the following code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blank Theme</title>
<link rel="stylesheet" href="theme.css">
</head>
<body>
<div class="wrap">
<div class="header section">
<div class="site-title">
<!-- [SU_SITE_TITLE] -->
</div>
<div class="site-slogan">
<!-- [SU_SITE_SLOGAN] -->
</div>
</div>
<div class="breadcrumb section">
<!-- [SU_BREADCRUMB] -->
</div>
<div class="menu section">
<!-- [SU_MENU] -->
</div>
<div class="page-content section">
<!-- [SU_PAGE_CONTENT] -->
</div>
<div class="theme-switcher section">
<!-- [SU_THEME_SWITCHER] -->
</div>
<div class="footer section">
<!-- [SU_FOOTER] -->
</div>
</div>
</body>
</html>
This is a very simple layout for demonstration purposes, but you can use whatever HTML you like! When Static Ultra processes your theme, it will find the Static Ultra tags, like title, slogan, breadcrumb etc, and swap them for the appropriate HTML.
You may have noticed the theme references a "theme.css". It is a relative URL like you would normally expect. When Static Ultra processes your theme, it will automatically turn relative URLs into the correct URL relative to the current page (so basically you don't have to worry about it)! Static Ultra will do this for any "src" or "href", which means you can use stylesheets, scripts and images in your theme HTML.
Static Ultra will not alter "src" or "href" URLs that start with "https://", "http://" or just "/", which means you can use external libraries (like Bootstrap, JQuery), and also domain relative URLs in your themes.
Time to actually create that theme.css. Create a new file in the same folder as theme.html and name it theme.css. Open it up for editing and paste in the following:
/* Basics/reset */
*
{
margin:0;
padding:0;
font-size:1rem;
}
a
{
color:green;
}
body
{
font-family:arial, sans-serif;
background:darkseagreen;
}
h1, p
{
margin-bottom:1rem;
}
*:last-child
{
margin-bottom:0;
}
/* Main layout */
.wrap
{
width:960px;
max-width:100%;
margin:1rem auto;
background:honeydew;
}
.section
{
border-bottom:solid 1px darkseagreen;
padding:0.5rem;
}
.header
{
text-align:center;
}
.site-title
{
color:green;
font-size:2rem;
font-weight:bold;
margin-bottom:0.5rem;
}
.site-slogan
{
color:grey;
font-size:1.5rem;
font-weight:bold;
}
.breadcrumb
{
text-align:center;
}
.menu
{
text-align:center;
}
.page-content
{
padding:1rem;
}
.theme-switcher
{
text-align:center;
}
.footer
{
text-align:center;
border-bottom:0;
}
/* Make menu horizontal */
.menu ul
{
display:block;
}
.menu li
{
display:inline;
margin-right:1rem;
}
.menu li:last-child
{
margin-right:0;
}
Last but not least, you need to tell Static Ultra that the theme exists! Open up su-config.js for editing and look for the following:
this.THEME_IDS =
[
[
"default",
"Static Ultra Default",
true
]
];
this.THEME_DEFAULT_ID = "default";
You've probably already figured out what to do:
this.THEME_IDS =
[
[
"default",
"Static Ultra Default",
true
],
[
"my-theme",
"My Theme",
true
]
];
this.THEME_DEFAULT_ID = "my-theme";
Visit your site and press Ctrl+F5. You should see your new theme, you can use the Theme Switcher dropdown to switch between your two themes.
Your should now look something like this:
Like I say, it's not the most amazing looking theme in the world, but I hope it demonstrates how easy it is to make your own!
You now know enough to start making your own themes! The rest of this page explains a few advanced theme-related items, but if you're happy with the information you have, feel free to move onto the next page, Adding Folders!
There may be times when you want to force a page to have a certain theme regardless of the user's selection. To do this, you add the theme in the normal way as per above. Then in the page code you can put:
<!-- [SU_FORCE_THEME]my-theme[/SU_FORCE_THEME] -->
Right after the opening <body> tag to achieve the desired result. There is an example of this nya. On that page the Static Ultra Default Theme is loaded regardless of your current selection.
When processing your theme, Static Ultra will ignore anything inside of an ignore tag. Take a look at the following, adjusted theme.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blank Theme</title>
<link rel="stylesheet" href="theme.css">
</head>
<body>
<div class="wrap">
<div class="header section">
<div class="site-title">
<!-- [SU_SITE_TITLE] -->
<!-- [SU_IGNORE] -->
My Theme
<!-- [/SU_IGNORE] -->
</div>
<div class="site-slogan">
<!-- [SU_SITE_SLOGAN] -->
<!-- [SU_IGNORE] -->
It's totally the best theme ever!
<!-- [/SU_IGNORE] -->
</div>
</div>
<div class="breadcrumb section">
<!-- [SU_BREADCRUMB] -->
<!-- [SU_IGNORE] -->
<a href="#">Path</a> /
<a href="#">To</a> /
Page
<!-- [/SU_IGNORE] -->
</div>
<div class="menu section">
<!-- [SU_MENU] -->
<!-- [SU_IGNORE] -->
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<!-- [/SU_IGNORE] -->
</div>
<div class="page-content section">
<!-- [SU_PAGE_CONTENT] -->
<!-- [SU_IGNORE] -->
<h1>Page content</h1>
<p>
This is just sample text! This is just sample text!
This is just sample text! This is just sample text!
This is just sample text! This is just sample text!
</p>
<p>
This is just sample text! This is just sample text!
This is just sample text! This is just sample text!
This is just sample text! This is just sample text!
</p>
<!-- [/SU_IGNORE] -->
</div>
<div class="theme-switcher section">
<!-- [SU_THEME_SWITCHER] -->
<!-- [SU_IGNORE] -->
Theme Switcher Placeholder
<!-- [/SU_IGNORE] -->
</div>
<div class="footer section">
<!-- [SU_FOOTER] -->
<!-- [SU_IGNORE] -->
Footer Placeholder
<!-- [/SU_IGNORE] -->
</div>
</div>
</body>
</html>
When Static Ultra loads your theme, everything inside the ignore blocks will be skipped, and not included in your site/page. This means you can put placeholders in and develop the theme independently of Static Ultra! Click here to see the theme running on its own outside of Static Ultra.
If you intend to make your theme available for others to use, you may want to detect which Static Ultra features they are using. Take a look at the following version of theme.html. I've taken out the ignores for a moment so we can focus on the feature detecting.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blank Theme</title>
<link rel="stylesheet" href="theme.css">
</head>
<body>
<div class="wrap">
<div class="header section">
<div class="site-title">
<!-- [SU_SITE_TITLE] -->
</div>
<!-- [SU_SITE_SLOGAN_ENABLED] -->
<div class="site-slogan">
<!-- [SU_SITE_SLOGAN] -->
</div>
<!-- [/SU_SITE_SLOGAN_ENABLED] -->
</div>
<!-- [SU_BREADCRUMB_ENABLED] -->
<div class="breadcrumb section">
<!-- [SU_BREADCRUMB] -->
<!-- [SU_IGNORE] -->
<a href="#">Path</a> /
<a href="#">To</a> /
Page
<!-- [/SU_IGNORE] -->
</div>
<!-- [/SU_BREADCRUMB_ENABLED] -->
<!-- [SU_MENU_ENABLED] -->
<div class="menu section">
<!-- [SU_MENU] -->
</div>
<!-- [/SU_MENU_ENABLED] -->
<div class="page-content section">
<!-- [SU_PAGE_CONTENT] -->
</div>
<!-- [SU_THEME_SWITCHING_ENABLED] -->
<div class="theme-switcher section">
<!-- [SU_THEME_SWITCHER] -->
</div>
<!-- [/SU_THEME_SWITCHING_ENABLED] -->
<div class="footer section">
<!-- [SU_FOOTER] -->
</div>
</div>
</body>
</html>
You may have noticed that the slogan is wrapped in:
<!-- [SU_SITE_SLOGAN_ENABLED] -->
and
<!-- [/SU_SITE_SLOGAN_ENABLED] -->
and the breadcrumb is wrapped in
<!-- [SU_BREADCRUMB_ENABLED] -->
and
<!-- [/SU_BREADCRUMB_ENABLED] -->
...and so on.
If the person using this theme decides not to use Static Ultra's slogan or breadcrumb, by setting them to false in their config file, these sections will be skipped by Static Ultra.
This enables you to develop themes which adapt to other Static Ultra user's preferences.
That's all for themes! Next, we're going to look at adding sections (folders) to your Static Ultra website. For example you might wanna have a section for your blog, or different categories...