Theme Extension for Jira Service Desk

Jira Server
HOSTING
Last updated Sep 10, 2019

Custom cards

This section provides information on configuring custom cards.

Now you can create your own custom cards using HTML.

Steps

To set configuration:

  1. Choose Projects at the top of the screen.
  2. Choose the service desk project you want to configure.
  3. From service desk project sidebar, select Project settings > Configuration in the Theme Extension section.
    Info

    You can also configure the appearance of your portal going directly to Customer Portal:
    Go to Customer channels > click Visit the portal or copy and paste a link into a browser address bar.


  4. Go to Select theme and click Cards.
  5. Click Next.
    Creating custom graphics on the Customer Portal with Theme Extension for Jira Service Desk
    Creating custom graphics on the Customer Portal with Theme Extension for Jira Service Desk

  6. The Apply theme style dialog box appears.
  7. Choose one of them and click Apply.
    Applying a theme style with Theme Extension for Jira Service Desk
    Applying a theme style with Theme Extension for Jira Service Desk
  8. Click on + Add custom card.
    Adding a custom card with Theme Extension for Jira Service Desk
    Adding a custom card with Theme Extension for Jira Service Desk

  9. The Add custom card dialog box appears.
  10. Enter the text using HTML.
    Note

    In the Preview section you can see the current appearance of created card.


  11. Click Add.
    Adding a custom card with Theme Extension for Jira Service Desk
    Adding a custom card with Theme Extension for Jira Service Desk

Result

A new custom card is added.

Note

The added custom card appears at the beginning but you can move it using drag-and-drop.

Info

Remember, you have to click Publish in Edit mode at the top of the screen on the right side to see applied changes on the Customer Portal.

Examples of custom cards

  • Contact details

HTML code

   <style>
       body {
           padding: 0 10px;
           background: linear-gradient(90deg, #232956, #28357C);
       }
   
       #logo {
           display: block;
           margin: 24px auto;
           width: 50%;
       }
   
       .text {
           color: white;
           display: inline-block;
           font-family: Helvetica, sans-serif;
           vertical-align: top;
           font-size: 12px;
           padding-bottom: 14px;
           text-decoration: none;
       }
   
       .icon {
           display: inline-block;
           width: 16px;
           padding: 0 6px;
       }
   </style>  

   <a href="https://deviniti.com" target="_blank">
       <img id="logo" src="https://deviniti.com/theme-extension/Deviniti_regular.png" alt="logo">
   </a>
   <div>
       <img src="http://deviniti.com/theme-extension/location.svg" class="icon" alt="location">
       <div class="text">
           153 Sudecka Street<br>
           53-128 Wrocław<br>
           Poland
       </div>
   </div>
   <div>
       <img src="http://deviniti.com/theme-extension/phone.svg" class="icon" alt="phone">
       <div class="text">
           +48 577 075 727
       </div>
   </div>
   <div>
       <img src="http://deviniti.com/theme-extension/envelope.svg" class="icon" alt="envelope">
       <a href="mailto:deviniti@deviniti.com" class="text">
           deviniti@deviniti.com
       </a>
   </div>

Result

Example of custom card with contact details with Theme Extension for Jira Service Desk
Example of custom card with contact details with Theme Extension for Jira Service Desk
  • Links to other resources

HTML code

   <style>
       body {
           margin: 0;
           border-left: 40px solid #28357C;
           height: 100vh;
       }
   
       #content {
           padding: 0 48px 0 24px;
           font-family: Helvetica, sans-serif;
       }
   
       #title {
           color: #ff4b1f;
           font-weight: bold;
           padding: 16px 0;
       }
   
       hr {
           margin: 0;
           border: none;
           border-top: 1px solid #dadada;
       }
   
       .article {
           position: relative;
           margin: 8px 0;
           font-size: 12px;
       }
   
       .icon {
           position: absolute;
           right: -36px;
           top: 8px;
       }
   
       #more {
           padding: 8px 0;
           font-size: 12px;
           font-weight: bold;
           text-align: right;
           color: #ff4b1f;
       }
   
       a {
           color: inherit;
           text-decoration: inherit;
           display: block;
       }
   </style>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <div id="content">
       <div id="title">Latest updates</div>
       <hr>
       <a class="article" href="https://deviniti.com/support/webinar/extension_13062018/" target="_blank">
           <b>Extension for Jira Service Desk</b><br>
           What's new in Extension 6.0 for Jira Service Desk? We explain the most...
           <img src="https://deviniti.com/theme-extension/chevron.svg" class="icon" alt="linkedin icon">
       </a>
       <hr>
       <a class="article" href="https://deviniti.com/support/webinar/issuetemplates_cloud_18072018/" target="_blank">
           <article>
               <b>Issue templates for Jira Cloud</b><br>
               How do you create Jira issues? Aren't you sick of scrolling through the same fields...
           </article>
           <img src="https://deviniti.com/theme-extension/chevron.svg" class="icon" alt="linkedin icon">
       </a>
       <div id="more">
           <a href="https://deviniti.com/support/webinar/" target="_blank">Read more</a>
       </div>
   </div>

Result

Example of custom card with links to other resources with Theme Extension for Jira Service Desk
Example of custom card with links to other resources with Theme Extension for Jira Service Desk
  • Links to social media

HTML code

   <style>
       body {
           margin: 0px;
           padding: 24px;
           background: linear-gradient(90deg, #232956, #28357C);
           text-align: center;
       }
   
       .text {
           padding: 24px 0 32px 0;
           color: white;
           font-family: Helvetica, sans-serif;
           font-size: 13px;
       }
   
       .icon {
           display: inline-flex;
           height: 50px;
           width: 50px;
       }
   </style>
   <a href="https://deviniti.com/" target="_blank">
       <img src="https://deviniti.com/theme-extension/Deviniti_regular.png" width="50%" alt="logo">
   </a>
   <div class="text">
       Check out our official Social Media channels:
   </div>
   <a href="https://www.facebook.com/DevinitiPL/" target="_blank">
       <img src="https://deviniti.com/theme-extension/social_media_FB.svg" class="icon" alt="facebook icon">
   </a>
   <a href="https://www.instagram.com/deviniti_aboutus/" target="_blank">
       <img src="https://deviniti.com/theme-extension/social_media_insta.svg" class="icon" alt="instagram icon">
   </a>
   <a href="https://www.linkedin.com/company/deviniti/" target="_blank">
       <img src="https://deviniti.com/theme-extension/social_media_ln.svg" class="icon" alt="linkedin icon">
   </a>
   <a href="https://www.youtube.com/channel/UCfwVwy42UK5bC2k_14bR5Gw" target="_blank">
       <img src="https://deviniti.com/theme-extension/social_media_yt.svg" class="icon" alt="youtube icon">
   </a>
   <a href="https://twitter.com/deviniti_apps" target="_blank">
       <img src="https://deviniti.com/theme-extension/social_media_twitter.svg" class="icon" alt="twitter icon">
   </a>

Result

Example of custom card with links to social media with Theme Extension for Jira Service Desk
Example of custom card with links to social media with Theme Extension for Jira Service Desk

Need help?

If you can’t find the answer you need in our documentation, raise a support request*.

*Include as much information as possible to help our support team resolve your issue faster.