App Management: Brand editor

■

Table of Contents

• Colors
• Logo
• Favicons
• Font
• Background
• Header/Footer
• Alerts
• Analytics

Check out the attached PDF for a few examples of branding ideas created by Simpplr's Marketing team! These give you a great idea of what exactly is possible for your branding within Simpplr!

Simpplr's Brand editor allows App managers and those granted access (custom role with Branding customization permission given) to change the visual appearance of your intranet to reflect your company branding. Go to Manage > Branding to edit your app's branding. 

Colors

Corporate color palette

Before setting a Primary and link color, you have the option of configuring your company color palette. This is a group of up to five colors you can choose that will be available to incorporate in every other aspect of the branding. 

To assign your colors to the palette:

1. From the branding editor, choose Color palette.
2. The first color is your org's brand primary color by default. You can change this and customize it however you'd like. You can also name each color accordingly. 
3. Switch to the Dark theme tab to configure the optional mobile color palette. The dark theme is only available on the mobile app.
4. Once configured, this palette will be available to you as you configure the rest of the branding across the app. Any color can be customized or changed at any time.
   

Note:

You are NOT limited to the five colors you assign to the color palette. This is simply a library of pre-chosen colors that match your company's branding that you can use. Every branding component of the intranet will still be customizable with any color(s) you want. 

You're also able to use the company palette when building out content, such as pages. In a piece of content, head to colors in the text editor, and you'll see the set colors from the palette available to use.

Primary & link colors

Changing the color under Primary color will change the most prominent color throughout your intranet. This includes your icon color, interactive elements like content headers, button highlights and more. You can select one of your palette colors to use here, or a custom color.

Next, select a Link color. This can either be the same as, or separate from your primary color. The primary color will still be used for highlighting and buttons across the platform. Now, anytime you click internal links to navigate to a new page, they will default to the link color. Hyperlinks in user-generated content will also default to this new link color.

This can help if you're using black and other dark colors as primary so you can use a more user-friendly color for links.

The Colors (dark theme) option is very similar, but only applicable to those using the native Simpplr mobile app. This will reflect the primary color(s) that appear on that app. The recommendation for dark mode color is a slightly less saturated, lighter version of your primary brand color or a secondary color that's lighter. This is due to primary colors often being of darker shade, which can contrast poorly with the dark mode of the app. Work with your Marketing team if applicable to figure out the best options for the color. There's also a great contrast checker for accessibility we recommend using at coolors.co. This can help you in deciding the best color to choose for dark mode, and tell you if it passes the accessibility test. 

Click Done to keep your changes. Click Cancel to change the color back to default. 

Logo

Click Logo to change the logo. The logo file should be PNG or JPEG. The recommended logo size is 540 (width) x 144 (height) px. The maximum file size for logos is 200KB. Simpplr will automatically resize the logo to the maximum height of 40px. 

Favicon path

A favicon is the icon you see in the browser tab/window or if you create a shortcut to the application on your mobile phone/tablet.

From the Logo selection, choose Favicon to upload your org's favicon. The recommended image size is 250x250px, and the maximum file size is 100KB. JPG or PNG files are supported.

 

Font

You can select the default font (Roboto) or upload your org's custom font. We'll walk through the steps for uploading a custom font below via Google Fonts.

Note:

We recommend having someone with CSS knowledge help in uploading a custom font to your Simpplr instance.

For our example, we'll download a font from Google Fonts.

1. In Google Fonts, we want to use the Merriweather font. We'll select the Regular, Bold and Bold Italic options. Once you've selected each format you want, navigate to the right-hand pane and the View selected families icon.
   
2. With the Selected families pane open, navigate to the <link> option, and where you see the <link href> line of code, select the entire link beginning with https and ending after swap. Everything in the quotation marks here should be selected. Right click and open this link in a new tab, or open a new tab, then copy and paste the link to open the font families html source page.
   
3. From the source page, locate any CSS that is labelled latin at the top. Copy and paste each string of code that begins with latin, starting at @font-face and going to the end bracket, to a text editor on your computer. This can be a notepad document, or whatever text editor you're comfortable with.
   
4. Once you have the applicable CSS added to your text editor, change the name of the font-family from whatever it is (in our case, 'Merriweather') to 'SimpplrFont'.
   
5. Copy the entire CSS you've created in the text editor. Head back to the brand editor in Simpplr, and in the Custom font field, paste the CSS. Click Done.
   

Background

You can change the background color and add a background image. Once you change the color, you'll see a preview of the change right away. You can choose how the image is positioned on the screen, whether it is tiled and whether it's fixed. Note the background image cannot exceed 500KB. Resize your image before uploading it if needed. We recommend setting the width to 2000px and height no larger than 650px.

Header

You can select the header color by choosing either the default color, preset primary color, preset dark color, or custom color. If you choose a custom color, you can choose the color for the header background, the text color, the icon color, and the notification bubble color.

Footer

You can select the footer color by choosing either the default color, preset primary color, preset dark color, or custom color. If you choose a custom color, you can choose the color for the footer background and the text color.

Alerts

By default, all alerts in Simpplr will have the background color with hex code #333333, as shown below. However, you can modify alerts colors in the brand editor to reflect your org's primary branding color or any color you'd like. You can also modify the text color.

Analytics

By default, analytics colors are shown throughout as blue, pink, purple and yellow as below. 

However, with the brand editor, you can set your branding colors as the analytics colors. This will create slight variation in the tone of your org's primary branding color, as shown below.