Live Blog themes let you have all the power of Live Blog, but with a custom look and feel designed for various use cases or devices. The basic design of Live Blog is the base theme from which all our other themes are derived. But with the creation of each new theme, certain features are included or excluded as necessary.
Let’s take a closer look at how our Live Blog themes are derived:
In this example, we have four Live Blog themes (red, blue, yellow and green). All of them have been created from the base theme. However, the blue theme was split into four new sub themes for specific needs.
In order to get the big picture of what Live Blog includes, what it consists of and how templates works, we will use a demo Live Blog called “Funia elections - March 2014”.
This is an example of the fully functional Live Blog and how it looks in the browser
The basic building unit for each Live Blog theme is a block. Whenever you want to add or change something in your theme, you will be dealing with blocks.
A block is a part of the template that represents one logical unit in Live Blog. One block can contain another block, or even several of them. In Live Blog, we use HTML and DUST templates to create blocks. (Don’t worry, if you’ve never heard of DUST, we’ll get back to it later).
As you can see, we have defined 4 blocks here. One large (liveblog-header) contains three others, title, description and advert. You should use the same method to identify each of the remaining blocks in a Live Blog template.
{+headerContainer}
<div class="liveblog-header">
{+header}
{+blogTitle}{/blogTitle}
{+blogDescription}{/blogDescription}
{+blogMedia}{/blogMedia}
{/header}
</div>
{/headerContainer}
{<blogTitle} <h1>This is title</h1> {/blogTitle}
{<blogDescription} <p>Here goes description</p> {/blogDescription}
{<blogMedia} <img src=”advert.png”> {/blogMedia}
The code put within { } belongs to the DUST template language, which is used for defining and overriding blocks. The rest of the code is pure html, that is used to give original content to these blocks.
TIP : Using DUST templates
//Defining a block:
{+myBlock}
//original block content here
{/myBlock}
//Overriding a block:
{<myBlock}
//new block content here
{/myBlock}
Once you have defined your blocks, you’re able to play around with them. You can easily move them from one parent block to another, rearrange them within a parent block, or even redefine them.
An atomic block is a block that contains only html. In this example, an atomic block will be the
- blogTitle
- blogDescritpion
- blogMedia
I mentioned that the main purpose of a base theme is to provide a good foundation for creating new themes because:
- It defines all the atomic blocks that Live Blog needs, and these blocks shouldn’t be overridden (they make the core part of Live Blog functional)
- It proposes a way in which these blocks should be grouped, and this is the point where your overrides make sense. If you don’t like how they are grouped you have the ability to change it in any way you want.
Getting closer to the folder structure of our demo theme:
Two of the most important files are:
- container.dust - defines all the atomic blocks and the block grouping on the Live Blog level
- item > base.dust - defines all the atomic blocks and the block grouping on the one post level
The base theme doesn’t provide any kind of styling files (css), only an organisational structure.
Creating a new theme doesn’t involve copying the base theme over again, but creating the same structure with specific instructions to override certain files.
There are three main parts of every post, header, content, and footer. You can see that the footer block is empty by default.
Every post type has a specific template, but the core post content is always placed into .post-content-full block. The CSS class in the wrapper block, (li) is telling us what type of post it is.
Once you’ve defined your template, you should stick to adding styles.
There is one default liveblog.css file in your theme that follows the base template and provides a fully styled theme.
Default styles are written in less. This is a kind of extended css syntax, which provides easy and quick ways to write css. You can find out more about less here. Less files should be compiled to generate css. You can use any available less compiler, for example Crunch.
Less is pretty good for code nesting and that’s the main reason it was used for Live Blog. It gives you the ability to make css code structures, like our blocks. Styles are logically connected to templates, so if you’re using amended templates you should also be careful about changing the style.
Template code
{+myBlock}
<div class=”content-block”>
<p>Some text here...</p>
</div>
{/myBlock}Less syntax for block above
.content-block {
float : left;
p {
color : #787878;
}
}Compiled css
.content-block {
float : left;
}
.content-block p {
color : #787878;
}Less syntax also allows you to use the concept of “variables”, which means that you can define a variable with a value, and use it as many times as you'd like. We used variables to set the default blog color, width, existence and visibility of some html.
Less variables:
@linkColor : #2daad9;
.my-content a {
margin-top : 5px;
color: @linkColor;
}If you want your theme styles to rely on a default, we strictly recommend you to make changes specifically within the less file(s) and then compile it again to get the css. Compiling this later will override your css, and your changes won't be visible.
Continue learning about this by watching our video tutorial about how to create a Live Blog theme derived from the base theme: