App Management: Brand Editor

Brand Editor allows you to change the visual appearance of the App to reflect your company branding. Go to Manage App > Branding to edit your app's branding. 

mceclip0.png

 

General

Changing the color under Primary color will change the icon and highlight color. 

 

mceclip1.png

 

You can also change the background color. Once you change the color, you'll see a preview of the change right away.  You can also add a background image. You can choose how the image is positioned on the screen, whether it is Tiled and whether the background image is fixed. 

Click Save & Close to save the change. Click Reset to change the color back to default. Click on Reset All to reset all settings back to Simpplr default.

 

Logo

Click Add Logo to change the logo. The logo file should be SVG, PNG, or JPEG. We will resize the logo to the maximum height of 40px. 

mceclip2.png

Note

If you use PNG or JPEG, the image should be 80px tall.

 

Favicons:

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. This is where you set the favicons used by the application. Enter /resource/SimpplrFaviconAssets to the Favicon Path field.

mceclip3.png

 

Create and upload favicons to Salesforce:

The image should be at least 260x260 px size logo/icon, but preferably in PNG format and of 500x500 px size. We recommend using this site:

http://realfavicongenerator.net/

  1. Select the file by clicking on the button shown below:

     

    mceclip4.png
  2. As soon as you select the picture, it is uploaded and you are taken to the settings page. On this page, there are four sections. The first one is related to iOS. No need to change anything here.

     

    mceclip5.png
  3. The second section is related to Android. Here we recommend you keep your settings as below. If you plan to brand Simpplr, do remember to change the “App Name” to your preferred name.

     

    mceclip6.png
  4. Now Click on the “Options” tab. These are the recommended settings for “Options”.

     

    mceclip7.png
  5. The next section is related to Windows 8 Tile. Here select the most appropriate color based on your logo color. It is recommended to use one from the color tabs but you can also type in your custom color as well.

     

    mceclip8.png
  6. Next is setting up the path for these favicons. Set this up to “/resource/SimpplrFaviconAssets”. You can choose some other name instead of “SimpplrFaviconAssets”, but do not change the first part of the path “/resource/”. Click on the “Generate your Favicons and HTML code” button. </li

     

    mceclip9.png

  7. Click on the “Favicon package” button to download your favicons as a zip file. Save it to a location on your desktop/ laptop.

     

    mceclip10.png
  8. Now login to your Salesforce instance and go to setup. In the left sidebar search textbox, type in “static” and then click on the Develop > Static Resources.

     

    mceclip11.png
  9. Click on the “New” button. On the next page, in the Name textbox, enter “SimpplrFaviconAssets” or the name you put in step 6 while generating the favicons. Enter the “Favicon pack for Simpplr App” in the “Description” field. Click “Choose File” and select the favicon file you downloaded in step 7. In the “Cache-Control” dropdown, select “Public”. Click “Save”.

     

    mceclip12.png

 

Note

The favicon might not appear right away. It should appear within an hour.

 

Font

You can select the default font or select your custom font.

If you use a custom font, you will need to upload the custom font(s) to either a server like AWS, S3 etc, or zip the fonts and upload to salesforce as Static Resources. Then, create a CSS file like this (use your font name and change the src URL):

 

# Custom Font
@font-face {
    font-family: 'SimpplrFont';
    src: url('/resource/fonts/MuseoSans_300-webfont.eot');
    src: url('/resource/fonts/MuseoSans_300-webfont.eot?#iefix') format('embedded-opentype'),
         url('/resource/fonts/MuseoSans_300-webfont.woff') format('woff'),
         url('/resource/fonts/MuseoSans_300-webfont.ttf') format('truetype'),
         url('/resource/fonts/MuseoSans_300-webfont.svg#arimobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SimpplrFont';
    src: url(''/resource/fonts/MuseoSans_500-webfont.eot');
    src: url(''/resource/fonts/MuseoSans_500-webfont.eot?#iefix') format('embedded-opentype'),
         url(''/resource/fonts/MuseoSans_500-webfont.woff') format('woff'),
         url(''/resource/fonts/MuseoSans_500-webfont.ttf') format('truetype'),
         url(''/resource/fonts/MuseoSans_500-webfont.svg#arimobold') format('svg');
    font-weight: bold;
    font-style: normal;
}

 

Copy and paste the CSS codes into the custom font text area of the branding editor. Click Save and it should start using the new fonts. Please note that you cannot use a custom font selectively. The entire app will be using the custom font.

mceclip13.png

 

Alerts

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

 

mceclip14.png

 

Header

You can select the header color, choosing from 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.

 

mceclip15.png

 

 

Footer

You can select the footer color choosing 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.

 

mceclip16.png

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

Comments

0 comments

Please sign in to leave a comment.

Articles in this section

See more