# 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 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 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"
  }
});