Add a custom logo to an app

Add a custom logo to an app

Zoho Creator gives you a couple of options for the logo that is displayed in the top left corner of an app:
  1. Your company logo (the same for all your apps)
  2. An icon from the predefined icon list
  3. A 1-3 letter combination
Now, you might have different ideas for your app. Maybe your company has a couple of different solutions, which each have a different variation on your main brand logo. This is not possible using the built-in options, so what to do? It took me quite some time, but I figured out a way to get this custom branding in your app! It takes a little bit of a workaround, but the result is worth it. There are a couple of steps to take:
  1. Select the Theme
  2. Create a Function
  3. Insert the Function
  4. Create a Page (for Reports and Pages)

Theme choice

Depending on the theme, the logo needs to be inserted in different ways. 

Counting from left to right, then top to bottom, remember the number of your theme (for instance, the top right one is 3). 

Function

Most likely, you will have multiple forms in your application. In that case, it is a good idea to create a function. Usually, I like to use a namespace called 'styling' for grouping these kinds of functions. The return type should be string.
In the following code snippets, change the URL to your own logo.
Theme 1, 4 and 7:
  1. string styling.insertLogo()
  2. {
  3. css = "<style>";
  4. logourl = "https://www.greenstayn.nl/wp-content/uploads/2021/10/logo-met-text.png";
  5. css = css + "[class=\"brand\"] a{background-image: url(" + logourl + ");background-repeat: no-repeat; background-size: contain; background-position: center;}";
  6. css = css + ".zc-app-brand-logo,.zc-app-brand-appname{display:none !important;}";
  7. css = css + "</style>";
  8. return css;
  9. }

Theme 2, 3, 5, 6, 8 and 9:
  1. string styling.insertLogo()
  2. {
  3. css = "<style>";
  4. logourl = "https://www.greenstayn.nl/wp-content/uploads/2021/10/logo-met-text.png";
  5. css = css + ".zc-header{background-image: url(" + logourl + ");background-repeat: no-repeat; padding: 0 ;background-size: contain;}";
  6. css = css + ".brand{display:none !important;}";
  7. css = css + "</style>";
  8. return css;
  9. }
This will put the logo on the top left corner, where normally the standard logo would be. If you want to have the logo in the center, you can add "background-position: center;" to the .zc-header line. This works for themes 2, 6, 8 and 9.

If you have Reports and Pages in your app, we need to expand the Function a little bit, because we will be using an HTML snippet that we want to hide, and we want the report to still be full-screen. For this, add a Parameter to the Function, by editing the first line to:
  1. string styling.insertLogo(string page_type)
Then, before the line "css = css + "</style>";", add the following:
  1. if(page_type == "page")
  2. {
  3. //Remove HTML snippet on page
  4. css = css + "[rowelemcount=\"1\"] {display: none!important;}";
  5. //Remove band around the frames
  6. css = css + ".Layout.elemContainment,.zc-pb-tile-container {padding: 0px!important;}";
  7. }
  8. if(page_type == "report")
  9. {
  10. //Remove HTML snippet on page
  11. css = css + "[rowelemcount=\"1\"] {display: none!important;}";
  12. //Remove band around the frames
  13. css = css + ".Layout.elemContainment,.zc-pb-tile-container {padding: 0px!important;}";
  14. //Fill available space
  15. css = css + "div[id=\"elementsContainer\"], div[id=\"elemContainer\"],div[id=\"zppagesLive\"], .zpelement-wrapper.zcpage-elemContainer, .zpelement-wrapper.report,.Layout.elemContainment {height: 100%!important; max-height: fit-content!important;}";
  16. }
Line 5-6 and 12-13 are optional: they make sure that the report is in full view, instead of having a padding around it. You can play around with this by (un)commenting theses lines, to fit your needs.

Insert the function

Now we can insert the function. We do this using a Notes field in the form, as explained here. The difference is that you have already created the stylesheet in the function, so you can immediately insert it as follows, using an On Load workflow:
If you have not added script for Pages and Reports, there is no parameter:
  1. <your notes field name> = thisapp.styling.insertLogo();
If you did add the script, you can simply send an empty string as parameter:
  1. <your notes field name> = thisapp.styling.insertLogo("");

Create a Page

If you only have a Form, you can skip this step. Otherwise, for instance for a Report, you need to create a Page in order to insert the script for the styling. Once you have created the Page, insert an HTML snippet with the following code (change "report" to "page" if needed):
  1. <%{
  2. %>
  3. <%=thisapp.styling.insertLogo("report")%>
  4. <%
  5. }%>
If you want to use this page as alternative for the regular Report, add the Report to the Page as well. It will then be made visible on the Page. 

    • Related Articles

    • Sending images to imagekit.io using API

      imagekit.io is a service for optimising media content for websites. It's API is pretty straightforward, but it's always a bit finicky to get a connection going the way you want it. To make an API call, first follow the steps in "Authorisation" and ...

    • Creating a Function

      When you have a piece of scripting code that you use frequently, it can be better to create a function for this. Instead of copying this piece of code (and having to update each and every instance when you need to change it!), you have it in one ...

    • Limitations in CSS styling

      Styling forms in Zoho Creator using CSS styling in a Notes field brings many possibilities, but unfortunately not all CSS properties and functions work: some are simply stripped out. Whenever I come across a limitation, I add it to the list below, ...