Learning & Support


Styling: Item Styles

Twixl Support Team Updated: - Created :

    The appearance of the cells on your Browse Grids can be changed in the Item Style options window.

    Adding Item Styles

    Several templates are available to help you get started with Item Styles! The most common designs are  available with the simple push of a button. And as always, they are fully customizable afterwards!

    Getting Started

    Entering the Item Style interface, you'll notice some differences:

    1. Available options: Here you can select all the available options that are configurable for an Item Style.
    2. Live Preview Pane: The Live Preview Pane shows you all the design changes you make, live.
    3. Available parameters per option: for each option (cfr 1.) you can setup different parameters that will influence the look and feel of your cell.

    Available options


    Here and there, you can insert so called Metadata placeholders. With these tags, you can automatically insert metadata defined in your Content Items.

    These are the available tags (they all correspond to the respective metadata fields in your Content Item:

    {name} - {title} - {author} - {category} - {tagline}

    There are specific tags for specific use cases:

    • {price}: This tag will pull the price of your In-App Purchase item from a store (App Store or Google Play)
    • {purchaseinfo}: This tag will use the Purchase Info defined in our Collection or PDF Content Item (for non-free content).
    • {icon-download-status}: This tag can be used for collections that are marked as monolithic, and will make it clear to a user whether a collection is ready to download or has already been downloaded.

    1. Tablet - Phone - Browser

    In 1 Cell Style you can define a layout for:

    • Tablets: This design will be used on Tablets
    • Phones: This design will be used on Phones
    • Browser: This design will be used in the Browser Client.

    It's entirely up to you whether you want to use separate designs for each rendition or not. You can use the same design as well by using the buttons Copy to Phone, Copy to Tablet and/or Copy to Browser.


    The tab Browser Client will only be visible if the Browser Client has been activated for your app. See this KB-article for more info about the Browser Client.

    2. General options - Introduction

    1. General options: Here you can configure general metadata, some basic layout options and the styling of the TOC.
    2. Image Layers: you can add an Image Layer with several styling options.
    3. Text Layers: You can add up to 2 Text Layers and each Text Layer can contain up to 5 Text Lines. All come with a lot of styling options.
    4. Line Layers: You can add up to 4 Line Layers, each with their own styling options.

    The combination of all these options, allows you to create complex styling options for your cells.

    2.1. General options

    2.1.1. Metadata & Info
    • Name: Define a name for internal use only.
    • Default: If enabled, this style will be used as the default style for new content items.
    • Twixl ID & Twixl UUID: If you experience any issues and need support, it's always a good idea to mention this info in a Support Ticket.
    2.1.2. Cell Layout

    The layout defines the number of columns and rows that a cell will span. The effective size of your cell will the be dependent on the number of columns you defined for your Browse Grid Style.

    2.1.3. Table of Contents

    Here you can set options that will determine how your table of contents will appear.

    • Title & Subtitle Template: Select from different placeholders to show a title and optional subtitle.
    • Change case: Allows you to change the case of title and subtitle.

    2.2. Image Layers

    Define how a cover image for the cell should be handled:

    • Position & Relative Size: You can define where the cover image needs to be placed in your cell.
    • Padding: Set padding for extra spacing around the cells
    • Content Mode:
      • Scale to Fill
      • Aspect Fit
      • Aspect Fill
    • Background Color: Choose a background color for your Image Layer


    2.3. Text Layers

    Define how a Text Layer for the cell should be handled:

    • Position & Relative Size: You can define where the Text Layer needs to be placed in your cell.
    • Padding: Set padding for extra spacing around the cells
    • Background Color: Choose a background color for your Text Layer


    2.3.1. Text Lines
    • Text Line:
      • Template: Add several placeholders here according to what you want to see displayed in the cell
    • Layout:
      • Pin: You can choose to which sides the Text Line needs to be pinned.
        • Empty = No pin.
        • A value in pt = A pin with the chosen distance (0-...)
      • Padding: Set spacing around the title (will use the background color)
      • Number of lines:
        • 0: If multiple lines are needed to fill in all the text, lines will be added. If no more lines can be added, the text will be truncated with ...
        • >1: The text will be filled in in the defined amount of lines. If the text has overset, the text will be truncated with ...
    • Style:
      • Background Color: Select a background color for your Text Line
      • Text Color: Define the color of your text.
      • Title Font: Select a font (requires that you have added custom fonts)
      • Font Size: No further explanation necessary ;-)
      • Line Height: Define the spacing of your lines (also depending on the Font Size).
      • Text Alignment: No further explanation necessary ;-)
      • Text Transform: None (leave unchanged), Upper Case, Lower Case or Title Case
      • Borders: If you want to apply borders to your Text Line, define the desired parameters here.

    2.4. Line Layers

    You can add an extra Line to your cell, completely independent from the rest of your layout!

    Was this article helpful?

    0 out of 0 found this helpful