Customisation
✏️

Customisation

These customizations can be made using the features option available inside stationeryConfigurations

Customize Style Selector

styles: {
	selector: true,
	specific: []
}
  1. selector: selector attribute refers to the visibility of the style selector. "selector: false" would hide the style selector from the widget. In this case, the style pallet will not be available and the font style selected would be set to the default font style i.e Foster currently. However, you can change the default font if you desire by using this configuration: styles: { selector: false, specific: ['George'] }
  2. specific: specific attribute here refers to a condition when you want to only enable some specific styles inside the style selector. The styles that you want inside the selector can be configured by passing the font style names in the "specific" array. For example: specific: ['Foster', 'George'] would result in the style selector containing only these two font styles.

Customize Color Pallet

colors: {
	selector: true,
	specific: []
}
  1. selector: selector attribute refers to the visibility of the color selector. "selector: false" would hide the color selector from the widget. In this case, the color pallet will not be available and the color selected would be set to the default color i.e Blue currently. However, you can change the default color if you desire by using this configuration: colors: { selector: false, specific: ['Black'] }
  2. specific: specific attribute here refers to a condition when you want to only enable some specific colors inside the color selector. The colors that you want inside the selector can be configured by passing the color names in the "specific" array. For example: specific: ['Blue'] would result in the color selector containing only Blue color. Valid options available for color currently are 'Blue' and 'Black'.

Customize Size Pallet

sizes: {
	selector: true,
	specific: []
}
  1. selector: selector attribute refers to the visibility of the size selector. "selector: false" would hide the size selector from the widget. In this case, the size pallet will not be available and the size selected would be set to the default size i.e Small currently. However, you can change the default size if you desire by using this configuration: sizes: { selector: false, specific: ['Large'] }
  2. specific: specific attribute here refers to a condition when you want to only enable some specific sizes inside the size selector. The sizes that you want inside the selector can be configured by passing the size names in the "specific" array. For example: specific: ['Large'] would result in the size selector containing only size Large. Valid options available for size currently are 'Small', 'Medium' and 'Large'.

Customize Color Scheme of Editor

The color scheme of the stationery customizer can be customized by passing values in the following configurations in the stationeryConfigurations. The color can be passed in text i.e "red" or using a hex code such as "#FF0000" for red color.

Note: This configuration is not supposed to be passed under the features key. It is a separate section parallel to the features section. Refer to the exact location from the widget scripts posted above in the first section of the documentation.

image

Default Values are assigned to each of these sections if no values are assigned in this config.

1. bgColor: this refers to the background of the stationery customizer.

Default Value: "#eaeef7"

2. sizeSelectorBgColor: this refers to the background color of the size selector button group

Default Value: "#4450a5"

3. sizeSelectorTextColor: this refers to the text color fo the size selector button group i.e "Small" "Medium", "Large"

Default Value: selected size - "#ffffff" , not selected sizes = "#4450a5"