Themes customisation

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 %}

Search

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
Navigation.CurrentPage	Current page url.
Navigation.CurrentPageNumber	Current page number.
Navigation.NextPage	Url of the next page when you are on an index (home, search, tag…)
Navigation.PreviousPage	Url of the previous page when you are on an index (home, search, tag…)
Navigation.NextPost	Next Post in the chronoligical order
Navigation.PreviousPost	Previous Post in the chronoligical order

 

<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 }}&size={% if display == 'top' %}tall{% else %}medium{% endif %}&annotation={% if display == 'nocount' %}none{% else %}bubble{% endif%}&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 %}&via={{ Custom('twitter_username') \| escape }}{% endif %}&text={% if Post.Title is not empty %}{{ Post.Title \| escape }}{% elseif Post.Snippet is not empty %}{{ Post.Snippet \| escape }}{% else %}{{ Blog.Title \| escape }}{% endif %}&lang={{ Blog.Lang }}&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 }}&send=false&layout={% if display == 'top' %}box_count{% elseif display == 'nocount' %}{% else %}button_count{% endif %}&show_faces=false&action=like&colorscheme=light&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 }}&size={% if display == 'top' %}tall{% else %}medium{% endif %}&annotation={% if display == 'nocount' %}none{% else %}bubble{% endif%}&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 %}&via={{ Custom('twitter_username') \| escape }}{% endif %}&text={% if Post.Title is not empty %}{{ Post.Title \| escape }}{% elseif Post.Snippet is not empty %}{{ Post.Snippet \| escape }}{% else %}{{ Blog.Title \| escape }}{% endif %}&lang={{ Blog.Lang }}&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 }}&send=false&layout={% if display == 'top' %}box_count{% elseif display == 'nocount' %}{% else %}button_count{% endif %}&show_faces=false&action=like&colorscheme=light&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.Link	Available on linkand quote sections. The link url.
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.

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>

FontFace

FontFace is a function to load CSS font.

You need to call FontFace function in HTML head tag.

This function take one parameter: an array of string. Each string is your meta parameter's name.

In the meta parameter's items, put all fonts you want and Capitalize each first letter of each word.

You can find all supported fonts here.

 
<html>
  <head>
    <meta name="fontlist:bodyFont:label.Fonts" items="Abril Fatface,Alegreya,Alegreya Sans,Amatic SC,Amaranth,Archivo Narrow,Archivo Black,Arimo,Arvo,Audiowide,Barlow,Barlow Semi Condensed,Baskervville,Bodoni Moda,Cormorant" default="Open Sans" group="Text" />
    <meta name="fontlist:titlesFont:label.titlesFont" items="Abril Fatface,Alegreya,Alegreya Sans,Amatic SC,Amaranth,Archivo Narrow,Archivo Black,Arimo,Arvo,Audiowide,Barlow,Barlow Semi Condensed,Baskervville,Bodoni Moda,Cormorant" default="Open Sans" group="Text" />

    {{ FontFace(['bodyFont', 'titlesFont']) }}
  </head>
  <body>
    <!--your content-->
  </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.

Capitalize the string

Display a default value if the previous value is empty.

Lowercase your text

Uppercase your texte

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.

Encode an url

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>

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 %}

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 %}

search

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>

Themes customisation

Get started

Template syntax

Contextuals objects

Blog

PageTitle

Posts

Post

Search

Tag

Navigation

SpecialContent

Lang

is

Generic objects

Date

Image

Post

Section

Archive

Month

Tag

Custom

FontFace

Constant

Filters

{{ 'my string'| capitalize }}

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

{{ 'my string'| lower }}

{{ 'my string'| upper }}

{{ 'my string'| title }}

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

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

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

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

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

Helpers

title

meta

favicon

search

email_notification

ad

pagination

analytics

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

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

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

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