simple support ticket system

Style Guide For Custom Apps

Published on : April 21, 2022

The style guide helps you through the process of developing a custom app in your HTML format and making the widget visible. It allows you to add some styles to your HTML.

Limitations

  1. Only supported HTML tags and attributes can be added.
  2. Inline CSS and JavaScript are no longer supported.
  3. Only links are supported as interactive elements.

 

Supported HTML tags and attributes

The HTML tags and attributes listed in the following are supported by the custom app.

HTML tagAttributes
<a>Class, Href
<b>Class
<br>Class
<div>Class
<h1>  to  <h6>Class
<p>Class
<li>Class
<ol>Class
<ul>Class
<span>Class
<input>Class, Type, Id
<label>Class, For

 

Note:

  • If your response does not match the above-mentioned HTML tags and attributes, those tags and attributes will be removed.
  • <input> and <label> tags are only used to create collapsible sections.
  • JavaScript is not allowed in the custom app.
  • Inline styles are not allowed in the custom app.

 

Supported classes

Only the classes listed in the following are supported by the custom app.

Class nameDescription
greenText color is green
blueText color is blue
redText color is red
blackText color is black
whiteText color is white
grayText color is gray
bg-greenBackground color is green
bg-blueBackground color is blue
bg-redBackground color is red
bg-whiteBackground color is white
bg-grayBackground color is gray
disableText with less opacity (Cannot be interactable)
width-100100% width
width-7575% width
width-5050% width
width-2525% width
font-12Font size 12px
font-13Font size 13px
font-14Font size 14px
font-15Font size 15px
font-16Font size 16px
horizontal-separator1px black border with bottom spacing
no-marginZero margin
bd-badgeBadge styling
bd-listUnordered/ordered tag design
bd-list-itemListing item design
bd-bullet-circleCircle bulleting in list
bd-bulletDefault bulleting in list
bd-bullet-squareSquare bulleting in list
bd-number-listNumbering in list
bd-accordion-wrapperOverall accordion root
bd-accordionEach accordion parent
labelEach accordion title it should linked with corresponding input
bd-accordion-contentAccordion contents
bd-accordion-titleAccordion title

 

Paragraph

The <p> tag can be used to construct a simple paragraph, as demonstrated in the following image.

Sample code

<h6>Paragraph</h6>

<p>A paragraph is a sentence or a group of sentences that supports one central, unified idea.</p>

Hyperlink

The <a> tag can be used to create an actionable link.  You can use this link to navigate to another page on the BoldDesk.

  1. HTTPS URLs are alone permitted in the href attribute. If the URL is incorrect, the full <a> tag is erased.
  2. Only the _blank value is permitted in the target attribute. Target=” blank” is added by default to all <a> tags.
  3. Only noreferrer noopener values are permitted in the rel attribute. All <a> tags have srel=”noreferrer noopener” by default.

Sample code

<h6>Links</h6>

<a href="https://www.bolddesk.com" target="_blank" rel="noreferrer noopener">Click Here</a>

 

Text color

Using predefined CSS classes, the color of the text can be changed in your HTML.

Sample code

<h6>Text colors</h6>
<p class="white bg-gray">This is white text</p>
<p class="gray">This is gray text</p>
<p class="black">This is black text</p>
<p class="red">This is red text</p>
<p class="green">This is green text</p>
<p class="blue">This is blue text</p>

 

Background color 

The color of the backdrop can be altered in your HTML by using the predefined CSS classes.

Sample code

<h6>Background colors</h6>
<p class="bg-white">This is white background</p>
<p class="bg-gray white ">This is gray background</p>
<p class="bg-red white ">This is red background</p>
<p class="bg-green white ">This is green background</p>
<p class="bg-blue white ">This is blue background</p>

 

Font size 

The font size can be changed in your HTML using the predefined CSS classes.

Sample code

<h6>Font size</h6>
<p class="font-12">Font size is 12px</p>
<p class="font-13">Font size is 13px</p>
<p class="font-14">Font size is 14px</p>
<p class="font-15">Font size is 15px</p>
<p class="font-16">Font size is 16px</p>

 

Badges

A single badge class is supported, which creates a square badge.

Sample code

<h6>Badges</h6>
<p>News <span class="bd-badge white bg-green">6</span></p>
<p>Comments <span class="bd-badge white bg-red">8</span></p>
<p><span class="bd-badge white bg-blue">Primary</span></p>
<p><span class="bd-badge white bg-gray">Secondary</span></p>
<p><span class="bd-badge white bg-green">Success</span></p>
<p><span class="bd-badge white bg-red">Danger</span></p>

 

Horizontal separator 

The horizontal-separator class can be used to add a horizontal line with 1px, black color, and spacing.

Sample code

<h6>Horizontal line</h6>
<div class="horizontal-separator"></div>
<p>This text will be followed by a horizontal line</p>

 

Disabled text

The HTML element can be disabled using the disable class.

Sample code

<h6>Text formatting</h6>
<p class="disable">Disabled text</p>
<p>Normal text</p>

 

Width

The width class can be used to specify the width in your HTML.

Sample code

<h6>Width</h6>
<p class="bg-gray white width-100">The width of this element is 100%.</p>
<p class="bg-gray white width-75">The width of this element is 75%.</p>
<p class="bg-gray white width-50">The width of this element is 50%.</p>
<p class="bg-gray white width-25">The width of this element is 25%.</p>

 

No margin 

To set the margin to zero, use the no-margin class.

Sample code

<h6>Margins</h6>
<p class="no-margin">I have 0px margin on all sides.</p>

 

List 

Use bd-list and bd-list-item to display a collection of related objects in a list.

Sample code

<h6>Customer list</h6>
<ul class="bd-list">
    <li class="bd-list-item">John</li>
    <li class="bd-list-item">Mathew</li>
    <li class="bd-list-item">Peter</li>
    <li class="bd-list-item">Parker</li>
</ul>

 

Bullet list 

Use bd-list, bd-list-item, and bd-bullet to display a collection of related objects in a bullet order list.

Sample code

<h6>Customer list</h6>
<ul class="bd-list">
    <li class="bd-list-item bd-bullet">John</li>
    <li class="bd-list-item bd-bullet">Mathew</li>
    <li class="bd-list-item bd-bullet">Peter</li>
    <li class="bd-list-item bd-bullet">Parker</li>
</ul>

 

Circle bullet list 

Use bd-list, bd-list-item, and bd-bullet-circle to display a collection of related objects in a circle order list.

Sample code

<h6>Customer list</h6>
<ul class="bd-list">
    <li class="bd-list-item bd-bullet-circle">John</li>
    <li class="bd-list-item bd-bullet-circle">Mathew</li>
    <li class="bd-list-item bd-bullet-circle">Peter</li>
    <li class="bd-list-item bd-bullet-circle">Parker</li>
</ul>

 

Square bullet list

Use bd-list, bd-list-item, and bd-bullet-square to display a collection of related objects in a square order list.

Sample code

<h6>Customer list</h6>
<ul class="bd-list">
    <li class="bd-list-item bd-bullet-square">John</li>
    <li class="bd-list-item bd-bullet-square">Mathew</li>
    <li class="bd-list-item bd-bullet-square">Peter</li>
    <li class="bd-list-item bd-bullet-square">Parker</li>
</ul>

 

Number list

Use bd-list, bd-list-item, and bd-number-list to display a collection of related objects in a number order list.

Sample code

<h6>Customer list</h6>
<ol class="bd-list">
    <li class="bd-list-item bd-number-list">John</li>
    <li class="bd-list-item bd-number-list">Mathew</li>
    <li class="bd-list-item bd-number-list">Peter</li>
    <li class="bd-list-item bd-number-list">Parker</li>
</ol>

 

Collapsible section

The collapsible section can be created as demonstrated in the following images.

After expanded,

Sample code

<div class="bd-accordion-wrapper">
    <div class="bd-accordion">
        <input type="checkbox" id="acc-1" />
        <label class="bd-accordion-title" for="acc-1">Customer list</label>
        <div class="horizontal-separator"></div>
        <div class="bd-accordion-content">
            <ul class="bd-list">
                <li class="bd-list-item bd-bullet">John</li>
                <li class="bd-list-item bd-bullet">Peter</li>
                <li class="bd-list-item bd-bullet">Parker</li>
                <li class="bd-list-item bd-bullet">Mathew</li>
            </ul>
        </div>
    </div>
</div>

 

Was this article helpful?

    Live Chat Icon