0

Targeting a specific Klip - CSS

Elke Scheepers

April 27, 2017 03:36

None

Follow

Hi there,

 

Fairly new to Css, so wondering if someone has already used the custom Css to target a SPECIFIC KLIP.  As per the notes in the themes, it states the following:

Targeting a specific Klip

To adjust the style of one or more specific Klips, you can add one or more classes to the root of any Klip container using the containerClassName. Use the Klip Editor to add this to the Klip’s source code.

For example, add:

"containerClassName": "myclass",

to the root of the Klip, below “layoutConfig”

 

Now, when I go into the specific klip in editor and go to View Klip Source Code, it only starts at the "title" area - and then works it way down to the difference layouts etc.   I can change the background for the title, or any of the individual layout tables, but cannot seem to find the root of the klip in the code to add the containerclassname to and hence am unable to change eg the background image of this klip (apart from the individual sections mentioned before).

So what I am trying to do at present is:

1. Change the background image for 1 specific ENTIRE klip

or 2. Change the background image for 1 specific klip BODY (i.e. entire section below the title bar - not just the layout grids)

Has anyone done this before?  Also, it would be great to get some more info about what the klip editor source code is - JSON?  And is there any other spot that source code can be changed?  I seem to be able to see more elements etc in the source code viewer than what I can actually see in the klip editor source code, but viewer info cannot be changed and saved.

Info appreciated.

 

 

• Facebook
• Twitter
• LinkedIn

2 comments

• 0
  
  Bernard Leussink May 03, 2017 10:36

  Als wondering the same. When applying the Help Centre link, only part of the Klip changes color, like so:

   

  

   

  EDIT: found it. To change the Klip title use:

  .klip.myclass { background-color: #000099; }
  
  

  To change the Klip body, use:

  .myclass .klip-body { background-color: red; }

• 1
  
  Elke Scheepers May 04, 2017 01:33

  Thanks Bernard.   I have tried that, but my main issue was that I couldn't seem to find the root of the klip in the code to add the containerclassname to and hence was unable to change eg the background image of this klip (apart from the individual sections mentioned before).

  EDITED:

  So I started from scratch with a default blank klip - this is the source code:

  {
  "title": "BlankTestKlip",
  "id": "39887741f098351094a44a18e717dd8b",
  "workspace": {
  "datasources": [],
  "dimensions": {
  "w": 445
  }
  },
  "appliedMigrations": {},
  "components": []
  }

  Seeing that the only "root" item in that code is the "title", I added the containerClassName to that one

  {
  "title": "BlankTestKlip",
  "id": "39887741f098351094a44a18e717dd8b",
  "containerClassName": "SingleKlip",
  "workspace": {
  "datasources": [],
  "dimensions": {
  "w": 445
  }
  },
  "appliedMigrations": {},
  "components": []
  }

   

  Now - managed to change the BODY of the klip by using your suggestion  

  .SingleKlip .klip-body {
  background-image: url('[yellow-paper.jpg]');
  }

  

  However, changing the title area won't work with your instructions -  it doesn't change the title background- no changes took effect for the below entry.

  .klip .SingleKlip {
  background-image: url('[Easter.jpg]');
  }

  I managed to change the title background globally on the dash so that all title bars were changed

  .klip  {
  background-image: url('[Easter.jpg]');
  }

  

  So part of my query has been answered - I now seem to be able to change the body of the klip provided I use the top item in the source code as the "root" and add the containerClassName to that.

  Now I am still trying to figure out:

  1. how to apply a title header background IMAGE to just that 1 klip (as suggestion did not work)

  2. how t apply a background IMAGE across the entire targeted klip only (i.e. both title and body area without it stacking)