Get started

Let's start coding!

Template syntax

Syntax is very cool and easy to learn

Contextuals objects

Theses objects are available as global objects.

Blog

Your blog object contains some data as title, description and some objects and methods.

Parameter Description
Blog.Title Display blog title
Blog.MainHost Display blog main host (yourblog.overblog.com)
Blog.Url Display blog url (http://yourblog.overblog.com)
Blog.Avatar Display blog's avatar url
Blog.FaviconUrl Display blog's favicon url
Blog.Description Display blog's description
Blog.Owner.Nickname User nickname
Blog.Owner.Avatar User avatar url
Blog.Owner.Bio User bio (set in the user settings)
Blog.Owner.City User city (set in the user settings)
Blog.LastUpdateDate Display blog's last update as a Date object
Blog.Lang Display blog's lang
Blog.RssUrl Display blog's RSS feed url
Blog.PostCount Display the number of posts published on the blog
Blog.Posts( integer number [, array sources] [, boolean included]) Get a list of blog's posts optionally filtered by number and source as an array of Post objects
number
Number of posts you want to list. Must be an integer from 0 to 25
sources
Filter posts by source. Must be an array of social networks as defined in Post.Sources.
included
True if you want post from all specified sources (default)
False if you want posts from all sources but not specified ones.
{# List 10 last posts from all sources #}
{% list Blog.Posts %}
<h1>{{ Post.Title }}</h1>
{% endlist %}

{# List 12 last posts from all sources #}
{% list Blog.Posts(12) %}
<h1>{{ Post.Title }}</h1>
{% endlist %}

{# List 8 last posts from Overblog #}
{% list Blog.Posts(8, ['OB']) %}
<h1>{{ Post.Title }}</h1>
{% endlist %}

{# List 2 last posts from Facebook
	or Twitter #}
{% list Blog.Posts(2, ['FB', 'TW']) %}
<h1>{{ Post.Title }}</h1>
{% endlist %}

{# List 10 last posts from all sources
	except Facebook and Twitter #}
{% list Blog.Posts(10, ['FB', 'TW'], false) %}
<h1>{{ Post.Title }}</h1>
{% endlist %}

Blog.TaggedPosts( string tag [, integer limit]) Get a list of posts filtered by tag as an array of TaggedPost objects
tag
The tag you want to search
limit
Max number of TaggedPost you want
{# List 10 posts with `cat` tag #}
{% list Blog.TaggedPosts('cat') %}
<h1>{{ TaggedPost.Title }}</h1>
{% endlist %}

{# List 15 posts with `rainbow` tag #}
{% list Blog.TaggedPosts('rainbow', 15) %}
<h1>{{ TaggedPost.Title }}</h1>
{% endlist %}

Blog.Archives Get a list of archives as an array of Archive objects

{# Display a list of all years since the creation
	of the blog and for each, a list of all month
	with the number of posts #}
<nav class="archives">
	<ul>
		{% list Blog.Archives %}
		<li>
			{{ Archive.Year }}
			<ul>
				{% list Archive.Months %}
				<li>
					<a href="{{ Month.Url }}">
						{{ Lang.Get(Month.Name) }}
						({{ Month.PostCount }})
					</a>
				{% endlist %}
			</ul>
		</li>
		{% endlist %}
	</ul>
</nav>

Blog.PageCount Display the number of pages published on the blog
Blog.Pages Get a list of all the blog's pages as an array of Page objects
Blog.TaggedPages( string tag [, integer limit]) Get a list of pages filtered by tag as an array of TaggedPage objects
tag
The tag you want to search
limit
Max number of TaggedPage you want
{# List 10 pages with `cat` tag #}
{% list Blog.TaggedPages('cat') %}
<h1>{{ TaggedPage.Title }}</h1>
{% endlist %}

{# List 15 pages with `rainbow` tag #}
{% list Blog.TaggedPages('rainbow', 15) %}
<h1>{{ TaggedPage.Title }}</h1>
{% endlist %}

Blog.PostsTags( integer limit [, string sort]) Get a list of all the blog's posts tags as an array of PostsTag objects
limit
Number of tags you want to list
sort
Sort by
count
number of occurence (default)
index
alphabetical order
Blog.PagesTags( integer limit [, string sort]) Get a list of all the blog's pages tags as an array of PagesTag objects
limit
Number of tags you want to list
sort
Sort by
count
number of occurence (default)
index
alphabetical order
Blog.isAdEnabled Return true if ads in page can be display

Display some blog informations :

<!-- Display some blog's informations -->
<div    class="blog-description"
        style="background-image: url('{{ Blog.Avatar }}');">
    <h1>{{ Blog.Title }}</h1>
    <p>{{ Blog.Description }}</p>
</div>

<!-- List some tags -->
<div class="tags-cloud">
    {% if Blog.PostsTags is not null %}
    <ul>
        {% list Blog.PostsTags(20, 'index') %}
        <li>{{ PostsTag.Title }}</li>
        {% endlist %}
    </ul>
    {% endif %}
</div>

<!-- List some pages -->
<div class="pages-list">
    {% if Blog.ListPages is not empty %}
    <ul>
    {% list Blog.ListPages %}
    <li>
        <a href="{{ ListPage.Url }}">
            {{ ListPage.Title }}
        </a>
    </li>
    {% endlist %}
    </ul>
    {% endif %}
</div>

PageTitle

Current page default title : blog title, post title, search title…


<html>
	<head>
		<title>{{ PageTitle }}</title>
	</head>
	<body>
		<h1>
			{{ PageTitle }}
		</h1>
	</body>
</html>
	

Posts

Posts list in the current context. If you are on the blog index, a tag summary or a search result, you'll have the n posts where n is set with the displayArticlesLimit parameter in theme config. Then, the offset will change with the page number. If you are on a single post, you'll have only the current post.


{# Display a list of posts links #}
<nav>
	<ul>
		{% list Posts %}
		<li>
			<a href="{{ Post.Url }}">
				{{ Post.Title }}
			</a>
		</li>
		{% endlist%}
	</ul>
</nav>

Post

This Post object is available on a single post or page display. You can use isSingle to know if the object would be present.


{# Test if we are on a single post display #}
{% if isSingle %}

<h1>
	{{ Post.Title}}
</h1>

{{ Post.Body }}

{% endif %}

This object is available on a search result index. You can use isSearch to know if the object would be present.

Parameter Description
Search.Keyword Display the current search keyword
Search.ResultCount Display the number of results

{# Test if we are on a search result index #}
{% if isSearch %}

{# if we have no result, display a message #}
{% if Search.ResultCount == 0 %}
<p>
	No result for {{ Search.Keyword }} :(
</p>
{# if we have some, display the count #}
{% else %}
<p>
	{{ Search.ResultCount }}
	result{% if Search.ResultCount > 1 %}s{% endif %}
	for “{{ Search.Keyword }}”
</p>
{% endif %}

{% endif %}

Tag

This Tag object is available on a tag index. You can use isTag to know if the object would be present.


{# Test if we are on a tag index #}
{% if isTag %}

{# if we have no posts with this tag, display a message #}
{% if Tag.PostCount == 0 %}
<p>
	No post with tag “{{ Tag.Title }}” :(
</p>
{# if we have some, list them #}
{% else %}
<h1>
	{{ Tag.PostCount }} posts with tag “{{ Tag.Title }}”
</h1>
{% list Posts %}
<h2>
	<a href="{{ Post.Url }}">
		{{ Post.Title }}
	</a>
</h2>
{% endlist %}
{% endif %}

{% endif %}

Some informations about navigation. Its content change with the context.

Parameter Description

<nav class="pagination">
	<div class="next">
		
		{% if Navigation.NextPage %}
		<a href="{{ Navigation.NextPage }}">
			Older posts
		</a>
		{% endif %}

		{% if Navigation.NextPost %}
		<a 	href="{{ Navigation.NextPost.Url }}"
			{%if Navigation.NextPost.Cover %}
			style="background-image('{{ Navigation.NextPost.Cover.Url|resize(50) }}')"
			{% endif %}>
			{{ Navigation.NextPost.Title }}
		</a>
		{% endif %}

	</div>

	<div class="prev">
		
		{% if Navigation.PreviousPage %}
		<a href="{{ Navigation.PreviousPage }}">
			Newer posts
		</a>
		{% endif %}

		{% if Navigation.PreviousPost %}
		<a 	href="{{ Navigation.PreviousPost.Url }}"
			{%if Navigation.PreviousPost.Cover %}
			style="background-image('{{ Navigation.PreviousPost.Cover.Url|resize(50) }}')"
			{% endif %}>
			{{ Navigation.PreviousPost.Title }}
		</a>
		{% endif %}

	</div>

</nav>

SpecialContent

This parameter is needed to display special content on your blog like contact form. You can't alter its content, but you can place it everywhere you want into your markup


{# Place your special content ino a specific container
	to design it #}
{% if isSpecial %}
<div class="special-ctn">
	{{ SpecialContent }}
</div>
{% endif %}

{# or simply design it like posts #}
<div class="post">
	<h1>{{ Post.Title}}</h1>
	{{ Post.Body }}
	{{ SpecialContent }}
</div>

Lang

Lang helps you to translate your theme. Simply call Lang.Get method with one of the available locales keys to retreive the localized version.

Parameter Description
Lang.Get( string key) Get a translated text from a locale key
key
Locale key. If the key does not exist, the key will be displayed.
Lang.Locale( string format, string separator) Get the locale from the current blog.
format
Optional. Could be 'full' or anything else.
separator
Optional. If the case of a 'full' format, you can choose the character in the middle of this format. "_" by default.

{# Will display "about the author" in english or "à propos de l'auteur" in french #}
{{ Lang.Get('about the author') }}

{# Will display "hello world" in any language #}
{{ Lang.Get('hello world') }}

{# You can use filters to alter the rendered text : #}
{{ Lang.Get('about the author')|capitalize }}

{# Will display "en" #}
{{ Lang.Locale() }}

{# Will display "en_US" #}
{{ Lang.Locale('full') }}

{# Will display "en-US" #}
{{ Lang.Locale('full', '-') }}

is

Utils to know on what page type we are

Parameter Description
isHome Return True if the current page is the blog index (home or home pagination). A Posts list will be available.
isIndex Alias of isHome
isSingle Return True if the current page is a post or page display. A Post object will be available.
isSearch Return True if the current page is a search results index. A Search object will be available.
isArchive Return True if the current page is an archive index
isTag Return True if the current page is a tag index. A Tag object will be available.
isPage Return True if the Post from the current page is a Page.
isPost Return True if the Post from the current page is a Post (not a Page).
isSpecial Return True if the current page is a special page (contact, email…). A SpecialContent object will be available.
isPageList Return True if the current page is a list of Pages
isSocial Return True if the current page is showing filtered Posts from sources (via the url "/social/*" or "/social/not/*").

{% if isIndex %}
<h1>Home page</h1>

{% elseif isPage %}
<h1 class="page">{{ Post.Title }}</h1>

{% elseif isSingle %}
<h1>{{ Post.Title }}</h1>

{% elseif isSearch %}
<h1>Search results for “{{ Search.Keyword }}”</h1>

{% elseif isArchive %}
<h1>Posts from the past</h1>

{% elseif isTag %}
<h1>Posts with the tag “{{ Tag.Title }}”</h1>

{% elseif isSpecial %}
<p>Nothing to do here</p>

{% endif %}

Generic objects

Generic object are objects available as parameters of contextuals objects.

Date

Display an ISO 8601 formatted date. You can use datel filters to change the display.

Image

Image object contains all informations needed to display an image

Parameter Description
Image.Title Display image title
Image.Url Image original size url

Post

A Post is a contextual object.

Parameter Description
Post.Title Display the post title
Post.Body( mixed rendertype) Display post's body or get an array of Section objects
rendertype
Type of rendering. Value can be an integer or a string :
'All'
The entiere post will be displayed as a string (default)
'Snippet'
A snippet of the post will be displayed as a string using the default values (see Post.Snippet)
integer value
Get a list of Section object from first to the given value
{# Display the entire post #}
{{ Post.Body }}

{# Display the entire post too #}
{{ Post.Body('All') }}

{# Display the entire post again #}
{{ Post.Body(0) }}

{# Display a snippet #}
{{ Post.Body('Snippet') }}

{# Display the first section #}
{{ Post.Body(1) }}
Post.Date Get the post publication date as a Date object
Post.Url Display the post absolute url
Post.Permalink Same as Post.Url
Post.Cover Get the cover of the post as an Image object
Post.Author Get the post author as a User object
Post.ShowComments Test if the post have comments activated. The comments may be disabled on the entiere blog or on this post only. You can use this information if you use another comments service than Overblog or if you want to display a message.
{# So simple : if comments are activated, comments will
	be displayed. If not, nothing will be displayed #}
{{ Post.Comments }}

{# Custom service usage #}
{% if Post.ShowComments %}
<script type="text/javascript"
		src="http://mycoolcomments.com/init.js"></script>
{% endif %}

{# Display a message to user #}
{% if Post.ShowComments %}
{{ Post.Comments }}
{% else %}
<p>
	Comments are disabled :(
</p>
{% endif %}
Post.Comments Display comments list and form from Overlog service. It's an external service, you can't design it.
Post.CommentCount( [string singular] [, string plural] [, string none]) Display the number of comments of the post
singular
Text to display if there is only one comment or 0 if none is not defined. %c will be replaced by the number
plural
Text to display if there is many comments.%c will be replaced by the number
none
Text to display if there is no comment at all.
{# Display only the count #}
{{ Post.CommentCount }}

{# Display count with custom strings #}
{{ Post.CommentCount(
	'%c comment',
	'%c comments'
	) }}

{# Display count with custom strings again #}
{{ Post.CommentCount(
	'Oh! A comment!',
	'Yeah! %c comments!! Amazing!',
	'No comment :('
	) }}

Post.Tags Get a list of the post's tags as an array of Tag objects
Post.hasTag( string tag) Returns true if the post has the requested tag.
tag
The requested tag.
Post.Sections DOC.DESC.P.POST.P.POST.SECTIONS
Post.Sources Get a list of all the post's sources as an array of string :
OB
Overblog
FB
Facebook
FP
Facebook pages
TW
Twitter
GP
Google+
FS
Foursquare
IG
Instagram
YT
Youtube
FL
Flickr
TR
Tumblr
RS
RSS
PT
Pinterest
Post.FirstSource Return the first of the post's sources as a string.
Post.Type Display the post type :
Blog
a simple post
Micro
a flashpost never edited
Reblog
a repost
Post.Snippet( [integer length = 250] [, boolean preserve = true] [, string suffix = "..."]) Same as Post.Body('Snippet') : display a snippet of post content
length
Number of caracters to trim
preserve
Smart truncation. Do you want the snippet not to be cut in the middle of a word?
suffix
Suffix on the snippet when truncated.
Post.Share( [string display]) Display some social sharing buttons (Facebook, Twitter, Google+, Overblog)
display
Button style. Default display is horizontal with count on the right. This parameter can be:
top
Button will be displayed with count on the top
nocount
Horizontal display, but without count
{% if Custom('share_service') != 'None' %}
    <h3>{% if isPage %}{{ Lang.Get('Share this page') }}{% else %}{{ Lang.Get('Share this post') }}{% endif %}</h3>
    {% if Custom('share_service') == 'Google +' %}
        <div class="google-share">
            <iframe src="https://plusone.google.com/u/0/_/+1/fastbutton?url={{ Post.Permalink }}&amp;size={% if display == 'top' %}tall{% else %}medium{% endif %}&amp;annotation={% if display == 'nocount' %}none{% else %}bubble{% endif%}&amp;lang={{ Blog.Lang }}" frameborder="0" allowTransparency="1" scrolling="no" style="{% if display == 'top' %}height:60px;width:50px;{% else %}height:20px;width:90px;{% endif %}"></iframe>
        </div>
    {% elseif Custom('share_service') == 'Twitter' %}
        <div class="twitter-share">
            <iframe src="http://platform.twitter.com/widgets/tweet_button.html?url={{ Post.PermaLink|url_encode() }}{% if Custom('twitter_username') is not empty %}&amp;via={{ Custom('twitter_username') | escape }}{% endif %}&amp;text={% if Post.Title is not empty %}{{ Post.Title | escape }}{% elseif Post.Snippet is not empty %}{{ Post.Snippet | escape }}{% else %}{{ Blog.Title | escape }}{% endif %}&amp;lang={{ Blog.Lang }}&amp;count={% if display == 'top' %}vertical{% elseif display == 'nocount' %}none{% else %}horizontal{% endif %}" frameborder="0" allowTransparency="1" scrolling="no" style="{% if display == 'top' %}height:62px;width:71px;{% else %}height:20px;width:133px;{% endif %}"></iframe>
        </div>
    {% elseif Custom('share_service') == 'Facebook' %}
        <div class="facebook-share">
            <iframe src="//www.facebook.com/plugins/like.php?href={{ Post.Permalink }}&amp;send=false&amp;layout={% if display == 'top' %}box_count{% elseif display == 'nocount' %}{% else %}button_count{% endif %}&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font" frameborder="0" allowTransparency="1" scrolling="no" style="{% if display == 'top' %}height:61px;width:74px;{% else %}height:20px;width:133px;{% endif %}"></iframe>
        </div>
    {% elseif Custom('share_service') == 'All' or Custom('share_service') is empty %}
        <div class="google-share">
            <iframe src="https://plusone.google.com/u/0/_/+1/fastbutton?url={{ Post.Permalink }}&amp;size={% if display == 'top' %}tall{% else %}medium{% endif %}&amp;annotation={% if display == 'nocount' %}none{% else %}bubble{% endif%}&amp;lang={{ Blog.Lang }}" frameborder="0" allowTransparency="1" scrolling="no" style="{% if display == 'top' %}height:60px;width:50px;{% else %}height:20px;width:90px;{% endif %}"></iframe>
        </div>
        <div class="twitter-share">
            <iframe src="http://platform.twitter.com/widgets/tweet_button.html?url={{ Post.PermaLink|url_encode() }}{% if Custom('twitter_username') is not empty %}&amp;via={{ Custom('twitter_username') | escape }}{% endif %}&amp;text={% if Post.Title is not empty %}{{ Post.Title | escape }}{% elseif Post.Snippet is not empty %}{{ Post.Snippet | escape }}{% else %}{{ Blog.Title | escape }}{% endif %}&amp;lang={{ Blog.Lang }}&amp;count={% if display == 'top' %}vertical{% elseif display == 'nocount' %}none{% else %}horizontal{% endif %}" frameborder="0" allowTransparency="1" scrolling="no" style="{% if display == 'top' %}height:62px;width:71px;{% else %}height:20px;width:133px;{% endif %}"></iframe>
        </div>
        <div class="facebook-share">
            <iframe src="//www.facebook.com/plugins/like.php?href={{ Post.Permalink }}&amp;send=false&amp;layout={% if display == 'top' %}box_count{% elseif display == 'nocount' %}{% else %}button_count{% endif %}&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font" frameborder="0" allowTransparency="1" scrolling="no" style="{% if display == 'top' %}height:61px;width:74px;{% else %}height:20px;width:133px;{% endif %}"></iframe>
        </div>
    {% endif %}
{% endif %}
<div class="ob-share">
    {{ Post.RepostButton(display) }}
</div>
Post.RepostButton( [string display]) Display the repost button
display
Button style. Default display is horizontal with count on the right. This parameter can be:
top
Button will be displayed with count on the top
nocount
Horizontal display, but without count

This sample will display your post and some informations like author name, tags, publication date…


<div class="post">
	<h1>
		<a href="{{ Post.Url }}">
			{{ Post.Title }}
		</a>
	</h1>
	
	<div class="metas">
		<p>
			Published on
			{{ Post.Date|datel(Lang.Get("Default date format")) }}
			by {{ Post.Author.Nickname }}
		</p>

		{% if Post.Tags is not empty %}
		<div class="tags">
			{% list Post.Tags %}{#
			#}{% if loop.index > 1 %}, {% endif %}<a href="{{ Tag.Url }}">{#
				#}{{ Tag.Title }}{#
			#}</a>{#
			#}{% endlist %}
		</div>
		{% endif %}

		{% if Post.ShowComments %}
		<p>
			<a href="#comments">
				{{ Post.CommentCount(
					'%c comment',
					'%c comments'
				)}}
			</a>
		</p>
		{% endif %}
	</div>
	
	<div class="content">
		{{ Post.Body }}
	</div>

	{% if Post.ShowComments %}
	<p id="comments">Comments</p>
	{{ Post.Comments }}
	{% else %}
	<p>No comment</p>
	{% endif %}
</div>

Section

A Post body is set with some sections. Each section have a different type and a different content. You can customize display of each parts of each section. We don't recommend to work with it.

Parameter Description
Section.Type Each section have a type which can be :
audio
Audio section
file
File section
html
HTML section
images
Images section
link
Link section
map
Map section
quote
Quote section
text
Text section
video
Video section
Section.Body The simplest way to display section content
Section.Text

Available on link, quote and text sections.

Display the raw text.

Section.Image

Available on text sections.

Display the url of the image.

Section.Align

Available on text sections.

Display the alignement setting for the image. Could be left or right.

Section.Size

Available on text sections.

Display the size of the image. You should use it as a parameter of resize filter applied on the image.


{# Use the size set by the user on this post #}
{{ Section.Image|resize(Section.Size) }}

{# …or force a fixed size #}
{{ Section.Image|resize(200) }}

Section.Images

Available on images sections.

List of images as an array of Image objects.

Section.Layout

Available on images sections.

The layout choosen by the user as an integer.

Section.Snippet

Available on link sections.

The link snippet.

Section.SnippetTitle

Available on link sections.

The link snippet title.

Section.Embed

Available on video sections.

The embed html code to display the video player.

Section.Thumbnail

Available on video sections.

The video thumbnail image url.

Section.Html

Available on html sections.

The HTML code.

Section.Title

Available on audio and video sections.

The title of the section.

Section.Description

Available on audio, file, images, map and video sections.

The description of the section.

Section.Source

Available on audio sections.

The source of the sound. Probably Deezer.

Section.Artist

Available on audio sections.

The artist name of the sound.

Archive

This object contains a list of Month objects for a year. List it to display all the month of a year.

Parameter Description
Archive.Months List of months containing posts as an array of Month objects
Archive.Year The year label as a full year string

Month

This object contains a some informations about the posts published on this date

Parameter Description
Month.Name Display the month name
Month.Url Display the url to an index page listing all the posts of this month
Month.PostCount Display the number of posts published on this month
Month.Index Display the index of the month from 1 (january) to 12 (december)
Month.Year Display the current year on full year format
Month.isCurrent Return true is the month is the current one

Tag

This object contains informations about a tag

Parameter Description
Tag.Title Display the tag title
Tag.Url Display url to an index page listing all the posts with this tag
Tag.PostCount Display the number of posts with this tag

Custom

Custom is a function to get custom variable you declared in your theme inside meta tags.

You can specify some variables which will be displayed as form controls in the theme settings UI in the goal to help users to customize their theme without watching source code.

Just add a meta tag in your template with the following structure :

    <meta name="type:name:label.as.locale.key" default="default value" group="name" items="[item1, item2]" />
  • type is a string which cast the value and display a specific control. It may take the following values :
    string
    Display a simple text input and requires a free string value
    text
    Display a textarea and requires a text. The difference with the string type is that the value can have several lines. Twig syntax will not be interpreted.
    color
    Display a color picker and requires a color value as hexadecimal value
    list
    Display a select box and requires a contrained string value. The options are specified in the list attribute of the meta tag as an array of strings.
    boolean
    Display a checkbox and requires a boolean value
    image
    Display an image picker and requires an image url
    tag
    Display a tag picker and requires a constrained string from the list of all the blog's posts tags
  • name is the name you'll use as parameter to retreive the value
  • label is the displayed label in theme set interface.
    You can use the locales keys available in this list.
  • default is the control default value which will be applied while the user will not have set a custom one or when he will click on the control's rollback button
  • group is the name of the group where the control will be placed.
    You can use the locales keys available in this list.
  • items is the list of options when you use a list typed variable. List your values as a JSON array :
    items="[value1, value2]"
    will display a select with an empty option, an option with "value1" value and an option with "value2" value.
    You can use the locales keys available in this list.

Finally, when your variables are set, you can use thier values in your template code to test conditions or diplay values :

<html>
<head>
    <meta name="color:bg_color:label.backgroundColor" default="#fff" group="display" />
    <meta name="boolean:display_highlighted:label.displayHighlightedPosts ?" default="true" group="display" />
    <meta name="tag:highlighted_tag:label.highlightedTag ?" group="display" />
    <meta name="list:highlighted_nb:label.highlightedNb ?" default="5" items="1,2,3,4,5,6,7,8,9,10" group="display" />

    <style>
        body {
            background-color: {{ Custom('bg_color') }};
        }
    </style>
</head>
<body>
    <nav>
        {% if Custom('display_highlighted') %}
        <ul class="highlight">
            {% list Blog.TaggedPosts(Custom('highlighted_tag'), Custom('highlighted_nb')) %}
            <li>
                {{ TaggedPost.Title }}
            </li>
            {% endlist %}
        </ul>
        {% endif %}
    </nav>
</body>
</html>

Constant

Constants allow you to set some blog settings from within your theme.

In any case, the blog owner is able to override these settings. You can see constants as default values for your theme.

To add a constant to your theme just use a meta tag as follow :

    <meta name="constant:name" content="value"/>

Currently, only two constants are supported : "displayArticleLimits" and "disableDefaultMobileTheme"

  • displayArticlesLimit allows you to set a default per page post number. "value" must be a number between 1 and 50.
                <meta name="constant:displayArticlesLimit" content="15"/>
            
  • disableDefaultMobileTheme disable the default mobile theme when your blog is viewed on a mobile device. If set to 1, your current theme will be used instead.
                <meta name="constant:disableDefaultMobileTheme" content="1"/>
            

Keep in mind that the blog owner will always be able to override these settings.

Filters

You can modify the output of objects with filters. Here is a list of filters which will help you to customize your blog content.

{{ 'my string'|capitalize }}

Capitalize the string

{{ 'my string'|default (mixed defaultvalue) }}

Display a default value if the previous value is empty.

{{ 'my string'|lower }}

Lowercase your text

{{ 'my string'|upper }}

Uppercase your texte

{{ 'my string'|title }}

Titlecase your text : all words will starts with a cap

{{ 'my string'|truncate (integer length, boolean preserve, string suffix) }}

Truncate your text to a given length. If preserve is set to true, the string won't be cut in the middle of a word. If the string is truncated, it will end with the string suffix.

{{ 'http://myblog.overblog.com/path'|url_encode }}

Encode an url

{{ '2004-11-26 16:36:00'|datel (string format) }}

This filter format a date with a localizable format following this pattern

{{ 'http://myblog.overblog.com/path'|resize (integer width, integer height) }}

This filter convert an image url to a resized url. Just set the size you want to resize your image which can be a string or an Image.Url object. You can set the same width and height with the first parameter, or a different one with the two parameters.


{# Resize a post cover to 200x200 pixels #}
<img src="{{ Post.Cover.Url|resize(200) }}" />

{# Resize a post cover to 400x300 pixels #}
<img src="{{ Post.Cover.Url|resize(400, 300) }}" />

{# Resize a post cover to its original size #}
<img src="{{ Post.Cover.Url|resize }}" />

{# Resize an asset file #}
<div style="background-image('{{ 'http://img.overblog.com/myfile.jpg|resize(300, 200) }}');></div>

{{ 'http://myblog.overblog.com/path'|crop }}

Add the crop filter to the resize to make the resized image cropped to the precises given dimensions.


{# Resize a post cover to a square of 200x200 pixels #}
<img src="{{ Post.Cover.Url|resize(200)|crop }}" />

{# Resize a post cover to 400x300 pixels #}
<img src="{{ Post.Cover.Url|resize(400, 300)|crop }}" />

Helpers

Helpers are blocks of reusable code that you can insert with a simple tag instead of typing tens of lines of code. These tags are used with {% tag %}


<!doctype html>
<html>
    <head>
        {% title %}
        {% meta %}
        {% favicon %}
    </head>
    <body>
        <div class="search">
        	{% search %}
        </div>
        <div class="email-notification">
        	{% email_notification %}
        </div>
    </body>
</html>

title

Insert the title tag with correct page title


{% if isSingle %}
   <title>{% if Post.Title is not empty %}{{ Post.Title }} - {% elseif Post.Snippet is not empty %}{{ Post.Snippet|truncate(80) }} - {% endif %}{{ Blog.Title }}</title>
{% elseif isTag and Tag is not empty %}
   <title>{{ Tag.Title|title }} - {{ Blog.Title }}</title>
{% elseif isSearch and Search is not empty %}
   <title>{{ Search|title }} - {{ Blog.Title }}</title>
{% else %}
   <title>{{ Blog.Title }}</title>
{% endif %}

meta

Insert all the meta tags : keyword, description, robots, encoding, micro data


<!-- shortcut:[Meta] -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<!-- description, keyword, robots -->

{% if isSingle%}
    {% list Posts %}
        <meta name="description" content="{{ Post.Snippet |escape }}" />
        <meta name="keywords" content="{% list Post.Tags %}{{ Tag.Title |escape }}{% if loop.last == false %}, {% endif %}{% endlist %}" />
        <meta name="robots" content="{% if not Post.shouldRobotIndex %}no{% endif %}index,follow" />
    {% endlist %}
{% elseif isTag and Tag is not empty %}
    <meta name="description" content="{{ Blog.Description |escape }}" />
    <meta name="keywords" content="{{ Tag.Title|title |escape }}" />
    <meta name="robots" content="index,follow" />
{% elseif isSearch and Search is not empty %}
    <meta name="description" content="{{ Blog.Description |escape }}" />
    <meta name="keywords" content="{{ Search|title |escape }}" />
    <meta name="robots" content="noindex" />
{% elseif isHome %}
    <meta name="description" content="{{ Blog.Title }} - {{ Blog.Description |escape }}" />
    <meta name="robots" content="index,follow" />
{% else %}
    <meta name="description" content="{{ Blog.Description |escape }}" />
    <meta name="robots" content="index,follow" />
{% endif %}

<!-- RSS -->

<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ Blog.RssUrl }}" />

<!-- Repost -->

{% if isSingle %}
    {% list Posts %}
        {% if Post.Type == 'Reblog' %}
            <link rel="canonical" href="{{ Post.OriginalReblogUrl }}"/>
        {% endif %}
    {% endlist %}
{% endif %}

<!-- Social setting : Facebook, G+ .. -->

<meta property="og:locale" content="{{ Lang.Locale }}" />

<meta property="og:site_name" content="{{ Blog.Title |escape }}" />
<meta itemprop="name" content="{{ Blog.Title |escape }}" />

<meta property="og:type" content="blog" />
<meta name="twitter:card" content="summary" />

<meta property="fb:app_id" content="{% if Custom('facebook_appid') is not empty %}{{ Custom('facebook_appid') }},{% endif %}{{ fb_app_id }}" />


{% if isSingle %}
    {% list Posts %}
        <meta property="og:url" content="{{ Post.Permalink }}" />
        <meta name="twitter:url" content="{{ Post.Permalink }}" />

        <meta property="og:title" content="{% if Post.Title is not empty %}{{ Post.Title |escape }}{% elseif Post.Snippet is not empty %}{{ Post.Snippet|truncate(80)|escape  }}{% endif %}"/>
        <meta itemprop="name" content="{% if Post.Title is not empty %}{{ Post.Title |escape }}{% elseif Post.Snippet is not empty %}{{ Post.Snippet|truncate(80)|escape  }}{% endif %}" />
        <meta name="twitter:title" content="{% if Post.Title is not empty %}{{ Post.Title |escape }}{% elseif Post.Snippet is not empty %}{{ Post.Snippet|truncate(80)|escape  }}{% endif %}" />

        <meta property="og:description" content="{{ Post.Snippet |escape }}" />
        <meta itemprop="description" content="{{ Post.Snippet |escape }}" />
        <meta name="twitter:description" content="{{ Post.Snippet |escape }}" />

        {% if Post.Cover %}
            <meta property="og:image" content="{{ Post.Cover }}"/>
            <meta itemprop="image" content="{{ Post.Cover }}" />
            <meta name="twitter:image" content="{{ Post.Cover }}" />
        {% endif %}
    {% endlist %}

{% else %}
    <meta property="og:title" content="{{ Blog.Title |escape }}"/>
    <meta itemprop="name" content="{{ Blog.Title |escape }}" />
    <meta name="twitter:title" content="{{ Blog.Title |escape }}" />

    <meta property="og:description" content="{{ Blog.Description |escape }}" />
    <meta itemprop="description" content="{{ Blog.Description |escape }}" />
    <meta name="twitter:description" content="{{ Blog.Description |escape }}" />

    {% if Blog.Avatar %}
        <meta property="og:image" content="{{ Blog.Avatar }}"/>
        <meta itemprop="image" content="{{ Blog.Avatar }}" />
        <meta name="twitter:image" content="{{ Blog.Avatar }}" />
    {% else %}
        {% list Posts %}
        {% if loop.index == 1 and Post.Cover %}
            <meta property="og:image" content="{{ Post.Cover }}"/>
            <meta itemprop="image" content="{{ Post.Cover }}" />
            <meta name="twitter:image" content="{{ Post.Cover }}" />
        {% endif %}
        {% endlist %}
    {% endif %}
{% endif %}




favicon

Insert link tag for favicon with custom favicon if defined


{% if Blog.FaviconUrl is not empty %}
    <link rel="icon" type="image/png" href="{{ Blog.FaviconUrl }}" />
{% else %}
    <link rel="shortcut icon" type="image/x-icon" href="http://fdata.over-blog.net/99/00/00/01/img/favicon.ico" />
    <link rel="icon" type="image/png" href="http://fdata.over-blog.net/99/00/00/01/img/favicon.png" />
    <link rel="apple-touch-icon" href="http://fdata.over-blog.net/99/00/00/01/img/mobile-favicon.png" />
{% endif %}


Insert search form


<!-- Search form -->
{% if Custom('display_widget_search') == false %}
<div class="widget search" >
    <h3>{{ Lang.Get('Search') }}</h3>
    <form action="/search" method="post">
        <input type="text" name="q" placeholder="{{ Lang.Get('Search something here') }}..."{% if isSearch %} value="{{ Search.Keyword }}"{% endif %} />
        <input type="submit" value="{{ Lang.Get('Search') }}" />
    </form>
 </div>
{% endif %}


email_notification

Insert subscription form


<!-- subscription form -->
<form action="/mail/subscribe" method="post" class="ob-form ob-form-subscription">
    <div class="ob-form-field">
        <label class="ob-label required" for="form_email">{{ Lang.Get('Email_Subscribe') }}</label>
        <input type="email" id="form_email" name="email" placeholder="{{ Lang.Get('Email_Example') }}" required="required" class="ob-input ob-input-email" />
    </div>
    <input type="submit" value="{{ Lang.Get('Subscribe') }}" class="ob-input ob-input-submit" />
</form>


Insert ad, ad size depend of the parameter :

  • {% ad(1) %} : 300x250, Medium Rectangle
  • {% ad(3) %} : 160x600, Wide Skyscraper
  • {% ad(4) %} : 728x90, Leaderboard
  • {% ad(6) %} : 300x600, Half Page
  • {% ad(8) %} : 468x60, Banner
  • {% ad(9) %} : 250x250, Square

You can add other options if you want to colorize text ads :

  • {% ad(1) with {'background' : '#000000', 'text' : '#FFFFFF', 'url' : '#FFFFFF', 'link' : '#FFFFFF', 'border' : '#FFFFFF'} %}
  • background : Ad background color
  • text : Ad text color
  • url : Ad url color
  • link : Ad link color
  • border : Ad border color

{% if Blog.isAdEnabled %}
    <div class="ads ads-300x250 ads-ctn">
	   {% ad(1) %}
	</div>
{% endif %}

{% if Blog.isAdEnabled %}
    <div class="ads ads-160x600 ads-ctn">
	   {% ad(3) %}
	</div>
{% endif %}

{% if Blog.isAdEnabled %}
    <div class="ads ads-728x90 ads-ctn">
	   {% ad(4) %}
	</div>
{% endif %}

{% if Blog.isAdEnabled %}
    <div class="ads ads-300x600 ads-ctn">
	   {% ad(6) %}
	</div>
{% endif %}

{% if Blog.isAdEnabled %}
    <div class="ads ads-468x60 ads-ctn">
	   {% ad(8) %}
	</div>
{% endif %}

{% if Blog.isAdEnabled %}
    <div class="ads ads-250x250 ads-ctn">
	   {% ad(9) %}
	</div>
{% endif %}

{% if Blog.isAdEnabled %}
    <div class="ads ads-250x250 ads-ctn">
	   {% ad(4) with {'background' : '#000000', 'text' : '#FFFFFF', 'url' : '#FFFFFF', 'link' : '#FFFFFF', 'border' : '#FFFFFF'} %}
	</div>
{% endif %}

pagination

Display a numbered page navigation for your blog with a list of pages number, previous, next, first page and last page links.


{% list Posts %}
…
{% endlist %}

<div class="pagin">
	{% pagination %}
</div>

analytics

Insert Google Analytics code if a custom id is defined


<script type="text/javascript">
    window.google_analytics_uacct = '{{Custom('google_analytics_id')}}';
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{{Custom('google_analytics_id')}}']);
    _gaq.push(['_trackPageview']);
    _gaq.push(['_trackPageLoadTime']);

    (function() {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
</script>