Skip to content

Instantly share code, notes, and snippets.

@nidzix
Last active August 29, 2015 13:57
Show Gist options
  • Save nidzix/9586066 to your computer and use it in GitHub Desktop.
Save nidzix/9586066 to your computer and use it in GitHub Desktop.
Live Blog themes

Understanding Live Blog themes

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:

picture alt

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”.

Demo Live Blog

This is an example of the fully functional Live Blog and how it looks in the browser

picture alt

Building blocks

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.

What is a “block” in a Live Blog theme?

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).

Let’s identify some blocks in the demo theme

picture alt

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.

What do these blocks looks like in template code?
{+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

Base theme - structural organization

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:

picture alt

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.

Identifying all blocks on the Live Blog level (container.dust)

Atomic blocks

picture alt

Grouping blocks

picture alt

Compact view of all groups used in a base theme

picture alt

Identifying all blocks on the level: (item > container.dust)

Atomic blocks

picture alt

Grouping blocks

picture alt

There are three main parts of every post, header, content, and footer. You can see that the footer block is empty by default.

Compact view of all groups used in a base theme

picture alt

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.

What about CSS ?

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.



Next steps:

Continue learning about this by watching our video tutorial about how to create a Live Blog theme derived from the base theme:

"How to create Live Blog themes" - Part 1 , Part 2 , Part 3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment