App Management: Brand Editor

Table of Contents

General

Logo

Favicons

Font

Alerts

Header/Footer

 

Simpplr's Brand Editor allows you to change the visual appearance of your intranet to reflect your company branding. Go to Manage > Manage application > Branding to edit your app's branding. mceclip0.png

For a quick summary of brand editor functionality, check out this video:

 

General

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


mceclip1.png

You can also 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 500 KB. Resize your image before uploading it if needed.

Click Save & close to keep your changes. Click Reset to change the color back to default. Click Reset all to reset all settings back to the Simpplr default.

 

Logo

Click Add logo to change the logo. The logo file should be SVG, PNG, or JPEG. The recommended logo size is 540 (width) x 144 (height) px. Simpplr will automatically resize the logo to the maximum height of 40px. 


mceclip2.png

 

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.
favicon_sample.png

This is where you set the favicons used by the application. To do so:

  1. From the Branding editor, choose Logo from the dropdown list, locate the Favicon Path and enter /resource/Simpplr__FaviconAssets into field, or a path that you'll remember later on; for example, /resource/YourCompany__FaviconAssets. You can name the path anything you want, but the text /resource/ must always be the first part.

    Note:

    The favicon path is a relative url that leads to whichever location you create based on the file you upload to Salesforce (see instructions below). If you only have one favicon, you'll only need the one resource path. However, if you want different favicons for different segments, or ever want to replace the existing favicon, you'll need to create a new resource path (name) and upload it as a new file to Salesforce.

  2. Once entered, click Save & close.


mceclip3.png

 

Create and upload favicons to Salesforce:

Navigate to a new web tab, but keep Simpplr open. You'll now need to create your favicon.

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/. Instructions are provided below for creating a favicon using this website.

  1. From the site, select the file by clicking on the button shown below:

     


    favicon_generator_1.png
  2. Once the image is uploaded, you're 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

    Note:

    You can scroll past the ad shown after this section. 
  3. The second section is for Android settings. 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. The next section is related to the Windows Tile. 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 brand's custom color.
    brand_editor_windows.png
  5. Then there's the macOS Safari options. This section will determine how the favicon will appear on macOS tabs.
    brand_editor_mac_os.png
  6. Next, set up the path for these favicons. Set this up to /resource/Simpplr__FaviconAssets or the path you set up earlier in Simpplr. Again, you can choose some other name instead of Simpplr__FaviconAssets, but do not change the first part of the path /resource/
  7. Ensure you choose the option I cannot or I do not want to place favicon files at the root of my web site. Instead I will place them here:. This is where you'll place your path; /resource/Simpplr__FaviconAssets.

    mceclip9.png

  8. Click Generate your Favicons and HTML code. From the next page, click Favicon package to save it to a location on your desktop/laptop.
    mceclip10.png
  9. Now log in to your Salesforce instance and go to Setup. In the Quick Find box, type “static” and then click Static Resources.
    favicon_instructions_1.gif

     

  10. Click New. On the next page, in the Name textbox, enter “Simpplr__FaviconAssets” or the name you put in step 6 while generating the favicons. Enter “Favicon pack for Simpplr App” in the Description field. Click Choose File and select the favicon file you downloaded in step 8 above. 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.

 

Upload a new logo/favicon in a different segment

To upload a different logo or favicon to a segment within your intranet, follow the same steps as above using realfavicongenerator.net and upload the .zip package to Salesforce as a new static resource. Then:

  1. In Simpplr, go to your user profile image and click Launch segment bar. Choose which segment you want to add a new image to, then go to Branding at the top navigation bar. From the brand editor, click Logo and insert the new Logo image or Favicon Path. Click Save.
    segment_favicon_editor.gif

Use the same logo/favicon in a different segment

Using the same image across different segments is as easy as adding the same image or /resource/ path into the segment you want it for. For favicons, once you've uploaded the favicon package into Salesforce, remember the path you created. Then just paste that path into the proper segment. 

For example, the resource path /resource/Simpplr__FaviconAssets created above leads to a file source for the Simpplr logo. That resource path is going to be pasted into each branding editor per segment. 

Update a favicon

To update a favicon for your segment/intranet, follow the same steps as above, including the instructions from realfavicongenerator.net. You'll want to create a new resource path as well. Best practice is to upload the new .zip file for the favicon to Salesforce, rather than replacing the old file. 

Font

You can select the default font or upload your org's custom font.

If you use a custom font, you will need to upload the custom font(s) to a server like AWS, S3 etc, or zip the fonts and upload to Salesforce as Static Resources. To do so:

  1. Go to Salesforce and click Setup. In the Quick find box, type Static and choose Static Resources.
    static_resources.gif
  2. Click New. 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

 

Then, create a CSS file like the sample below (use your font name you created in the steps above and change the src URL as needed):

 

# 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 & close to start using the new fonts. 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 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.


mceclip15.png

 

 

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.


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