# 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 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 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 Icon Styling

This styling changes the shape of the story group icons, their corners, and the distance between each other. Users can create square, 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"
  }
});