Zendesk Theme Shortcodes(Additional Formatting Components)

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

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 [email protected]
Mary Moe [email protected]
July Dooley [email protected]
               
<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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
   </tbody>
</table>

table with header color

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
               
<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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
   </tbody>
</table>

striped table

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
               
<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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
   </tbody>
</table>

dark table

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
               
<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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</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.