Navigation Control Panels

• Navigation Control Panels
  • Skin & Style Tab
  • Layout Tab
  • Controls Tab
  • Behavior Tab
  • Skin Editor Tab

Navigation Control Panels

The five Navigation Control Panels are accessed by going to the Module Editor, then the Top Bar, then clicking the Settings button to open the Settings Sidebar, and clicking Navigation ¹. Under Available Controls ², switch on the controls the module needs.

One panel is added to the sidebar list for each control switched on, Arrows, Bullets, Tabs, Thumbnails and Scrubber. Click a panel's name to open it ¹.

Each panel styles and positions one kind of navigation control. Arrows move one slide at a time, bullets and tabs jump to a chosen slide, thumbnails do the same with a picture of each slide, and the scrubber is a draggable handle that scrubs through the slides.

The five panels share one layout, so this document is arranged by tab rather than by panel. Skin & Style, Behavior and Skin Editor carry the same settings on every panel and are described once. Layout is where the panels differ, so each panel's layout has its own section there. The Controls tab exists on the Scrubber alone.

Where a setting is only offered on some of the five panels, its visibility accordion says which.

Skin & Style Tab

In the Skin & Style tab choose the skin that gives the control its look, and adjust the colors, sizes and icons the chosen skin exposes. On the Scrubber the tab is labelled Style Skin.

Skins & Presets Section

In the Skins & Presets section pick the skin for the control from a grid of live tiles, and save the control's current settings as a preset of your own.

Skin (Image Select)

Set the skin the control uses. Each tile shows the skin drawn as it will appear, and the tiles are spread over three pages reached with the dots below them. Every control type has its own set of built in skins, and any preset saved with Save Preset is added to the grid.

Choosing a tile replaces the whole look of the control, and the fields in the Settings section change to the ones that skin exposes.

Save Preset (Button)

Save the control's current skin and settings as a preset, so the same look can be applied to another module in one click. The preset appears as a tile in the grid on every page.

Slide Change on Release (Toggle)

Set when dragging the scrubber changes the slide.

Options:

• _On: The slide changes once the handle is released.
• _Off: The slide changes as the handle is dragged.

Settings Section

In the Settings section adjust the parts of the chosen skin that it lets you change. The fields shown depend on the skin, and change when a different skin is chosen. They fall into three kinds, described below.

Left Icon (Dropdown)

Set the icon drawn for the left arrow, or the scrubber's left handle arrow, from a list of icon glyphs. Which icons are offered, and whether the field is present at all, depends on the chosen skin.

Right Icon (Dropdown)

Set the icon drawn for the right arrow, or the scrubber's right handle arrow, from a list of icon glyphs. Which icons are offered, and whether the field is present at all, depends on the chosen skin.

Colors (Color Swatch)

One color swatch for each color the chosen skin exposes, such as a background, a border, an arrow or a hover color. Each swatch is labelled with the part of the skin it colors. Click a swatch to open the Color Picker and set a new color.

Which swatches appear depends on the skin. The Hesperiden arrows skin, for example, exposes BG Color, Arrow Color and Hover BG Color, while a bullets skin exposes the bullet and border colors.

Sizes (Number)

One numeric field for each size the chosen skin exposes, such as a background size, an arrow size, a bullet size or a font size, in pixels. Each field is labelled with the part of the skin it sizes.

Which fields appear depends on the skin.

Font Family (Dropdown)

Set the font the tab text is drawn in, from the same list of websafe, Google and custom fonts offered in the Style panel. Only skins that draw text expose the field.

Layout Tab

In the Layout tab set where the control sits on the module and how much room it takes. This is the tab where the five controls differ most, so each control's layout is described in its own section below.

Arrows Section

On the Arrows panel the Layout tab positions the two arrows separately, in a Left Arrow section and a Right Arrow section with the same four settings each.

Left Arrow Section

In the Left Arrow section position the arrow that moves to the previous slide.

Placement (Tab Select)

Set what the left arrow is positioned against.

Options:

• _{Content Flow}: The arrow is placed against the module's content area.
• _{Full Stage}: The arrow is placed against the whole stage.

Alignment (3×3 Checkbox Grid)

Set which of nine positions the left arrow is anchored to. X and Y then offset it from that anchor.

X (Number, pixels, range)

Offset the left arrow horizontally from its Alignment anchor. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum. The furthest offset to the left.
• _10000px: Maximum. The furthest offset to the right.

Y (Number, pixels, range)

Offset the left arrow vertically from its Alignment anchor. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum. The furthest offset upward.
• _10000px: Maximum. The furthest offset downward.

Right Arrow Section

In the Right Arrow section position the arrow that moves to the next slide.

Placement (Tab Select)

Set what the right arrow is positioned against.

Options:

• _{Content Flow}: The arrow is placed against the module's content area.
• _{Full Stage}: The arrow is placed against the whole stage.

Alignment (3×3 Checkbox Grid)

Set which of nine positions the right arrow is anchored to. X and Y then offset it from that anchor.

X (Number, pixels, range)

Offset the right arrow horizontally from its Alignment anchor. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum. The furthest offset to the left.
• _10000px: Maximum. The furthest offset to the right.

Y (Number, pixels, range)

Offset the right arrow vertically from its Alignment anchor. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum. The furthest offset upward.
• _10000px: Maximum. The furthest offset downward.

Bullets Section

On the Bullets panel the Layout tab has a Position section for the row of bullets and a Bullets section for the space between them.

Position Section

In the Position section place the row of bullets on the module.

Placement (Tab Select)

Set what the control is positioned against.

Options:

• _{Content Flow}: The control is placed against the module's content area, and moves with it when the module is narrower than the screen.
• _{Full Stage}: The control is placed against the whole stage, edge to edge.

Orientation (Tab Select)

Set whether the items run in a row or a column.

Options:

• _Horizontal: The items sit side by side.
• _Vertical: The items are stacked top to bottom.

Alignment (3×3 Checkbox Grid)

Set which of nine positions the row of bullets is anchored to, one of the corners, the middle of an edge or the center. X and Y then offset it from that anchor.

X (Number, pixels, range)

Offset the row of bullets horizontally from its Alignment anchor. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum. The furthest offset to the left.
• _10000px: Maximum. The furthest offset to the right.

Y (Number, pixels, range)

Offset the row of bullets vertically from its Alignment anchor. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum. The furthest offset upward.
• _10000px: Maximum. The furthest offset downward.

Bullets Section

Gaps (Number, pixels, range)

Set the space between one bullet and the next. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Tabs Section

On the Tabs panel the Layout tab has four sections, Tabs, Position, Size and Wrapper.

Tabs Section

In the Tabs section set how many tabs are shown and the space between them.

Visible Amount (Number, range)

Set how many tabs are shown at once. When the module has more slides than this, the tabs scroll to keep the current one in view.

Options:

• ₁: Minimum. One tab at a time.
• ₁₀₀: Maximum. Up to a hundred tabs at once.

Gaps (Number, pixels, range)

Set the space between one tab and the next. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Position Section

In the Position section place the strip of tabs on the module.

Boundary (Tab Select)

Set whether the tabs sit inside the slide area or outside it.

Options:

• _Inner: The tabs overlap the slide.
• _Outer: The tabs sit outside the slide, and the slide is shrunk to make room for them.

Orientation (Tab Select)

Set whether the tabs run in a row or a column.

Options:

• _Horizontal: The tabs sit side by side.
• _Vertical: The tabs are stacked top to bottom.

Placement (Tab Select)

Set what the tabs are positioned against.

Options:

• _{Content Flow}: The tabs are placed against the module's content area.
• _{Full Stage}: The tabs are placed against the whole stage.

Alignment (3×3 Checkbox Grid)

Set which of nine positions the strip of tabs is anchored to. X and Y then offset it from that anchor.

X (Number, pixels, range)

Offset the strip of tabs horizontally from its Alignment anchor. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum. The furthest offset to the left.
• _10000px: Maximum. The furthest offset to the right.

Y (Number, pixels, range)

Offset the strip of tabs vertically from its Alignment anchor. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum. The furthest offset upward.
• _10000px: Maximum. The furthest offset downward.

Size Section

In the Size section set how large each tab is, either by rule or with fixed dimensions.

Responsiveness (Dropdown)

Set how the tab size is worked out.

Options:

• _Legacy: Each item is sized within a minimum width, a maximum width and a maximum height, and scales between them with the module.
• _{Custom Multilevel}: Each item is given a fixed width and height, which can be set per device with the level selector.

Min Width (Number, pixels, range)

Set the narrowest each tab may be scaled down to.

Options:

• _-1000: Minimum.
• ₁₀₀₀₀: Maximum.

Max Width (Number, pixels, range)

Set the widest each tab may be.

Options:

• _-1000: Minimum.
• ₁₀₀₀₀: Maximum.

Max Height (Number, pixels, range)

Set the tallest each tab may be.

Options:

• _-1000: Minimum.
• ₁₀₀₀₀: Maximum.

Width (Number, pixels, range)

Set the fixed width of each tab. The value can be set per device.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Height (Number, pixels, range)

Set the fixed height of each tab. The value can be set per device.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Wrapper Section

In the Wrapper section style the strip that holds the tabs, its background, padding and position.

Background (Color Swatch)

Set the color behind the strip. Click the swatch to open the Color Picker.

Wide Wrapper (Toggle)

Set whether the strip stretches across the whole width or height of the module, or only wraps its items.

Options:

• _On: The strip spans the full module.
• _Off: The strip is only as large as its items.

Padding (Number, pixels, range)

Set the space between the strip's edge and its items. The value can be set per device.

Options:

• ₀: Minimum. No padding.
• ₅₀₀: Maximum.

Offset X (Number, pixels, range)

Move the strip horizontally from where the Position settings place it. The value can be set per device.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Offset Y (Number, pixels, range)

Move the strip vertically from where the Position settings place it. The value can be set per device.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Thumbnails Section

On the Thumbnails panel the Layout tab has four sections, Thumbs, Position, Size and Wrapper.

Thumbs Section

In the Thumbs section set how many thumbnails are shown and the space between them.

Visible Amount (Number, range)

Set how many thumbnails are shown at once. When the module has more slides than this, the thumbnails scroll to keep the current one in view.

Options:

• ₁: Minimum. One thumbnail at a time.
• ₁₀₀: Maximum. Up to a hundred thumbnails at once.

Gaps (Number, pixels, range)

Set the space between one thumbnail and the next. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Position Section

In the Position section place the strip of thumbnails on the module.

Boundary (Tab Select)

Set whether the thumbnails sit inside the slide area or outside it.

Options:

• _Inner: The thumbnails overlap the slide.
• _Outer: The thumbnails sit outside the slide, and the slide is shrunk to make room for them.

Orientation (Tab Select)

Set whether the thumbnails run in a row or a column.

Options:

• _Horizontal: The thumbnails sit side by side.
• _Vertical: The thumbnails are stacked top to bottom.

Placement (Tab Select)

Set what the thumbnails are positioned against.

Options:

• _{Content Flow}: The thumbnails are placed against the module's content area.
• _{Full Stage}: The thumbnails are placed against the whole stage.

Alignment (3×3 Checkbox Grid)

Set which of nine positions the strip of thumbnails is anchored to. X and Y then offset it from that anchor.

X (Number, pixels, range)

Offset the strip of thumbnails horizontally from its Alignment anchor. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum. The furthest offset to the left.
• _10000px: Maximum. The furthest offset to the right.

Y (Number, pixels, range)

Offset the strip of thumbnails vertically from its Alignment anchor. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum. The furthest offset upward.
• _10000px: Maximum. The furthest offset downward.

Size Section

In the Size section set how large each thumbnail is, either by rule or with fixed dimensions.

Responsiveness (Dropdown)

Set how the thumbnail size is worked out.

Options:

• _Legacy: Each item is sized within a minimum width, a maximum width and a maximum height, and scales between them with the module.
• _{Custom Multilevel}: Each item is given a fixed width and height, which can be set per device with the level selector.

Min Width (Number, pixels, range)

Set the narrowest each thumbnail may be scaled down to.

Options:

• _-1000: Minimum.
• ₁₀₀₀₀: Maximum.

Max Width (Number, pixels, range)

Set the widest each thumbnail may be.

Options:

• _-1000: Minimum.
• ₁₀₀₀₀: Maximum.

Max Height (Number, pixels, range)

Set the tallest each thumbnail may be.

Options:

• _-1000: Minimum.
• ₁₀₀₀₀: Maximum.

Width (Number, pixels, range)

Set the fixed width of each thumbnail. The value can be set per device.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Height (Number, pixels, range)

Set the fixed height of each thumbnail. The value can be set per device.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Wrapper Section

In the Wrapper section style the strip that holds the thumbnails, its background, padding and position.

Background (Color Swatch)

Set the color behind the strip. Click the swatch to open the Color Picker.

Wide Wrapper (Toggle)

Set whether the strip stretches across the whole width or height of the module, or only wraps its items.

Options:

• _On: The strip spans the full module.
• _Off: The strip is only as large as its items.

Padding (Number, pixels, range)

Set the space between the strip's edge and its items. The value can be set per device.

Options:

• ₀: Minimum. No padding.
• ₅₀₀: Maximum.

Offset X (Number, pixels, range)

Move the strip horizontally from where the Position settings place it. The value can be set per device.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Offset Y (Number, pixels, range)

Move the strip vertically from where the Position settings place it. The value can be set per device.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Scrubber Section

On the Scrubber panel the Layout tab has three sections, Items, Position and Size. The scrubber's handle, track and wrapper are set in the Controls tab instead.

Items Section

In the Items section set how many slide items the scrubber shows and the space between them.

Visible Amount (Number, range)

Set how many slide items are shown along the scrubber at once. When the module has more slides than this, the items scroll to keep the current one in view.

Options:

• ₁: Minimum. One item at a time.
• ₁₀₀: Maximum. Up to a hundred items at once.

Gaps (Number, pixels, range)

Set the space between one item and the next. The value can also be set by dragging left and right on the field.

Options:

• _-500px: Minimum.
• _500px: Maximum.

Position Section

In the Position section place the scrubber on the module.

Boundary (Tab Select)

Set whether the scrubber sits inside the slide area or outside it.

Options:

• _Inner: The scrubber overlaps the slide.
• _Outer: The scrubber sits outside the slide, and the slide is shrunk to make room for it.

Orientation (Tab Select)

Set whether the scrubber runs across the module or down it.

Options:

• _Horizontal: The scrubber runs left to right.
• _Vertical: The scrubber runs top to bottom.

Placement (Tab Select)

Set what the scrubber is positioned against.

Options:

• _{Content Flow}: The scrubber is placed against the module's content area.
• _{Full Stage}: The scrubber is placed against the whole stage.

Alignment (3×3 Checkbox Grid)

Set which of nine positions the scrubber is anchored to. X and Y then offset it from that anchor.

X (Number, pixels, range)

Offset the scrubber horizontally from its Alignment anchor. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum. The furthest offset to the left.
• _10000px: Maximum. The furthest offset to the right.

Y (Number, pixels, range)

Offset the scrubber vertically from its Alignment anchor. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum. The furthest offset upward.
• _10000px: Maximum. The furthest offset downward.

Size Section

In the Size section set the size of each item on the scrubber.

Width (Number, pixels, range)

Set the width of each item. The value can be set per device.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Height (Number, pixels, range)

Set the height of each item. The value can be set per device.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Controls Tab

In the Controls tab, offered on the Scrubber panel only, set how the scrubber's handle behaves, what it shows, whether progress is drawn, and how the track and wrapper look.

Handle Arrows Section (Toggle)

In the Handle Arrows section animate the arrows drawn on either side of the scrubber's handle. Use the section toggle to show or hide the arrows.

Fade (Toggle)

Set whether the handle arrows fade in and out as the handle moves.

Options:

• _On: The arrows fade.
• _Off: The arrows stay at full opacity.

Scale (Toggle)

Set whether the handle arrows grow and shrink as the handle moves.

Options:

• _On: The arrows scale.
• _Off: The arrows keep their size.

Spin (Toggle)

Set whether the handle arrows rotate as the handle moves.

Options:

• _On: The arrows spin.
• _Off: The arrows keep their angle.

Translate (Number, pixels, range)

Set how far the handle arrows slide outward as the handle moves. The value can also be set by dragging left and right on the field.

Options:

• _-1000px: Minimum.
• _1000px: Maximum.

Handle Settings Section

In the Handle Settings section set what the handle shows and how it is shaped.

Thumbnails (Toggle)

Set whether the handle shows the current slide's thumbnail.

Options:

• _On: The handle carries a thumbnail.
• _Off: The handle is drawn plain.

Hover Scale (Toggle)

Set whether the handle grows while the pointer is over it.

Options:

• _On: The handle enlarges on hover.
• _Off: The handle keeps its size on hover.

Skew (Number, degrees, range)

Slant the handle. The value can also be set by dragging left and right on the field.

Options:

• _-100deg: Minimum. The furthest slant one way.
• _100deg: Maximum. The furthest slant the other way.

Thumb Offset (Number, percentage, range)

Move the thumbnail inside the handle, as a percentage of the handle's size.

Options:

• _0%: Minimum. The thumbnail sits in place.
• _500%: Maximum. The thumbnail is moved furthest.

Thumb Scale (Number, percentage, range)

Enlarge the thumbnail inside the handle. 100% is its natural size.

Options:

• _100%: Minimum. The thumbnail at its natural size.
• _1000%: Maximum. The thumbnail at ten times its size.

Handle Scale (Number, percentage, range)

Enlarge the handle itself. 100% is its natural size.

Options:

• _100%: Minimum. The handle at its natural size.
• _1000%: Maximum. The handle at ten times its size.

Show Progress Section (Toggle)

In the Show Progress section draw the slide's playback progress on the scrubber. Use the section toggle to turn the progress display on and off.

Progress Alignment (Tab Select)

Set where the progress is drawn along the scrubber.

Options:

• _Left: Progress is drawn from the left.
• _Center: Progress is drawn from the center.
• _Right: Progress is drawn from the right.

Wrapper Section

In the Wrapper section style the scrubber's track and the strip that holds it.

Track Pattern (Dropdown)

Set the pattern drawn along the track behind the handle.

Options:

• _None: A plain track.
• _Dots: A row of dots.
• _{Vertical Lines}: A row of short vertical lines.
• _{Horizontal Lines}: A row of short horizontal lines.

Idle Track Size (Number, percentage, range)

Set how much of the track is drawn while the scrubber is idle, as a percentage of its full size.

Options:

• _10%: Minimum. The track shrinks to a tenth while idle.
• _100%: Maximum. The track stays full size.

Background (Color Swatch)

Set the color behind the scrubber. Click the swatch to open the Color Picker.

Span (Toggle)

Set whether the wrapper stretches across the whole width or height of the module, or only wraps the scrubber.

Options:

• _On: The wrapper spans the full module.
• _Off: The wrapper is only as large as the scrubber.

Padding (Number, pixels, range)

Set the space between the wrapper's edge and the scrubber. The value can be set per device.

Options:

• ₀: Minimum. No padding.
• ₅₀₀: Maximum.

Min. Size (Number, percentage, range)

Set the smallest the scrubber may shrink to on a narrow screen, as a percentage of its full size.

Options:

• _0%: Minimum.
• _100%: Maximum. The scrubber never shrinks.

Offset X (Number, pixels, range)

Move the wrapper horizontally from where the Position settings place it. The value can be set per device.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Offset Y (Number, pixels, range)

Move the wrapper vertically from where the Position settings place it. The value can be set per device.

Options:

• _-1000px: Minimum.
• _10000px: Maximum.

Behavior Tab

In the Behavior tab set when the control appears, how it animates in and out, which devices show it, and whether it stays on screen or hides itself.

In / Out Animation Section

In the In / Out Animation section set the animation the control plays as it appears and disappears, its speed, and the devices it is shown on.

Left (Dropdown)

Set the animation the left arrow plays as it appears and disappears.

Options:

• _Fade: The control fades in and out.
• _{From Left}: The control slides in from the left.
• _{From Right}: The control slides in from the right.
• _{From Up}: The control slides in from above.
• _{From Bottom}: The control slides in from below.
• _{Zoom In}: The control grows into place.
• _{Zoom Out}: The control shrinks into place.

Right (Dropdown)

Set the animation the right arrow plays as it appears and disappears.

Options:

• _Fade: The control fades in and out.
• _{From Left}: The control slides in from the left.
• _{From Right}: The control slides in from the right.
• _{From Up}: The control slides in from above.
• _{From Bottom}: The control slides in from below.
• _{Zoom In}: The control grows into place.
• _{Zoom Out}: The control shrinks into place.

In / Out Animation (Dropdown)

Set the animation the control plays as it appears and disappears.

Options:

• _Fade: The control fades in and out.
• _{From Left}: The control slides in from the left.
• _{From Right}: The control slides in from the right.
• _{From Up}: The control slides in from above.
• _{From Bottom}: The control slides in from below.
• _{Zoom In}: The control grows into place.
• _{Zoom Out}: The control shrinks into place.

Animation Speed (Number, milliseconds, range)

Set how long the in and out animation takes.

Options:

• _0ms: Minimum. The control appears at once.
• _10000ms: Maximum. The slowest animation.

Slides per Click (Number, range)

Set how many slides one press of an arrow advances, so an arrow can page a whole row of a carousel at once.

Options:

• ₁: Minimum. One slide per press.
• ₅₀: Maximum. Fifty slides per press.

Delay to Show (Number, milliseconds, range)

Set how long the control waits after the pointer moves before it appears. The value can be set per device.

Options:

• _0ms: Minimum. The control appears at once.
• _10000ms: Maximum. The longest wait.

Show On (Multi-select)

Set the devices the control is shown on. Click a device to add or remove it, and the control is hidden on any device not listed.

Options:

• _{Wide Screen}: Shown on wide screens.
• _Desktop: Shown on desktops.
• _Notebook: Shown on notebooks.
• _Tablet: Shown on tablets.
• _Mobile: Shown on mobiles.

Keep Visible Section (Toggle)

In the Keep Visible section set whether the control stays on screen all the time or hides itself when the pointer is still. Use the section toggle to keep the control visible.

Delay to Hide (Number, milliseconds, range)

Set how long the control stays on screen after the pointer stops moving before it hides. The value can be set per device.

Options:

• _0ms: Minimum. The control hides at once.
• _10000ms: Maximum. The longest stay.

Skin Editor Tab

In the Skin Editor tab edit the CSS, HTML markup and editable parts of a skin, or create a new skin of your own. The tab is the same on all five control panels.

Skin (Dropdown)

Set the skin the editor works on. The list holds every skin for this control type, each marked Built-in or as your own, and a field at the top of the list creates a new skin by name with the plus button beside it.

Editor Mode (Tab Select)

Set which part of the skin the editor shows.

Options:

• _CSS: The skin's stylesheet.
• _{HTML Markup}: The skin's HTML template.
• _{Meta List}: The skin's editable parts, which become the fields in the Settings section.

CSS Section

In the CSS section edit the skin's stylesheet. Placeholders such as ##bg-color## stand for the skin's meta values, so a color set in the Settings section reaches the CSS here.

In the CSS Code text area is displayed the current skin's stylesheet, with line numbers and syntax coloring, which can be edited in place.

Meta (Action Menu)

A fly-out list of the skin's meta placeholders. Click an entry to insert its placeholder at the cursor.

Selectors (Action Menu)

A fly-out list of the CSS selectors the control's markup uses. Click an entry to insert it at the cursor.

Classes (Action Menu)

A fly-out list of the classes the control's markup uses. Click an entry to insert it at the cursor.

HTML Markup Section

In the HTML Markup section edit the HTML template one item of the control is built from. Skins that draw only with CSS leave it empty.

In the Markup Code text area is displayed the current skin's HTML template, with line numbers, which can be edited in place.

Meta (Action Menu)

A fly-out list of slide values such as Slide Title, Slide Description and the numbered Parameter fields. Click an entry to insert its placeholder at the cursor.

Markup (Action Menu)

A fly-out list of markup snippets for the control. Click an entry to insert it at the cursor.

Meta List Section

In the Meta List section manage the skin's editable parts. Each row is one meta, and each meta becomes one field in the Skin & Style tab's Settings section, so adding a color meta here adds a color swatch there.

Handle (Readout)

The meta's identifier, as used in its placeholder in the CSS and markup.

Title (Text)

Set the label the meta's field shows in the Settings section.

Value (Color Swatch)

Set the meta's default value. The control shown depends on the meta's type, a color swatch for a color, a number field for a size, an icon dropdown for an icon or a font dropdown for a font.

Delete (Button)

Remove the meta from the skin, and its field from the Settings section.

Meta Handle (Text)

Enter the identifier for a new meta before adding it with Add Meta.

Type (Dropdown)

Set what kind of value the new meta holds.

Options:

• _Custom: A free text or number value.
• _Color: A color, edited with a swatch.
• _Icon: An icon, chosen from a dropdown.
• _Font: A font family, chosen from a dropdown.

Add Meta (Button)

Add a meta with the Meta Handle and Type entered, as a new row in the list.