Modifying background to Scenes rather than Views

Ask the Community Get Answers
1

Hi Folks,

To try and enhance the appearance of our knack app I have been applying a background image to various pages which are run as modal popups.

Plain white is boring as all heck and I have found the solution to set the background at a “view level” with the following code.

#view_619 {
background-image: url(“https://xxxx.xxx/graphics/old_paper_texture2.jpg”);
padding: 20px 20px 20px 20px;
border: 1px solid hsl(0, 0%, 0%) !important;
border-radius: 1px !important;
}

which gives this result

image
image939×639 71.1 KB

However as you can see this routine has links to 8 sub-screens and to maintain
commonality the #view command has to be set for each one.

The down side to this is these are “display on details screen” not form fields and therefore don’t provide and don;t provide for an exit return to the original calling page without adding one manually.

So my questions are regards CSS application

  1. Can you apply a schema to an entire SCENE(PAGE) which indlcudes mutiple views ?

  2. and if not can you apply a schema of surrounding box and colors to all items (Views) or a page instead of doing them individually ?

and finally

How the heck do i make the CSS screen larger and not a black background :slight_smile:

2

Hey @RayWindlow47079,

If you want to apply formatting on all views within one scene, you can use the following selector (change scene_xx to your scene key):

#kn-scene_xx .kn-view {
  /* Your CSS here */
}

If you want to apply formatting to views across multiple scenes, you can use this selector:

#view_xx, #view_yy, #view_zz {
  /* Your CSS here */
}

You can also use a combination of both of the above:

#kn-scene_xx .kn-view, #view_xx, #view_yy, #view_zz {
  /* Your CSS here */
}

Regarding the CSS screen, you can zoom in/out with Ctrl+mouse scroll to make it bigger, but you can’t change the black background unfortunately!

Hope this helps!

1 Like
3

Cheers Stephen
I’ll give it a shot. I did search on the #kn parameters but couldn’t locate a substantive listing of what can cannot be used. Do you know of one ?
Cheers for your time to read and reply
Ray

PS Anyway of tracking what page a view number is tied to ? I noticed that is a view is moved or resued in another page the numbers change. I fear I have a swag of view defintions that are “homeless” so to speak and could be cleaned out.

4

There is no listing sorry, but I usually find the elements I want to target using the browser’s developer console.

I have a a vague idea of what you’re after for the latter question. This code can be entered into the developer console to return all of your views and their scene (page) key.

const viewScenes = Knack.scenes.models.flatMap(scene =>
  scene.views.models.map(view => ({
    [view.id]: scene.attributes.key
  }))
).reduce((acc, curr) => Object.assign(acc, curr), {});
console.log(viewScenes)

Would return something like this:

{
  "view_34": "scene_14",
  "view_106": "scene_41",
  "view_47": "scene_22",
  "view_62": "scene_2",
  "view_63": "scene_2",
  "view_64": "scene_2",
  // etc
}

I’d be happy to jump on a quick call to explain the above if you’d like to DM me.

1 Like
5

Thanks Stephen. I’ll put it off for another day.

Facing a major induced crisis cause by OneDrive.

They modified their software and resulted in sudden loss of some folders which had images that had embedded references in our database.
Took 2 weeks of someone new every day saying the same stupid thing (clear browser cache, try another browser Yada Yada) before they admitted there had been worldwide issue.

They restored the folder which was good but restored it to the wrong user in a family of 5 shared resources and lost all the embed codes.

So manually rebuilding links to our own server currently, fortunately less painful that regenerating codes in OneDrive.

Very much appreciate the offer though

Cheers

1 Like