Cover Page Design Features

Owned by Jay El-Kadhi
Last updated: Nov 17, 2021
7 min read

 

This documentation will provide information regarding the various design features prevalent in the cover page functionality.

The example on the right displays a cover page layout with 3 rows;

Cover pages are made up of two fundamental structures, rows and columns;

  1. What is a row?

    1. Rows are the horizontal foundations that allow editors to develop the structure of their cover page.

    2. They are implemented by dragging the ‘Row’ icon (seen at the top left of the ‘Drag and drop tiles’ interface) into the structure on the right.

  2. What is a column?

    1. Columns are the vertical building blocks which allow editors to develop the structure of their cover page.

    2. Columns are the vessel in which the various tile functionalities (displayed in the ‘Drag and drop tiles’ interface) are contained.

    3. When a row is dragged into the structure, as a default, this creates one column (as shown in the top row of the example).

    4. Editors are able to drag up to 12 columns into each horizontal row, sizing each of them to their preference.

    5. The example template contains 3 rows;

      1. First row: 1 column

      2. Second row: 2 columns

      3. Third row: 3 columns

    6. You will notice that the third row contains 2 tiles within 1 column;

      1. This is to demonstrate the functionality of stacking tiles within 1 column, allowing editors to display multiple content types within one structured space.

    7. You will also notice that the third row contains two empty columns, on the left and right;

      1. This is to demonstrate the functionality of squeezing columns to a bespoke preference and location within its row. By doing so, editors can structure columns to their specified size within each row.

  3. Row styling

    1. In the top right of each row, there is a cog symbol, which allows editors access to various styling options.

    2. When an editor clicks into this interface, there are 3 tabs;

  4. Background

    1. Background image URL

      1. This field allows the editor to generate a background image for the row in which they are developing. By pasting an image URL (either hosted internally within the Haiku website, or externally), the image found in the URL location will be shown in the background of the row in which it is placed.

    2. Background size

      1. Auto- If selected, the background image will automatically generate its size.

      2. Contain- If selected, the background image will be contained within a section of the row.

      3. Cover- If selected, the background image will cover the entire width of the row.

    3. Image repeat

      1. Default- If selected, the background image will by populate itself by default.

      2. None- If selected, the background image will not repeat itself.

      3. Tile- If selected, the background image will repeat itself across the row.

    4. Image position

      1. Depending on which option is picked from the dropdown menu, the background image will display a certain area of itself on the row.

    5. Opacity

      1. This field determines the opacity of the background- 0% = total transparency, 100% = total clarity.

    6. Background colour

      1. This field determines the colour of the row, which can be selected via the colour picker in the dropdown, or a hex number can be inputted to achieve a specific colour.

  5. Spacing

    1. Margins

      1. What is a margin?

        1. The margin is the space around a row which acts as a buffer, creating a gap between itself and the other rows of the cover page around it.

      2. Top- The number entered here will determine the number of pixels that act as a margin around the top edge of the row.

      3. Bottom- The number entered here will determine the number of pixels that act as a margin around the top edge of the row.

      4. Left- The number entered here will determine the number of pixels that act as a margin around the left edge of the row.

      5. Right- - The number entered here will determine the number of pixels that act as a margin around the right edge of the row.

    2. Paddings

      1. What is padding?

        1. Padding performs in a way which can increase or decrease the amount of room a row takes up on the page.

      2. Top- The number entered here will determine the number of pixels that act perform as padding on the top side of the row.

      3. Bottom- The number entered here will determine the number of pixels that act perform as padding on the bottom side of the row.

      4. Left- The number entered here will determine the number of pixels that act perform as padding on the left side of the row.

      5. Right- The number entered here will determine the number of pixels that act perform as padding on the right side of the row.

  6. Content Size

    1. Width (of background)

      1. Fixed- With this option selected, the background content provided in the aforementioned (background image URL or background colour) tabs will remain fixed to the constraints to the width of the upper horizontal navigation of the haiku website.

      2. Full- With this option selected, the background content provided in the aforementioned (background image URL or background colour) tabs will stretch beyond the constraints of the upper horizontal navigation to the edges of the browser window.

    2. Content width

      1. Fixed- With this option selected, the content provided (as specified in the ‘compose’ view of the cover page tiles) will remain fixed to the constraints to the width of the upper horizontal navigation of the haiku website.

      2. Full- With this option selected, the content provided (as specified in the ‘compose’ view of the cover page tiles) will stretch beyond the constraints of the upper horizontal navigation to the edges of the browser window.

      3. Please note, these two options do not have to be configured in collation with one another. Within this, an editor could implement a design whereby they used full width background, and fixed width content- or vice versa.

    3. Columns height

      1. Auto- With this option selected, the height of a column will be determined by the amount of content which populates it.

      2. Equal- With this option selected, adjacent columns will be equal in height, even if one has more content than the other. It will stretch a column to the same height as the largest in its row.

  7. Column Styling

    1. In the top right of each column, there is a cog symbol, which allows editors access to various styling options.

    2. When an editor clicks into this interface, there are 3 tabs;

  8. Background

    1. Background image URL

      1. This field allows the editor to generate a background image for the column in which they are developing. By pasting an image URL (either hosted internally within the Haiku website, or externally), the image found in the URL location will be shown in the background of the column in which it is placed.

    2. Background size

      1. Auto- If selected, the background image will automatically generate its size.

      2. Contain- If selected, the background image will be contained within a section of the column.

      3. Cover- If selected, the background image will cover the entire width of the column.

    3. Image repeat

      1. Default- If selected, the background image will by populate itself by default.

      2. None- If selected, the background image will not repeat itself.

      3. Tile- If selected, the background image will repeat itself across the column.

    4. Image position

      1. Depending on which option is picked from the dropdown menu, the background image will display a certain area of itself on the column.

    5. Opacity

      1. This field determines the opacity of the background- 0% = total transparency, 100% = total clarity.

    6. Background colour

      1. This field determines the colour of the column, which can be selected via the colour picker in the dropdown, or a hex number can be inputted to achieve a specific colour.

  9. Text

    1. Colour

      1. This field defines the colour of any text which is present in the tile which populates the column in which an editor is customising. It can be changed using the colour picking tool, or by entering a hex number into the ‘colour’ field.

    2. Link colour

      1. If there are hyperlinks present in the tile in which the column is populated by, this field allows the editor to customise the colour in which these links are displayed.

  10. Spacing

    1. Margins

      1. What is a margin?

        1. The margin is the space around a column which acts as a buffer, creating a gap between itself and the other cover page columns around it. Margins can be used to alter the position of content.

      2. Top- The number entered here will determine the number of pixels that act as a margin around the top edge of the column.

      3. Bottom- The number entered here will determine the number of pixels that act as a margin around the bottom edge of the column

      4. Left- The number entered here will determine the number of pixels that act as a margin around the left edge of the column.

      5. Right- The number entered here will determine the number of pixels that act as a margin around the right edge of the column.

    2. Paddings

      1. What is padding?

        1. Padding performs in a way which can increase or decrease the amount of room a row takes up on the page.

      2. Top- The number entered here will determine the number of pixels that act perform as padding on the top side of the column.

      3. Bottom- The number entered here will determine the number of pixels that act perform as padding on the bottom side of the column.

      4. Left- The number entered here will determine the number of pixels that act perform as padding on the left side of the column.

      5. Right- The number entered here will determine the number of pixels that act perform as padding on the right side of the column.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Row edit interface:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Column edit interface: