Documentation

General

Using Displays

Last Updated: 

Select a display type

Ditty provides multiple display options to render your items. When creating a new Ditty, you’ll be asked to select a display type when you first click the main Display tab. You can also switch display types at any time by selecting the Change Type link next to the current display type title.

Choosing a template

You can use previously setup and saved displays by loading a display template.

  • While on the Display tab, select Use Template.
  • If you have saved displays, you’ll see a list of displays to choose from.
  • You can search for displays by title, and also filter the list of displays by display type by selecting one of the display type icons near the top of the panel.
  • Click on the display you want to use and select Use Template to start using the display.

Editing a display

  • Select the main Display tab.
  • If you are already using a custom display you’ll see the display settings.
  • If you are using a display template, select Customize.
  • Every display type will have the following settings sections: General, Styles, and Title. Some display types will have other settings sections as well.

General settings

This section is where you’ll set the main settings for the display type. Each display type will have its own set of general settings, but may share some of the same setting keys.

Style settings

Display styles allow you to customize the look of your display as well as setting base styling for all items that will be rendered with the display.

Item styles

Set base styles for your items. Be aware that css added to you item’s layout may override the style added with the settings here.

  • Item typography – Set the base typography for all items of the display. This is applied to the .ditty-item__elements container element of each item.
  • Item Text Color – Set the base text color for all items of the display.
  • Item Link Color – Set a color for all links contained in each item.
  • Item Background Color – Add a background color for all items.
  • Item Padding – Add padding around each item.
  • Item Border Color – Set the border color for all items.
  • Item Border Style – Set the border style for all items.
  • Item Border Width – Set the border width for all items.
  • Item Border Radius – Add rounded corners to each item.

Page styles

Add styles for the page container that wraps around items for an individual page. (Only used for displays that have pagination)

  • Page Background Color – Add a background color for all pages.
  • Page Padding – Add padding around each page.
  • Page Border Color – Set the border color for all pages.
  • Page Border Style – Set the border style for all pages.
  • Page Border Width – Set the border width for all pages.
  • Page Border Radius – Add rounded corners to each page.

Content styles

Add styles to the display content container.

  • Content Background Color – Add a background color to the content.
  • Content Padding – Add padding around the content.
  • Content Border Color – Set the border color for the content.
  • Content Border Style – Set the border style for the content.
  • Content Border Width – Set the border width for the content.
  • Content Border Radius – Add rounded corners to the content.

Container styles

Add styles for the outermost display container, which includes the content and Ditty title (if enabled).

  • Container Max. Width – Set a maximum width for the container.
  • Container Background Color – Add a background color for the container.
  • Container Padding – Add padding to the container.
  • Container Margin – Add margin around the container.
  • Container Border Color – Set the border color for the container.
  • Container Border Style – Set the border style for the container.
  • Container Border Width – Set the border width for the container.
  • Container Border Radius – Add rounded corners to the container.

Title settings

Display and style the title of your Ditty.

Display

General display settings for the title

  • Display – Select how to display the title.
  • Contents size – Set the size of the contents within the title area.
  • Element horizontal position – Set the horizontal position of the element within the title area.
  • Element vertical position – Set the vertical position of the element within the title area.

Font settings

Customize font settings for the title.

  • Element – Select the HTML element to use for the title.
  • Typography – Set the title typography.
  • Text color – Set a custom font color.
  • Link color – Set a custom link color.

Title dimensions

Customize dimensions for the title.

  • Min width – Set a minimum width for the title area.
  • Max width – Set a max width for the title area.
  • Min height – Set a minimum height for the title area.
  • Max height – Set a max height for the title area.

Title styles

Customize styles for the title.

  • Background color – Add a background title to the title area.
  • Margin – Add custom margins around the title area.
  • Padding – Add custom padding around the title area.
  • Border color – Choose a color for the border.
  • Border style – A border style must be set for a border to render.
  • Border width – Set custom border widths.
  • Border radius – Choose a custom border radius.

Saving a display template

You can save your display as a template to easily utilize in other Ditty.

  • While viewing the Display panel, click the Save as Template button.
  • To save a new template, select the New Template tab.
    • Add values for Template Name and Template Description (optional)
    • Select Create Template to save the new template.
  • To overwrite an existing template select the Existing Template tab.
    • Select the template you want to overwrite and select Overwrite Template.