loading Loading...
add chat to your website

Add and Customize a Site

With ProProfs you can create and manage multiple documentation websites under a single login.  Each site has its own pages, color theme, CSS, domain name, and other features. If you have several products that you sell, you might want each product to have its own documentation site with its own page topics, color theme, and so on. ProProfs makes this easy. Logged-in users can easily jump between your different ProProfs sites under a single login, but your customers will think they are on two different sites.

 


 

Adding a New Site

  1. Log in to your account (as an Administrator) and click Settings.
  2. Click on Configure & Brand.
  3. Click Add New Site.

When adding or editing a site, you will find two tabs.  The first tab is for your site's settings. The second tab is for branding.

Settings

  • Site Language - Select the site's language. Selecting a site's language will change the site's interface text to the selected language. Read more about multiple languages.
  • Site Address - This will be the URL of your site. Each site you create will have its own URL. You have the option to use your own custom domain name (such as help.mydomain.com) by clicking Setup your own 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: [Page Title] - [Site Name]
  • Start Page - The start page is the page that first shows when a user visits your site. You can change the start page here to any page.  To change the start page, click on the Select button. An overlay will open up with a list of pages.  Click on the page title of the page that you want to be the new start page.
  • Breadcrumb - Enable breadcrumb to help users navigate your knowledge base easily.
  • Hide Global Search Box - You can hide the search box on the top right from the home page. If you have a large search box on the home page you may not want to have another search box on the top right so now you can hide that search box.
  • Table of Contents - This controls the table of contents.
    • Enable TOC - This will show or hide the entire table of contents.
    • Style - Choose a table of contents style.
    • Hide Empty Folders - Select this option if you want empty folders to be hidden when logged out. Folders will hide if there are no published pages inside of it. 
    • Show page icon - This will show or hide the icon for a page.
    • 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 - Checking or unchecking this will show or hide the keyword index tab.

  • Default View - You can control the default view for the site. The default view is what new users will see when they first visit your site.
    • Tabs - Each tab will display a distinct 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 own view - If this option is checked, users will be able to choose their own view. If it is unchecked, the drop-down menu will be hidden.
  • Share - This will turn on social sharing such as Facebook, Twitter and Google+  for your site. 
  • Search Type-
    • Basic Search - Also known as full-text search, this pulls up the most relevant documents for the search terms specified by the user in your knowledge base search. 
      Tip* Use this for your public knowledge bases, where most readers search without prior knowledge of the exact name/title of the article or document they are looking for. 
    • Exact Search - This pulls up only those articles, documents or files that have the exact word or phrase as in the search terms specified by the user in your knowledge base search.
      Tip* Use this for your private knowledge bases, where team members, employees and partners can quickly pull up precise information by specifying the exact title or name of a document or article.
  • Disable Copying - You can prevent your knowledgebase content from being copied by users. 

Branding

To change the branding of your site:

  1. Log in to your account (as an Administrator) and click Settings.
  2. Click on Configure & Brand.
  3. Select the site you want to edit.
  4. Click on the Branding tab.

  • Theme - You can select from different themes to match your company's branding. Changing the theme will instantly refresh the screen so that you can preview the theme.
  • 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 make sure 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.

Powered by ProProfs

  • By default, a "powered by ProProfs" attribution will appear on the footer of your site.
  • If you want to hide this go to Configure & Brand.
  • Select the site you want to edit.
  • Click on the Branding tab.
  • Check Hide 'Powered By ProProfs' attribution from footer
  • Save. The attribution will no longer appear on the site.

Site Header

You can customize the top header/nav of your ProProfs site. 

Default Header

The default header works well for most companies and gives you lots of control over customizing your site.

Upload Your Own Logo

  • You can upload your own logo to appear in the top left corner of your pages.
  • Before you start, make sure you have a copy of your logo saved 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 larger than that, it will be scaled down (keeping the aspect ratio locked).
  • When you upload a logo, you automatically replace the current logo.

 

Follow these steps:

  1. Click the Browse button.
  2. A new window opens. Now browse your computer for a logo picture. Find the picture, select it, and then click OK.
  3. The logo will automatically upload and appear in the header.
     

Delete or Change Your Logo

  • To change the logo, just follow the steps above to upload a new logo. The old logo will automatically be replaced by the new one.
  • If you would like to delete the logo, you can do so by selecting delete in the logo preview window.
If your logo looks distorted or squashed, then check that your logo file does not exceed the maximum height of 150 pixels. The system will automatically resize logos larger than that.

 

Header Background Color

You can use a header color or a header background image.  To change the background color, follow these steps:

  1. Delete the header background image (if there is one).
  2. Click on the input field. A color picker will appear.
  3. Select the color you want. As you change the color, the color in the header will change to give you a real-time preview of the color.
  4. Click outside of the color picker to close it.
  5. Click the Save button.

If you want to revert back to the original color, click under the input on (Revert to default). This will restore the original color.

 

Header Text Color

You can also change the color of the text used for the Log in and Log out button (in the upper right-hand corner of the header).

  1. Click on the Text input field.
  2. The color picker will appear. Select the color you want.
  3. Click outside of the color picker to close it.

If you want to revert back to the original color, click under the input on (Revert to default). This will restore the original color.

 

Upload Your Own Background Image

You can also use your own background image for the header. This will allow you to use gradients and other design elements in your header.


Here is an example using this image with a repeat-X (so it repeats to fill the header):

To upload your own header background image, follow these steps:

  1. Click the Browse button.
  2. A new window opens. Now browse your computer for the header background image. Find the image, select it, and then click OK.
  3. The background will automatically upload and appear in the header.
  4. 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.
       

Delete or Change the Header Background Image

  • To change the header background image, just follow the steps above to upload a new header background image. The old image will automatically be replaced with the new one.
  • If you would like to delete the header background image, you can do so by selecting delete in the preview window.

Header Height

You can also control the height of the header.

  • The default height is 45 pixels tall.
  • To change the header height, enter the desired value in the Header Height input field.
  • The header will change in real time.

Once you have finished adding and customizing your site, click the Save button.

Using Your Own HTML/CSS Header

If you are familiar with HTML/CSS, we make it easy to use your own HTML header. To use your own header, click on Use Your Own Header (Custom HTML/CSS).


 

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.
  • If you are taking code from your current website, it is recommended that you only copy the CSS for the navigation and header. Do not copy CSS from other areas of your website.
  • To avoid any conflicts with the application's CSS, use selectors such as .class,#id for all your elements.
  • Do not use CSS selectors like BODY, P, TABLE, H1, *, or any other generic selector. This 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 in dynamic or server-side code such as PHP, ASP, JAVA
  • ONLY pure HTML is supported at this time.
  • Below is the correct format for the HTML:

 

<div id="navmain">
<div id="login">{login}</div>
<div id="logo"> <img src="http: //site.com/1.png"/></div>
<ul class="basictab">
<li> <a href="#">Home</a></li>
<li> <a href="#">Tour</a></li>
<li class="selected"><a href="#"> Documentation</a> </li>
<li> <a href="#">Forums</a></li>
<li> <a href="#">FAQ</a></li>
<li> <a href="#">Contact Support</a></li>
</ul>
</div>
 

 

Adding a Log in/Log out Link

  • To add a log in/log out link to your custom header, simply insert {login} in your HTML code.
  • The application will automatically insert the correct link. Log in when you are not signed in, and log out when you are signed in.
     

Header Height

You can also control the height of the header.

  • The default height is 45 pixels tall.
  • To change the header height, enter in the desired value in the Header Height input field.
  • The header will change in real time.

Once you have finished adding and customizing your site, click the Save button.


Other Important Notes

  • The images in your HTML code can be hosted on your own 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 you have on your Zendesk site. See the Zendesk Header page.

Other Tabs

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