Dottoro Theme Documentation

Tutorial to get your theme to work

Prologue First Steps Front Page Creating a custom front page Blog, News and Portfolio post types Post Type specific settings General settings Single post settings Category / Tag / Date archive page settings Permalink settings Options on single post pages General page options Image options Gallery settings Page Templates and Pages Page Settings Page Templates Pages created from page templates General page settings Gallery settings Blog page settings News page settings Portfolio and Imagefolio page settings Contact page settings Archives page settings Authors page settings Boomarks page settings Sitemap page settings Special pages Category and tag page settings Archive and date page settings Search page settings Author page settings 404 page settings Header and Menu Subheaders Subheader specific shortcodes Predefined Subheaders Creating Subheaders Assigning subheaders to pages Footer Widgets in the Footer Copyright and other notices in the Footer Sidebar Widgets on the Sidebar Width and alignment of the sidebar Widget Areas Widgets Breadcrumb Shortcodes Shortcodes In Alphabetical Order Shortcodes By Categories Nested Shortcodes Post Templates Overlays Media and External Media Overview of galleries, gallery listings and slideshows Galleries and Gallery Listings About Galleries In General Creating And Managing Galleries [gallery_list] shortcode Slideshows and Popup Slideshows Slideshows Popup Slideshows Slideshow Settings Most Often Used Slideshow Options All Slideshow Options Slideshow Templates - Slideshow Specific Shortcodes Styling Guide For Slideshows Styling Of Slideshow and Post Templates Slides Popups Selectors Web Fonts General Theme Settings User Roles Export / Import Settings Creating theme designs Localization Headings Child Themes CSS Classes Responsive Design CSS Extension JavaScript Toolkit JavaScript Library Action Hooks Filter Hooks Compatibility 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 the content of posts and pages
in slides (so you can display captions in slideshows, relative to the time when a slide becomes visible)
in toggle and accordion shortcodes (relative to the time when the toggle is open)
in tab shortcodes (relative to the time when a tab page becomes visible)

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