Configuring the look and feel of Blink

As an Organization Administrator, you can customize the look and feel of Blink by adjusting colors and uploading brand assets from the Company Page of the Blink Admin panel. This page will guide you through this simple process.

How to change colors

In the Colors section, You can use your brand colors to theme certain parts of the user interface.

You can do so by selecting a color from the color selector or by typing in the hexadecimal or RGB values for your brand colors. The preview to the left of the color options live updates allowing you to check that icons and text remain legible.

Color options

• Brand Colors 
  These colors are used to theme major navigational elements across the mobile and desktop apps, including the side navigation bar on the desktop app and at the top of each page in the mobile apps.
  1. Background color - Used to theme the side navigation bar of the desktop app and for the top bar at the top of our mobile apps. This color is also added as an overlay option on the background image that we'll come onto shortly.

  2. Text and Icons - This color will be used for any icons or text that appear on top of the background color.

  3. Notification dot - This color is used for the dot's that appear in the navigation bar of the apps to show you that you have a new message or feed post.
  4. Notification number - This color is used for the number that is displayed inside of the notification dot.
• Mobile navigation colors - These colors allow you to do the same as above, changing the Text, Icons and Notifications. This set of colors are used when the background of the app is required to be white such as the navigation bar at the bottom of the mobile apps.

Once you've selected the perfect color scheme for your organisation, press the save button at the bottom of the page. The desktop apps will automatically update for all users. The mobile apps will update next time you close and re-open the app.

If you're not sure how to find the color codes for your brand, this converter will help you find the correct code. Open converter.

How to add your logos, icon and replace the background images

Now that you've changed the colors of the app to match your brand, you can add a selection of brand assets to further customize the look and feel of Blink.

Company Logo

The Company Logo appears at the top of most pages of the desktop and mobile apps. You can upload a different logo for Mobile and Desktop apps.

We recommend uploading a transparent .png logo that's 460px wide by 70px high

1. Click on Upload logo
2. Locate your companies logo
3. Once you've selected your new logo, your logo will appear in the preview below to show how it will look when placed on top of your background image.

Background images

The background images are used at the top of the Feed. You can upload different images for both the mobile and desktop apps, reposition them and even change the opacity of the overlay on top of them. Here's how:

1. Click on Replace image
2. Locate the image that you would like to use
3. Repositioning the image and adjust the overlay
   
   • Reposition the image - Click on Adjust image and then drag the image to reposition it
   • Overlay opacity- Your brand background color is added on top of your background images to ensure that your logo and in-app navigation is easy to read when placed on top of your background image. You can adjust the opacity of this to suit your needs.

Company Icon

The Company Icon appears at the bottom of the navigation bar on the left-hand side of the desktop app.

We recommend using an icon that is 400px square

1. Click on the camera icon
2. Locate your companies icon
3. Crop the icon how you want it and click on the blue button

Once you're happy with your changes, press the save button at the bottom of the page to update the apps.