Table of Contents
Custom Branding
Updated
by Niamh Ferns
Custom Branding Overview
You can easily define branding for your DeskDirector portal from the admin console. In this article we will explain how to set them up and where they will be used.
Branding the Portal using Brand Packages
Brand packages enable you to deploy custom branding for specific companies, or for your custom domains.
Start creating your brand packages via the Admin portal under System > Brand Packages:
Host Package vs Custom Package
The main difference between them is that host package is deployed for a specific hostname/custom domain. This comes handy if you have multiple custom domains you want to deploy specific branding for each. The service host can't be changed and is specifically assigned to the URL
Custom Package on the other hand can use any host URL available and can be updated anytime.
Brand Packages Elements
There are several elements that can be specified/customized for every brand package you will create.
Portal Title
This is basically what your portal will be named. For example, if your company name is VeryAwesomeITPeople, you can use VeryAwesomeITPeople Support Portal as your portal title. You can use any title that you prefer. It will be displayed inside the portal, on a browser tab, and when the site is saved into someone's mobile home screen.
Email delivery account
The deployment of brand package, also enabled us to deploy specific email delivery accounts for each. This way, a specific mailbox can be used for email notifications for certain hosts/companies.
With this setup, you can have an email delivery account from support@companyA.com and be assigned to Company A, then another email delivery account for other hosts/companies.
Service Host
Your DeskDirector URL and any custom domains added to the instance. This value is used inside email templates that reference the DeskDirector URL token.
Colour Themes
This is controlled by the Portal Theme and Advanced Theme section. Here you can specify the global color scheme for the portal.
Logo Images
Favicon
Favicon is typically used in web browser's tab. It is used to help indicate which website the tab belongs to. Here is a screenshot of both the Portal Title and the Favicon defined and how it will look on a browser tab.
Logo
Logo is used in portal's login screen and in the left side menu after logging in. It is recommended to use a PNG with a transparent background as this can easily adjust to whatever colors are used when theming your DD Portal.
Mobile Logo
The mobile logo will be used when the web portal is added into a smartphone's home screen. Any changes to the mobile logo will not automatically change logo in the smartphone's home screen as this is cached in the phone. The user will need to delete and resave the web app into their home screen.
Colour Theming
The easiest way to set colors for the portal is via the "Portal Theme" section of a brand package.
Just select a primary color from the list, and we will define every other element's color based on the primary color you selected. This means you do not have control over the colors of the elements on the portal aside from selecting the primary color for the palette.
Dark side navigation converts the login screen and the left navigation into dark gray when enabled. If disabled, the login screen background and the left side navigation will turn white.
Advanced Colour Theming
If you want more control over the colors that will be used in the client portal, you can use the Advanced Theme section of a brand package. This allows you to control several individual elements in the client portal.
Color Palette
At one point, the DeskDirector client portal used the Material color palette, but we have since switched to using Tailwindcss. Only a few color variants do not have an equivalent in Tailwindcss. Colors like light-green, deep-purple, deep-orange, are still using Material color palette and also have been marked at deprecated. We will migrate them to the closest variant in the future.
Color Variants
The naming of color variants previously was primary, accent, and warn. We have now switched to call them as primary, secondary.
Primarydisplayed most frequently across the client application. We can also treat this as brand color.Secondaryis mainly for subtle components. The secondary colour has now been locked to blue-gray as this fits the majority of use-cases.Warnused to be available but we found it to be a problematic choice and so it was removed.
Primary Color Palette
You can change primary color palette in our brand setting. You can also define your own. By defining your own color palette in advanced setting, you can change any UI component that uses the primary color.
Admin portal has tailwind color palette loaded, where you can type name and select them.
Hosts Configuration
There are instances where you are using a custom domain for your DeskDirector instance, or you are using Streamline IT, and you want a specific host, icon, logo and title will be displayed differently from to your main instance.
This can be easily done in the Admin portal under System > Hosts Configuration. This configuration page is designed for DeskDirector instances with multiple DNS record - such as custom domain or multiple sub domains.
The screenshot above is showing our dev instance with a custom subdomain. The 3 boxes adjacent to each subdomain represents the favicon, logo and mobile logo set for each URL. You can configure the colors and images for each URL by clicking on each and it will reveal a page where you can specify the portal title, colors and logos.
The concept on the fields should be roughly the same as the global setting, but any changes here overrides the global setting. You can check these two articles about theming and branding to give you an idea what the fields pertain to.
