How do I change the background color

API & Customization Ask Developers
1

How do I change the background color behind the knack applications?

Is there any way to change the white background applications.

Thanks in advance.

Regards!

2

Gerard,

This is a way to do it...and i am sure there are other ways as well.

Replace the #FFF4F7 with the color code you want to use... get rid of the background-image row if you do not want to have an image in the background.

#knack-body {

background-color: #FFF4F7 !important;

background-image: url("whatever URL you have for your image");

}

For more CSS hints have a look at this site - http://www.w3schools.com/cssref/pr_background-color.asp

Have fun,

Jens

3

Hi guys,

I just tried it and it does not work on my App. Is the code changed?

4

Take a look at my articles about styling Knack apps…

1 Like
5

Thanks Julian! some months ago I went trough your website articles, and those of some other Knacks Experts to learn as much as I could. There are excelents!

In your articles Styling Your Knack Apps - Part 1 and 2, you’re presenting how to change background Scene/View/Button color, but I need to change the color of the whole page. I did use the right click Inspect but I could not see the ID for selecting the entire page.

I am trying to replicate how Facebook and Linkedin are doing: grey background Pages with white background Views.

image
image1025Ă—586 90.3 KB

6

What about this:

#knack-dist_1 {
background-color: #eaeaea;
}

This will set the background colour for all below the menu tabs - and the Info Bar will be a little darker (and can be hidden anyway).

7

I copy/pasted it in CSS and not doing anything. :thinking:

shouldn’t the code be starting like .kn-

maybe .kn-body or something like that? .body ? I try diferent things and no efects.

ps: by the way “This will set the background colour for all below the menu tabs” is indeed exactly what I am trying to achieve.

8

Worked for me - I’ll have another look tomorrow

9

Hi

I just checked this again and once again it worked (I even copy / pasted it from here).

No CSS:

Screenshot 2021-08-31 at 09.49.41
Screenshot 2021-08-31 at 09.49.41971Ă—426 30.4 KB

This CSS:

Screenshot 2021-08-31 at 09.49.18
Screenshot 2021-08-31 at 09.49.18968Ă—455 30.2 KB

I am wondering whether you have some other CSS in there which conflicts with this - or you could try adding !important:

#knack-dist_1 {
background-color: #eaeaea !important;
}

By the way #knack-body works as a selector as well - except that the background colour continues all the way down the page which you may prefer.

Julian

1 Like
10

Hi Julian!

Well, still not working for me.
Yesterday I tried it eliminating all the other CSS code I have, but no efect. Just now did the same eliminating also the JS code and no efect. :thinking:

It seems that your App is not embeded in a website, and mine is. Could that be the reason?

11

I guess it could be - maybe the container site is overriding this?

12

After investigating the website part:

Inside my website, I have 1 page as a microsite where is embeded my Live App.

So adding background color to the CSS of this page it did change ( body { background-color:blue; } ), but it also neutralizes the embeded code of the live app and shows only “loading”.

I think the background color should be added to the embeded code. But no idea how.

That would probably be a Feature Request to be able to easily change the background color from the builder > Live App Design > Look and Feel

13

Changing the background color of the whole website does apply it to the embeded Live App. But of course it is not a flexible option.

14

the easy solution is in the next post

Got that! Many hours to investigate and make it work. Here it is friends. Glad to give back some to the Knack community.

This is for embedded Live App in Wordpress websites.

Wordpress didn’t like mixing some javascript snippet with a customize CSS on the same page.

So the first trick is to download a plugins that allows that:

Add HTML, CSS and javascript code to your pages and posts easily using shortcodes.

Than after trying unsuccessfuly every code imaginable, I had to open a ticket at my website Template Provider to ask for the CSS code to change the bg color.
Here it is:
#page {background-color: #F3F2EF !important;}

Here are both the Knack snippet and the CSS code working in the same page.

image
image1062Ă—446 17.3 KB

result:

Background changed in ALL the embedded Live App pages.
Than changing as wished the bg colors of views,contents, etc in the Knack API.

image
image1165Ă—355 14.4 KB

very nice for forms:

image
image1820Ă—519 18 KB

I will add that it should be an easy and must do Knack Feature Request because it is very standard grafic line nowadays to have clear bg color views on dark bg color pages.
Just see as examples:

  • this Knack forum
  • the Knack builder Pages
  • Linkedin
  • Facebook
    etc.

And finaly, solving this thing, I valued even more the embedded App functionality: a Live App can be created with minimum branding (logos, name, etc) as the branding is already on the host website and the embedded App armonizes automaticaly with the style of the host website. GOOD JOB Knack! :wink: :ok_hand:

1 Like
15

Alright guys…

then… a thought crossed my mind… what if the code I was asking for to write directly in the Knack API since the begining 2 days ago

was the one given to me by my website template provider???

well… it does indeed work. As simple as that… Just write this line in the Knack API CSS and Voilà! :hugs:

So forget about all the Wordpress CSS and plugin.

Thanks again @JulianKirkness to try to help me solve the case! Now we know this easy trick.

1 Like