Help Center

Menu

Customise CSS, HTML and JavaScript

Overview

Squiz Workplace administrators can add in custom files, including:

  • CSS (applied either site-wide or page-specifically)

  • JavaScript (applied either site-wide or page-specifically)

  • HTML (applied site-wide):

    • into the <head> tag

    • into the header (just above navigation)

    • into the section below global navigation.

You can add custom CSS, HTML and JavaScript files into the Client customisation files folder within the Media site asset. The file path is as follows:

  • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder).

Site-wide CSS

Squiz Workplace allows for site owners to include custom CSS that will be applied site-wide and override default styles (or add to them).

Check for preexisting custom CSS

Before creating a custom CSS file, check whether or not there is already a preexisting custom CSS file linked within the site asset metadata.

  1. Navigate to the Squiz Workplace site asset:

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Squiz Workplace' (site asset)

  2. Open the Metadata screen of the 'Squiz Workplace' site asset.

  3. Locate the Theme CSS file metadata field within the global-preferences section.

    • If there is already a CSS file linked into this metadata field, then you will need to (carefully) add your CSS to the bottom of this file.

    • If there is no CSS file linked, you can create a custom CSS file.

Create a custom site-wide CSS file

  1. Create a CSS file within the 'Client Customisation Files' folder. Found at the following file location.

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder)

  2. Add in custom CSS to the CSS file.

  1. Navigate to the Squiz Workplace site asset:

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Squiz Workplace' (site asset)

  2. Open the Metadata screen of the 'Squiz Workplace' site asset.

  3. Locate the Theme CSS file metadata field within the global-preferences section.

  4. Link in the custom CSS file you created. Found at the following file location.

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder)

Page-specific CSS

Squiz Workplace allows for site owners to include custom CSS that will be applied page-specifically and override default styles on a page (or add to them).

Check for preexisting custom page-specific CSS

Before creating a custom CSS file, check whether or not there is already a preexisting custom CSS file linked within the metadata on the page asset.

  1. Navigate to the page you wish to apply the CSS to:

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Squiz Workplace' (site asset) > …landing or content page…

  2. Open the Metadata screen of the asset.

  3. Locate the Additional Page CSS metadata field within the Advanced use only section.

    • If there is already a CSS file linked into this metadata field, then you will need to (carefully) add your CSS to the bottom of this file.

    • If there is no CSS file linked, you can create a custom CSS file.

Create a custom page-specific CSS file

  1. Create a CSS file within the 'Client Customisation Files' folder. Found at the following file location.

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder)

  2. Add in custom CSS to the CSS file.

Link your custom page-specific CSS file into the metadata on the asset

  1. Navigate to the asset:

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Squiz Workplace' (site asset) > …landing or content page…

  2. Open the Metadata screen of the asset.

  3. Locate the Additional Page CSS metadata field within the Advanced use only section.

  4. Link in the custom CSS file you created. Found at the following file location.

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder)

Site-wide global head custom HTML include

Squiz Workplace allows for site owners to include custom HTML (including CSS) into the head tag across the site.

Check for preexisting custom HTML include

Before creating a custom HTML file, check whether or not there is already a preexisting custom HTML file linked within the site asset metadata.

  1. Navigate to the Squiz Workplace site asset:

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Squiz Workplace' (site asset)

  2. Open the Metadata screen of the 'Squiz Workplace' site asset.

  3. Locate the Global head custom include metadata field within the includes section.

    • If there is already a file linked into this metadata field, then you will need to (carefully) add your HTML into this file.

    • If there is no file linked, you can create a custom file.

Create a custom global head HTML file

  1. Create a file within the 'Client Customisation Files' folder. Found at the following file location.

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder)

  2. Add in custom HTML to the file.

  1. Navigate to the Squiz Workplace site asset:

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Squiz Workplace' (site asset)

  2. Open the Metadata screen of the 'Squiz Workplace' site asset.

  3. Locate the Global head custom include metadata field within the includes section.

  4. Link in the custom file you created. Found at the following file location.

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder)

Site-wide header custom include

Squiz Workplace allows for site owners to include custom HTML into the header of the site - just above the navigation across the site.

Check for preexisting custom site-wide header HTML include

Before creating a custom HTML file, check whether or not there is already a preexisting custom HTML file linked within the site asset metadata.

  1. Navigate to the Squiz Workplace site asset:

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Squiz Workplace' (site asset)

  2. Open the Metadata screen of the 'Squiz Workplace' site asset.

  3. Locate the Header custom include metadata field within the includes section.

    • If there is already a file linked into this metadata field, then you will need to (carefully) add your HTML into this file.

    • If there is no file linked, you can create a custom file.

Create a custom header HTML file

  1. Create a file within the 'Client Customisation Files' folder. Found at the following file location.

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder)

  2. Add in custom HTML to the file.

  1. Navigate to the Squiz Workplace site asset:

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Squiz Workplace' (site asset)

  2. Open the Metadata screen of the 'Squiz Workplace' site asset.

  3. Locate the Header custom include metadata field within the includes section.

  4. Link in the custom file you created. Found at the following file location.

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder)

Site-wide sub navigation custom include

Squiz Workplace allows for site owners to include custom HTML below the global navigation across the site.

Check for preexisting custom HTML include

Before creating a custom HTML file, check whether or not there is already a preexisting custom HTML file linked within the site asset metadata.

  1. Navigate to the Squiz Workplace site asset:

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Squiz Workplace' (site asset)

  2. Open the Metadata screen of the 'Squiz Workplace' site asset.

  3. Locate the Sub-navigation custom include metadata field within the includes section.

    • If there is already a file linked into this metadata field, then you will need to (carefully) add your HTML into this file.

    • If there is no file linked, you can create a custom file.

Create a custom sub-navigation HTML file

  1. Create a file within the 'Client Customisation Files' folder. Found at the following file location.

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder)

  2. Add in custom HTML to the file.

  1. Navigate to the Squiz Workplace site asset:

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Squiz Workplace' (site asset)

  2. Open the Metadata screen of the 'Squiz Workplace' site asset.

  3. Locate the Sub-navigation custom include metadata field within the includes section.

  4. Link in the custom file you created. Found at the following file location.

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder)

Site-wide JavaScript

Squiz Workplace allows for site owners to include custom JavaScript that will be applied site-wide and run in addition to default JavaScript.

Check for preexisting custom JavaScript

Before creating a custom JavaScript file (for example, raw HTML in a standard page asset), check if there is a preexisting custom JavaScript file linked within the site asset metadata.

  1. Navigate to the Squiz Workplace site asset:

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Squiz Workplace' (site asset)

  2. Open the Metadata screen of the 'Squiz Workplace' site asset.

  3. Locate the JavaScript include metadata field within the includes section.

    • If there is already a JavaScript file linked into this metadata field, then you will need to (carefully) add your JavaScript to this file.

    • If there is no JavaScript file linked, you can create a custom file.

Create a site-wide JavaScript file

  1. Create a JavaScript file within the 'Client Customisation Files' folder. Found at the following file location.

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder)

  2. Add in custom JavaScript to the file.

  1. Navigate to the Squiz Workplace site asset:

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Squiz Workplace' (site asset)

  2. Open the Metadata screen of the 'Squiz Workplace' site asset.

  3. Locate the JavaScript include metadata field within the includes section.

  4. Link in the custom JavaScript file you created. Found at the following file location.

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder)

Page-specific JavaScript

Squiz Workplace allows for site owners to include custom JavaScript that will be applied page-specifically and run in addition to default JavaScript.

Check for preexisting custom JavaScript

Before creating a custom JavaScript file (raw HTML in a standard page asset), check whether or not there is already a preexisting custom JavaScript file linked within the metadata on the page asset.

  1. Navigate to the page you wish to apply the JavaScript to:

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Squiz Workplace' (site asset) > …landing or content page…

  2. Open the Metadata screen of the asset.

  3. Locate the Additional Page JavaScript metadata field within the Advanced use only section.

    • If there is already a JavaScript file linked into this metadata field, then you will need to (carefully) add your JavaScript to this file.

    • If there is no JavaScript file linked, you can create a custom file.

Create a page-specific JavaScript file

  1. Create a JavaScript file within the 'Client Customisation Files' folder. Found at the following file location.

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder)

  2. Add in custom JavaScript to the file.

Link your page-specific custom JavaScript file into the site asset metadata

  1. Navigate to the Squiz Workplace site asset:

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Squiz Workplace' (site asset) > …landing or content page…

  2. Open the Metadata screen of the asset.

  3. Locate the Additional Page JavaScript metadata field within the Advanced use only section.

  4. Link in the custom JavaScript file you created. Found at the following file location.

    • 'Squiz Workplace Mk [X]' (folder) > 'Squiz Workplace - Site' (folder) > 'Media' (site asset) > 'Client Customisation Files' (folder)