Skip to main content

Theming

General​

Each customer Hub is usually assigned a unique theme.

We maintain and utilise these themes via the Themepark Repo.

Theming Slack channel

Checkout the #theming channel on Slack to get theming help or for discussion about new or existing customer themes.

Hub theme settings​

Theme settings for a Hub can be found and set by super users:

Settings → General → Hub details → Theme

Hub theme settings

Workflow​

  1. Requests for new themes or theme changes are received via the Marketing team on Slack, or directly from customers via support emails (support@5app.com) . If further information or logos, favicons are needed, these are requested from Marketing / customers as per the 5app hub branding guidelines.
Emailing clients via the support email channel

When responding to a client via the support email channel, make sure to hit reply all and to CC support@5app.com, so that everyone knows whether a support request has already been responded to.

  1. A new Themepark issue is created for the theme change / creation.

  • For new themes: the ticket should contain the theme name, a link to google drive folder with the logos and favicons, any provided design guidelines and further theme information.

    Digital Hub Setup Form

    New clients will fill out a Digital Hub Setup Form. Check the "Customisation and Branding" tab of this form for any theme requirements from the client and link the form within the new Themepark issue. Digital Hub Setup Form example

  • For theme changes: the ticket should contain the theme name and the details regarding the requested theme changes

  1. The theme issue gets picked up and worked on. See the Themepark ReadMe for detailed information on how to create / update and deploy a theme.

  2. Once the theme issue is considered "done", the dev who worked on the issue respectively notifies Marketing via Slack, or the customer via the support email channel.

Theme Deployment issues​

  • Should CircleCI not pick up on a PR, the tests can be retriggered by running: git commit -m "chore: touch" --allow-empty

Previewing themes​

Before requesting review and/or merging a new theme into main branch, it's advisable to preview the new theme on https://dev.fiveapp.info/home. Please note that favicons may not display or update in your browser when running the themepark locally.

To ensure that the updated theme appears as expected, follow these steps:

  1. Go to CircleCI Pipelines.

  2. Find your working branch (NOT THE MAIN BRANCH). Needs approval example

  3. Click on the thumbs-up icon to approve the approve_testing_deployment and deploy-to-frontend-testing workflows.

  4. Once approved (i.e., green ticks), visit https://dev.fiveapp.info/home. Approved example

  5. Change the theme on the settings page.

  6. Refresh the page a couple of times to see the updated themes and favicons.

Further resources​