Dottoro Theme Documentation

Tutorial to get your theme to work

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.

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".
gallery_popup	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

Links

[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: ». 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.

Footer shortcodes

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.

• [wp-link] - link to the WordPress front page
• [theme-link] - link to the Dottoro Theme Editor page
• [rss] - link to RSS feed
• [copyright] - copyright text with © sign
• [top] - link to the top of the page
• [the-year] - current year

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