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

Customise 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.

Customise Colour Pallet

colours: { selector: true, specific: [] }
  1. selector: selector attribute refers to the visibility of the colour selector. "selector: false" would hide the colour selector from the widget. In this case, the colour pallet will not be available and the colour selected would be set to the default colour i.e Blue currently. However, you can change the default colour if you desire by using this configuration: colours: { selector: false, specific: ['Black'] }

  2. specific: specific attribute here refers to a condition when you want to only enable some specific colours inside the colour selector. The colours that you want inside the selector can be configured by passing the colour names in the "specific" array. For example: specific: ['Blue'] would result in the colour selector containing only Blue colour. Valid options available for colour currently are 'Blue' and 'Black'.

Customise 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'.

Customise Colour Scheme of Editor

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

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.

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

1**. primary:** this refers to the background colour and border colour of the size selector button group

Default Value: "#4450a5"

2**. secondary:** this refers to the background of the stationery customiser.

Default Value: "#eaeef7"

3. text: this refers to the text colour of the size selector button group i.e "Small" "Medium", "Large"

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

Did this answer your question?