top of page

What is Knack's Info-Bar? ... And how to change its color.

The other day I was trying to change the color of that gray strip towards the top of all Knack apps. You know, where the account settings and "logout" buttons are. I was going through all the settings in Knack's Live App Design section, but couldn't find anything (that's because it is not there). Ended up posting something on our builder Slack group, and Stephen Chapman came through with a piece of CSS code. BTW, it's called Knack's "info-bar". Now, this is a pretty small topic, but if you need that color changed, this does the trick. Please check out this video.

Interested in my Knack database app services? ... Book a call with me here:

Full Transcript

0:00 They folks, uh, they pair us here doing another video. Um, today's, I'll get right into it. Today's topic. Uh, something happened just a couple days ago. 0:10 My name is yesterday. I'm gonna show you something here. Now, the topic here is uh. What is your app's info bar and how to change its color maybe a small topic here but I was dealing with something and here's what it info bar is you see this thing here it's great thing with the account settings you're 0:31 going to bury stuff that's up a log out. That is log in. Umm. Let me, uhh this someone had a change and by the way uhh who helped me with this I posted something online and on our Slack group and uhh. 0:48 This person from Australia, he's, he's pretty active in our groups. Umm. He gave me some custom code that we still care of it. 0:55 So I'm gonna show you what that is that can be useful. I can't do it natively with next settings.

0:01 Okay, uh, let's jump into this, they won't be long at all. What's it deal with the info bar and that kind of changes settings. 0:09 Uh, I'm gonna jump over here and so smaller, here's Do you have a client? And I'm building a CRM project tracking app for them, typical thing. 0:21 Um, and they want it to match their color scheme or brand. Um, and this is their website and they have this red thing across with just like that. 0:30 Uh, info bar. We had. Uh, so I was, naturally, this is just a template app of nax, but I'm gonna show you the deal. 0:40 I go to live design and I'm, you know, there's a lot of stuff here. I think it was a couple years ago. 0:45 Maybe less of my shared templates. We have all these settings that you can do. They really enhance how you can control the look and feel the deal. 0:52 Uh, and I was going through all this. I mean, all this stuff and I could not find where you can change this thing. 0:59 And I couldn't find it because it's not there. Uh, this has to be done with code. I mentioned that. I reached out to our Slack group and I said, Hey, what's this thing? 1:09 Uh, and Steve Chapman with an umm I do. Here's that code. It goes in the CSS by the way. And uh, I just copied it. 1:30 If you don't know the code stuff I have video on that but it's pretty easy. This one doesn't even take any manipulation. 1:36 Thank you for watching. I'm gonna go to API and code right here. Uh, okay. Go to over to CSS. I'm just gonna paste this in. 1:47 Here it is. Now I'm gonna come back to that just a minute. But let's save it. Let's save. Let's refresh this. 2:00 Now we have that red line. And there were a couple iterations. The first piece of code it gave me. Uh, didn't change the code. 2:08 All of these letters and they were black and you couldn't see it on the red. But then he just I'm doing so that worked out pretty well now in this code thing. 2:25 I happen to make it red. We got the white here underneath for the letters and then the red. Well if you just click on this or hover over it and you get access to all the color options here. 2:37 I don't know if it lets you put in a actual number. I might if you put you can play around with it and this will want to do those colors. 2:43 So I made it red and white. That's what we got. And uhh. Thank you. I feel super opposed my face. 2:52 Thank you Steve Chapman for helping me out on that. Thanks. Thank you.

4 views0 comments

Recent Posts

See All


bottom of page