Posted by on Sep 10, 2013 in How To

Since TypeEngine supports multiple templates within a theme, we typically recommend publishers to create separate templates for different types of articles. But what if the alternate styles don’t require changes to the markup? What if the alternate styles are only CSS variants?

One simple way to achieve this without creating completely different templates is to use the ${{ArticleType}} template tag on the body (or other outermost containing) element.

Then you can write CSS directly for elements when they appear inside that class.

For example, let’s say that you have an ‘Interview’ article type and a ‘Feature’ article type, and you want your h1 article title to be 2em inside interview articles, and 1.4em inside feature articles. Here’s how you could do it:

Template Code
<body class="?{{ArticleType}}${{ArticleType}}?{{/ArticleType}}">
<h1>This is a Headline</h1>
CSS
.Interview h1 {
   font-size: 2em;
   }

.Feature h1 {
   font-size: 1.4em;
   }

Of course, this doesn’t prevent you from using ${{ArticleType}} again in your template to actually print the text itself. It’s just one more interesting way to use the available template tags to make your templates even more powerful.