Modify a custom design option

Object

Example:

"customStyles": { "all": { /* All CSS properties. */ /* E.g., "flexDirection": "rowReverse" */ },

"desktop": { /* All CSS properties. */ /* Properties to be applied in addition to listed in all section */ }

, "tablet": { /* All CSS properties. */ /* Properties to be applied in addition to listed in all section */ }

, "mobile": { /* All CSS properties. */ /* Properties to be applied in addition to listed in all section */ },

"mobile_landscape": { /* All CSS properties. */ /* Properties to be applied in addition to listed in all section */ }, }

Used to apply CSS style directly on the element or the container. Note that the CSS style name needs to be in camel case. E.g., flex-direction would become flexDirection. No CSS Selectors are allowed. The styles mentioned here are going to be applied directly as CSS styles to the corresponding HTML element  These are not mapped to the Visual properties of the respective container. Because of this very nature, some properties, like “margin” could be out of sync with the Visual properties, like “content-width”.

As a guideline, if something can be controlled via Visual properties, declare these properties under “customProperties” and the rest under “customStyles” as CSS properties.

Object

Refer to customProperties table for further details.

Card container property only

"cornerRadius": { "type": 1, "value": { "topLeft": 4, "bottomLeft": 4, "bottomRight": 4, "topRight": 4 } },

To add a background to a container, use the fill property. The fill property includes the following information:

1. Type: Specifies the fill type. You can choose from the following options:

   • 1: Solid Fill
   • 2: Image Fill
   • 3: Linear Gradient
   • 4: Radial Gradient

2. Enabled: A boolean value indicating whether the fill property is enabled.

3. Props: Contains all the details about the fill, such as color, opacity (alpha), color stops, end points, radial handle points, and background images.

Solid Fill JSON Structure

"fill": {
"type": 1,
"props": {
"color": "<fill color>",(any hex code for color)
"alpha": <color opacity (value ranges from 0 to 1)>
}
}

Image Fill JSON Structure

"fill": {
"type": 2,
"props": {
"backgroundImage": "<image name with extension (ensure the image is in the same directory)>"
}
}

Linear/Radial Gradient JSON Structure

• Color Stops: Defines the gradient's color at specific positions. Each stop has the following properties:
  • color: The gradient color (in hex format).
  • alpha: The transparency of the color (value ranges from 0 to 1).
  • scaledPosition: The position of the color stop (value ranges from 0 to 1).

"fill": {

"type": <Fill Type (use 3 for Linear Gradient or 4 for Radial Gradient)>,
"props": {
"colorStops": [
{
"color": "cp-color-c7",
"alpha": 1,
"scaledPosition": 0
},
{
"color": "cp-color-c9",
"alpha": 0.5,
"scaledPosition": 1
}
]
}
}

By using the fill property and its associated attributes, you can define various background styles for containers.

Shadows can be added to container elements, such as content blocks or card containers, using the shadow property. The following attributes define the shadow's appearance:

Shadow Properties

• x: Horizontal offset of the shadow.
• y: Vertical offset of the shadow.
• blur: Radius of the shadow blur.
• color: Shadow color in hex format.
• type: Specifies the shadow type. For an inner shadow, use 1.
• alpha: Shadow opacity (value ranges from 0 to 1).
• enabled: A boolean value to enable (true) or disable (false) the shadow.

Shadow on content block container

The following properties are used to apply a shadow to the container:

• x: Horizontal offset of the shadow.
• y: Vertical offset of the shadow.
• blur: Shadow blur radius.
• color: Shadow color (hex format).
• type: Use 1 for inner shadows.
• alpha: Shadow opacity (0 to 1).
• enabled: Boolean to enable or disable the shadow.

Example:

"shadow": { "x": 1, "y": 2, "blur": 4, "color": "#b3b3b3", "type": 1, "alpha": 0.5, "enabled": false }

Shadow on Card Container

The following properties are used to add a shadow to the card container:

• x: Horizontal offset of the shadow.
• y: Vertical offset of the shadow.
• blur: Shadow blur radius.
• color: Shadow color (hex format).
• enabled: Boolean to enable or disable the shadow.

Example:

"shadow": { "x": 0, "y": 0, "blur": 10, "color": "#666666", "enabled": true }

Borders can be applied to container elements, such as content blocks or cards, using the border property. The following attributes define the border's appearance:

Border Properties:

• type: Specifies the border type. Values range from 0 to 5, corresponding to the options in the Charm border dropdown.
• capType: Defines the border cap type. Values range from 0 to 2.
• width: Specifies the border width.
• color: Sets the border color (in hex format).
• alpha: Determines the border opacity (value ranges from 0 to 1).
• enabled: A boolean to enable (true) or disable (false) the border.

Example:

"border": { "enabled": false, "color": "cp-color-c4", "width": 8, "type": 0 }

Border Properties for Card Container

• enabled: A boolean to enable (true) or disable (false) the border.
• color: Specifies the border color (in hex format).
• width: Defines the border width.
• type: Specifies the border type.

Example:

"border": { "enabled": true, "color": "#666666", "width": 5, "type": 1 }

Changing Component Alignment

• Each component within the content block has an entry in the components property.
• The alignment property specifies the alignment of each component and accepts the following values:
  • left
  • right
  • center

Controlling Card Visibility

• The card property can be used to control the visibility of the card.
• A value of true enables the card, while false disables it.

Example:
Card Container Properties

The card container holds components or slide items, and you can customize their alignment and visibility using the components property.

Changing Component Alignment

• Each component within the content block has an entry in the components property.
• The alignment property specifies the alignment of each component and accepts the following values:
  • left
  • right
  • center

Controlling Card Visibility

• The card property can be used to control the visibility of the card.
• A value of true enables the card, while false disables it.

Example

"components": {
"label": {
"alignment": "left"
},
"checkbox": {
"alignment": "left"
},
"buttons": {
"alignment": "left"
},
"card": false
}

You can define padding for any object, card container, or content block using the padding property within the alignmentAndSpacing section.

Padding Properties

• left: Padding on the left side (in pixels).
• right: Padding on the right side (in pixels).
• top: Padding at the top (in pixels or percentage, depending on context).
• bottom: Padding at the bottom (in pixels or percentage, depending on context).
• isDTMLinked: A boolean value that determines if padding is linked across different device types (e.g., desktop, tablet, mobile).
• tablet: Device-specific padding for tablets (e.g., top).
• mobile: Device-specific padding for mobile devices (e.g., top).

Example: 

"alignmentAndSpacing": { "padding": { "left": 10, "right": 10, "top": 50, "bottom": 50, "isDTMLinked": false, "tablet": { "top": 80 }, "mobile": { "top": 80 } } }

Autofit – applicable only for content blocks. This will automatically fit in available space

Example:

"alignmentAndSpacing": { "autoFit": false, "padding": { "left": 10, .... } },

Applicable only to text blocks. Example:

"customProperties":{

"textProps": {

        "listProps":{

          "listDepth":4,

          "listColor": "#EB2699",

          "listSize":"120%",

          "listType":"OrderedListRoman1"

        }

}

  }

"imageHeight"

"imageAspectRatio"

"imageBehavior"

Applies only to image content block and image grid content block. If "imageBehavior" is set to "IG_SCALE", we honor  "imageAspectRatio" to scale the object in different viewports. But if it is set to "IG_FIXED_HEIGHT" , we honor "imageHeight" property.

Example:

{

"customProperties": {

        "alignmentAndSpacing": {

        .....

        "imageHeight": 768,

        "imageAspectRatio": 3.415,

        "imageBehavior": "IG_SCALE"

      }

Applies to only video card container. This defines the height of the video object in the content block. Example:

{"tag": "videoCard",

      "customStyles": {

        ...

        },

             "customProperties": {....

            "videoHeight": 400

      }

    }

Applies to only character and scenario content blocks. 

•  "imageHeight" - default height of the character in the content block.
•  "minImageHeight" - on resizing, this is the minimum height that is maintained for the object.

Here is an example:

{

"tag": "character-block-container",

      "customStyles": {

       ......

      "customProperties": {

        "imageHeight": 600,

        "minImageHeight": 200

}

}

Applies only to question slides' Caption objects. Position defines the position of the captions in the question slide:

• Top 
• Middle
• Bottom

Example:

 {

      "tag": "slide-item-question-caption",

      "customProperties": {

        "position": 1

      },

}