Your internal communication platform represents the values and the culture of your organization. Staffbase offers various possibilities to infuse your organization’s brand identity into your internal comms app. The following options allow you to configure and customize your platform branding directly in the Studio.
The following options are available in the Classic UX.
Navigation
In the Navigation, you can define the Logo and customize the colors for the App Header and Intranet Header.
Logo
Upload a logo that reinforces your organization’s core values. Your logo is shown throughout your mobile and web app. You can upload a square- or rectangle-shaped logo.
Requirements
Logo Size:
- Square logo size exactly 40 x 40 px
- Rectangular logo size exactly 120 x 40 px
Logo Format:
- JPG
- PNG
- GIF
- TIF
- BMP
- HEIC (iOS high-efficiency format)
Navigator
In the Navigator branding settings, you can select a logo for the Navigator and customize the colors.
Navigator Logo
Upload a logo for your Navigator. The logo appears as an icon that users can click to open the Navigator. It is displayed in the bottom-right corner of your web app and above the bottom navigation bar for your mobile app. The logo is also visible within the Navigator during user interactions.
Requirements
Logo Size:
- 64 x 64 px or larger
- Up to 25 MB
Logo Format:
- JPG
- PNG
General Appearance
Main Settings
In the main settings, you can select the Main Color and Main Page Title for both the App and Intranet. The Main Page Title can be your organization's name, your App, or Intranet name.
Desktop Background Image
You can optionally, upload a background image for desktop users from My Files or your local computer.
Recommendations: Image size 1920 x 1080 px or larger: If the image does not match the recommended size, the image is automatically zoomed or cropped to the optimal size, which can result in reduced quality.
The background image is used in the following places:
- Public area
- Behind the sign-in dialog, if you don't have a public area
- Everywhere in your Intranet after sign-in
Additional Settings
In the additional settings you can find the Custom CSS which can be applied to the Intranet and Content Designer for Pages. You can apply custom CSS for more precise customization. Learn how to set up custom CSS.
The following options are available once you have activated the New UX.
Navigation
In the Navigation, you can define the Logo and customize the colors for the App Header and Intranet Header. In the Intranet section, you can additionally select between the Full Width and Floating navigation options.
Logo
Upload a logo that reinforces your organization’s core values. Your logo is shown throughout your mobile and web app. You can upload a square- or rectangle-shaped logo.
Requirements
Logo Size:
- Square logo size exactly 40 x 40 px
- Rectangular logo size exactly 120 x 40 px
Logo Format:
- JPG
- PNG
- GIF
- TIF
- BMP
- HEIC (iOS high-efficiency format)
Footer
You can add a footer to display at the bottom of your App or Intranet with customized logo, links, and social media.
Navigator
In the Navigator branding settings, you can select a logo for the Navigator and customize the colors.
Navigator Logo
Upload a logo for your Navigator. The logo appears as an icon that users can click to open the Navigator. It is displayed in the bottom-right corner of your web app and above the bottom navigation bar for your mobile app. The logo is also visible within the Navigator during user interactions.
Requirements
Logo Size:
- 64 x 64 px or larger
- Up to 25 MB
Logo Format:
- JPG
- PNG
General Appearance
Main Settings
In the main settings, you can select the Main Color and Main Page Title for both the App and Intranet. The Main Page Title can be your organization's name, your App, or Intranet name.
Content Elements
These options are available for the Content Designer for Pages, or once you activate the New UX.
Typography
You can set the font used for all text and labels with the UI Font. You can add custom fonts to choose from in the Fonts section of the Branding. In addition, you can set individual fonts, weights, and sizes for headers and texts in your content.
Buttons
You can define the background color, border color, text color, and border radius for Primary, Secondary, and Critical buttons in the platform. Which button is used is predefined by the platform. You can select Add Button Style to create and define your own button for use in the Content Designer for Pages.
Links
You can define the link color and select between bold, italic, underlined, or no additional styling for links.
Content Containers
Border Radius
You can define if borders of content should be sharp, semi rounded, rounded, or have a custom radius. This option is available for the Content Designer for Pages, or once you activate the New UX.
Shadows
You can define if content should have small, medium, large, or no shadows. This option is available for the Content Designer for Pages, or once you activate the New UX.
Content Width
You can define if Intranet content should have wide, medium, or narrow width. This options are available once you activate the New UX.
Additional Settings
Custom CSS
In the additional settings, you can find the Custom CSS, which can be applied to the New UX and Classic UX. You can apply custom CSS for more precise customization. Learn how to set up custom CSS for the New UX.
Background
You can optionally upload a background color or image for desktop users from My Files or your local computer.
Recommendations: Image size 1920 x 1080 px or larger: If the image does not match the recommended size, the image is automatically zoomed or cropped to the optimal size, which can result in reduced quality.
The background image and color is used in the following places in the Intranet:
- Public area
- Behind the sign-in dialog, if you don't have a public area
- Everywhere in your Intranet after sign-in
Additional Helpful Information
Comments
0 comments
Please sign in to leave a comment.