Custom themes

Instructions for providing a custom theme

Introduction

In Browsolate, you can fully customize the look and feel of the interface by providing a custom CSS file. This CSS file should be stored in an S3 bucket, and the ARN of the CSS file must be provided during the setup process.

This guide will walk you through the steps for creating and using a custom theme.

Steps Overview

  1. Create your custom CSS file.
  2. Upload the CSS file to S3.
  3. Get the ARN of the S3 object.
  4. Specify the ARN in the CloudFormation template or Marketplace configuration.

Example Custom CSS File

Here is an example of a CSS file that customizes various elements of the Browsolate interface:

:root.b8-theme-cp-default {
    --theme-display-name: Cherrypops Inc;
    --company-logo: 'https://cherrypops.inc/assets/logo.png';
    --toolbar-background: linear-gradient(145deg, #ff7bff, #ff56b3);
    --toolbar-button-hover-background: linear-gradient(145deg, #ff56b3, #ff7bff);
    --toolbar-button-active-background: linear-gradient(145deg, #ff3366, #ff4085);
    --toolbar-button-text-colour: white;
    --toolbar-button-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
    --toolbar-button-active-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.2);
    --toolbar-button-focus-box-shadow: 0 0 0 4px rgba(0, 23, 55, 0.5);
    --toolbar-button-font-size: 24px;
    --toolbar-button-width: 40px;
    --toolbar-button-height: 40px;
    --toolbar-button-padding: 8px 8px;
    --toolbar-height: 55px;
    --toolbar-menu-font-size: 16px;
    --toolbar-url-background-colour: #090909;
    --toolbar-url-text-colour: #ece;
    --session-end-content: 'https://media.istockphoto.com/id/944014530/video/animation-of-digital-human-head-on-colorful-noisy-moving-lines.mp4?s=mp4-640x640-is&k=20&c=vhYdSXvu3CDPXjtwtv6ExxOBg44nPU0_14aYbeHAOyM=';
}

Explanation of the Fields:

  • --theme-display-name: The name of your theme, displayed in the Browsolate interface.
  • --company-logo: The URL of your company’s logo, which is shown in the interface.
  • --toolbar-background: The background style for the toolbar, in this case, a gradient.
  • --toolbar-button-hover-background: The background style when hovering over toolbar buttons.
  • --toolbar-button-active-background: The background style for active toolbar buttons.
  • --toolbar-button-text-colour: The text color of the toolbar buttons.
  • --toolbar-button-box-shadow: The box-shadow applied to the toolbar buttons by default.
  • --toolbar-button-active-box-shadow: The box-shadow for active toolbar buttons.
  • --toolbar-button-focus-box-shadow: The box-shadow applied when a toolbar button is focused.
  • --toolbar-button-font-size: The font size of toolbar button text.
  • --toolbar-button-width: The width of toolbar buttons.
  • --toolbar-button-height: The height of toolbar buttons.
  • --toolbar-button-padding: Padding around toolbar buttons.
  • --toolbar-height: The height of the entire toolbar.
  • --toolbar-menu-font-size: The font size used in the toolbar menu.
  • --toolbar-url-background-colour: The background color of the URL input box.
  • --toolbar-url-text-colour: The color of the text in the URL input box.
  • --session-end-content: URL of a video or image displayed when the session ends.

Step 1: Create Your Custom CSS File

Create a CSS file with your custom styles, following the example above. Save the file locally, ensuring that the .css extension is used.

Step 2: Upload the CSS File to S3

  1. Log in to the AWS Management Console.
  2. Navigate to S3 and create a new bucket (or use an existing bucket).
  3. Upload your custom CSS file to the S3 bucket.
  4. Set the appropriate permissions for the file to ensure it can be accessed by Browsolate.

Step 3: Retrieve the ARN of the CSS File

To retrieve the ARN of your CSS file in S3:

  1. In the S3 console, locate the uploaded CSS file.
  2. Click on the file to view its details.
  3. The ARN of the object will be displayed in the details section. It will look something like this:
arn:aws:s3:::bucket-name/path-to-your-file.css

Step 4: Specify the ARN in the Setup

During the installation of Browsolate, you will need to specify the ARN of your custom CSS file in the ThemeCSS . This can be done either in the CloudFormation template or the AWS Marketplace configuration.

Example CloudFormation Parameter

Parameters:
  ThemeCSS:
    Type: String
    Description: "ARN of the custom theme CSS file in S3"
    Default: "arn:aws:s3:::bucket-name/path-to-your-file.css"

By setting the ThemeCSS parameter to the ARN of your stored CSS file, Browsolate will apply your custom theme during operation.