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
<

Column layouts

[col2] 1/2 width
[col3], [col23] 1/3, 2/3 width
[col4], [col34] 1/4, 3/4 width
[col5], [col25], [col35], [col45] 1/5, 2/5, 3/5, 4/5 width
[col6], [col56] 1/6, 5/6 width
[row] one row

These shortcodes will help you create the layout of your page.

The following attributes are supported by the [row] shortcode.

Attributes:
simple_cols Specifies whether the col shortcodes within the row shortcode should put the content into one or two wrapper elements (true | false). Default is false which means the col shortcodes create two wrapper elements.

For details, please see the "simple" attribute of the col shortcodes below.

The following attributes are supported by all column layout shortcodes, excluding the [row] shortcode.

Attributes:
margin Margin of the element (none | small | medium | large | extra-large)
simple Specifies whether the shortcode should put the content into one or two wrapper elements (true | false).

The inner wrapper element is used to set a margin for the item (margin attribute above), but if you don't need margin, in some cases, it makes styling easier if there is only one wrapper element around the content. For these cases, set the "simple" attribute to true.

Please Note: if there is no [row] shortcode surrounding [col] shortcodes, a clearing element ( [clear /] ) is required after the last [col] shortcode.
Also see the Responsive Design section. It shows you how to create responsive column layouts.

Live example

Clear

[clear]

Prohibits showing floating objects on any side of the object. Use it together with the column layout and frame shortcodes.

Attributes: No attributes.

Live example

Line Break

[br /]

This shortcode displays a line break.

Highlighted texts

[highlight]

This shortcode serves to highlight parts of a text.

Attributes:
bg_color Background color. For the supported values, see CSS background-color property.
text_color Font color. For the supported values, see CSS color property.
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.

Live example

Blockquotes

[blockquote]

With this shortcode you can create block quotations.

Attributes:
bg_color Background color. For the supported values, see CSS background-color property.
text_color Font color. For the supported values, see CSS color property.
icon Specifies the quote icon. Default: 'quote-open'.
For a complete list of icons, see Font Icons.
iconset Specifies the icon set that contains the quote icon (see icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
icon_color Color of the quote icon. For the supported values, see CSS color property.
author The name of the author.
use_dash Insert dash sign before author name (true | false). Default is true.

Live example

Pull quotes

[pullquote]

Similarly to [blockquote] shortcode, this shortcode also for creating blockquotes with the difference of displaying a vertical line before the text instead of using quotation marks.

Attributes:
bg_color Background color. For the supported values, see CSS background-color property.
text_color Font color. For the supported values, see CSS color property.
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.
type Type of the vertical line (1-4).
align The alignment of the pull quote ( '' | left | right ). Default: ''.

Live example

Drop Caps

[dropcap]

With the help of this shortcode you can create drop-caps.

Attributes:
opacity The opacity level of the dropcap. (floating point number 0 - 1) Default: 1.
skin Skin of the drop cap (available skins). Skins are different color schemes that provide attractive appearance.
type Type of drop cap ( disc | simple | square ).

Live example

Drop-Cap Box

[dropcap_box]

With the help of this shortcode you can create drop-cap boxes.

Attributes:
skin Skin of the drop-cap box (available skins). Skins are different color schemes that provide attractive appearance.
type Type of drop-cap box ( disc | simple | square ).
value The text that will be displayed in the drop-cap box.
align The alignment of the drop-cap box. ( top | left | right | bottom )

Live example

Lists

[list]

With the help of the shortcode you can place icons before list items.

Attributes:
icon Specifies an icon for the list items. Default: 'arrow'.
For a complete list of icons, see Font Icons.
iconset Specifies the icon set that contains the icon referred by the icon attribute (see above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
icon_color Color of the list icons. For the supported values, see CSS color property.
icon_size Size of the list icons. For the supported values, see CSS font-size property.
multiline If this attribute is true, multiline text will be indented (true | false). Default is true.

Live example

Frames

[frame]

With this shortcode, you can place floating objects in a text block.

Attributes:
align Alignment of the floating object.

Live example

Font Icons

[icon]

With this shortcode you can display font icons. Dottoro theme supports two font icon sets by default, but you have the possibility to extend the available icons with your own ones. For details, please see Font Icons.

Attributes:
icon Specifies an icon to display before the link. Default: ''.
For a complete list of icons, see Font Icons.
iconset Specifies the icon set that contains the icon referred by the icon attribute (see above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
color Color of the icon. For the supported values, see CSS color property.
size Size of the icon. For the supported values, see CSS font-size property.

Live example

Buttons

[button]

With this shortcode you can create attractive buttons harmonizing with your theme's design.

Attributes:
active The appearance of active buttons differs from the default. This attribute is most useful if you want to set buttons as tabs and you want to distinguish the current tab button from the other ones.

Possible values: true | false.

href The URL of the webpage that should be opened when clicking on the button.
size The size of the button ( normal | medium | large ).
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.
type The type of the button (normal | submit | reset). You can use Submit and Reset buttons on forms (see submit button, reset button).

Live example

Image Frame

[image_frame]

With this shortcode you can add a frame around an image.

Attributes:
align The horizontal alignment of the element ( left | center | right | empty string ). Default is an empty string.
Please note that if the element is centered, the width of the frame must be set to the same size as the image (e.g. [image_frame align="center" style="width:250px"]...[/image_frame]).

Live example

Image Options

[image_options]

This shortcode allows you to set an overlay and/or add a frame to an image.
If you want to add a frame to an image, embed the image tag into an image_options shortcode and set the frame attribute of the shortcode to show. Similarly, if you want to set an overlay for an image, embed the image into an image_options shortcode and specify the overlay attribute of the shortcode.
The following table lists the attributes supported by the image_options shortcode. Since the image_options shortcode creates an HTML anchor tag around the embedded image, you can use any HTML attribute for the image_options shortcode that is supported by the HTML anchor element (such as href).

Attributes:
General Attributes
align The horizontal alignment of the image ( left | center | right | empty string ). Default is an empty string.
Please note that if the element is centered, the width of the shortcode must be set to the same size as the image (e.g. [image_options align="center" style="width:250px"]...[/image_options]).
frame Specifies whether to show a frame around the image or not (show | hide). Default is hide.
image_id Specifies the attachment id of the image. Every image uploaded via the WordPress media dialog has an attachment id. To get the identifier of an image, go to Media » Library, edit the media and look at the URL in the location bar of your browser. The URL contains a 'post=number' substring, where the number is the identifier of the image.
image_url Specifies the URL of the image. If the image has an attachment id, use the image_id attribute instead.
Currently the only effect of this attribute is to specify the URL of the image the popup slideshow should start with, but this value can be overridden by the gallery_image_url attribute.
image_title Specifies the title of the image. This attribute must be specified if the image_id attribute is not set and the [image_title] shortcode is used in the overlay.
image_desc Specifies the description of the image. This attribute must be specified if the image_id attribute is not set and the [image_description] shortcode is used in the overlay.
Attributes for overlays
overlay The identifier of the overlay that should appear over the image.
To get the identifier of an overlay, go to Templates » Overlays and click on the overlay. Here you will find the id of the overlay.
If the overlay attribute is not specified, no overlay will be used.
If you set an overlay, it is advisable to also set the image_id attribute. Thus you can use the [image_title], [image_description] and [gallery_button] shortcodes in the overlay.
More on Overlays.
read_more_url Specifies the target URL of the read more button.
This attribute only makes sense if the [read_more_button] shortcode is used in the overlay.
By default, the target URL is an empty string, but if the href attribute of the image_options shortcode is specified, then this value will be used as the default.
It is advisable to set the href attribute and set the read_more_url attribute only if it should be different from the href attribute.
site_url Specifies the target URL of the visit site button.
This attribute only makes sense if the [visit_site_button] shortcode is used in the overlay.
By default, the target URL is an empty string, but if the href attribute of the image_options shortcode is specified, then this value will be used as the default.
It is advisable to set the href attribute and set the site_url attribute only if it should be different from the href attribute.
Attributes for gallery popups (popup slideshows)
popup_galleries Comma separated list of galleries that should be displayed in the popup slideshow.

For instance, "gallery1" means that the popup slideshow will display the "gallery1" gallery of the post, while "gallery1, gallery2" means that the popup slideshow will display both the "gallery1" and "gallery2" galleries of the post.

Additionally, you can also use the post_id:gallery_name syntax to refer to a gallery of another post or a global gallery. For instance, "23:gallery1" refers to the "gallery1" gallery of the post with id of 23, "0:gallery1" refers to the "gallery1" global gallery.

Finally, there is a special value: "_default", that refers to the default gallery of the post. The default value of the galleries attribute is "_default".

Specifies the identifier of the gallery popup (popup slideshow) that should be opened when the user clicks on the gallery button in the overlay.

To get the identifier of a gallery popup, go to Popups » Gallery Popups and click on the popup. Here you will find the id of the popup.

If the gallery_popup attribute is not set, the (first) gallery specified by the galleries attribute above determines the gallery popup (see Gallery Popup option of a gallery).

For further details, please see Popup Slideshows.
gallery_image_id Specifies the attachment id of the image the popup slideshow should start with.

Also see the gallery_start_idx attribute.

This setting is relevant only if an overlay appears over the image and a popup slideshow can be opened from the overlay (see overlay attribute).
gallery_image_url Specifies the URL of the image the popup slideshow should start with. If the image has an attachment id, use the gallery_image_id attribute instead.

Also see the gallery_start_idx attribute.

This setting is relevant only if an overlay appears over the image and a popup slideshow can be opened from the overlay (see overlay attribute).
gallery_start_idx Specifies the zero-based index of the slide that should be initially active in the popup slideshow. Default is -1.
By default, the popup slideshow will start with:
  • the slide specified with the gallery_start_idx attribute
  • if it is -1, then the image specified with the image_id attribute
  • if it is not set, then the image specified with the image_url attribute
  • otherwise the first slide
This setting is relevant only if an overlay appears over the image and a popup slideshow can be opened from the overlay (see overlay attribute).

Live example

[link]

With this shortcode you can give an attractive appearance to links on your website.

Attributes:
href The target URL of the link.
icon Specifies an icon to display before the link. Default: ''.
For a complete list of icons, see Font Icons.
iconset Specifies the icon set that contains the icon referred by the icon attribute (see above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
icon_after Specifies an icon to display after the link. Default: ''.
For a complete list of icons, see Font Icons.
iconset_after Specifies the icon set that contains the icon referred by the icon_after attribute (see above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.

Live example

Dividers

[divider], [divider_top]

The divider shortcode displays a horizontal line, the divider_top shortcode displays an additional link to the top of the page.

Attributes:
color
This attribute is deprecated from version 1.31. Use CSS border instead (style="border:...").
The color of the line.
title The text that should be placed on the divider line.
type
This attribute is deprecated from version 1.31. Use CSS border instead (style="border:...").
The style of the line.
width
This attribute is deprecated from version 1.31. Use CSS border instead (style="border:...").
The width of the line, in pixels.
link_text The text of the link that should be displayed below the horizontal line. The default is an empty text (no link) for the divider shortcode, and 'Top' for the divider_top shortcode.
link_target The identifier of the HTML element to scroll to when clicking on the link. The default is 'top' that means scroll to the top of the page.
scroll_anim Specifies whether scrolling animation is required or not (true | false). Default is true.
scroll_duration The duration of the scrolling animation, in milliseconds
scroll_easing Specifies the easing function for the scrolling animation. Easing functions (timing functions) specify how the intermediate values are calculated during the 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.
scroll_stoponwheel Specifies whether the scroll animation should stop when the mouse wheel rolls (true | false). Default is true.
scroll_vertoffset Specifies the vertical distance between the top of the element identified by the to attribute (see above) and the location where the scrolling ends, in pixels. Default is 0.

Live example

FAQ

[faq], [question], [answer]

With these shortcodes you can enhance the appearance of your questions and answers lists.

Attributes:
mark Set the drop cap text. The default is 'Q' for questions and 'A' for answers. The [faq] shortcode does not support this attribute.
font_size Font size of the drop cap text, in pixels.
image_size The size of the drop cap image, in pixels. Default is 32.
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.
type Type of drop cap ( circle | disc | simple | square ).

Live example

Boxes

[box], [box_title], [box_content]

With these shortcodes you can display any kind of content in attractive boxes.

The following attributes are supported by the [box] shortcode.
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.
width The width of the box (see width property in CSS)

Live example

Box Bars

[box_bar], [box_button], [box_content]

With these shortcodes you can display a short text and a button in an attractive box.

The following attributes are supported by the [box_bar] shortcode.
fontsize The font size of the content, in pixels. Default is 21.
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.
width The width of the box (see width property in CSS)

Live example

Message Boxes

[message], [notice], [warning], [info], [download]

With these shortcodes you can display attractive messages.

Attributes: No attributes.

Live example

Admin Note

[admin_note]

Only visible for visitors logged into the website as an admin.

Attributes: No attributes.

Live example

Protected Content

[protected]

Users must log in to view this content. Users not logged in will see a login form.

Attributes: No attributes.

Live example

Table

[table]

With this shortcode you can display attractive tables.

Attributes:
align The horizontal alignment of the contents within cells (left, center, right). Default is center.
skin Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance.

Live example

Testimonial

[testimonial]

With this shortcode you can display user testimonials.

Attributes:
name The name of the author of the testimonial.
status The status of the author of the testimonial.
text_align The alignemnt of text.
arrow_pos The alignment of the bubble arrow. (top | left | right | bottom)
quote_icon Specifies the quote icon. Default: 'quote-open'.
For a complete list of icons, see Font Icons.
quote_iconset Specifies the icon set that contains the quote icon (see icon above). If no icon set is specified, the theme automatically tries to find an icon set that contains the icon.
For the supported icon sets, see Font Icons.
quote_icon_color Color of the quote icon. For the supported values, see CSS color property.

Live example

Bubble

[bubble]

With this shortcode you can display rounded boxes or bubbles.

Attributes:
arrow_pos The alignment of the bubble arrow. (top | left | right | bottom)

Live example

Breadcrumb

[breadcrumb]

This shortcode serves to highlight parts of a text.

Attributes:
separator Sets the text that separates breadcrumb items. Default is: &raquo;.
For special characters, use HTML entities.
nofollow Specififes whether nofollow links should be used in the breadcrumb or not (true | false). Default is true.
More on nofollow (Wikipedia).
show_matching_page Set whether the title of the matching page should appear in the breadcrumb on post, category, tag and date pages (true | false). Default: true.
show_post_type Set whether the post type should appear in the breadcrumb on post, category, tag and date pages (true | false). Default: false.
show_category_for_posts Set whether the category should appear in the breadcrumb on post pages (true | false). Default: false.
show_taxonomy_for_terms Set whether the taxonomy should appear in the breadcrumb on category and tag pages (true | false). Default: false.
slug_or_name Set whether to display slugs or names of tags and categories (a slug is a link friendly name). Possible values: slug, name. Default: name.

Although these shortcodes are intended for the footer (see Copyright and other notices in the Footer), but they can be used anywhere on your pages.

The [rss] shortcode supports the following attributes:
feed Possible values:
  • full

    Link to the RSS feed that contains all blog, news and portfolio entries.

  • comments

    Link to the RSS feed that contains all blog, news and portfolio.

  • blog

    Link to the RSS feed that contains all blog posts.

  • news

    Link to the RSS feed that contains all news items.

  • portfolio

    Link to the RSS feed that contains all portfolio items.

  • auto

    Link to the RSS feed that contains all entry from the post type of the current page. On post type independent pages (such as home, search, author, ...), the Default Post Type settings determines the target RSS feed.

Live example