Advanced: Customize the CSS

Advanced users can customize the cascading style sheets (CSS) files on their Bomgar public site. By modifying the CSS, you can choose the fonts, colors, and so forth on your public site.

IMPORTANT!

Bomgar Technical Support does not offer technical assistance with CSS customization, as this is typically handled by the Bomgar Services division. Furthermore, Bomgar cannot guarantee that a custom CSS will be compatible with all future feature enhancements and appearance improvements. Therefore, if you customize the CSS of your public portal, be careful to thoroughly test Bomgar upgrades with your custom CSS prior to upgrading your production Bomgar site.

To customize the CSS of your Bomgar public site, follow the basic process below.

  1. Create the CSS file
  2. Upload the CSS file to the file store
  3. Reference the CSS file in the HTML template

Create the CSS file

Note: To create your CSS file, Bomgar recommends starting with the default CSS files and modifying them in a plain text editor. The default CSS files are added by the %HEAD_INCLUDES% macro in the default HTML template. The three default CSS files are common.css, public.css, and mobile.css. Most of the CSS rules are in common.css, but a number of crucial rules are in public.css. The mobile.css file is used when the public site is loaded on mobile devices. It is feasible to include the contents of all three CSS files in a single file to simplify the CSS customization process.

The steps below demonstrate how to make simple changes to your public site using a custom CSS file.

  1. Create a new .css file, open it in a text editor, and create three headings:
    • /* COMMON CSS */
    • /* PUBLIC CSS */
    • /* MOBILE CSS */
  2. Open each of the default CSS files in your browser by loading the following links, replacing "support.example.com" with the URL of your Bomgar site:
    • https://support.example.com/content/common.css
    • https://support.example.com/content/public.css
    • https://support.example.com/content/mobile.css
  3. Select all of the text in each CSS file and paste the contents of each into the corresponding sections of your new CSS file.
  4. In a browser, go to your public site URL, open your browser's developer tool, and inspect the various elements to identify what CSS attributes control them.
  5. Modify the appropriate CSS attributes in your CSS file based on the information from your browser's developer tool and save your CSS file once you are finished.

Upload the CSS file to the file store

  1. Go to /login > Public Portals > File Store.

File Store Header

File Store :: Upload

  1. Locate the section File Store :: Upload and click Choose File.
  2. Select your CSS file using the file browser and click Upload.

    Note: If you already have the file uploaded, the existing version will be overwritten by the uploaded version automatically.

    Note: The maximum size for the entire file store is 1GB.

Reference the CSS file in the HTML template

  1. Go to /login > Public Portals > HTML Templates.

HTML Templates Header

HTML Template

  1. Change the Current Template dropdown to the template used by your public site or create a new one.
  2. Locate the line with %HEAD_INCLUDES%, add a line after it, and enter the following code, where "stylesheet.css" is the name of your CSS file in the file store. This is case sensitive.

    <link href="/files/stylesheet.css?view=1" rel="stylesheet" type="text/css" />

  3. Save your changes, switch to the /login > Public Portals > Public Sites tab, and click the URL of the site which is using the HTML template you just saved.

    If no site is currently using your template, edit or create a site which does so. Once the site loads, it should reflect your CSS customizations.

Sample Code

  • <head>
    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    • <title>%SUPPORT_PORTAL_PAGE_TITLE%</title>
    • %HEAD_INCLUDES%
    • <link href="/files/stylesheet.css?view=1" rel="stylesheet" type="text/css" />
  • </head>