Typemill   ›   Developer Guide   ›   Examples   ›   Example Theme

Example Theme for Typemill

A basic Typemill theme consists of several essential files. In this example, we'll go through the steps to create a simple theme.

Marie Curie

Creating a theme for Typemill allows you to fully customize the look and feel of your website. In this example, we'll go through the steps to create a simple theme, register it, and structure its files.

Theme Directory Structure

A basic Typemill theme consists of several essential files. Your theme folder should look like this:

  • index.html: The main template file for the theme.
  • styles.css: Contains the styles for the theme.
  • README.md: A description of the theme.

Defining the Theme

In the index.html, you define the structure of your page using standard HTML. Typemill will replace dynamic content with its own data, such as posts or user information.

Here’s an example of a simple theme structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ site.title }}</title>
    <link rel="stylesheet" href="/assets/styles.css">
</head>
<body>
    <header>
        <h1>{{ site.title }}</h1>
    </header>

    <main>
        <article>
            <h2>{{ page.title }}</h2>
            <p>{{ page.content }}</p>
        </article>
    </main>

    <footer>
        <p>Powered by Typemill</p>
    </footer>
</body>
</html>

This template uses Typemill's placeholder variables like {{ site.title }} and {{ page.title }}, which will be replaced with actual content when rendered.

Styling the Theme

In styles.css, you define the visual styles for the theme. Here’s a simple example of how you might style the header:

body {
    font-family: Arial, sans-serif;
}

header {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

You can add as many styles as needed to customize the theme's appearance.

Activating the Theme

To activate your theme in Typemill, place it in the themes directory and navigate to the Themes section in the admin panel. Select your theme and activate it. Once activated, Typemill will start using the theme for your website.

Conclusion

Creating a custom theme for Typemill is simple and allows for full control over the design and layout. By combining HTML, CSS, and Typemill’s dynamic variables, you can create a theme that matches your needs and preferences.