How to design your first theme with Newscoop 4.2

If you're a designer who is new to the Newscoop or Smarty way of making web pages, or you've been trained on GUI-based web development tools, the trend towards template-driven design might seem intimidating. Perhaps you don't have a computer science background, and now you're being expected to understand programming as well as design.

Fear not, because Newscoop's template language is just as simple as HTML; you'll find it a huge time-saver once you have grasped the basics. No longer will you be forced to adopt ready-made themes for your next content management system deployment, or worse still, have to dive into unfamiliar code to make the adaptations your client requires.

Publication design with The Stun

To prove just how simple Newscoop publication design can be, take a look at this theme, The Stun, available for free download under the GNU GPLv3 license. This theme is also available on GitHub for examination and forking.

Why it's so easy

The Stun theme contains just two CSS files (one for design, one for fonts) and the bare minimum of features needed to display the front page, sections and articles of your publication. The design of The Stun has been created by Pete Bradley, former News International page designer.

The idea behind this theme is to make it easier for new designers to learn how a Newscoop theme works, compared to looking at the code of full-feature themes like New Custodian or Rockstar. It also contains an example of how to use a web font from Font Squirrel in a Newscoop theme. Finally, news designers are freed from the stultifying tyranny of web-safe fonts!

How it works

Let's take a look at The Stun's front page template, front.tpl, just 33 lines of code plus whitespace. The biggest block of that code is for creating the list of article authors with the proper punctuation (given that we can't guess how many authors there might be for a dynamically generated article).

This template starts by including _header.tpl from the _tpl folder of sub-templates (there are just three sub-templates in The Stun). Thanks to this sub-template we don't have to deal with theelement of HTML, open atag, fiddle with the masthead or deal with navigation buttons. It's all taken care of, so we can focus on front page design.

{{ include file='_tpl/_header.tpl' }}

Next, we'll list featured articles from the "Front page" playlist, a sequence of the day's most significant stories which has been created by the newspaper's editor in the Newscoop administration interface. All we have to do is tell Newscoop to list the article that the editor has made the top item in this particular playlist, by using a list length of "1":

{{ list_playlist_articles name="Front page" length="1" }}

The next part of the code is for the article headline, which we put in a

See how we're using two sets of curly brackets above? Within the element created by the

and

tags we are asking Newscoop for the article name to create our headline, which could be any line of text the editor wants to put there at that moment. We're also wrapping the

element with an element, but this time we're using the curly brackets to get the URI of this article. So we now have a styled headline, and a link to the article inside the publication.

Creating your own sections

Typically we may wish to provide a shortened version of the story on the front page, and give the full article a different design treatment. This is very easy to do in Newscoop, since we have a separate template for full articles, by default called article.tpl (although you can call this file anything you want). There is also a template for listing articles in the sections that the editor has created, such as Politics or Sports. The section template is called section.tpl by default, and just as with front.tpl or article.tpl you can re-use the header, footer or any other sub-template that you have created. You'll soon appreciate how much maintenance time is saved by this efficient approach.

In The Stun, 404.tpl is an empty file. You can put any message to readers that you want in this template, but with an empty 404 template Newscoop will re-direct all requests for non-existent pages to the publication front page, which may be what you wanted anyway.

We hope you have fun playing with The Stun! If you create new versions of it, please share them with us, so that we see what you can do with it!

• Download The Stun design files here if you want to get stared using it right away!
• Check out the latest release of Newscoop 4.2
• For more detailed information, check out our Newscoop 4.2 cookbook here!