Change background color on the Account Settings section

API & Customization Ask Developers
1

Hi,

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

image
image789Ă—107 1.37 KB

2

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 > div.kn-info-bar");
// Check if the element is found
if (infoBar) {
  // Change the background color
  infoBar.style.backgroundColor = "#ff9e54";
}

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

image
image2741Ă—1088 296 KB

1 Like
3

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
4

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:

5

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

1 Like
6

It is really usefull ChatGPT :+1:

1 Like
7

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 > div.kn-info-bar {
   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.

Craig

8

Great info, thanks CSWinnall :slight_smile:

9

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