Customizing Your Workspace

Overview

Workspace Admins and Editors can customize your design system’s styles to help the site better reflect your brand experience. 

This article outlines how to customize the following elements and styles of your workspace:


Customizing the Workspace Logo

When logged in as an Admin, the logo space to the left of the workspace name in the top right corner of the workspace will display either the  Upload logo UI or a Delete (x) button for removing the existing logo. Follow the prompts to upload, remove or replace the workspace logo.

NOTE: This change does not require a user to go through the Git publishing workflow, or to merge any changes (if made locally) into the repo.

  

Customizing the Home Page

NOTE: To begin making changes, an Editor or Admin first needs to create or select a branch. Branches can be created using the + New Branch button located in the top admin toolbar or the Edit button at the top of any page. Users can also select an existing branch by clicking the branches dropdown (defaulted to "latest").
  1. Navigate to the home page by clicking the Knapsack logo or workspace name.
  2. Click the “Edit” button to open the home page styling menu

    Note: If you haven’t already made a new branch, you’ll be prompted to do so here.
  3. Click the “Style” button to update additional options:
    1. Hide/show text
    2. Title Color
    3. Description Color
    4. Background Color
    5. Background Image
    6. Banner Size
  4. Add any additional content by clicking the + button at the bottom of the page.
  5. Commit your changes through Knapsack’s publishing workflow.

Customizing Page Headers

Admins and Editors can also customize page headers on individual pages to feature your company’s branding throughout the design system. 
  1. Navigate to the page whose header you’d like to update (or add a new page). 
  2. Click the “Edit” button to open the header styling menu.

    Note: If you haven’t already made a new branch, you’ll be prompted to do so here.
  3. Update title and description text by clicking on the default text.
  4. Click the “Style” button to open customization options.
  5. Customize additional options:
    1. Hide/show text
    2. Title Color
    3. Description Color
    4. Background Color
    5. Background Image
    6. Banner Size
  6. Commit your changes!

Advanced Page Header Settings

NOTE: configuration options are only available for Content Pages. Configure options by editing the Page's corresponding YAML file when running Knapsack locally.

Content Page Headers currently support the following configuration options found under the pageHeader map:

backgroundSize

  • Type: String
  • Available values: cover, contain, string

backgroundPosition

  • Type: String
  • Available values: left, center, right, string

backgroundRepeat

  • Type: String
  • Available values: repeat-x, repeat-y, repeat, no-repeat

knapsack.custom-page.homepage.yml is an example of a Content Page with a Page Header that can be configured using the above options.

Example:

data/knapsack.custom-page.homepage.yml

Customizing Navigation & Accent Colors

From the Workspace Settings Menu, Admin users can modify the following colors used throughout the left side navigation:

  • Side Navigation Background
  • Navigation Text
  • Accent (hover states, icons, Pattern Page tabs)
  • Links

Users can set specific values (e.g., Hex, RGB), use a color picker, or choose from existing color design tokens that are already defined in the workspace. 

Based on the colors selected, Knapsack will automatically generate appropriate variations for hover and other states.

NOTE: Knapsack will not allow users to save color combinations that present readability challenges per the W3C WCAG accessibility guidelines.

  

Removing Side Navigation Icons

From the Workspace Settings Menu, Admin users can use the Enable Sidebar Icons toggle to disable or enable default icons within the workspace side navigation.

NOTE: This change does not require a user to go through the Git publishing workflow, or to merge any changes (if made locally) in to the repo.

 

Changing the Workspace Name

From the Workspace Settings menu, Admin users can modify the Workspace Name. NOTE: This change does require a user to go through the Git publishing workflow or to merge the changes (if made locally) in to the repo.