Thursday, 1 January, 1970

Create a custom theme

We are using the Skrivr default theme as an example. It consists of five HTML-files:

index.html
header.html
article.html
category.html
footer.html

And three basic folders:

The theme is essentially plain HTML with some Skrivr specific template-tags that pick up and render your content.

Posts and pages

Skrivr divides your content into two types; "posts" and "static pages".

Posts and static pages are displayed in individual menus using the {{ menu|raw }} and {{ static_menu|raw }} template tags.

Both menus can be placed anywhere you like in your template.

The latest post is displayed on your site's main page. The other posts are sorted under their respective categories in the main menu. To indicate that what you've written is a post, name your text file according to this convention:

Categoryname_Headline_20110101.txt

For example:

Food I like_Best sushi in town_20110824.txt

The post "Best sushi in town" will now appear in the category "Food I like", as will any other post when the files name starts with "Food I like".

All of the other pages, like "About" and "Contact" are static pages and linked from the static menu. These pages are created when you name the text file you're writing like this:

Static_PageTitle_20110101.txt

For example:

Static_Contact us_20110506.txt

Code and template-tags

Skriver has a number of pre set template tags and functions that you can use in your theme:

{{ menu|raw }}
Renders the main menu.

{{ home }}
Renders the url to your home directory.
Tip! Use {{ home }} when you include images in your posts:
{{ home }}/image/imagename.jpg

{{ body_id }} If you put ID: id-name on the first line in your text-files Skrivr will pick it up and use it as the id of the body-tag. This is very useful and powerful when creating custom post designs or adding services like Disqus to your Skrivr site.

{{ body_class }} Adds classes to the body-tag. Gives you more CSS-control when designing your own themes.

{{ latest_post|raw }}
Picks up and displays the body of the latest post. Can only be used for the main page (index.html). Use this tag as an alternative to the {{ post_feed }} when you just want the latest posts displayed on your main page. To display the headline just place {{ headline }} just before the {{ latest_post }}.

{{ post_feed }}
Loops through your posts and displays the parts you choose; like {{ headline }}, {{ body|raw }} or whatever parts you choose. Posts are displayed in chronological order. For examples see "The post-feed"-section below.

{{ excerpt }}
Renders the first 300 characters of the post. Maintains html. This is the perfect tag for a category page or displaying post snippets in a sidebar. For examples see the "category.html"-section below.

{{ permalink }}
Renders the permalink to the post.

{{ title }}
Renders the slug of the post (i.e. the filename). A post saved as "Food I like_Best sushi in town_20110824.txt" will have the url "http://skrivr.com/userdomain/food-i-like/best-sushi-in-town" where "best-sushi-in-town" is he slug that {{ title }} renders.

{{ headline }}
Renders the headline of the post. (To be exact; it picks up the first h1 from the post and displays that.)

{{ categorylink }}
Renders the permalink to the category which the post belongs to.

{{ body|raw }}
Gets the content of the post.

{{ date }}
Displays the post's publishing date.

{{ category }}
Displays the category to which the post belongs.

{{ static_menu|raw }}
Renders the static pages menu.

{{ template_path }}
Renders the permalink to your themes within your templates folder. This is handy to use when you wand to add

To create templates that are easier to use and reusable you can use includes:

{% include 'header.html' %}

The post-feed

It's very easy to create a "loop" that outputs all your posts. In the Skrivr default themes we used the post-feed like this:

{% for post in post_feed %} 
    <div class="post"> 
        <p class="date">{{ post.date }} | in <a href="{{ post.categorylink }}">{{ post.category }}</ a></p> 
        <a href="{{ post.permalink }}">
            <h1>{{ post.headline }}</h1>
        </a> 
        {{ post.body|raw }} 
    </div> 
{% endfor %}

It's a plain for-loop that says; for every post in the post-feed create a div with the class "post" and in that div display date, category and the body of the post.

Note! in the for-loop you have to prefix the body tag with "post" so that it looks like this {{ post.body|raw }}.

The main menu

When you render the menu via the {{ menu|raw }} template tag Skrivr picks up the names of all your text files and sorts them into an array.

The array is then rendered as a list divided into sections and posts. This is how it looks.

The classes are added by Skrivr.

<ul class="category-list">
    <li class="category-title">
        <h3>Examples</h3>
        <ul class="post-list">
            <li class="post-title">
                <a href="examples/getting-started-with-skrivr"> 
                    Getting started with Skrivr
                </a>
            </li>
            <li class="post-title">
                <a href="examples/skrivr-demotext">
                    Skrivr Demotext
                </a>
            </li>
            <li class="post-title">
                <a href="examples/working with-templates">
                    Working with templates
                </a>
            </li>
        </ul>
    </li>
</ul>

Depending on where in your template files you place the template tag, and how you style the menu-list in your CSS, you will be able to style the menu almost any way you like.

The static menu

Skrivr renders static pages via the template tag {{ static_pages|raw }} and the outputted markup looks like this:

<ul class="static-list">
    <li class="static-title">
        <a href="static/about"> About </a>
    </li>
    <li class="static-title">
        <a href="static/contact"> Contact us</a>
    </li>
    <li class="static-title">
        <a href="static/find-us"> Find us</a>
    </li>
</ul>

This menu can be placed anywhere in your HTML files and styled via your CSS.

Note that Skrivr recognizes file names both with and without spaces.

With: Static_ PageTitle _20110101.txt

Without: Static_PageTitle_20110101.txt

Default content

This How-To guide and the "Getting started with Skrivr.txt" file are added automatically when Skrivr is installed in your Dropbox folder.

Feel free to delete them, or even better remove their publishing dates and keep them in your Dropbox folder for reference.

Examples_Getting started with Skrivr_20110622.txt
Examples_Skrivr Demotext_20110501.txt
Examples_Working with your templates_20110621.txt

The default themes

Here is what they look like by default:

Header.html

<html>
    <body>
        <div class="logo">
            <a href="{{ home }}"><img src="{{ template_path }}/imgs/logo.png"></a>
        </div>
        <div id="menu-button" class="closed">Main menu </div>
        <div id="menu">
            {{ menu|raw }}
        </div>

index.html

    {% include 'header.html' %} 
    <div id="content"> 
        {% for post in post_feed %} 
            <div class="post"> 
                <p class="date">{{ post.date }} | in <a href="{{ post.categorylink }}">{{ post.category }}</ a></p> 
                <a href="{{ post.permalink }}">
                    <h1>{{ post.headline }}</h1>
                </a> 
                {{ post.body|raw }} 
            </div> 
        {% endfor %} 
    {% include 'footer.html' %}

footer.html

    </div> <!-- END #CONTENT -->
    <div id="footer">
        {{ static_pages|raw }}
        <p><small>Copyright 2011 Nofont</small></p>
    </div>
    <!--[if IE ]>
        <script src="{{ template_path }}/js/respond.min.js"></script>
    <![endif]-->
    </body>
</html>

article.html

This is the file that renders your posts.

{% include 'header.html' %}
<div id="content">
    <p class="date">{{ date }} | in {{ category }}</p>
    {{ body|raw }}
{% include 'footer.html' %}

category.html

{% include 'header.html' %}
<div id="content">
    <h1 class="category">{{ category }}</h1>
    <ul>
        {% for post in post_feed %}
        <li class="excerpt">
            <p class="date"> {{ post.date }} </p>
            <a href="{{ post.permalink }}"><h1>{{ post.headline }}</h1></a>
            <a href="{{ post.permalink }}">
            {{ post.excerpt|raw }}
            </a>
        </li>
        {% endfor %}
    </ul>
{% include 'footer.html' %}

Adding a sidebar (this is a good hands-on example to try for yourself)

First create the sidebar file:

sidebar.html

Add some content to it. In our case a link to the Skrivr Twitter page and some other things we want our visitors to see:

<div id="sidebar">
        <h3>Follow Skrivr here</h3>
        <ul>
            <li>
            <a href="http://www.twitter.com/skrivr">Twitter</a>
        </li>
            <li>
            Some other stuff
        </li>
        </ul>
</div> <!-- END SIDEBAR -->

When you are done with your html-file include it in the header.html via the include tag:

{% include 'sidebar.html' %}

And thats it.

Copyright 2011 Nofont/Sharpenr.