Prioritize Knack CSS when embedding

API & Customization Ask Developers
1

I am looking at Weebly for embedding my app.

By default, the embedded app will take on the look of the website.

I understand I can use !important within the Knack CSS editor to override any CSS coming from the site. So I have blocked the embedded version of the app from using the site font by doing this, but I don't know how to go through all CSS options and ensure that it matches.

Basically, I want the embedded app to look identical to the non-embedded app and have it not draw from the site I'm embedding into for CSS.

Is there an easy way to do this via CSS editor or elsewhere? Can make the change in Weebly or Knack, all I want to do is have the embedded app not draw styles from the site I'm embedding into but cannot figure out how. I rate my coding skills at 2/10.

Help!!!

1 Like
2

Hello Brad, many thanks for taking the time to post this! I will try and see if I can control things from the Weebly site using your code with my fonts etc.

Appreciate your help, thanks again. Tim

3

Hi Tim - we embedded a Knack app in Weebly a few years ago and from memory it was easier (less CSS code) to do it Weebly rather than whack-a-mole in Knack.

I've grabbed some CSS from the old Weebly site for you to play with here:

/* Added 17/01/2016 - Knack embed fixes
------------------------------------------------------------------------------------------------------*/
.kn-content {
height: 100% !Important;
font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif !Important;
font-size: 13px !Important;
line-height: 18px;
color: #555 !Important;
-webkit-font-smoothing: antialiased;
}
.kn-content h2 {font-family: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif !Important;}
.kn-view {padding: 2px 24px;}
.kn-view.kn-info.clearfix {background-color: darkgray;}

#knack-body > .wsite-elements.wsite-not-footer {height: 100%;}
#wsite-content {height: 100%}
#wsite-content > div {height: 100%}
#wsite-content > div > div {height: 100%}

input[type="radio"] {-webkit-appearance: radio;}
input[type="checkbox"] {-webkit-appearance: checkbox;}
input[type="text"] {-webkit-appearance: textfield;}
.kn-records-nav.clearfix > form > input[type="text"] {border: solid 1px #bbb;}

Add it to the top of your Theme > Edit HTML/CSS > main_style.css.

I have no idea whether the selectors in the code above will still work so you might need to adjust, and the fonts may not match your app of course.