Share your templates

You made an awesome template? To share your template please write at atlassian-apps@tngtech.com or create a ticket in our Service Desk. Please provide the following information:

Your company name and/or logo
A short description
A screenshot
The template source code

TNG Technology Consulting GmbH

Basic

A simple template with the basic information of an issue.

Source Code

<!-- Add your CSS here -->
<style>
/* 
    Soy can't handle { and }, 
    write {lb} and {rb} instead 
*/
    
/*
    The following styles may be applied 
    to each card
*/
    
.ip-cutmarks {lb}
    border: 1px dashed grey;
    padding: 0 0 0 1px;
{rb}
.ip-card {lb}
    font-family: sans-serif;
    text-align: left;
{rb}
.ip-border {lb}
    width: 100%;
    height: 100%;
    position: relative;
    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
{rb}
.ip-outercontent {lb}
    width: 100%;
    height: 100%;
    
    background-color: white;
    overflow: hidden;
{rb}
.ip-header {lb}
    width: 100%;
    padding: 1mm 1mm 2mm 1mm;
    
    color: #707070;
    vertical-align: top; 
    font-size: 14px;
    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
{rb}
    
.ip-content {lb}
    overflow: hidden;
    padding: 0 2mm;
    
    text-overflow: clip;
    end-overflow-type: clip;
    white-space: nowrap; 
{rb}
    
.ip-content ul {lb} 
    margin-left: 6mm;
{rb}
.ip-footer {lb}  
    width: 100%;
    padding: 5px 1mm 0 1mm;
    bottom: 0;
    left: 0;
    position: absolute;
    
    
    color: #707070;
    background-color: inherit;
    font-size: 14px;
    
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
{rb}
.ip-expand {lb}
    width: 100%;
{rb}
    
.ip-left {lb}
    text-align: left;    
{rb}
    
.ip-center {lb}
    text-align: center;    
{rb}
    
.ip-right {lb}
    text-align: right;    
{rb}
    
td {lb}
    white-space: nowrap;
{rb}
    
/*
    The following styles are for this
    specific template
*/
    
/*
    The following snippets set the border color depending on the issue type   
    In the CSS part use ' instead of "
*/
div[issue-type='Story'] {lb}
    border-color:#ffd500;
{rb}
div[issue-type='Bug'] {lb}
    border-color:#CC0000;
{rb}
div[issue-type='New Feature'] {lb}
    border-color:#ff9933;
{rb}
div[issue-type='Epic'] {lb}
    border-color:#888620;
{rb}
div[issue-type='Task'] {lb}
    border-color:#bfe4ff;
{rb}
div[issue-type='Sub-task'] {lb}
    border-color:#009999;
{rb}
div[issue-type='Improvement'] {lb}
    border-color:#009900;
{rb}
div[issue-type='Technical task'] {lb}
    border-color:#cc0000;
{rb}
.issuekey {lb}
    color: black;
    font-size: large;
    vertical-align: middle;
{rb}
    
</style>
<!--
    Every template must have the class "ip-card" set on the outer div.
    Use the style attribute to size your card.
-->
<div class="ip-card ip-cutmarks" style="width: 90mm; height: 62mm;">
    <!--
        Use this section to design your border. The issue-type attribute
        is a reference to the styles at the beginning to set the border 
        color depending on the issue type.
    -->
    <div class="ip-border" issue-type="{$issue.issueTypeNameInt}" 
        style="border-left-width: 2mm; border-left-style: solid;">
      
        <!--
            The outer content keeps the content away from the border
        -->
        <div class="ip-outercontent">
        	
            <!--
				This card is divided into three sections - header, content, 
				footer - for convenience.
				Change these sections to your needs.
			-->
		  
			<div class="ip-header"> 
				<table>
					<tr>
						<td colspan="4" style="font-size: 12px">
							{$issue.parentKey}
						</td>
					</tr>
					<tr>       
						<td><img src="{$issue.issueTypeIconUrl}" /></td>
						<td class="ip-expand issuekey">{$issue.key}</td>
						<td class="ip-right">{$issue.issueTypeName}</td>
                        <td><img src="{$issue.priorityIcon}" /></td>
					</tr>
				</table>
			</div>
			
			
			<div class="ip-content">
				<div>{$issue.summary}</div>
				
				<!-- 
					The directive noAutoescape is important to
					prevent html escaping.  
				-->
				<div>{$issue.description|noAutoescape}</div>
			</div>
			
			
			<div class="ip-footer">
				<table>
					<tr>
						<td class="ip-left">{$issue.assignee}</td>
						
						<!--
							For an example on how to check for a certain value see
                            the  following snippet.
						-->
                        
						<td class="ip-expand ip-center">
							<!-- 
								Note that in JIRA the name of the StoryPoints custom
								field is language dependent
							-->
							{if $issue.customfield.storyPunkte}
								{$issue.customfield.storyPunkte} SP
							{/if}
							{if $issue.customfield.storyPoints}
								{$issue.customfield.storyPoints} SP
							{/if}
						</td>
						
						<td class="ip-right">
							{if $issue.customfield.sprint}
								{$issue.customfield.sprint}
							{/if}
						</td>
					</tr>
				</table>
			</div>
            
        </div> <!-- outer content -->
        
    </div> <!-- border -->
       
</div> <!-- card -->

Branded

A template with the TNG logo in the header section.

Source Code

<!-- Add your CSS here -->
<style>
/*
    Soy can't handle { and },
    write {lb} and {rb} instead
*/
/*
    The following styles may be applied
    to each card
*/
.ip-cutmarks {lb}
    border: 1px dashed grey;
    padding: 0 0 0 1px;
{rb}
.ip-card {lb}
    font-family: sans-serif;
    text-align: left;
{rb}
.ip-border {lb}
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
{rb}
.ip-outercontent {lb}
    width: 100%;
    height: 100%;
    background-color: white;
    overflow: hidden;
{rb}
.ip-header {lb}
    width: 100%;
    padding: 1mm 1mm 2mm 1mm;
    color: #707070;
    vertical-align: top;
    font-size: 14px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
{rb}
.ip-content {lb}
    overflow: hidden;
    padding: 0 2mm;
    text-overflow: clip;
    end-overflow-type: clip;
    white-space: nowrap;
{rb}
.ip-content ul {lb}
    margin-left: 6mm;
{rb}
.ip-footer {lb}
    width: 100%;
    padding: 5px 1mm 0 1mm;
    bottom: 0;
    left: 0;
    position: absolute;
    background-color: inherit;
    color: #707070;
    font-size: 14px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
{rb}
.ip-expand {lb}
    width: 100%;
{rb}
.ip-left {lb}
    text-align: left;
{rb}
.ip-center {lb}
    text-align: center;
{rb}
.ip-right {lb}
    text-align: right;
{rb}
td {lb}
    white-space: nowrap;
{rb}
/*
    The following styles are for this
    specific template
*/
/*
    The following snippets set the border color depending on the issue type
    In the CSS part use ' instead of "
*/
div[issue-type='Story'] {lb}
    border-color:#ffd500;
{rb}
div[issue-type='Bug'] {lb}
    border-color:#CC0000;
{rb}
div[issue-type='New Feature'] {lb}
    border-color:#ff9933;
{rb}
div[issue-type='Epic'] {lb}
    border-color:#888620;
{rb}
div[issue-type='Task'] {lb}
    border-color:#bfe4ff;
{rb}
div[issue-type='Sub-task'] {lb}
    border-color:#009999;
{rb}
div[issue-type='Improvement'] {lb}
    border-color:#009900;
{rb}
div[issue-type='Technical task'] {lb}
    border-color:#cc0000;
{rb}
.issuekey {lb}
    color: black;
    font-size: large;
    vertical-align: middle;
{rb}
</style>
<!--
    Every template must have the class "ip-card" set on the outer div.
    Use the style attribute to size your card.
-->
<div class="ip-card ip-cutmarks" style="width: 90mm; height: 62mm;">
    
    <!--
        Use this section to design your border. The issue-type attribute
        is a reference to the styles at the beginning to set the border
        color depending on the issue type.
    -->
    <div class="ip-border" issue-type="{$issue.issueTypeNameInt}"
        style="border-left-width: 2mm; border-left-style: solid;">
        
        <!--
            The outer content keeps the content away from the border
        -->
        <div class="ip-outercontent">
            <!--
                This card is divided into three sections - header, content,
                footer - for convenience.
                Change these sections to your needs.
            -->
            <div class="ip-header">
                <table>
                    <tr>
                        <td colspan="4" style="font-size: 12px">
                            {$issue.parentKey}
                        </td>
                    </tr>
                    <tr>
                        <td><img src="{$issue.issueTypeIconUrl}" /></td>
                        <td class="ip-expand issuekey">{$issue.key}</td>
                        <td class="ip-right">
                            <!--
                                Also branding is possible. You have to make sure,
                                that the image location is accessible for every user.
                            -->
                            <img src="https://addons-tngtech.atlassian.net/wiki/download/attachments/1703982/TNG1600x256.png?api=v2" 
                                 style="height: 20px">
                        </td>
                    </tr>
                </table>
            </div>

            <div class="ip-content">
                <div>{$issue.summary}</div>
                <!--
                    The directive noAutoescape is important to
                    prevent html escaping.
                -->
                <div>{$issue.description|noAutoescape}</div>
            </div>
            <div class="ip-footer">
                <table>
                    <tr>
                        <td class="ip-left">{$issue.assignee}</td>
                        <!--
                            For an example on how to check for a certain value
                            see the  following snippet.
                        --> 
                        <td class="ip-expand ip-center">
                            <!--
                                Note that in JIRA the name of the StoryPoints
                                custom field is language dependent
                            -->
                            {if $issue.customfield.storyPunkte}
                                {$issue.customfield.storyPunkte} SP
                            {/if}
                            {if $issue.customfield.storyPoints}
                                {$issue.customfield.storyPoints} SP
                            {/if}
                        </td>
                        
                        
                        <td class="ip-right">
                           {$issue.issueTypeName}
                        </td>
                        <td><img src="{$issue.priorityIcon}"/></td>
                    </tr>
                </table>
            </div>
        </div> <!-- outer content -->
    </div> <!-- border -->
</div> <!-- card -->