ThemeKit Modals

ThemeKit Jumbotron

Modal Action Tabs

An action tab bar is the key to removing extra content from the page on load fto provide a better viewing experiemce for small mobile device users.

Watch VideoText Tabs

Modal Tab Bar

Action Icon Tabs

The ThemeKit Modal Icon Tabs widget greates a row of icons which can be set to open any of the modals. It has the otion to add an info link as the last item if required.
Icons
To insert an SVG open the SVG icon download folder, double click the icon to open it in TextEdit.app set to plain text mode or a code editior. Copy the code and paste it into the widget settings.
The icons have controls for spacing, icon color, background, padding, border with, color and radius and a checkbox to make them round..
Info
When viewed on a computer the info label appears om hover above the icon. The label has controls for font, size, color, background, border radius and min width.

Modal Function

The modals are inserted out of the way below the footer and each has an individual ID number or name. Inserting the same ID in the widget settings for the icon in the tab bar will allow it to open the modal on click or tap.

Modals

There are seven types of modal that can be opened for the icon and text tabs bars and the modal content widgets - article, text wrap, text content and the jumbotron

  • Content modal with options for an image, heading, text, list, another heading and more text
  • Image Modal - inserts the image in two sizes and adds the option to load a portrait image for phones
  • Map Modal - opens an interactive map with an aspect ratio change on mobile phones
  • Slider Modal - opens a lightbox slideshow with main and mobile images with captions
  • Specifications - with a specifications list with a zebra stripe option
  • Video Modal - Inserts an MP4 video in two sizes for computer and mobile devices
  • YouTube - inserts the video with a lazy loading function which is essential for video hosted on another server

Features

All modals have controls for the overlay color and opacity nad controls for the close tab color and background.
The modal content has the option to add a border and/or a box shadow for better definition and a professional appearance.
All images are inserted in two sizesfor computer and mobile devices and have a laxy load function. .

ThemeKit Modal Image

Modal Content

This exampleof the Content Modal excludes the optional image and shows the main heading and text, the optional list and the optional second heading and text.
The list describes the various modal types …

  • Content modal wit options for an image, heading, text, list, another heading and more text
  • Image Modal - inserts the image in two sizes and adds the option to load a portrait image for phones
  • Map Modal - opens an interactive map with an aspect ratio change on mobile phones
  • Slider Modal - opens a lightbox slideshow with main and mobile images with captions
  • Specifications - with a specifications list with a zebra stripe option
  • Video Modal - Inserts an MP4 video in two sizes for computer and mobile devices
  • YouTube - inserts the video with a lazy loading function which is essential for video hosted on another server

Efficiency

The modals were designed for the maximum efficiency and fast download on mobile devices. They use a common stylesheet to cut down on the amount of internal styles.
The media files - images & video - are either lazy loaded by default or have a lazy load option.

ThemeKit Modal Content
Modal Content

Modal Content

The modal has controls for background color and opacity, an optional close tab with controls for icon color and background.
At maximum height the panel fills the viewport and any overflow will scroll.
Content
The content has a maximum width setting and is centered on the X and the Y-axis.
The optional image is inserted in two sizes with a caption and has a lazy loading function.
The text area has a heading, text, styled spans.

Specifications Modal

The spec list has a two column grid layout with a fixed width for the first column and the option for zebra striping alternate rows.

  • Form Factor

    Robust Metal Chassis

  • Compatibility

    Mac/Windows

  • Input Channels

    3 x sources

  • Output Channels

    2 x stereo monitors

  • Analogue Inputs

    2 x 1/4" TRS (line), 2 x XLR-1/4" combo (mic), 1 x 1/8" (aux in)

  • Analogue Outputs

    4 x 1/4" (monitors A/B), 2 x 1/4" (2-track)

  • Headphones

    2 x 1/4" stereo outputs

  • ADAT I/O

    8 additional inputs and 8 additional outputs, up to 96kHz

  • Talkback

    Built in microphone

  • A/D Resolution

    Up to 24-bit/192kHz

  • Software

    Powerful Audio Control Center software & Creative Suite

  • Power Supply

    18V DC external switching power supply (included)