Help Center

The default design theme is available from [Service Management → Help Center → PC/Mobile Template Management], and the default theme can be modified to suit your service.

Click the Add Template button to display the Add Template screen. Select a template type from the default template/default template (remove navigation) to select the type of script you want to modify. (CSS, HTML, JS)

This FAQ gives examples of CSS changes that apply color/bold/underline/italic/size effects to text and font.

 

1) Apply effects to text

In the Online Contact Service Guide [Service Management → Help Center → Template Management], CSS table provides a summary of key elements that can be used to modify CSS. You can use the web engine's developer tools to examine the html elements on the Help Center page to find the names of the elements you want, or you can refer to the table in the Service Guide.

 

In this example, we will apply effects as follows. 
① Apply 'Underline', 'Bold', and 'Size' effects to the top title of the main page (CSS element name .carousel-capture.title_txt) 
② Apply 'Color', 'Italic' and 'Size' effects to the subtitle of the main page (CSS element name .carousel-capture.sub_txt)

 

Select CSS in the script to see a list of imported css files. You can view the contents of the CSS file by combining it with the address of the Online Contact which is currently in use with the path of the css file containing the element you want to modify.

- Address Format: https://Domain Name.oc.toast.com/CSS File Path

 

Copy and paste the contents of the CSS file into the editor, and modify the part you want to modify.

In this example, the following items were modified in the original CSS file to apply the mentioned effects.
- .carousel-caption .title_txt : modify font-size, add font-weight, text-decoration, text-decoration-color elements
- .carousel-caption .sub_txt : modify font-size, color, add font-style element

 

 

Save the modified CSS file, then click the Upload File button on the [Service Management → Help Center → Manage File Uploads] tab to upload the CSS file. Copy the file path of the corresponding CSS file that appears when the upload is complete.

Return to Add Template again and paste the copied file path into the imported CSS list that appears when you select the script type to CSS.

- Format: @import "File path";

 

2) Change Font

 

For the Online Contact Help Center default template, the common.css file in the CSS list defines font related information. As you applied the effect to the text earlier, combine the path of the common.css file after the address of the Online Contact current in use, move the page, and copy and paste the contents of the css file into the editor.

 

In CSS files, font information is defined in the above format (Default format with minimal entries, additional elements may be added according to the CSS application rules).

To change the font of the Help Center template, you can use two methods: ① Font File, ② Web Font Link.

① Font File

 

When using font file, download the font you want and click the Upload File button on the [Service Management → Help Center → Manage File Uploads] tab to upload the font file. When the upload is completed, copy the file path of the font file that is displayed and paste the file path into the 'path' part of the font format in the CSS file.

- Format
@font-face{
font-family: 'Font Name';
src: url ('path');
}

② Web Font Link

For web font link, please paste the code provided by the font site into the CSS file.

After pasting the file path or web font code, change the font for the current language to the font you want to apply in the font definition by language section at the bottom of the common.css file.

 

After saving the CSS file, upload it from [Service Management → Help Center → [Manage File Uploads] tab, copy the file path and import it in the template. From Preview button, you could see multiple effects applied in the main page of the help center.