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
<

14. Overlays

The Overlays menu has been moved to the Templates menu in version 1.37.

Overlays make it possible to display any HTML content over post thumbnails, images and media. You can display image titles and descriptions, post meta data (titles, teasers, categories, etc.), buttons that open popup slideshows and more. There are predefined overlays to choose from and you can create custom ones. The contents of overlays can be edited the same way as the contents of pages and posts, and you can also use shortcodes in them. Thanks for the [layer] shortcode, any part of an overlay can appear and disappear with an animation. Thus you have the possibility to create a wide variety of overlay animations.

Tip: Check out our demo page to see how flexible the overlay feature is.

14.1 Displaying Overlays

There are several ways to display overlays in the theme:

14.2 Built-in Overlays

Built-in overlays give you a good basis to create your own overlays. In the following, the content and working mechanism of built-in overlays are discussed in detail to help you in creating your own overlays.

The source and description of a built-in overlay can be viewed by clicking on the overlay under under Templates » Overlays. As you can see, each overlay contains a list of layers.

There are a few things worth mentioning: For further details and examples, please see the [layer] shortcode and the overlay specific shortcodes section.

14.3 Creating Overlays

Overlays can be created and managed under Templates » Overlays. The theme comes with a few predefined overlays to choose from and you can create custom ones. The predefined overlays give you a good basis to create your own overlays. More on Built-in Overlays.

To create your own overlay:

You are done, your custom overlay is ready to use. For example, if you want to use this overlay on a portfolio page, select your new overlay in the Thumbnail Overlay option on the Edit page, then click Save Changes. If you take a look at the portfolio page now, you will see the changes.

As you can see the contents of overlays can be edited the same way as the contents of pages and posts, and you can also use shortcodes in them. In addition to the common shortcodes, the post template specific shortcodes and the overlay specific shortcodes can also be used in the content of overlays.

Overlay options

You will find an "Overlay Settings" box below the WordPress content editor. In this section, these options will be described.

Overlay options
Visibility Select whether the overlay element should be always visible or only on hover. If this option is set to 'always', the start and end attributes determine how a layer looks like when the mouse is not over the covered element.
Clicking Select what you would like to happen when the user clicks on the overlay. The 'auto' value means that if there is only one clickable element in the overlay, then the whole overlay is clickable, otherwise the overlay is not clickable.
Placement Select whether the overlay should cover only the content box, the padding box (content and padding), or the border box (content, padding and border) of the associated element.
CSS Class CSS class or classes that are added to the overlay wrapper element.
Small Width Specifies the width of the overlay (in pixels) below the 'small' CSS class should be added to the overlay. Since an overlay can appear over different elements and the size of the overlay depends on the size of the covered element, the same overlay can have different sizes. The 'small' class allows you to apply additional CSS rules to an overlay when its width is below a certain size. For example, you can make buttons smaller and so on.
Small Height Specifies the height of the overlay (in pixels) below the 'small' CSS class should be added to the overlay. Since an overlay can appear over different elements and the size of the overlay depends on the size of the covered element, the same overlay can have different sizes. The 'small' class allows you to apply additional CSS rules to an overlay when its height is below a certain size. For example, you can make buttons smaller and so on.

14.4 Overlay Specific Shortcodes

These shortcodes can only be used in overlays.

[image_title]

Displays the image title. The image title can be set on the Edit Media page under Media » Library.

Attributes:
target Specifies the target window where the document should be opened when clicking on the title. Default is '_blank'. This attribute is the same as the target attribute of the anchor tag in HTML.
This attribute has effect only if the show_as_link attribute is set to true.
show_as_link Specifies whether the title should appear as a link or plain text (true | false). Default is false.
image_target Specifies whether clicking on the title should open the attachment page or a page that only contains the image in its original size (attachment | image). Default is attachment. Has effect only if the show_as_link attribute is set to true.
Please note that if the overlay appears over a Flickr image, this attribute is omitted and clicking on the title opens the Flickr page of the image.
[image_description]

Displays the image description. The image description can be set on the Edit Media page under Media » Library.

Displays a button that opens a popup window. For details, please see the Shortcodes for popup windows section.

[read_more_button]

Displays a read more button.

Attributes:
icon Specifies an icon for the button (magnifier | photo | player | vimeo | youtube | flash | readmore | external). Default is 'readmore'.

An empty string means no icon will be used.

Please note that if the [read_more_button] shortcode has HTML content, no icon will be shown.
target Specifies the target window where the post should be opened. Default is '_self'. This attribute is the same as the target attribute of the anchor tag in HTML.
[visit_site_button]

Displays a button that opens the page specified by:

If the URL is not specified or not supported, the button will not be displayed.

Attributes:
icon Specifies an icon for the button (magnifier | photo | player | vimeo | youtube | flash | readmore | external). Default is 'external'.

An empty string means no icon will be used.

Please note that if the [visit_site_button] shortcode has HTML content, no icon will be shown.
target Specifies the target window where the post should be opened. Default is '_blank'. This attribute is the same as the target attribute of the anchor tag in HTML.