App Management: Brand editor

Table of Contents

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 in the Manage > Application > Privileges menu (Branding managers) to change the visual appearance of your intranet to reflect your company branding. Go to Manage > Branding to edit your app's branding. 
new brand editor.png

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.
    company palette .png

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.
company color palette in content.png

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.
primary vs link color.png

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. 


Logo brand editor.png

 

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.
Favicon

For detailed instructions on adding your org's favicon icon to your Simpplr platform, check out this article.

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.
    New custom font 1.gif
  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.
    new custom font 2.gif
  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.
    new custom font 3.gif
  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'.
    new custom font 4.gif
  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.
    new custom font 5.gif

You're also able to use a zip folder containing your org's already established custom font via the Salesforce instance your Simpplr environment is built on. You will need to have System admin permissions to upload the zip folder as a static resource to Salesforce.

To add your zipped folder to Salesforce:

  1. Go to Salesforce and click Setup. In the Quick find box, type Static and choose Static Resources.
    static_resources.gif
  2. Click New in the middle of the page. From the next screen, upload your .zip file containing your custom font. Assign the file a name and set the cache control to Public. Once finished, click Save.
    custom_font_sample.png

Now we need to create a CSS file like the sample below. Feel free to copy and paste the code you see here into a text editor to make it easier for you. 

The font-family needs to be labelled SimpplrFont, which tells Simpplr to use this designated font from Salesforce. In each line where you currently see a .ttf file location shown, replace that file name with the font files in your zip folder. For example, the CSS shown here contains the applicable file locations on our computer for the Cairo font we downloaded. 

If your file type is .woff, you'll replace the .ttf portion shown below, as well as format('truetype') to format('woff').

# Custom Font
@font-face {
    font-family: 'SimpplrFont';
    src: url('/resource/SimpplrFont/Cairo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SimpplrFont';
    src: url('/resource/SimpplrFont/Cairo-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

Copy and paste the finished CSS code into the custom font text area of the branding editor. Click Done to start using the new fonts. Note that you cannot use a custom font selectively. The entire app will be using the custom font.
Font_CSS_paste.gif

 

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.


header color new branding.gif

 

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.


footer color new branding.gif

Alerts

You can update the color settings for the background text and icon colors for Alerts.

Alerts enw branding.gif

 

Analytics

By default, analytics will be colored according to Simpplr's recommended color scheme. The bright, vastly different colors make for easy-to-read metrics in your Analytics menu. However, you can choose to display the graphs in your Primary color. This will include slight variations on your Primary color just to indicate the different measurements within the graphs.
analytics new branding.gif

 

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments

5 comments
  • If you don't see the "New" button in Salesforce Static Resources try navigating to Salesforce Lightning (under your avatar in the upper right-hand corner).

    0
    Comment actions Permalink
  • Question about multiple custom fonts for different segments:

    • We have Simpplr segmented in way that represents different parts of our organization. It is possible that each segment would like to have it's own custom font (to match different branding guidelines). The instructions for custom fonts indicate that the .zip file containing the desired font files in the Salesforce Static resources should be named 'SimpplrFont' to match the CSS code. But could each segment utilize their own custom font by placing multiple zip files into Static Resources with distinct file names for each segment's custom font as long as the CSS that is loaded into the branding area of each segment matches the desired file name?

    Appreciate your help with this excellent tool.

    0
    Comment actions Permalink
  • Hi Brian. Yes! You should be able to add any custom font you'd like for your segment as long as you follow the instructions for uploading a custom font. The Segment manager controls every aspect of branding for their segment, and Salesforce allows you to upload virtually as many zip files containing fonts as you'd like. The key would be your org's System admin will need to upload the font package and assign it a unique name/path so as not to confuse it with any other fonts in your Salesforce instance. 

    This article gives a better idea of what Segment managers can control on their version of the platform.

    1
    Comment actions Permalink
  • Question about app managers adding background images:

    • All app managers in a segment should have the ability to manage the branding and change the background images, correct? We have some app managers in a segment that cannot upload a background image in the branding window and if they make changes they are not able to save. Whereas other app managers are able to load an image to the background and save it. Is there a reason on the salesforce backend or somewhere else that some app managers wouldn't be able to do this and others would?

    Thanks for your good help.

    0
    Comment actions Permalink
  • Hi Brian. This doesn't sound like intended functionality as App managers should be able to control all branding on all segments, regardless of which one they're in. Could you include any applicable screenshots of what the App manager(s) are seeing to give as much context as possible? If they can open the brand editor modal, that means they have access to control the branding, and the fact that they can't save their changes would be a bug.  

    After double checking to make sure the effected users actually have App manager permissions (not just Segment manager), I'd suggest opening a ticket with our Support team to have this looked into.

    0
    Comment actions Permalink

Please sign in to leave a comment.

Articles in this section

See more