Change background color on the Account Settings section


Is there any way to change the grey background color of the Account Settings pane?

Hi @Alteco,

I’d never noticed that you’re not able to change the infobar colour as an option in settings :thinking:

The below JavaScript seems to work ok :+1:

// Select the info bar element
var infoBar = document.querySelector("#knack-dist_1 >");
// Check if the element is found
if (infoBar) {
  // Change the background color = "#ff9e54";

Just update the backgroundColor to a hex code of your choosing.

1 Like

Thanks Carl. It works perfectly :slight_smile:
And thank you for making YouTube videos, I’m new to Knack :+1: I have subscribed to yours and David Parrish channel, keep up the good work :smiley:

1 Like

Hi @Alteco - I’m really pleased that this worked for you. I’m not a coder so I took a chance and located the element in the browsers DOM (Document Object Model) and copied the selector.
I then asked ChatGPT how I could add colour to the element and it came up with the code. :technologist:

@Alteco - can you mark as “solved” please :pray:

1 Like

It is really usefull ChatGPT :+1:

1 Like

I thought I’d point out that CSS would be the better way to do this as the styles load before the JavaScript.

#knack-dist_1 > {
   background-color: #ff9e54

However this would depend on if you need to dynamically change the colour. If you just want to set the colour for all pages then I would suggest the above CSS.


Great info, thanks CSWinnall :slight_smile:

Thanks @CSWinnall; I appreciate you jumping in on this one. As you’re probably aware, I’m not a coder, but wanted to help :technologist::wink:

1 Like