Home Consulting Training Blog FREE Tips & Tools Login

Banish the Boring! Add branding to your apps in Quickbase

Subscribe on YouTube

Get more color tips:  HTML/CSS Cheat Sheet

If your apps all still have the purple Quickbase header you're missing out!

Branding each of your apps with custom names, colors, and icons will help users differentiate which app they're in at any given moment – saving confusion, errors, and time! Plus, it's a lot of fun.

There is a multitude of reasons to use App Branding, such as:

  • Update the branding to match that of your company, department, or fun initiative
  • Add hyperlinks to the text or icons used in the header or footer for quick navigation
  • Use branding to differentiate apps with different functions
  • Use color to differentiate Production vs. Test apps (this one can be a lifesaver!)

In this training, I will show you how I branded one of my own Quickbase Applications!

All it takes is three easy steps:

  1. Open Branding from the App Settings
  2. Check the box to "Customize app header & footer" and choose Basic
  3. Enter the desired left/right elements (and hyperlinks) along with text/background color choices

Come up with a fun app name and/or beautiful branding? Share it on social and tag @QuickBaseJunkie with hashtag #QBJunkieBranding

For even more eye-popping tips download the HTML/CSS Cheat Sheet for forms.

RELATED TUTORIAL:  Make it pop! Add a logo or image to a form


Did you know Quick Base Junkie has online training programs?
Topics include Relationships, Formulas, HTML, Jinja, APIs, and MORE! 


FROM THE TUTORIAL: "...I'm going to show you how to take your app from basic to brilliant by leveraging the branding capabilities for both your app's header and footer. To demonstrate branding I'm going to take you through a Quickbase of my own that I use to manage the content that I put out on my blog as well as YouTube. Here I've logged all of my YouTube videos and information about them so that way I can easily manage the content that I put up. But, if you notice, this particular Quickbase has the basic Quickbase branding with the purple banner as well as the Quickbase logo. Now we want to change that and the reason we want to change that is because it's much easier to distinguish which app you're in when that banner and logo appear different across the different apps. Let's jump into the application settings. We'll open the main app settings and from the app settings, you can choose branding here in the center. From this menu, I'll click on customize app header and footer. This allows me to access the customization options for the application. it'll be set to default, but we'll choose basic. Notice I've got options to modify the left element. This is where you see the Quickbase  logo in the upper left-hand corner as well as a right element. This right element will be on the far right of this large blank purple space just before the menu options. And then I also have the option to change the background as well as the text color. Let's make a few modifications and see what this looks like. I want my background to be white. You notice that these boxes will take both a hex code color as well as a typed word color. So I'll change this one to white and this one I'm going to make my Quick Base Junkie, pink. And for my left element, I'm going to enter the name of this Quickbase. Using the name of the Quickbase is the easiest for people to relate to in this upper left-hand corner.  But, I actually want to rename this app to something a little bit more fun and interesting than simply Content Management. And since the blog posts and YouTube pages are really intended to create some buzz around the Quick Base Junkie brand, I'm gonna call this QB Junkie Buzz. Let's go ahead and capitalize that as my left element. Now with just these changes, I'm going to click Save. And right there you can see the updates have taken place. The background is now white with the pink text and then the QB Junkie Buzz. But, I can do a whole lot more with this. I can use an image in order to set either the left or right element. So, let's see how we can do that. With these changes saved, I'll exit out and what I want to do is use an image that has been uploaded already to a QuickBase. Now it doesn't have to be uploaded to a Quickbase, but I find that's the easiest to manage when you've uploaded your own images. So in this case I happen to have an image table in this app. You don't have to use an image in the same app as the one you are branding, but since I've got a document repository here I can go ahead and add my images. I've simply included an attachment with the image as a PNG it could also be a JPEG and I can just right-click on that image attachment and choose copy link address. With that link address copied I'm going to head back to my branding. In here, in the right element, I'm going to paste in that link that I just copied. With the link pasted in, I'll click Save and you can see I created a little buzzing bee icon in the Quickbase Junkie hexagon. You may also notice there is a link icon for both the left and the right element. This allows us to set a link for that element, meaning that when somebody clicks on that, either the icon or the word they'll be taken to that location. So for example, on this right element, I could enter the YouTube address where all my Quick Base Junkie videos are hosted and save. So when I click on that icon on the right element it'll take me to YouTube. I could also just change that to a text element and save. So you actually have three options here with each element: you could include the element as simple text, you can include it as an image, and you can also add a link for when you click on that particular element. Let's look at the footer. The footer has similar options but there's just one right element where you can enter text, an image, as well as a link. The one thing I want to caution you of here is if we paste in an image that has not been sized and click Save it will appear that actual size. Unlike the header where it has shrunk the image in order to fit the space, the footer will expand in order to fit the image size. So we probably don't want a footer that large. Let's go ahead and remove that and save. So I've also created a smaller logo that I can add. So I'm going to pull that in now. I will right-click, I recommend something about 30 pixels, update my footer with now my 30-pixel image. And now I've got that in the footer. Notice that the footer does stay always present. So no matter where I am on my application that footer will always be there and visible. Again you can use text an image and then you can also link that text out wherever you might want to go. So let's banish those boring Quickbases by adding some custom branding..."


Feeling like a Junkie?  Subscribe Now!

Don't miss the latest:

Tips, shortcuts, checklists, reviews, tutorials, and courses from Quick Base Junkie!

Subscribe now to stay in touch

Don't worry, your information will not be shared.


Already subscribed?

Take your Quick Base skills to the next level with Premium Courses.

Explore Courses Now

Don't miss the latest:

Tips, shortcuts, reviews, tutorials, and courses from Quick Base Junkie!

Sign up now to stay in touch

(unsubscribe anytime)