Login

Learning & Support

Documentation

Styling: Item Styles (v10)

Twixl Support Team Updated: - Created :

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

WARNING ABOUT THE MIGRATION OF V9 APPS TO V10 APPS, READ THIS FIRST!!!

In Twixl Publisher 10, we completely redesigned the way you create and maintain Item Styles. We implemented a lot more possibilities and as a publisher you'll be able to finetune your designs a lot (!) more than before. But: Apps need to be compatible. The new Item Styles only work with apps that were built with version 10+ of Twixl Publisher.

We wrote an extensive manual on how to migrate your existing apps! Make sure you've read this KB-article first before you continue working with Item Styles!!!

ABOUT THE OLD v9 CELL STYLES:

If you are not ready yet to use the new Item Styles and/or to create a new v10 app, you can still use Cell Styles.

Adding Item Styles

We've included several new templates to get you started with Item Styles! The most common designs are now 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: Per option (cfr 1.) you can setup different parameters that will influence the look and feel of your cell.

Available options

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.

ABOUT THE BROWSER CLIENT

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: To start, you can add 1 Image Layer with several styling options. The final release of version 10 will have the option to add 2 Image Layers in total.
  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