Dottoro Theme Documentation

Tutorial to get your theme to work

PrologueFirst StepsFront PageCreating a custom front pageBlog, News and Portfolio post typesPost Type specific settingsGeneral settingsSingle post settingsCategory / Tag / Date archive page settingsPermalink settingsOptions on single post pagesGeneral page optionsImage optionsGallery settingsPage Templates and PagesPage SettingsPage TemplatesPages created from page templatesGeneral page settingsGallery settingsBlog page settingsNews page settingsPortfolio and Imagefolio page settingsContact page settingsArchives page settingsAuthors page settingsBoomarks page settingsSitemap page settingsSpecial pagesCategory and tag page settingsArchive and date page settingsSearch page settingsAuthor page settings404 page settingsHeader and MenuSubheadersSubheader specific shortcodesPredefined SubheadersCreating SubheadersAssigning subheaders to pagesFooterWidgets in the FooterCopyright and other notices in the FooterSidebarWidgets on the SidebarWidth and alignment of the sidebarWidget AreasWidgetsBreadcrumbShortcodesShortcodes In Alphabetical OrderShortcodes By CategoriesNested ShortcodesPost TemplatesOverlaysMedia and External MediaOverview of galleries, gallery listings and slideshowsGalleries and Gallery ListingsAbout Galleries In GeneralCreating And Managing Galleries[gallery_list] shortcodeSlideshows and Popup SlideshowsSlideshowsPopup SlideshowsSlideshow SettingsMost Often Used Slideshow OptionsAll Slideshow OptionsSlideshow Templates - Slideshow Specific ShortcodesStyling Guide For SlideshowsStyling Of Slideshow and Post TemplatesSlidesPopupsSelectorsWeb FontsGeneral Theme SettingsUser RolesExport / Import SettingsCreating theme designsLocalizationHeadingsChild ThemesCSS ClassesResponsive DesignCSS Extension JavaScript ToolkitJavaScript LibraryAction HooksFilter HooksCompatibility Issues
<

Layer

[layer]...[/layer]

A layer is timed content that can appear and disappear with an animation. With the layer shortcode you can display any type of content and you can specify where, when and how it should appear and disappear.
You can use it:

In addition to the standard HTML properties (such as class, style ...) the following attributes are supported:
Start - On - End Attributes
start Property and value pairs (prop: value) that are applied to the layer before showing it, separated by commas.
Use the 'on' attribute to specify the end state of the show animation, and the 'end' attribute to specify the state of the layer after hiding it. If the 'end' attribute is not specified, then it is identical with the 'start' attribute. The supported properties are:
  • CSS properties that take length values (width, height, left, top, right, bottom, font-size, etc.)
  • opacity (values between 0 and 1)
  • clip (for example: clip: {left: 0, top: 0, right: 100, bottom: 'auto'})
  • trafo (two-dimensional linear transformation, supported properties: moveX, moveY, scaleX, scaleY, rotate, originX and originY)
Important things you should know:
  • CSS property names must be written in JavaScript format (camelcase names, e.g. marginLeft instead of margin-left).
  • String values must be quoted (such as '10px', '20%' and 'auto').
  • All CSS length units are supported for length values.
    In addition, two special length units are also supported, the %W and %H. The W identifies the width, the H identifies the height of the layer. For example, the '50%W' means the half width, the '50%H' means the half height of the layer, in pixels. So they are actually pixel units. The JavaScript library of the theme replaces the '50%W' and '50%H' values with the half width and height of the layer when animates it.
    But why they are needed? Unfortunately CSS does not make it easy to center an absolute positioned element within its parent element. Percentage values are mostly calculated from the size of the parent element, but in some cases, it would be better if they would be calculated from the size of the current element. For further details, please read the Built-in Overlays section, it discusses this topic in depth.
  • The %W and %H length units are also supported for the clip property. Furthermore, negative left and top clipping values are treaded as '100%W' and '100%H'. This is useful because the CSS clip property does not support percentage values. See Example 8 and Example 9 below.
  • Values of a property must be specified in the same unit in the 'start', 'on' and 'end' attributes.
Also see the examples below.
start_left
start_top
start_right
start_bottom
These attributes can only be used when the layer is in an overlay.
They allow you to specify the start state of the layer depending on the direction the mouse pointer has been moved into the area of the overlay. They have the same format as the start attribute.

For example, when the mouse pointer enters the area of the overlay from left, first, the properties specified by the start attribute are applied to the layer, then the properties specified by the start_left attribute.

Similarly to these attributes, the end_left, end_top, end_right and end_bottom attributes allow you to specify the end state of the layer depending on the direction the mouse pointer has been moved out of the area of the overlay. If an 'end' attribute ('end_left', ... ,'end_bottom') attribute is not specified, then it is identical with the corresponding 'start' ('start_left', ... , 'start_bottom') attribute.
The 'Gallery - follow mouse' overlay uses these attributes.

For details, please see the Built-in Overlays section.

startduration How long, in milliseconds, the show animation should take. Default: 400
startduration_left
startduration_top
startduration_right
startduration_bottom
These attributes can only be used when the layer is in an overlay.
They allow you to specify the duration of the show animation depending on the direction the mouse pointer has been moved into the area of the overlay.
starteasing Specifies the easing function for the show animation. Easing functions (timing functions) specify how the intermediate values are calculated during the start animation. It allows for a transition to change speed over its duration.
Supported functions:
  • linear
  • swing
  • ease, ease-in, ease-out, ease-in-out
  • quad-in, quad-out, quad-in-out
  • cubic-in, cubic-out, cubic-in-out
  • exp-in, exp-out, exp-in-out
  • back-in, back-out, back-in-out
  • bounce-xl, bounce-l, bounce, bounce-s, bounce-xs
  • elastic-xl, elastic-l, elastic, elastic-s, elastic-xs
See Live Demo.
starteasing_left
starteasing_top
starteasing_right
starteasing_bottom
These attributes can only be used when the layer is in an overlay.
They allow you to specify the easing function for the show animation depending on the direction the mouse pointer has been moved into the area of the overlay.
startevent Specifies the event the starttime attribute is relative to.
Possible values:
  • before_activate: occurs before the slide becomes active. Only supported when the layer is in a slideshow.
  • after_activate: occurs when the slide becomes active. Only supported when the layer is in a slideshow.
  • before_show: occurs before the section that contains the layer becomes visible.
  • after_show: occurs when the section that contains the layer becomes visible.
  • before_show_inner: occurs before the section that contains the layer is scrolled into the inner view. Only supported in carousel sliders.
  • after_show_inner: occurs when the section that contains the layer is scrolled into the inner view. Only supported in carousel sliders.
Default is after_show.
starttime The amount of time after the show animation of the layer should start, in milliseconds. Default: 600
starttime_left
starttime_top
starttime_right
starttime_bottom
These attributes can only be used when the layer is in an overlay.
They allow you to specify the amount of time after the show animation of the layer should start depending on the direction the mouse pointer has been moved into the area of the overlay.
on Property and value pairs that are applied to the layer when it is visible. See the 'start' attribute for details.
duration The duration until the layer is visible, in milliseconds. If set to 0, the hide animation won't start automatically. Default: 0
end Property and value pairs that are applied to the layer after hiding it. See the 'start' attribute for details.
end_left
end_top
end_right
end_bottom
These attributes can only be used when the layer is in an overlay.
They allow you to specify the end state of the layer depending on the direction the mouse pointer has been moved out of the area of the overlay.
See the start_left, start_top, start_right, start_bottom attributes for details.
endduration How long, in milliseconds, the hide animation should take. Default: 20
endduration_left
endduration_top
endduration_right
endduration_bottom
These attributes can only be used when the layer is in an overlay.
They allow you to specify the duration of the hide animation depending on the direction the mouse pointer has been moved out of the area of the overlay.
endeasing Specifies the easing function for the hide animation. Possible values are the same as for the starteasing attribute.
endeasing_left
endeasing_top
endeasing_right
endeasing_bottom
These attributes can only be used when the layer is in an overlay.
They allow you to specify the easing function for the hide animation depending on the direction the mouse pointer has been moved out of the area of the overlay.
Other Attributes
allow_empty Specifies whether the layer should be displayed even if it has no content (true | false). Default is false.
required This attribute only works in overlays.
Specifies whether the layer is required or not. Empty layers are not displayed only if their allow_empty attribute is set to true. If an overlay has required layers, then at least one of the required layers must be displayed otherwise the overlay won't be shown.
endasstarted This attribute has effect only in overlays and when the mouse dependent start attributes (start_left, etc.) are specified but the end attributes (end_left, etc.) are not. In this case, the endasstarted attribute specifies whether the hide animation of the layer should end in the same state as the show animation started or the start_left, ..., start_bottom attributes determine the end state. In other words, if the endasstarted attribute is set to true and the mouse pointer enters the overlay from the left, than regardless of the direction the mouse pointer moves out the overlay, the start_left attribute determines the end state of the hide animation (the hide animation will end in the same state as the show animation started). But if endasstarted is false, the end state of the hide animation depends on the direction the mouse pointer moves out the overlay. If the direction is up, the start_top attribute determines the end state, etc.
Possible values: true | false. Default is false.
breakanim By default, if the show animation of a layer runs when the layer should start to hide, the show animation turns back instead of beginning the hide animation, but this behavior can be changed with this attribute. If the breakanim attribute is set to true, the show animation stops and the hide animation starts. This attribute is useful if the start and end states are different or when the mouse dependent start attributes (start_left, etc.) are specified.
Possible values: true | false. Default is false.
showonce Specifies whether the layer should appear only once, or not (true | false). Default: false

Examples:

Since layers are absolutely positioned elements, it is always advisable to set their positions. This is why the examples below always specify the layer positions (usually the left and top).

Example 1

Simple fade in-out animation:
[layer start="opacity:0" on="opacity:1" style="left:0, top:0"]Layer content[/layer]

Example 2

Fade in-out animation that starts immediatelly after (starttime="0") the layer holder (slide, overlay, popup ...) appears and the animation takes 2 seconds (startduration="2000"):
[layer start="opacity:0" on="opacity:1" starttime="0" startduration="2000" style="left:0, top:0"]Layer content[/layer]

Example 3

This layer moves from the top-left corner to left-top (100, 50), in pixels:
[layer start="left:0, top:0" on="left: 100, top: 50"]Layer content[/layer]

Example 4

This layer comes in from the left and goes out to the right with a fade in-out animation:
[layer start="opacity:0, left:'0%'" on="opacity:1, left: '50%'" end="opacity:0, left:'100%'" style="top:'0px'"]Layer content[/layer]

Example 5

This layer moves from the bottom to the top when appears and from the top to the bottom when hides. The layer is displayed horizontally on the left hand side.
[layer start="top:'100%'" on="top:'0%'" style="left:0px"]Layer content[/layer]

Example 6

This layer moves from the center-bottom to the center. The %W and %H units are special length units supported by the layer shortcode. For details, see the start attribute above.
[layer start="left:'50%',top:'100%', marginLeft:'-50%W', marginTop:'-50%H'" on="left:'50%',top:'50%', marginLeft:'-50%W', marginTop:'-50%H'" ]layer content[/layer]

Example 7

Clip animation - the layer becomes visible from left to right:
[layer start="clip:{right:0}" on="clip:{right:'auto'}" style="left:0, top:0"]Layer content[/layer]

Example 8

Clip animation - the layer becomes visible from right to left:
[layer start="clip:{left:'100%W'}" on="clip:{left:'auto'}" style="left:0, top:0"]Layer content[/layer]

Example 9

This example is the same as the previous one, but it uses a negative value instead of '100%W':
[layer start="clip:{left:-1}" on="clip:{left:'auto'}" style="left:0, top:0"]Layer content[/layer]

Example 10

Clip animation - the layer becomes visible from top-left to bottom-right:
[layer start="clip:{right:0, bottom:0}" on="clip:{right:'auto', bottom:'auto'}" style="left:0, top:0"]Layer content[/layer]

Example 11

Transformation animation - moving horizontally.
[layer start="trafo:{moveX:0}" on="trafo:{moveX:100}" style="left:0, top:0"]content[/layer]

Example 12

Transformation animation - moving diagonally.
[layer start="trafo:{moveX:0, moveY:0}" on="trafo:{moveX:100, moveY:100}" style="left:0, top:0"]content[/layer]

Example 13

Transformation animation - rotating around the center of the layer.
[layer start="trafo:{rotate:3.14}" on="trafo:{rotate:0}" style="left:0, top:0"]content[/layer]

Example 14

Transformation animation - rotating around the top-left corner of the layer.
[layer start="trafo:{rotate:3.14, originX:'0%', originY:'0%'}" on="trafo:{rotate:0}" style="left:0, top:0"]content[/layer]

Example 15

Transformation animation - scaling horizontally, the origin is the center of the layer.
[layer start="trafo:{scaleX:0}" on="trafo:{scaleX:1}" style="left:0, top:0"]content[/layer]

Example 16

Transformation animation - scaling horizontally, the origin is the bottom-right corner of the layer.
[layer start="trafo:{scaleX:0, originX:'100%', originY:'100%'}" on="trafo:{scaleX:1}" style="left:0, top:0"]content[/layer]

Example 17

Transformation animation - scaling in both directions.
[layer start="trafo:{scaleX:0, scaleY:0}" on="trafo:{scaleX:1, scaleY:1}" style="left:0, top:0"]content[/layer]

Example 18

Transformation animation - moving, scaling and rotating, the origin is the top-left corner of the layer.
[layer start="trafo:{moveX:0, moveY:0, scaleX:0, scaleY:0, rotate:3.14, originX:'0%', originY:'0%'}" on="trafo:{moveX:100, moveY:100, scaleX:1, scaleY:1, rotate:0}" style="left:0, top:0"]content[/layer]

Live Examples: Overlays, Slideshows