Customizing your Help Desk page

Introduction

Upon activation of the Premium add-on of Sola Support Tickets, a basic default help desk page is created for you. In order to further customize your Help Desk page (for example, for it to look like ours), a variety of shortcodes and layouts can be used.

By default, Sola Support Tickets Pro includes Bootstrap styles and Fontawesome icons. This helps you create a custom, modern and beautiful help desk in just a few minutes.

For this tutorial, we’ll be using our help desk page as an example. Our help desk looks something like this:

The default help desk, may look something like this:

How to customize the Help Desk / Support Desk page

Before you begin, make sure you are logged in to wp-admin. Navigate to your list of pages and locate the “Support Desk” page. Click “Edit”.

You should notice the following as the contents of that page:

Each of those shortcodes has a specific function. View details of these shortcodes here.

It’s completely up to you with how you would like your support desk to look and feel. We have provided a number of CSS classes within each element for you to manually style.

Copy our Help Desk layout

We use the following HTML and shortcodes on our custom help desk page:

<p style="text-align: center;">[sola_st_support_centre_search_box]</p>
&nbsp;
<p style="text-align: center;">[sola_st_support_centre_submit_link]</p>
&nbsp;
<div class="row sola_st_main_sections">
<div class="col-md-4 text-center"><i class="fa fa-book fa-4x"></i> <a title="Documentation" href="../documentation/">Documentation</a></div>
<div class="col-md-4 text-center"><i class="fa fa-file fa-4x"></i> <a title="Knowledge Base" href="../support-tickets/">Browse Tickets</a></div>
<div class="col-md-4 text-center"><i class="fa fa-bullhorn fa-4x"></i> <a title="Latest News" href="../product-updates/">Product Updates</a></div>
</div>
<div class="row">
<div class="col-md-6 text-center">[sola_st_support_centre_all_tickets]</div>
<div class="col-md-6 text-center">[sola_st_support_centre_product_updates]</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<h2 class="sola_st_p_h2">Sola Newsletters Documentation</h2>
[sola_st_support_centre_custom_pages parentid="7953"]</div>
<div class="col-md-4 text-center">
<h2 class="sola_st_p_h2">Sola Support Tickets Documentation</h2>
[sola_st_support_centre_custom_pages parentid="7935"]</div>
<div class="col-md-4 text-center">
<h2 class="sola_st_p_h2">Sola Testimonials Documentation</h2>
-coming soon-</div>
</div>

In short, the following shortcodes are used on this page:

• [ sola_st_support_centre_search_box ] : Adds the search box to the page
• [ sola_st_support_centre_submit_link ] : Adds the submit ticket button to the page
• [ sola_st_support_centre_all_tickets ] : Shows the latest support tickets that are public (or if logged in as admin, public and non public)
• [ sola_st_support_centre_product_updates ] : Shows the latest “Product Update” posts that you have created
• [ sola_st_support_centre_custom_pages ] : This can be used to display sub pages of a certain parent page. In this instance, our parent page is 7953 and 7935

Need more help? Use our Support Desk or contact us.