# UI Customizations

This guide shows you how to customize the story experience of your users.

# Story Group Text Color

This attribute changes the text color of the story group.

In order to set this attribute, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupTextColor: "HEX/RGBA"
  }
});

# Story Group Text Visibility

This styling changes the visibility of story group text.

In order to set this attribute, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupTextVisibility: true/false
  }
});

# Story Group Text Font

This styling changes the font of story group text.

In order to set this attribute, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupTextFont: "FONT"
  }
});

# Story Group Text Size

This styling changes the size of the story group text. The default story group text size is 12.

In order to set this styling, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupTextSize: "PIXEL" // e.g. 4
  }
});

# Story Group Text Weight

This styling changes the weight of the story group text. The default story group text weight is normal.

In order to set this styling, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupTextWeight: 'CSS' // e.g. normal
  }
});

# Story Group Text Line Height

This styling changes the height of the story group text lines. The default story group text line height is 1.

In order to set this styling, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupTextLineHeight: '1' 
  }
});

# Story Group Text Margin Top

This styling changes the distance between the story group text and story group icon. The default distance in between is 6.

In order to set this styling, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupTextMarginTop: "PIXEL"
  }
});

# Story Group Text Seen State Color

This styling changes the text color of the story group that are seen by the user. The default seen story group text color is #333.

In order to set this styling, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupTextSeenColor: "HEX/RGBA"
  }
});

# Story Group Pin Icon Image

This attribute changes the image of the story group pin icon.

In order the set this attribute, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupPinIcon: 'URL'
  }
});

# Story Group Pin Icon Background Color

This styling changes the background color of story group pin icon.

In order the set this styling, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupPinBackgroundColor: "HEX/RGBA" // e.g. #FFCB00
  }
});

# Story Group Pin Icon Border Color

This styling changes the border color of story group pin icon.

In order the set this styling, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupPinBorderColor: "HEX/RGBA" // e.g. #FFCB00
  }
});

# Story Group Icon Border Seen State Color

This attribute changes the border color of the story group icons that are seen by the user. The border consists of color gradients.

WARNING

At least 2 colors must be defined in order to use this attribute. If a single color is requested, a same color code can be used twice.

In order to set this attribute, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupIconBorderColorSeen: ["HEX/RGBA", "HEX/RGBA"]
  }
});

# Story Group Icon Border Not Seen State Color

This attribute changes the border color of the story group icons that are unseen by the user. The border consists of color gradients.

WARNING

At least 2 colors must be defined in order to use this attribute. If a single color is requested, a same color code can be used twice.

In order to set this attribute, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupIconBorderColorNotSeen: ["HEX/RGBA", "HEX/RGBA"]
  }
});

# Story Group Icon and Border Gap Thickness

This styling changes the gap thickness between the story group icon and seen/unseen border. The default gap in between is 2.

In order to set this styling, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyBorderGapSize: "PIXEL"
  }
});

# Story Group Icon and Border Gap Color

This styling changes the gap color between the story group icon and seen/unseen border. The default color of the gap is #fff.

In order to set this styling, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyBorderGapColor: "HEX/RGBA"
  }
});

# Story Group Size

This attribute changes the size of the story group. The default story group size is 50x50.

In order to set this attribute, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupSize: "PIXELxPIXEL" // e.g. 50x50
  }
});

# Story Group Border Size

This attribute changes the border size of the story group. The default story group border size is 4.

In order to set this attribute, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupBorderSize: "PIXEL" // e.g. 4 
  }
});

# Story Group Icon Styling

This styling changes the shape of the story group icons, their corners, and the distance between each other. Users can create square, rectangular shape, circle, and oval-shaped icons using these attributes.

In order to set this attribute, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupBorderRadius: "PIXEL" // e.g. 10
  }
});

# Story Group List Styling

This styling changes the distance between the story groups.

In order to set this attribute, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyGroupMarginHorizontal: "PIXEL" // e.g. 10
  }
});

# Story Group List Alignment

This styling changes the alignment of the story groups.

In order to set this attribute, use the following method:

storylyWeb.init({
  ...
  props: { 
    storyGroupAlign: "left/center/right"
  }
});

# Storyly Bar Scroll Indicator

This styling adds the scroll indicator to your the Storyly Bar.

In order to set this attribute, use the following method:

storylyWeb.init({    
  ...
  props: {
    scrollIndicator: Boolean, // e.g. true/false
    scrollIndicatorOptions: {
      indicatorWidth: Number, // e.g. 32
      indicatorHeight: Number, // e.g. 32
      indicatorBorderRadius: Number, // e.g. 16
      indicatorBorderColor: "HEX/RGBA", // e.g. #D8D8D8
      indicatorBoxBackgroundColor: "HEX/RGBA", // e.g. #FFFFFF
      indicatorDefaultIconsColor: "HEX/RGBA", // e.g. #000000
      indicatorBoxShadow: 'CSS',
      customLeftIndicator: URL,
      customRightIndicator: URL,
      leftIndicatorMargin: Number, // e.g. 8
      rightIndicatorMargin: Number, // e.g. 8
    }
  }
});

WARNING

The customLeftIndicator and customRightIndicator URL extensions must be either .jpeg or .png.

# Story Interactive Text Font

This styling changes the typeface of all text view's font in interactive components.

In order to set this attribute, use the following method:

storylyWeb.init({    
  ...
  props: { 
    storyTextFont: "FONT"
  }
});

← Website Builders Custom Story Group Styling →