How to Add & Customize a Site

Create and manage multiple help sites using a single account login. Start by adding a new site to your dashboard, customize & brand it as per your targeted audience. This article will guide you through every important step in detail, whether you're just starting with ProProfs Knowledge Base or aiming to improve your current help site.

Here are the Customization and Branding options available in ProProfs Knowledge Base :

• Customize language settings, site address, name, and much more to ensure your site meets the specific needs of your audience and your organization. 
• Brand your site, from selecting a color scheme and uploading a favicon to customizing the site header and logo to align with your company's branding. 

Here is how multiple Knowledge Base sites under the same account will appear:

Benefits of adding & customizing multiple sites:

• Save time and effort in setting up a new help center with every product addition

• Control various help centers from a centralized portal

• Use our comprehensive customization tools to modify the site’s appearance

In this article, you’ll learn:

1. How to Add a Site

2. How to Manage Site Settings

3. How to Brand a Site

 How to Add a Site

Step 1: In the dashboard, go to Site > Create New.

Step 2: Click Create from Scratch to build the site from the ground up, or choose a theme from our library that suits you best

Step 3: Enter your new site's URL and name, then click Create.

You have successfully added a new site.

 How to Manage Site Settings

Step 1: From your dashboard, select Settings > Configure.

You will find the below options to modify:

• Language Settings: Adjust the site’s interface language for your audience. Read more about multiple languages.

• Site Address - This will be the URL of your site. Each site you create will have its URL. You have the option to use your custom domain name (such as help.mydomain.com) by clicking Setup your domain. Read more about custom domains.

• Site Name - This is the site’s name. The name will appear in the web browser’s title bar in this format. However, the user will only see the page title in the browser’s title bar: [Page Title] - [Site URLSite Name]

• Home Page - The start page is the page that first shows when a user visits your site. To change the start page, click the Select button and choose the page you want to be the new start page in the overlay.

• Hide Global Search Box - You can hide the search box on the top right of the home page. If you have a prominent search box on the home page, you may not want another search box on the top right, so now you can hide that one.

• Breadcrumb - Enable breadcrumb to help users navigate your knowledge base easily.

• Pop-up Notification - Enable the setting to add the option of notifying users every time you update or publish an article.

You will also see additional tabs on the top, which are explained in detail in other sections.

• Guide to setting up Mobile

• Guide to integrating with Google or Zendesk

• Guide to making your site SEO crawlable

Step 2: Go to Settings > Table of Content to manage the TOC of your help center.

You will find the below options to modify:

• Show Table of Contents - This will show or hide the entire table of contents.

• Page Table of Contents - This will show or hide the TOC within a page.

• Style - Choose a table of contents style from the two options: Modern or Tree.

You get different customizable options with each style.

• Width - This sets the default width of the side table of contents.

• Background color - This sets the background color.

• Link Color - This sets the color of the page links.

• Keyword Index - Enable or disable to show or hide the keyword index tab.

• Default View - You can control the default view for the site. New users will see the default view when they first visit your site.

  • Tabs - Each tab will display a separate page. Users can open multiple tabs that interest them (like bookmarking).

  • Basic (no tabs) - Only one page will display at a time.

  • Allow users to change their view - Users can choose their view if this option is checked. If it is unchecked, the drop-down menu will be hidden.

• Share - This will turn on your site’s social sharing on Facebook and Twitter.

Search Type:

Basic Search - Also known as full-text search, this shows the most relevant documents for the search terms specified by the user in your knowledge base search.

Exact Search - This shows only those articles, documents, or files with the accurate word or phrase in the search terms specified by the user in your knowledge base search.

• Disable Copying - You can prevent users from copying the Knowledge Base content.

• Link folder to page - You can enable the folder to open as a page when the user clicks on the folder link in the TOC. Disabling this will expand the folder upon clicking, allowing users to view the articles in the TOC.

• Folder Index - This option will show/hide the indexing on the folder page.

• 301 Redirect - You can permanently redirect one URL to another without impacting the SEO.

• Find & Replace - You can use this to replace a word on published pages.

• Tag Tooltips - This option will let you add tooltip links in the articles.

• Folder Page style - You can select the number of columns to organize & view subfolders when a user opens a folder. The default option is One.

 How to Brand a Site

ProProfs Knowledge Base provides several customizable settings to enhance the appearance of your help site.

To access these settings, go to Settings > Branding.

You will find the below options to modify:

• Theme - Choose a color scheme from the given options that fit your company’s branding.

• Favicon - You can reinforce the visual identity of your site by using a favicon. The favicon appears in your browser’s address bar. For the best results, ensure the icon’s width and height are the same. You can also use a free tool to create your favicon before uploading it to ProProfs.

Header & Logo

• Site Header -

Default: You can go with the default header because it works well for most organizations and hands you control over several customizations.

Custom: If you choose a custom header, you get to modify the CSS and HTML code of the help site. We recommend it for advanced users only.

CSS Code

• The first box is for your header’s CSS.

• You need to copy and paste your header’s CSS into this box. It is recommended that you test it on your local computer first.

• Suppose you are taking code from your current website. In that case, it is recommended that you only copy the CSS for the navigation and header. Do not copy CSS from other areas of your website.

• Use selectors such as .class and #id for all your elements to avoid conflicts with the application's CSS.

• Do not use CSS selectors like BODY, P, TABLE, H1, *, or any other generic selector. It will cause conflicts with the application’s CSS. Use defined selectors such as .class,#id for all your elements.

• Below is the correct format for the CSS:

#login a:link, #login a:visited {
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    font-size: 11px;
}
#navmain {
    background-color: #0075CE;
}
.basictab {
    padding: 3px 0;
    margin-left: 25px;
    font: bold 13px Verdana;
    border-bottom: 1px solid #0075CE;
    list-style-type: none;
    text-align: left;
}
.basictab li {
    display: inline;
    margin: 0;
}
.basictab li a {
    text-decoration: none;
    padding: 3px 7px;
    margin-right: 3px;
    border: 1px solid gray;
    border-bottom: none;
    background-color: #f6ffd5;
    color: #2d2b2b;
}

HTML Code

• You need to copy and paste your header’s HTML into this box. It is recommended that you test it on your local computer first.

• Do not enter in JavaScript or links to JavaScript files <script src="file.js"> </script>

• If your header has a search box, please remove it. No <Form> elements are supported.

• Do not enter dynamic or server-side code such as PHP, ASP, or JAVA.

• ONLY pure HTML is supported at this time.

• Below is the correct format for the HTML:

<div id="navmain">

<div id="navmain">

• Logo -

• You can upload your logo to appear in the top left corner of your pages.

• Before you start, save your logo copy to your computer.

• Your image's file type must be one of these: .jpg, .gif, or .png.

• Your file size must be less than 200KB.

• The logo size must be less than 150 pixels in height. If your logo is > 150px, it will be scaled down (keeping the aspect ratio locked).

• When you upload a logo, you automatically replace the current logo.

Steps:

• Click Your Logo. An overlay opens.

• Click Upload Logo.

• Choose the file to upload as your logo.

Once done, your logo will appear in the box as shown below.

The logo will appear in the header once you save it, and the page refreshes automatically.

• Log In Link - You can enable/disable the option to log into the backend of your help site from the audience view.

• Header Color - Set color using this option. You can also revert to default with a click.

• Text Color - Choose a color for text in your header.

• Site Header - You can upload a header background to enhance the visual aesthetics of the header.

Step 1: Click to Upload.

Step 2: Choose the file.

Step 3: Click Save. The page refreshes automatically, and you can see the header background.

To remove the header background, click delete.

• Background Repeat -

Select the repeat - This is the same as the CSS class {background-repeat} and will have the following options:

repeat-x - The header background image will be repeated only horizontally.

repeat-y - The header background image will be repeated only vertically.

no-repeat - The header background image will not be repeated

• Header Height - You can also control the height of the header.

• The default height is 45 pixels tall.

• Enter the desired value in the Header Height input field to change the header height.

Advance

At the bottom, you will find the Advance option.

Click to expand and open a box where you can add your CSS to override the site’s CSS.

We recommend the feature only to expert users.

Other Important Notes

You can host the images in your HTML code on your server. For example, the logo could be <img src= “http://www.proprofs.com /logo.png”/>, or you can upload the image using the image manager and right-click on it to get the path.

Zendesk Header

You can also use the same header on your Zendesk site. Check the Zendesk Header page here.

That is all about adding & customizing a help site in the ProProfs Knowledge Base.