TABLES AND LAYOUTS

Slidebar

The Slidebar element can be declared anywhere in the body of a page and provides a mechanism for structuring page content into slides (sequential presentation of slide content). Each slide has a title and content. You move between slides using arrows. The slidebar uses divs.

To insert a Slidebar:

Position the cursor | where you want to insert the Slidebar.
Click the Slidebar icon () on the Editing Tools and select how many slides do you want to insert. You can always add more slides later.
Right-click in the Slidebar and select Slidebar Properties from the menu to change the default Slidebar attributes.

Slidebar Properties

Use the Settings button to open Slidebar attributes and to modify them.

When you change settings, press the Refresh button to see the result in the Preview area.

If you want to load predefined settings or save current settings and use them later for another object, use the Presets option (at the top left corner). For more information see Presets.

Settings

ID (edit box) - Assigns a name to the div that holds the slidebar. This name must be unique in a page.
Title (edit box) - Offers advisory information about the slidebar div.
Tag Attributes (edit box) - Define any additional custom attributes for the div (for advanced users only).
Visible Slides Count (drop-down menu) - Sets how many slides to be visible at a time.
Initial Slide(drop-down menu) - The initial slide that can be any slide or random one.
Slide Width & Height (edit box) - Dimensions for the main div (container) that holds the slidebar.
Scrolling (drop-down menu) - Set number of slides to scroll. Option are by one slide, or by the number of visible slides.
MouseWheel(check box) - The slider will respond to the mouse wheel.
Infinite(check box) - Slides will continue to change indefinitely. When last slide is reached, the slider will start from first one again.
Autoplay(check box) - The slidebar will auto play.
Initial Delay(drop-down menu) - Sets the initial delay before first slide shows.
Slide Change Delay(drop-down menu) - Sets the time between the change of two slides.

Style

Style formatting for the container div that holds the slidebar and for the slider area where content is displayed.

Background

Background for the container div. For more information see Background Properties.

Container Padding

Padding (spacing around) for the container div. For more information see Padding Properties.

Container Border

Borders for the container div. For more information see Border Properties.

Slider Area Position

Position of the slider area - between navigation arrows or behind them.

Slider Area Padding

Padding (spacing) for the slider area. For more information see Padding Properties.

Slider Area Background

Background for the slider area. For more information see Background Properties.

Slider Area Border

Borders for the slider area. For more information see Border Properties.

Slide Padding

Padding (spacing) for the slides that show within the slider area. For more information see Padding Properties.

Arrows

The slidebar has two navigation arrows that you use to move to prev/next slide. For each arrow you have to define image, width & height, position and few more settings.

Vertical Position in container (drop-down menu) - Position of the arrows in the container - top, center or bottom.
Prev Navigation Image (edit box) - The image that will be used for the previous image arrow.
Bg Position (drop-down menu) - Position of the navigation image.
Position Hover (drop-down menu) - Position of the navigation image when you move mouse over it.
Position Disabled (drop-down menu) - Position of the image when it is disabled (it is disabled when there are no more previous images).
Width (edit box) - Width of the previous arrow.
Height (edit box) - Height of the previous arrow.
Left (edit box) - Space to the left of the arrow.
Next Navigation Image (edit box) - Sets image that will be used for the next image arrow.
Bg Position (drop-down menu) - Sets position of this image.
Position Hover (drop-down menu) - Sets position of the image when you move mouse over it.
Position Disabled (drop-down menu) - Sets position of the image when it is disabled (it is disabled when there are no more next images).
Width (edit box) - Width of the previous arrow.
Height (edit box) - Height of the previous arrow.
Left (edit box) - Space to the left of the arrow.

Navigation

The slidebar may have navigation bar at the bottom, with links to slides - 1, 2, 3, ...

Position/Size

Enabled (check box) - Check this box if you want to enable slides navigation bar.
Hide On start (check box) - Check this box if you want to hide the navigation bar on start.
Position (drop-down menu) - Sets position of the navigation bar.
Opacity (drop-down menu) - Sets transparency effect to the navigation bar.
Width (edit box) - Sets width for the navigation bar.
Height (edit box) - Sets height for the navigation bar.
Left (edit box) - Sets left position of the navigation bar.
Top (edit box) - Sets top position of the navigation bar.
Bottom (edit box) - Sets bottom position of the navigation bar.
Right (edit box) - Sets right position of the navigation bar.

With these last four properties you can fix position of the navigation bar more precisely.

Navigation Background

Sets background for slides navigation bar. For more information see Background Properties.

Navigation (1,2,3..)

Sets style formatting for the navigation area.

Navigation Image (check box) - Sets image for the slides navigation bar.
Bg Position (drop-down menu) - Sets position of this image.
Position Hover (drop-down menu) - Sets position of the image when you move mouse over it.
Width (edit box) - Sets width for the image.
Height (edit box) - Sets the height for the image.
Slides Number (check box) - Show slide numbers on the navigation bar.
Font (drop-down menu box) - Font used to render the text of the numbers.
Font Size (drop-down menu box) - Font size used to render the text of the numbers.
Font Color (color picker and preview) - Text color.
Line Height (drop-down menu) - Distance between lines. Check the box and set specific height if you need to set line height different than the default.