Login
Status page

Help

Documentation

  1. Twixl Help
  2. Design the interface
  3. Basics of interface design in Twixl

Item Styles

Twixl Support Team Updated: - Created :

    Where content will be positioned in a collection in browse view mode is defined by a grid style. How every cell - or number of cells - in this grid will look like and what will be displayed within this cell, is determined by an 'Item Style'.

    1. Item Styles

    Start with your first Item Style by selecting the Item Styles tool from the left menu > Design > Item Styles for your app on the Twixl platform and click the "+" icon.

    2. Adding Item Styles

    Several templates are available to help you getting started with Item Styles. The most common designs are ready with a simple click. Don't worry if these do not fit your needs exactly, they are fully customizable afterwards.

    Adding Item Styles

    3. Getting Started

    Entering the Item Style interface, you'll notice 3 different sections:

    1. General options: select all the available options that are configurable for an Item Style here.
    2. Live Preview Pane: the Live Preview Pane displays all the design changes you make, instantly.
    3. Available parameters per option: for every General Option (cfr 1.) different parameters will be displayed enabling you to adapt the look and feel of your cell.
    Getting Started Item Styles

    4. Available options

    AVAILABLE METADATA PLACEHOLDER TAGS

    If you have entered metadata in your Content Items, you can define here what you want to display in your cell by selecting the available metadata placeholder tags.

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

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

    There are specific tags for specific use cases:

    • {creation date}: This tag adds the creation date of the content item which can be handy to add to news items so the user has an idea about more recent and older items.
    • {publication date}: Another tag one can use to identify an event date for instance.
    • {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 or for longpress downloads and will make it clear to a user whether a collection is ready to download or has already been downloaded.

    4.1. Tablet - Phone - Browser

    In 1 Item 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.

    You can use separate designs for each rendition or not. It all depends on the content and the requirements. If you want to use the same design on different media, select Copy to Phone, Copy to Tablet and/or Copy to Browser.

    ABOUT THE BROWSER CLIENT

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

    4.2. General options

    Introduction

    1. General options: Here you can configure general metadata, some basic layout options and the styling of the Table Of Content (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.

    4.2.1. Metadata & Info

    Metadata
    • Name: Define a name for this Item Style. Even though this is for internal use only, it is important to accord consistent names - even in line with the names of the Grid Styles - in order to make it easier if you have to select the correct item style for your content or when you will extend the item style list with new item styles.
    • 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.

    4.2.2. Cell Layout

    Cell Layout

    The layout defines the number of columns and rows that a cell will span. The effective size of your cell will depend on the number of columns you defined for your Grid Styles.

    4.2.3. Table of Contents

    TOC

    This section determines the design of your table of content.

    • Title & Subtitle Template: Select from different placeholders to show a title and optional subtitle. If these textlines are fixed, you can also enter your own title and subtitle.
    • Change case: Allows you to change the case of title and subtitle.

    4.2.4. Image Layers

    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

    4.2.5. Text Layers

    Text Layer

    Defines 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 and how large it is relative to the cell.
    • Padding: Set padding for extra spacing around the Text Layer.
    • Background Color: Choose a background color for this Text Layer.

    Note that you can add another Text Layer with specific properties. E.g. add another Text Layer at the right side of this cell with another background color (see next screenshot).  

    4.2.6. Text Lines

    Text Line
    • Text Line:
      • Template: Adds several placeholders according to what you want to see displayed in the cell. If this text is fixed, you can also enter your own text line.
    • Layout:
      • Pin: You can choose to which side(s) the Text Line needs to be pinned.
        • Empty = No pin.
        • A value in pt = A pin with the selected distance (0-...).
      • Padding: Defines spacing around the title (in 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: Fills a background color for your Text Line.
      • Text Color: Defines the color of your text.
      • Title Font: Selects a font (requires that you have added custom fonts).
      • Font Size: Adjusts the font size.
      • Line Height: Defines the spacing from 0,5 to... of your lines but always check with your font size and cell height.
      • Text Alignment: Aligns the text.
      • Text Transform: Has 4 options: None (leave unchanged), Upper Case, Lower Case or Title Case.
      • Borders: Applies borders to your Text Line.

    4.2.7. Line Layers

    Line Layer

    You can add an extra line to your cell (up to 4 line layers), completely independent from the rest of your layout.

    NAMING YOUR ITEM STYLES

    As most apps use several item styles, giving an clear and unique name for each and every item style is key. Think about the combination of your item style names with those of your grid style names too. This will make your work much easier later on!

    Related content