Zendesk Theme Shortcodes(Additional Formatting Components)

If you are using our Zendesk theme, you can use these shortcodes(additional formatting components). If you have any questions or want any help, feel free to contact us.

Note : Please make sure you have enabled the “Display unsafe content“. Just go to Settings > Guide settings and tick on “Display unsafe content” option then click on “Update” button.

Callout blocks/messages

for info block

Info! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               
<div class="alert alert-info">
   <strong>Info!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

for success block

Success! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               
<div class="alert alert-success">
   <strong>Success!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

for warning block

Success! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               
<div class="alert alert-warning">
   <strong>Warning!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

for danger block

Danger! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               
<div class="alert alert-danger">
   <strong>Success!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

Callout blocks with the Font Awesome icons

for announcement block


Announcement! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               
<div class="alert alert-announcement __with_fa">
   <em class="fa fa-bullhorn">&nbsp;</em>
   <strong>Announcement!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

for download block


Download! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               
<div class="alert alert-download __with_fa">
   <em class="fa fa-cloud-download">&nbsp;</em>
   <strong>Download!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

for quote block


Quote! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               
<div class="alert alert-quote __with_fa">
   <em class="fa fa-quote-right">&nbsp;</em>
   <strong>Quote!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

for pdf block


PDF! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               
<div class="alert alert-pdf __with_fa">
   <em class="fa fa-file-pdf-o">&nbsp;</em>
   <strong>PDF!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

If you want callout blocks as per your need(diffrent view). Please tell your requirement we’ll send you shortcode.

Accordions

for default accordion

Accordion title #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion title #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

               
<div class="accordion default_accordion">
   <div class="accordion_block">
      <div class="accordion_title">
         <strong>Accordion title #1</strong>
      </div>
      <div class="accordion_content">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
   </div>
   <div class="accordion_block">
      <div class="accordion_title">
         <strong>Accordion title #2</strong>
      </div>
      <div class="accordion_content">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
   </div>
</div>

for colored accordion

Accordion title #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion title #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

               
<div class="accordion colored_accordion">
   <div class="accordion_block">
      <div class="accordion_title">
         <strong>Accordion title #1</strong>
      </div>
      <div class="accordion_content">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
   </div>
   <div class="accordion_block">
      <div class="accordion_title">
         <strong>Accordion title #2</strong>
      </div>
      <div class="accordion_content">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
   </div>
</div>

If you want accordion blocks as per your need(diffrent view). Please tell your requirement we’ll send you shortcode.

Tables

default table

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com 
               
<table class="table">
   <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
   </tbody>
</table>

table with header color

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com 
               
<table class="table header-color">
   <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
   </tbody>
</table>

striped table

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com 
               
<table class="table table-striped">
   <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
   </tbody>
</table>

dark table

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com 
               
<table class="table dark-table">
   <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
   </tbody>
</table>

If you want table as per your need(diffrent view). Please tell your requirement we’ll send you shortcode.

Lists styles

bullet/unordered list style

  • bullet list #1
  • bullet list #2
    • sub bullet list #1
    • sub bullet list #2
               
<ul>
   <li>bullet list #1</li>
   <li>bullet list #2
      <ul>
         <li>sub bullet list #1</li>
         <li>sub bullet list #2</li>
      </ul>
   </li>
</ul>

check list bullet style

  • bullet list #1
  • bullet list #2
  • bullet list #3
               
<ul class="check-list-bullet">
   <li>bullet list #1</li>
   <li>bullet list #2</li>
   <li>bullet list #3</li>
</ul>

ordered list style

  1. ordered list #1
  2. ordered list #2
    1. sub ordered list #1
    2. sub ordered list #2
  3. ordered list #3
    • sub bullet list #1
    • sub bullet list #2
               
<ol>
   <li>ordered list #1</li>
   <li>ordered list #2
      <ol>
         <li>sub ordered list #1</li>
         <li>sub ordered list #2</li>
      </ol>
   </li>
   <li>ordered list #3
      <ul>
        <li>sub bullet list #1</li>
        <li>sub bullet list #2</li>
      </ul>
   </li>
</ol>

colored list style

  1. ordered list #1
  2. ordered list #2
    1. sub ordered list #1
    2. sub ordered list #2
               
<ol class="colored-list">
   <li>ordered list #1</li>
   <li>ordered list #2
      <ol class="colored-list list-black">
         <li>sub ordered list #1</li>
         <li>sub ordered list #2</li>
      </ol>
   </li>
</ol>

If you want list style as per your need(diffrent view). Please tell your requirement we’ll send you shortcode.