How do I change the background color

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!

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

Hi guys,

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

Take a look at my articles about styling Knack apps…

1 Like

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.

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).

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.

Worked for me - I’ll have another look tomorrow

Hi

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

No CSS:

This CSS:

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

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?

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

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

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.

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.

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.

very nice for forms:

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

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