You can study how to set colours and preview modes for an application in separate article. In this article we´ll cover the designing of issues overview. See image below for an example.

Example of custom design

Everyone with the Triobo Professional subscription can customize their design. Those with the subscription see in the issues list of the publication a specially named issue with a single article.

special issue for custom design

Everyone with the Triobo Professional subscription can customize their design. Those with the subscription see in the issues list of the publication a specially named issue with a single article.

Tip: if no object is selected, use W key to see borders of all objects on the page.

The page contains (void) object named __coversP. This object is critical, as it renders each individual issues. Do not delete this object. To see the object, you can use W key. We recommend to place it in the front layer.

Object settings - custom app design

On the screenshot, notice the second blue order at the bottom. It shows the distinction of the editor for design customization. Because the issues overview may be displayed on devices of various dimensions (web, Android and Apple tablets, Windows 10 app etc.), the typesetting in not expressed in absolute coordinates, but everything is aligned to the screen corners or to the middle.

For each object (or group of objects) you can set:

  • Horizontally: align left (default), align to middle, align right or stretch width according to position of right and left edge of the object.
  • Vertically: align to top, align to middle, align to bottom or stretch height according to top and bottom edge of the object.
  • Object: Set if object should be always visible, or only in landscape or portrait tablet orientation. With this, you can easily create designs for specific display orientations.

TIP: for better arranged work use tags, to show or hide specific objects as needed.

More complex construction

And what if you want to add for example a frame filled with some colour, containing text on the left side aligned to the left, image on the right aligned to the right, and was stretched according to actual width of the screen? That´s simple. First draw the (text) frame, fill it with colour and place the object above it. Frame will be set to spread horizontally. Left object will be aligned to the left same as the right object to the right.

How to test the design

You can publish in Triobo Content Reader as usual. To speed up the design change after publishing, close the Triobo Reader and start it again.