Learn how to add a container to your ebook using Kotobee Author.

Containers allow you to creatively organize the layout of your content. Within the container, you can add text or any of the interactive content from the right panel, even other containers. When you add your container you will be able to format the text color, borders, background colors and images, and other options.

Fixed layout containers

When you add a container to a chapter in Fixed layout mode, you can precisely set where you want the container to be and its size. The only way to add text to the page is using a container. A container will act as a text box, where the text will wrap inside the text box.

Reflowable layout containers

In reflowable layout, containers are a versatile and easy way to add color and form to your content. External content can also wrap around the container. 

To add a container

  1. Click on the Container button in the right panel of the Edit Screen. The Insert/Edit Container Window will open with the  Layout Tab selected. 
    The following settings are all optional, you may press Create immediately and edit the layout and design later.  In case, you want to format the layout and design now, read below.  We will do the layout first, then the design.
    •  Container Type

              Expand Vertically: The length of the container will automatically adjust to the content size. The width will not be affected.

              Use a Scroll Bar: Set the exact dimensions of the container. If the content exceeds the allocated size, a scrollbar will automatically appear. 

              Note: When exporting mobile apps, all containers will expand vertically and not have a nested scrollbar.

    • Width: The width of the container can be set precisely in pixels or as a percentage of the default size of the container.
    • Height: The height of the container is pixel-based only. This option is available only if the container type is "Use a scrollbar". (Otherwise, the height self-adjusts to the needs of the content.)

    •  Text-wrap

       If you're using reflowable layout, where do you want the container?  

      The container alone on a line without any text surrounding it, select None.
      The container on the left and text on the right, select Push left.  
      The container on the right and text on the left, select Push right. 

    • Margin: Set the amount of blank space (in pixels) that you'd like around your container. Setting a margin is particularly useful in reflowable layout, so the text wrapping next to the container doesn't stick to the container.
    • Padding: Set an empty space inside the container, to prevent the contents of the container from coming to close to the borders of the container.
    • Class. You may mark this container with a CSS class.
      You've now completed the layout settings, you may now move on to the design settings to set the colors and background image.
  2. Click Create.
  3. Click on the Design tab near the top of the Container Window.
    • Color: Set the default text color. You may still change the color of each character individually as you ordinarily would outside a text box from the WYSIWYG editor.
    • Background Color: Set the color of the background by clicking on the exact shade of any color or entering the color's HEX code.
    • Background Image: Click Add Image to select an image from your laptop to be the background of the container. If the image is larger than the container, the image will be cropped.
    • Border Thickness: Set the width of the border in pixels. If you do not want a border, simply set the thickness to zero.
    • Border Color: Set the color of the border by clicking on the exact shade of any color or entering the color's HEX code.
    • Border Radius: Use this setting to make the corners curved. The larger the number the more curved the corners. If you want sharp corners, set the radius to zero.
  4. Click Create.

And you're done.