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
| borderColor | silver |
|---|---|
| bgColor | #F0F0F0 |
TNG Technology Consulting GmbH
Basic
A simple template with the basic information of an issue.
Source Code
| Code Block | ||
|---|---|---|
| ||
<!-- 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
| Code Block | ||
|---|---|---|
| ||
<!-- 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 --> |