# UI Customizations

This guide shows you how to customize the story experience of your users. These customizations apply to both storyly bar and story view.

Before you begin

It is advised to apply these customizations after StorylyInit if you are planning to do the customizations programmatically.

# Storyly Bar Customizations

This section shows supported customizations on the storyly bar.

# Story Group Text Color

This attribute changes the text color of the story group. This attribute can be specified programmatically or from the attributes inspector of design view.

In order to set this attribute, use one of the following methods:

    In order to set this attribute from the design view, change the color of the Story Group Text Color under the Storyly View section in the attributes inspector.

    # Story Group Text Visibility

    This styling changes the visibility of story group text. This attribute can be specified programmatically or from the attributes inspector of design view.

    In order to set this attribute, use one of the following methods:

      In order to set this attribute from the design view, change the value of the Story Group Text Is Visible under the Storyly View section in the attributes inspector.

      # Story Group Text Font

      This attribute changes the font of the story group text. This attribute can only be specified programmatically.

      In order to set this attribute, use one of the following methods:

        WARNING

        Font size will be overridden in Storyly, so it is not possible to change the font size.

        # Story Group Icon Background Color

        This attribute changes the background color of the story group icon that is shown to the user as skeleton view till the stories are loaded. This attribute can be specified programmatically or from the attributes inspector of design view.

        In order to set this attribute, use one of the following methods:

          In order to set this attribute from the design view, change the color of the Story Group Icon Background Color under the Storyly View section in the attributes inspector.

          # 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. This attribute can only be specified programmatically.

          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 one of the following methods:

            # 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. This attribute can only be specified programmatically.

            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 one of the following methods:

              # Story Group Pin Icon Color

              If any of the story groups are selected as pinned groups from the dashboard, a little star icon will appear along with the story group icon. This attribute changes the background color of this pin icon. This attribute can be specified programmatically or from the attributes inspector of design view.

              In order to set this attribute, use one of the following methods:

                In order to set this attribute from the design view, change the color of the Story Group Pin Icon Color under the Storyly View section in the attributes inspector.

                # Story Group Ivod Icon Color

                If any of the story groups are selected as the IVod group type from the dashboard, a little camera icon will appear along with the story group icon. This attribute changes the background color of this Ivod icon. This attribute can be specified programmatically or from the attributes inspector of design view.

                In order to set this attribute, use one of the following methods:

                  In order to set this attribute from the design view, change the color of the Story Group Ivod Icon Color under the Storyly View section in the attributes inspector.

                  # Story Group Size

                  This attribute changes the size of the story group. This attribute can be specified programmatically or from the attributes inspector of design view. Currently, supported sizes are small, large, xlarge and custom sizes. The default story group size is large.

                  In order to set this attribute, use one of the following methods:

                    In order to set this attribute from the design view, change the value of the Story Group Size under the Storyly View section in the attributes inspector.

                    TIP

                    If you set your story group size as custom, you can change a few measures of the story groups such as icon height, icon width, icon corner radius. Check the Custom Size Story Group Icon Styling.

                    # Custom Size Story Group Icon Styling

                    This styling changes the shape of the story group icons, their corners, and the distance between each other. You can create square, circle, and oval-shaped icons using these attributes. This styling can be specified programmatically or from the attributes inspector of design view. You should set a StoryGroupIconStyling instance, which consists of the following variables: height, width, cornerRadius.

                    WARNING

                    This section is effective if you set your story group size as custom. If you set any other size and use this attribute, your changes will not take effect.

                    In order to set this attribute, use one of the following methods:

                      In order to set this attribute from the design view, change the values of the Story Group Icon Height, Story Group Icon Width, and Story Group Icon Corner Radius under the Storyly View section in the attributes inspector.

                      # Story Group List Styling

                      This styling changes the distance between the story groups and edge paddings of the first and last story groups. This styling can be specified programmatically or from the attributes inspector of design view.

                      In order to set this attribute, use one of the following methods:

                        In order to set this attribute from the design view, change the values of the Story Group List Padding Between Items and Story Group List Edge Padding under the Storyly View section in the attributes inspector.

                        # Story Group Thematic Icon Image

                        This feature lets you use different story groups images for different labels. If you set dark mode images for your story groups from the Storyly dashboard, you can set a dark label to show these dark mode icons. This attribute can be specified programmatically or from the attributes inspector of design view.

                        WARNING

                        If you use the following methods to set the label without setting dark mode images from the dashboard, default group images will be used. If you already set the dark mode images but send a string label other than dark, again default group images will be used.

                        In order to set this attribute, use one of the following methods:

                          In order to set this attribute from the design view, change the value of the Story Group Icon Image Thematic Label under the Storyly View section in the attributes inspector.

                          # Story View Customizations

                          This section shows supported customizations on story view.

                          # Storyly View Header Text Color

                          This attribute changes the header text color of the story view. This attribute can be specified programmatically or from the attributes inspector of design view.

                          In order to set this attribute, use one of the following methods:

                            In order to set this attribute from the design view, change the color of the Story Item Text Color under the Storyly View section in the attributes inspector.

                            # Storyly View Header Icon Border Color

                            This attribute changes the header icon border color of the story view. The border consists of color gradients. This attribute can only be specified programmatically.

                            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 one of the following methods:

                              # Storyly View Progress Bar Color

                              This attribute changes the progress bar colors, two colors, of the story view. The first defined color is the color of the background bars and the second one is the color of the foreground bars while watching the stories. This attribute can only be specified programmatically.

                              WARNING

                              Only 2 colors must be defined in order to use this attribute.

                              In order to set this attribute, use one of the following methods:

                                # Storyly View Header Icon and Text Visibility

                                This styling changes the visibility of story group text. This attribute can be specified programmatically or from the attributes inspector of design view.

                                In order to set this attribute, use one of the following methods:

                                  In order to set this attribute from the design view, change the values of the Story Header Icon Is Visible and Story Header Text Is Visible under the Storyly View section in the attributes inspector.

                                  # Storyly View Header Text Font

                                  This attribute changes the font of the story view header text. This attribute can only be specified programmatically.

                                  In order to set this attribute, use one of the following methods:

                                    WARNING

                                    Font size will be overridden in Storyly, so it is not possible to change the font size.

                                    # Storyly View Loading View

                                    This customization changes the default loading view to the desired custom loading view. In order to change this view, you need to prepare your own loading view, which must inherit from StorylyLoadingView. You can see an example class in the following code snippet:

                                      After you create your custom loading view, set it by using the following methods:

                                        # Storyly View Interactive Font

                                        This attribute changes the font of all text view's font in interactive components. This attribute can only be specified programmatically.

                                        In order to set this attribute, use one of the following methods:

                                          WARNING

                                          Storyly will use UIFont.systemFont if custom font is not set.

                                          WARNING

                                          Storyly will arrange font size for each text view in interactive components so that custom font size arrangement is not possible.