Logo
en nl

HTML in Paspartout - 3. specific template

last updated: 17/01/2012
difficulty: medium
licenses: Shop, Pro, Biz
This tutorial will explain you how to create a HTML template for a specific page. Let's say you want to add a piece of text at the top your blog, like a welcome message.

Create the template

Head over to your theme editor and create a new html template. Give it a name and choose "specific page" from the dropdown menu.

Medium-new-message

Because Paspartout doesn't know for which page you are creating this template, the contents of this specific template will be empty. We only want to add a little HTML to the existing structure se we need to obtain the standard blog code. This can be done by creating a new HTML "blog" template, copying its contents to the specific template and deleting the blog template again. For your convenience, this is the code for a blog page so you don't need to go through that process:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<div id="blog" class="blog main jacket">

  {% if posts %}

    {% for post in posts %}

      {% if forloop.index > 1 %}
        <hr class="post-separator" />
      {% endif %}

      <div id="post_{{ post.id }}" class="{{ post.class }}">
        <h2 class="title">
          <a href="{{ post.url }}">{{ post.name }}</a>
        </h2>

        <h5 class="published-at">
          {{ post.published_at }}
        </h5>

        <a href="{{ post.edit_url }}" class="edit-post" style="display:none;">{{ 'blog.edit' | t }}</a>

        {% for block in post.blocks %}
          <div class="{{ block.class }}">
            {{ block.html }}
          </div>
        {% endfor %}

        {% if post.share_buttons %}
          <div class="share-buttons">
            {{ post.share_buttons }}
          </div>
        {% endif %}

        {% if post.comments %}
          {{ post.comments }}
        {% endif %}

      </div>
    {% endfor %}

    {{ pagination }}

  {% else %}
    <h2>{{ 'blog.no_posts' | t }}</h2>
  {% endif %}

</div>

<div class="blog meta jacket">

  {% if side_bar_content %}
    <div class="section sub-agent">
      {{ side_bar_content }}
    </div>
  {% endif %}

  {% for widget in widgets %}
    {{ widget }}
  {% endfor %}

</div>

<div class="clearer"></div>

Modifying the HTML code

Now open your specific template and add the following code on line 2:

1
2
3
4
5
6
<h2 class="title">
  Welcome
</h2>
<div class="block textarea">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisl purus, aliquet eu tempor eget, laoreet in lectus. Proin semper odio quis mauris semper ornare.
</div>

Of course we want a separator between the welcome message and the first post. By default the first post does not get a separator. Change this part:

1
2
3
{% if forloop.index > 1 %}
  <hr class="post-separator" />
{% endif %}

Into this:

1
<hr class="post-separator" />

Now save and that's is for coding.

Add the template to your page

Head over to the pages menu and click on the settings button for the blog page to which you want to add the template. Scroll down, choose the newly created template from the dropdown menu and save. You're done!

Medium-assign-template

related articles

HTML in Paspartout - 1. introduction HTML in Paspartout - 2. available variables HTML in Paspartout - 4. Images