Dottoro Elastic Theme Documentation

First of all, we would like to thank you for choosing our theme!

This documentation will show you how to set up and use the Dottoro Elastic Theme and it is for both novice and experienced WordPress users alike.

Some of them are:

• Post types

  Along with the standard blog post type Elastic Theme provides two further ones: Portfolio and News. To help you display your tag and category pages separated for all three post types, tags and categories are also made post type dependent. You can assign a different permalink structure to every post type, making the types your contents belong to visible in the URLs of your website. Some of the widgets also support post types; e.g. for the Recent Posts widget you can set the desired post type, but you can also set it to post type independent mode (more).

• Subheaders

  You can have a different content in the subheaders on every page of your site. The contents of the subheaders can be edited the same way as the contents of your pages and posts; thus you can make your own custom subheaders (more).

• Widgets

  You can create widget areas and edit the layout of your widgets in them with an easy to use wizard. Inside a widget area you can define the layout of all of your widgets and you can set custom widget areas on the sidebars and footers of all pages which puts you in full charge of the appearance of your sidebars and footers. You can also insert custom widget areas into your subheaders and content with the [widget_area] shortcode.

• Slideshows

  You can create and edit slideshows in an easy to use wizard. The slideshows can then be published to the desired page as a Slideshow widget or with a [slideshow] shortcode. The contents of slides can be edited the same way as the contents of posts and pages, and you can also use shortcodes in them. You can set background and pagination images and add HTML content and any number of layers to every slide. (more).

1. First Steps

2. Front Page

Elastic Theme provides various page templates. Some of the templates are designed for general content pages, while others for displaying special contents (read more in the Page templates section). You can set any page as a front page but in most cases using the Default Template is the best option.

2.1 Creating a custom front page

If you now open your root domain in a browser you will see your newly set homepage.

3. Blog, News and Portfolio post types

WordPress 3 has introduced post types, so one could display on his pages different types of content separated from each other. To take full advantage of this feature, along with the main type - Post - Elastic Theme provides two further post types: Portfolio and News.

To help you display your tag and category pages separated for all three post types, tags and categories are also made post type dependent. You can assign a different permalink structure to every post type, making the types which your contents belong to visible in the URLs of your website. Some of the widgets also support post types; e.g. for the Recent Posts widget you can set the desired post type, but you can also set it to post type independent mode.

The settings options for all post types are separated on the admin panel as well in the Posts, News and Portfolio boxes. Posts, categories and tags for all three post types can be managed in the very same way. There are various setting options for every post type. Some of them are located under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings and there are options for individual pages and posts as well.

3.1 Post Type specific settings

3.1.1 General settings

3.1.2 Single post/news/portfolio settings

3.1.3 Category / Tag / Date page settings

3.1.4 Permalink settings

These settings only take effect when the value of WordPress Permalink Common Setting differs from Default (Settings » Permalinks)! Here you can specify a custom permalink structure to every post type. You can also specify a custom permalink prefix to category and tag pages by post types.

For further details, please see WordPress Permalink Settings.

3.2 Settings on single post/news/portfolio pages

3.2.1 General page options

3.2.2 Image options

3.2.3 Gallery settings

For further details, see the Galleries section.

4. Page Templates and Pages

4.1 Available page templates

• Default Template
  If you use this template, you will have full control over the contents of the page. You can set whether the sidebar should be shown on the default, left or the right side, or you can turn it off. The default position of the sidebar is right.

  Shortcodes and widgets are great help to easily create even complex contents. To create a custom Front page it can be practical to opt for the Default Template.

• Blog, News and Portfolio/Imagefolio templates

  With these you can create Post, News and Portfolio list pages. The Elastic Theme offers a number of setting options for them, e.g. category filtering. Category filtering enables you to choose which categories should be displayed on the page. Thus you can make practical use of creating multiple blog, news and portfolio pages. For further information on possible settings see next section.

  Mind you, Portfolio and Imagefolio templates only differ in appearance; both are designed to create Portfolio list pages.
• Contact template

  With this you can create a contact page. Similarly to general pages, you will have to create the content of the contact page for yourself but on the bottom of the page a contact form will be displayed so you visitor can contact you.

  Tip: if you wish to create a contact page with a custom layout, choose the Default Template and place a Contact form widget in a widget area that you can insert with a [widget_area] shortcode anywhere on your page, or simply use the [contact_form_widget] shortcode.
• Archives template

  With this template you can create a summary page displaying the categories and the months your posts have been created. Categories and months are separated according to post types.

• Authors template

  Creates a page that displays the site authors in alphabetical order with contact and biography information.

• Bookmarks template

  Creates a page that displays a list of available bookmarks.

• Sitemap template

  Creates a page that displays a list of all pages and category and monthly archives, separated according to post types.

4.2 Pages created from page templates

After selecting the template for you page, save it with clicking Publish/Update or Save Draft.

After saving it, you find the settings options below WordPress's content editor. Some of the settings are available for every page types; however there are template dependent options as well.

4.2.1 General page settings

4.2.2 Gallery settings

For further details, see the Galleries section.

4.2.3 Blog page settings

You will find the Blog page settings below the WordPress content editor. The first box contains the General Page settings; other options are explained below.

4.2.4 News page settings

You will find the News page settings below the WordPress content editor. The first box contains the General Page settings; other options are explained below.

4.2.5 Portfolio and Imagefolio page settings

You will find the page settings below the WordPress content editor. The first box contains the General Page settings; other options are explained below.

4.2.6 Contact page settings

Similar to the Default Template, you will have full control over the contents of the Contact page, but at the bottom of the content, a contact form will be displayed where your visitors can contact you.

In the settings fields you can provide an email, CC (additional recipients) and BCC (hidden recipients) address and an e-mail subject, and you can specify the text of the Send button and a 'Thank You message'.

4.2.7 Archives page settings

An Archives page is a summary page displaying the categories and the months your posts have been created. Categories and months are separated according to post types.

You will find the Archives page settings below the WordPress content editor. The General Page settings and Gallery settings are detailed above; other options are explained below.

4.2.8 Authors page settings

An Authors page displays the site authors in alphabetical order with contact and biography information.

You will find the Authors page settings below the WordPress content editor. The General Page settings and Gallery settings are detailed above and there are no other special settings for Authors pages.

4.2.9 Boomarks page settings

A Boomarks page displays a list of available bookmarks.

You will find the Boomarks page settings below the WordPress content editor. The General Page settings and Gallery settings are detailed above and there are no other special settings for Boomarks pages.

4.2.10 Sitemap page settings

A Sitemap page displays a list of all pages and category and monthly archives, separated according to post types.

To create a Sitemap page you have to create a new page (Pages » Add new), select Sitemap option under Page Attributes from the template list on the right, then click Publish or Save Draft.

You will find the Sitemap page settings below the WordPress content editor. The General Page settings and Gallery settings are detailed above; other options are explained below.

4.3 Special pages

4.3.1 Category and tag page settings

4.3.2 Archive and date page settings

4.3.3 Search page settings

Under Theme Options » General » Search:

4.3.4 Author page settings

Under Theme Options » General » Author:

4.3.5 404 page settings

Under Theme Options » General » 404:

5. Post Templates

Post templates allow you to customize the look of posts both on single and list pages. There are predefined post templates to choose from and you can create custom ones.
With the help of post templates, you can arrange post datas in various ways. For example, you can have the date above the title, the title below the thumbnail and so on. You have also the possibility to display custom content. For instance, you can put a custom image, button, link or - with the help of the [widget_area] shortcode - widgets above the post title or below the post thumbnail or anywhere you want.
In addition, the [do_action] shortcode gives you the possibility to display PHP generated content. For example, you can display content depending on the user or post type or anything else.
To make post templates more flexible, the dottoro_post_template filter allows you to select post templates programmatically. So, you have the possibility to use different post templates for posts in the same list. For example, this is useful if you want to use different post templates for different post formats. See Example 4 below, it shows you how to do this.

5.1. Selecting Post Templates

Single Post Pages

You can find a Post Template option under Posts » Post Settings » Single Post Settings / News » News Settings » Single News Settings / Portfolio » Portfolio Settings » Single Portfolio Settings. Here you can select which post template you want to use for blog/news/portfolio posts, but this can be overridden for each post (see Post Template option on edit post page). The 'Single' predefined post template is made for single post pages.

Post Lists

You can find a Post Template option on each blog, news and portfolio pages, and on author, search and 404 pages, as well. This option allows you to select a post template which will be used for every post appearing on the page. In addition, the post_list, news_list and portfolio_list shortcodes also support post template selection.
The 'Post List'predefined post template is made for blog post lists, 'News List' for news item lists, 'Portfolio List' for portfolio item lists, finally, 'Search List' for search, author and 404 pages.
If you want to use different post templates for posts in the same list, you need to hook a function to the dottoro_post_template filter. See Example 4 below, it shows you how to do this.

5.2. Predefined and Custom Post Templates

You can create and manage post templates under Post Templates. The theme comes with a few predefined post templates to choose from and you can create custom ones. The contents of custom post templates can be edited the same way as the contents of posts and pages, and you can also use shortcodes in them. The predefined post templates give you a good basis to create your own post templates.

The source code of predefined post templates can be viewed under Built-in Templates. The 'Single' predefined post template is made for single post, news and portfolio pages, 'Post List' for blog post lists, 'News List' for news item lists, 'Portfolio List' for portfolio item lists, finally, 'Search List' for search, author and 404 pages. As you can see, a post template is nothing else than some shortcodes and a few HTML tags for formatting. The theme provides several post template specific shortcodes that allow you to display post data (such as title, author, categories, thumbnail and some more). These shortcodes are detailed in the next section.
To create your own post template:

• select a predefined post template that fits your needs most
• copy its content to the clipboard
• go to Post Templates » Add New
• give your new post template a name (similar to post titles)
• paste the clipboard content into the content editor below the title field
• make the required modifications in the content of your template
• finally, click Publish

For further details, please see the Examples for Custom Post Templates section.

5.3. Post Template Specific Shortcodes

These shortcodes can only be used in post templates and display post titles, authors, thumbnails, categories, comments and some more. There are some other shortcodes that provides great

• [post_article]

  Displays an HTML article tag to enclose the post.

• [post_header]

  Displays an HTML header tag to enclose the post title and meta. The header tag should be inside an article tag in HTML5.

• [post_footer]

  Displays an HTML footer tag to enclose some post related information. Typically used for displaying the number of comments or a read more link at the bottom of the post.

• [post_meta]

  Displays an HTML element to enclose post meta information (typically the date, author, categories and tags).

• [post_body]

  Displays an HTML element to enclose post body (typically the post thumbnail and content).

• [post_title]

  Displays the post title.

  Attributes:
  heading_tag	Specifies the HTML heading element of the post title. Default is 'h1' on single post pages and 'h2' in post lists. Please note that if this attribute is specified, it overrides the heading_tag setting of post_list, news_list and portfolio_list shortcodes.
  heading_class	Specifies a CSS class for the heading of the post title. Default is an empty string. The theme supports different classes for headings (see Headings) that allow you to display headings in different sizes, but you can also use custom CSS classes. An empty value means that the heading class is automatically calculated. Please note that if this attribute is specified, it overrides the heading_class setting of post_list, news_list and portfolio_list shortcodes.
  link	Set whether the title should appear as a link or a plain text ( true | false ). Please note that if this attribute is specified, it overrides the Show title as a link setting of portfolio pages and the show_title_as_link setting of portfolio_list shortcodes.
  title_field	Allows you to specify a custom field that contains the title to display. If the given custom field does not exist or empty for a post, the post title will be displayed. This attribute is typically useful if you want to break some post titles to multiple lines in a post list. If you want to break a title, create a new custom field on the post page, copy the post title into the custom field and add a <br/> where you want to break it.

• [post_date]

  Displays the post date.

  Attributes:
  icon	Specifies a date icon. Basically, the 'time', 'time-2', 'time-3', 'time-4', 'time-5', 'hour-glass', 'calendar', 'calendar-2' and 'calendar-3' icons are for dates, but you can use any icon. For a complete list of icons, see Font Icons. If you want to hide the icon, use the value of 'none'. Please note that if this attribute is specified, it overrides the date icon skin settings of the theme and the date_icon setting of post_list, news_list and portfolio_list shortcodes.
  iconset	Specifies the icon set that contains the date 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. Please note that if this attribute is specified, it overrides the date_iconset setting of post_list, news_list and portfolio_list shortcodes.
  date_format	Specifies the date format used to display the date. The default is the Date Format of your site specified under Settings > General. An empty string means the Time format of your site specified under Settings > General. For further details on the available date formats, please see Documentation on date and time formatting. You can prevent a recognized character in the date format string from being expanded by escaping it with preceding double backslashes. For example: date_format="\\P\\u\\b\\l\\i\\s\\h\\e\\d F j, Y" displays 'Published August 28, 2012'.
  timestamp	Specifies whether the created or the modified time of the post should be displayed (created | modified). Default is 'created'.
  elapsed_newer	If this attribute is specified, then the elapsed time will be displayed for posts younger than the given number of seconds. For example, if this value is 60, then the timestamp will be displayed for posts beyond one minute while the elapsed time will be displayed for others (younger than 1 minute). If the value is 0, it means that no elapsed time is needed at all, while negative values mean than the elapsed time should be displayed for all posts. Default is 0.
  ago_format	Specifies the text format used to display the elapsed time (see elapsed_newer attribute above). The %s token is replaced by the elapsed time. Default is '%s ago'.
  translate	Specifies the domain to be used to translate the text given by the 'date_format' and 'ago_format' attributes. The default is 'dottoro_theme' which is the text domain of the Elastic theme. An empty string means that no translation is required. This attribute is mostly useful if your own translations are loaded into a domain different than the text domain of the Elastic theme, or if you want to prevent the translation of the text specified by the 'date_format' and 'ago_format' attributes. For further details, please read I18n for WordPress Developers.

• [post_author]

  Displays the post author.

  Attributes:
  icon	Specifies an icon to display for the post author. Basically, the 'user', 'user-2', 'users', 'users-2', 'v-card', 'v-card-2', 'v-card-3' and 'v-card-4' icons for authors, but you can use any icon. For a complete list of icons, see Font Icons. If you want to hide the icon, use the value of 'none'. Please note that if this attribute is specified, it overrides the author icon skin settings of the theme and the user_icon setting of post_list, news_list and portfolio_list shortcodes.
  iconset	Specifies the icon set that contains the author 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. Please note that if this attribute is specified, it overrides the user_iconset setting of post_list, news_list and portfolio_list shortcodes.
  text	Specifies the author text format. The %s token is replaced by the post author. An empty string means that only the author will be displayed without any additional text. Default is 'by %s'.
  translate	Specifies the domain to be used to translate the author text (see 'text' attribute above). The default is 'dottoro_theme' which is the text domain of the Elastic theme. An empty string means that no translation is required. This attribute is mostly useful if your own translations are loaded into a domain different than the text domain of the Elastic theme, or if you want to prevent the translation of the author text. For further details, please read I18n for WordPress Developers.

• [post_category]

  Displays the categories of the post.

  Attributes:
  icon	Specifies a category icon. Basically, the 'folder', 'nav', 'nav-2', 'nav-3', 'nav-4' and 'flag' icons are for categories, but you can use any icon. For a complete list of icons, see Font Icons. If you want to hide the icon, use the value of 'none'. Please note that if this attribute is specified, it overrides the category icon skin settings of the theme and the category_icon setting of post_list, news_list and portfolio_list shortcodes.
  iconset	Specifies the icon set that contains the category 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. Please note that if this attribute is specified, it overrides the category_iconset setting of post_list, news_list and portfolio_list shortcodes.
  text	Specifies the category text format. The %s token is replaced by the post categories. An empty string means that only the categories will be displayed without any additional text. Default is 'in %s'.
  translate	Specifies the domain to be used to translate the category text (see 'text' attribute above). The default is 'dottoro_theme' which is the text domain of the Elastic theme. An empty string means that no translation is required. This attribute is mostly useful if your own translations are loaded into a domain different than the text domain of the Elastic theme, or if you want to prevent the translation of the category text. For further details, please read I18n for WordPress Developers.

• [post_tags]

  Displays the tags of the post.

  Attributes:
  icon	Specifies a tag icon. Basically, the 'tag', 'tag-2', 'tag-3', 'tag-4', 'tag-5', 'paperclip', 'marker', 'marker-2', 'marker-3' icons are for tags, but you can use any icon. For a complete list of icons, see Font Icons. If you want to hide the icon, use the value of 'none'. Please note that if this attribute is specified, it overrides the tag icon skin settings of the theme and the tag_icon setting of post_list, news_list and portfolio_list shortcodes.
  iconset	Specifies the icon set that contains the tag 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. Please note that if this attribute is specified, it overrides the tag_iconset setting of post_list, news_list and portfolio_list shortcodes.
  text	Specifies the tag text format. The %s token is replaced by the post tags. An empty string means that only the tags will be displayed without any additional text. Default is 'Tags: %s'.
  translate	Specifies the domain to be used to translate the tag text (see 'text' attribute above). The default is 'dottoro_theme' which is the text domain of the Elastic theme. An empty string means that no translation is required. This attribute is mostly useful if your own translations are loaded into a domain different than the text domain of the Elastic theme, or if you want to prevent the translation of the tag text. For further details, please read I18n for WordPress Developers.

• [post_edit_link]

  Displays a link to edit the post, if a user is logged in and allowed to edit the post.

  Attributes:
  link	The link text. Default is 'Edit This'.
  before	Text to put before the link text. Default is ' | '.
  after	Text to put after the link text. Default is an empty string.

• [post_thumbnail]

  Displays the thumbnail of the post.

  Attributes:
  align	Set the alignment of thumbnail images (center | left | left_float | right | right_float). Please note that if this attribute is specified, it overrides the 'Thumbnail Alignment' setting of the current page and the thumbnail_align setting of post_list, news_list and portfolio_list shortcodes.
  width	Set the height of thumbnail images, in pixels. Please note that if this attribute is specified, it overrides the 'Thumbnail width' setting of the current page and the thumbnail_width setting of post_list, news_list and portfolio_list shortcodes.
  height	Set the width of thumbnail images, in pixels. Please note that if this attribute is specified, it overrides the 'Thumbnail height' setting of the current page and the thumbnail_height setting of post_list, news_list and portfolio_list shortcodes.
  show_caption	Set whether image captions should be displayed or not ( true | false ). Please note that if this attribute is specified, it overrides the image caption setting (within Meta Info option) of blog, news, portfolio, search, author and 404 pages and the datas_to_show setting of post_list, news_list and portfolio_list shortcodes.
  overlay	The identifier of the overlay that should appear over the thumbnail. Please note that if this attribute is specified, it overrides the Thumbnail Overlay setting of the page and the thumbnail_overlay setting of the portfolio_list shortcode. More on Overlays.

• [post_content]

  Displays the content of the post.

• [post_excerpt_tip]

  Displays a text hovering over the post content appears as a tooltip. Works only on portfolio pages and when the Show preview as tooltip option is enabled.

  Attributes:
  text	Specifies the text to display. Default is 'info'.
  translate	Specifies the domain to be used to translate the text given by the 'text' attribute. The default is 'dottoro_theme' which is the text domain of the Elastic theme. An empty string means that no translation is required. This attribute is mostly useful if your own translations are loaded into a domain different than the text domain of the Elastic theme, or if you want to prevent the translation of the text specified by the 'text' attribute. For further details, please read I18n for WordPress Developers.

• [post_read_more]

  Displays a read more link pointing to the post's page.

  Attributes:
  icon_after	Specifies a read more icon. Basically, the 'arrow-right', 'arrow-right-2', 'arrow-right-3', 'arrow-right-4', 'arrow-right-5', 'arrow-right-6', 'arrow-right-7' and 'arrow-right-8' icons are for read more, but you can use any icon. For a complete list of icons, see Font Icons. If you want to hide the icon, use the value of 'none'. This attribute has an effect only if the read more text appears as a link (see type attribute). Please note that if this attribute is specified, it overrides the read more icon skin settings of the theme and the read_more_icon setting of post_list, news_list and portfolio_list shortcodes.
  iconset_after	Specifies the icon set that contains the read more icon (see icon_after 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. Please note that if this attribute is specified, it overrides the read_more_iconset setting of post_list, news_list and portfolio_list shortcodes.
  skin	Set the skin of the read more button (available skins). Please note that if this attribute is specified, it overrides the read_more_button_skin setting of post_list, news_list and portfolio_list shortcodes.
  text	Specifies the read more text.
  translate	Specifies the domain to be used to translate the read more text. The default is 'dottoro_theme' which is the text domain of the Elastic theme. An empty string means that no translation is required. This attribute is mostly useful if your own translations are loaded into a domain different than the text domain of the Elastic theme, or if you want to prevent the translation of the read more text. For further details, please read I18n for WordPress Developers.
  type	Set whether to display the 'read more' text as a button or link ( button | link ). Please note that if this attribute is specified, it overrides the How to show 'read more' text settings of blog, news and portfolio pages and the link_type setting of post_list, news_list and portfolio_list shortcodes.

• [post_visit_site]

  Displays a visit site link.

  Attributes:
  icon_after	Specifies a visit site icon. Basically, the 'arrow-right', 'arrow-right-2', 'arrow-right-3', 'arrow-right-4', 'arrow-right-5', 'arrow-right-6', 'arrow-right-7' and 'arrow-right-8' icons are for visit site, but you can use any icon. For a complete list of icons, see Font Icons. If you want to hide the icon, use the value of 'none'. This attribute has an effect only if the visit site text appears as a link (see type attribute). Please note that if this attribute is specified, it overrides the visit site icon skin settings of the theme and the visit_site_icon setting of portfolio_list shortcodes.
  iconset_after	Specifies the icon set that contains the visit site icon (see icon_after 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. Please note that if this attribute is specified, it overrides the visit_site_iconset setting of portfolio_list shortcodes.
  skin	Set the skin of the visit site button (available skins). Please note that if this attribute is specified, it overrides the visit_site_button_skin setting of portfolio_list shortcodes.
  text	Specifies the visit site text.
  translate	Specifies the domain to be used to translate the visit site text. The default is 'dottoro_theme' which is the text domain of the Elastic theme. An empty string means that no translation is required. This attribute is mostly useful if your own translations are loaded into a domain different than the text domain of the Elastic theme, or if you want to prevent the translation of the visit site text. For further details, please read I18n for WordPress Developers.
  type	Set whether to display the 'visit site' text as a button or link ( button | link ). Please note that if this attribute is specified, it overrides the How to show links settings portfolio pages and the link_type setting of portfolio_list shortcodes.

• [post_comments]

  Displays the comments list and the comment form.

• [post_comments_num]

  Displays the number of comments for the post.

  Attributes:
  icon	Specifies a comments icon. Basically, the 'comment', 'comment-wire', 'comment-2', 'comment-wire-2', 'comment-3', 'comment-4', 'comment-5', 'comment-6', 'comment-7', 'comment-8', 'comments', 'comments-wire', 'comments-2' and 'comments-wire-2' icons are for comments, but you can use any icon. For a complete list of icons, see Font Icons. If you want to hide the icon, use the value of 'none'. Please note that if this attribute is specified, it overrides the comments icon skin settings of the theme and the comments_icon setting of post_list, news_list and portfolio_list shortcodes.
  iconset	Specifies the icon set that contains the comments 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. Please note that if this attribute is specified, it overrides the comments_iconset setting of post_list, news_list and portfolio_list shortcodes.
  text	Specifies the comment text format. The %s token is replaced by the number of comments. An empty string means that the number of comments will be displayed. This attribute is mostly useful if you want to use the same text format regardless of the number of comments.
  text_comment_0	Specifies the text format to be used when the post has no comments. The %s token is replaced by the number of comments (0). Default is 'No Comments. Overrides the value of the 'text' attribute.
  text_comment_1	Specifies the text format to be used when the post has one comment. The %s token is replaced by the number of comments (1). Default is '1 Comment'. Overrides the value of the 'text' attribute.
  text_comments	Specifies the text format to be used when the post has more than one comment. The %s token is replaced by the number of comments. Default is '%s Comments'. Overrides the value of the 'text' attribute.
  translate	Specifies the domain to be used to translate the comment text (see text attributes above). The default is 'dottoro_theme' which is the text domain of the Elastic theme. An empty string means that no translation is required. This attribute is mostly useful if your own translations are loaded into a domain different than the text domain of the Elastic theme, or if you want to prevent the translation of the comment text. For further details, please read I18n for WordPress Developers.

• [post_pagination]

  Displays the post pagination. Works only for multipage posts on single post, news and portfolio pages.

• [post_type]

  Displays the post type. Typically useful for lists displaying posts from different post types (search, author, 404).

  Attributes:
  before	Text to put before the post type text. Default is ' | '.
  after	Text to put after the post type text. Default is an empty string.

• [previous_post_link]

  Displays a link to the previous post (in chronological order). Can only be used on single post, news and portfolio pages.

  Attributes: this shortcode has the same attributes as the WordPress previous_post_link method (format, link, in_same_cat, excluded_categories).

• [next_post_link]

  Displays a link to the next post (in chronological order). Can only be used on single post, news and portfolio pages.

  Attributes: this shortcode has the same attributes as the WordPress next_post_link method (format, link, in_same_cat, excluded_categories).

5.4. Examples for Custom Post Templates

Example 1

[post_article class="post-template-single"]
	[post_header]
		[post_title /]
		[post_meta]
			[post_date /]
			[post_category /]
			[post_author /]
			[post_edit_link /]
		[/post_meta]
	[/post_header]

	[post_body]
		[post_thumbnail /]
		[post_content /]
		[clear /]
	[/post_body]
	
	[post_pagination style="margin-top:20px"/]

	[post_footer]
		[post_tags /]
	[/post_footer]
[/post_article]

[do_action action="dottoro_single_bottom_widget_area" /]

[post_comments /]

[post_article class="post-template-single"]
	[post_header]
		[post_title /]
		[post_meta]
			[post_date /]
			[post_category /]
			[post_tags /]
			[post_author /]
			[post_edit_link /]
		[/post_meta]
	[/post_header]

	[post_body]
		[post_thumbnail /]
		[post_content /]
		[clear /]
	[/post_body]
	
	[post_pagination style="margin-top:20px"/]
[/post_article]

[do_action action="dottoro_single_bottom_widget_area" /]

[post_comments /]

Example 2

[post_article class="post-template-single"]
	[post_header]
		[post_title /]
		[post_meta]
			[post_date /]
			[post_category /]
			[post_author /]
			[post_edit_link /]
		[/post_meta]
	[/post_header]

	[post_body]
		[post_thumbnail /]
		[post_content /]
		[clear /]
	[/post_body]
	
	[post_pagination style="margin-top:20px"/]

	[post_footer]
		[post_tags /]
	[/post_footer]
[/post_article]

[do_action action="dottoro_single_bottom_widget_area" /]

[post_comments /]

[post_article class="post-template-single"]
	[widget_area name="My Widget Area" /]
	[post_header]
		[post_title /]
		[post_meta]
			[post_date /]
			[post_category /]
			[post_author /]
			[post_edit_link /]
		[/post_meta]
	[/post_header]

	[post_body]
		[post_thumbnail show_caption="true"/]
		[post_content /]
		[clear /]
	[/post_body]
	
	[post_pagination style="margin-top:20px"/]

	[post_footer]
		[post_tags /]
	[/post_footer]
[/post_article]

[row style="margin:40px 0;font-size:15px"]
	[col2 style="text-align:left;"]
		[previous_post_link /]
	[/col2]
	[col2 style="text-align:right;"]
		[next_post_link /]
	[/col2]
[/row]

[do_action action="dottoro_single_bottom_widget_area" /]

[post_comments /]

Example 3

[post_article class="post-template-portfolio-list"]
	[post_thumbnail /]
	

		[post_header]
			[post_title /]
			[post_meta]
				[post_date /]
				[post_comments_num /]
				[post_author /]
				[post_category /]
				[post_tags /]
			[/post_meta]
		[/post_header]
		[post_body style="padding-top:0;"]
			[post_content /]
		[/post_body]
 		[post_footer]
			[post_excerpt_tip /]
			[post_read_more /]
			[post_visit_site /]
		[/post_footer]
	
	[clear /]
[/post_article]

[post_article class="post-template-portfolio-list"]
	[post_thumbnail /]
	

		[post_header]
			[post_title heading_tag="h2" /]
			[post_meta]
				[post_date /]
				[post_comments_num /]
				[post_author /]
				[post_category /]
				[post_tags /]
			[/post_meta]
		[/post_header]
		[post_body style="padding-top:0;"]
			[post_content /]
		[/post_body]
 		[post_footer]
			[post_excerpt_tip /]
			[post_read_more /]
			[post_visit_site /]
		[/post_footer]
	
	[clear /]
[/post_article]

Example 4

add_theme_support( 'post-formats', array( 'aside', 'gallery' ) );

add_filter ('dottoro_post_template', 'set_template_by_post_format', 10, 2);
function set_template_by_post_format ($template_id, $template_obj) {
	$datas = $template_obj->datas;
	if ($datas['post_type'] == 'post') {
		if ($datas['in_list']) {			// post lists
			switch (get_post_format ()) {
				case 'aside':
					$template_id = '10';	// the id of the custom post template
					break;
				case 'gallery':
					$template_id = '11';	// the id of the custom post template
					break;
			}
		}
		else {								// single post pages
			switch (get_post_format ()) {
				case 'aside':
					$template_id = '12';	// the id of the custom post template
					break;
				case 'gallery':
					$template_id = '13';	// the id of the custom post template
					break;
			}
		}
	}
	return $template_id;
}

6. Header and Menu

In Elastic Theme, the header contains your website's logo, title, description and the menu.

You can specify the logo image and whether you want the title, description and logo to be displayed in the header under Theme Options » General » Header.

• Type of the navigation bar

  Here you can decide whether you would like to use a CSS or a JavaScript menu. With using a JavaScript menu you will also be able to choose from various menu effects that will enhance the appearance of your submenus. No effects are supported in CSS menus. Another advantage of JavaScript submenus is that with them your submenus will never run off the browser window. We recommend using a JavaScript menu because it will appear as a CSS menu to users who don't have JavaScript enabled in their browsers (less than 5% of internet users).

• Menu Animation

  Here you can select animation effects for JavaScript menu. The available animations are: fade, growing and slide. The fade effect can be used as an additional effect to the slide and growing animations.

  In Internet Explorer before version 9, the fade effect doesn't work with multi-level menus (submenu within submenu) and causes rendering problems. If you use multi-level menus, select the version filter checkbox to disable fade effect in old IE browsers.

• Animation Duration

  The duration of the menu animation, in milliseconds. Default is 500.

• Menu Description

  You can assign title attribute to every menu item in the WordPress menu wizard. Select the checkbox if you would like the title attributes assigned to the main menu items to be displayed as a description.

• Compressed menu

  Here you can set the width of browser window (in pixels) below which the menu should be shown as compressed. The compressed menu is typically useful on low resolution devices. This setting has effect only if JavaScript Menu is enabled. Check out our demo site and resize your browser window to a small size, you will see what compressed menu means.

• Opening Direction - First level popups

  Here you can select the opening direction of first level popup menus. This setting has effect only if JavaScript Menu is enabled.

• Opening Direction - Non-first level popups

  Here you can select the opening direction of non-first level popup menus. This setting has effect only if JavaScript Menu is enabled.

7. Subheaders

The Elastic Theme provides an extremely flexible support for creating subheaders. The contents of the subheaders can be edited the same way as the contents of your pages and posts. Elastic Theme provides a couple of useful ready-made templates but you can always create your own custom subheaders to your pages. Subheaders can be managed similarly to posts and pages; you can save, modify and delete them.

You can select the default subheader under Theme Options » General » Header » Subheader. This value can be overridden for author, search and 404 pages under Theme Options » General » Author pages/404 page/Search and for post, category, tag and archive pages under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings. Finally, the subheader options on pages and posts allow you to select different subheaders for every individual page and post.

In the following you can read detailed instructions on how to create subheaders and how to assign them to pages:

7.1 Subheader specific shortcodes

• [subheader_title]

  This is in fact only a frame for displaying the title. You can have an optional HTML content inside the shortcode in which you can use 3 other shortcodes along the usual ones.

  1. [own_title /]

     Displays the subheader title of the page (see Subheader Title option). If no subheader title is specified, the page title will be displayed.

  2. [category_title /]

     Displays the name of the category assigned to the page. This shortcode can be used in single post/news/portfolio pages.

  3. [matching_title /]

     Displays the subheader title of the closest matching blog, news or portfolio page. If the matching page has no subheader title, its page title will be displayed. This shortcode can be used in post/news/portfolio pages and category, tag and date pages as well. The closest matching page will be selected according to criteria set in Page Priority options.

• [subheader_teaser]

  Similarly to the previous shortcode this, too, is only a frame for displaying the title. You can have an optional HTML content inside the shortcode in which you can use 3 other shortcodes along the usual ones:

  1. [own_teaser /]

     Displays the subheader teaser of the page (see Subheader Teaser option). The subheader teaser of category and tag pages is the description of categories and tags assigned in WordPress. The theme will create the teasers of date and other special pages automatically. If you want to change them, you have to edit the language files. The teaser is always empty for single post/news/portfolio pages.

  2. [category_teaser /]

     Displays the description of the category assigned to the page. This shortcode can be used in single post/news/portfolio pages.

  3. [matching_teaser /]

     Displays the subheader teaser of the closest matching blog, news or portfolio page. This shortcode can be used in post/news/portfolio pages and category, tag and date pages as well. The closest matching page will be selected according to criteria set in Page Priority options.

• show_as_link

  Boolean that sets whether the title or teaser should appear as a plain text or a link. The link always points to the proper page; to itself in case of using the [own_title] and [own_teaser] shortcodes, to the category page in case of using the [category_title] and [category_teaser] shortcodes and to the matching page in case of using the [matching_title] and [matching_teaser] shortcodes.

7.2 Predefined Subheaders

The Elastic Theme contains a number of predefined subheaders created to meet the most frequent needs of users. You can refer to them on the admin pages of posts and pages similarly to your custom subheaders; thus if the predefined subheaders are to your liking you won't need to create custom ones.

In the following you can read about the contents of the predefined subheaders. You may find them useful in creating your custom subheaders as well. Predefined subheaders contain subheader specific shortcodes introduced in the previous section. To fully understand predefined subheaders we recommend you reading the previous section as well.

<div class="dottoro_subheader_own simple subheader_padding">
[subheader_title]<h2 class="subheader_title">[own_title /]</h2>[/subheader_title]
[subheader_teaser]<span class="subheader_teaser">[own_teaser /]</span>[/subheader_teaser]
</div>

<div class="dottoro_subheader_own simple subheader_padding">
[row]
	[col2]
		[subheader_title]<h2 class="subheader_title">[own_title /]</h2>[/subheader_title]
	[/col2]
	[col2]
		[subheader_teaser]<span class="subheader_teaser">[own_teaser /]</span>[/subheader_teaser]
	[/col2]
[/row]
</div>

<div class="dottoro_subheader_category simple subheader_padding">
[subheader_title]<h2 class="subheader_title">[category_title /]</h2>[/subheader_title]
[subheader_teaser]<span class="subheader_teaser">[category_teaser /]</span>[/subheader_teaser]
</div>

<div class="dottoro_subheader_category simple subheader_padding">
[row]
	[col2]
		[subheader_title]<h2 class="subheader_title">[category_title /]</h2>[/subheader_title]
	[/col2]
	[col2]
		[subheader_teaser]<span class="subheader_teaser">[category_teaser /]</span>[/subheader_teaser]
	[/col2]
[/row]
</div>

<div class="dottoro_subheader_matching simple subheader_padding">
[subheader_title]<h2 class="subheader_title">[matching_title /]</h2>[/subheader_title]
[subheader_teaser]<span class="subheader_teaser">[matching_teaser /]</span>[/subheader_teaser]
</div>

<div class="dottoro_subheader_matching simple subheader_padding">
[row]
	[col2]
		[subheader_title]<h2 class="subheader_title">[matching_title /]</h2>[/subheader_title]
	[/col2]
	[col2]
		[subheader_teaser]<span class="subheader_teaser">[matching_teaser /]</span>[/subheader_teaser]
	[/col2]
[/row]
</div>

7.3 Creating Subheaders

Steps:

Additional steps:

• With the 'Default padding' option you can set whether you want to insert space around the subheader content or not. If you need custom spacing, just turn this option off and use a wrapper HTML element with padding CSS property in your subheader content.
• With the 'Full Width' option you can set whether you want to create a full (100%) width subheader or not.
• You can set a background image to the subheader. To do this, use 'Background Image' settings below the content editor. You can set an image with the 'Set an Image' button. You can also modify its alignment and repetition.
  Note: this is a convenience feature. You can also set a background image in the subheader content.
• Similarly to posts and pages you can create an image gallery for subheaders as well (Gallery settings).

  In order to make the image gallery available for your visitors, you only have to insert one or more images into the content of the subheader with the Dottoro Gallery button. Clicking the thus inserted image will open an image viewer application, the Dottoro Gallery Viewer where your visitors can browse through your image gallery.

  For further information see the Galleries section.

7.4 Attaching subheaders to pages

8. Footer

In the Elastic Theme, the footer consists of two parts. You can place widgets in the upper and custom content (e.g. copyright and other notices) in the lower part of the footer.

You can set whether the widgets and copyright contents should be displayed in the footer or not (Theme Options » General » Footer » Footer type). Footers can be different on each page.

8.1 Widgets in the Footer

In Elastic Theme, you can have different widgets in the footer of each page. The theme contains a 'Footer' widget area. Widgets you drag to this widget area will be displayed on the footer of every page. You can make a different footer for each page with the Widget Area Wizard. You can add widgets to custom widget areas under Appearance » Widgets in WordPress admin panel. Then you will only have to specify which custom widget areas you would like to display in the footer. You can do this on the admin page of pages under 'Additional Footer Widget Area'. To customize the footers of post, category and tag pages use the 'Additional Footer Widget Area' settings under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings. Finally, you will find the footer settings for special pages (date, search, author, 404) under Theme Options » General » Special Pages.

8.2 Copyright and other notices on the Footer

The contents of the lower region of the footer can be edited under Theme Options » General » Footer » Footer Text the same way as the contents of your pages and posts. You can also use shortcodes.

The Elastic Theme supports a number of shortcodes to help you create the content of the footer:

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

9. Sidebar

9.1 Widgets on the Sidebar

The Elastic Theme provides efficient tools for displaying widgets on the sidebar and creating their layout. The theme provides a couple of predefined widget areas that are placed on the sidebar, but you can create custom widget areas as well. You can add widgets to custom widget areas under Appearance » Widgets in WordPress admin panel.

• Primary Sidebar

  This widget area is placed at the top of the sidebar on every page.

• Blog Sidebar

  This widget area is placed on the sidebar below the 'Primary Sidebar' widget area on blog pages (post list pages, single post pages, blog category, tag and date pages).

• News Sidebar

  This widget area is placed on the sidebar below the 'Primary Sidebar' widget area on news pages (news list pages, single news pages, news topic, tag and date pages).

• Portfolio Sidebar

  This widget area is placed on the sidebar below the 'Primary Sidebar' widget area on portfolio pages (portfolio list pages, single portfolio pages, portfolio category, tag and date pages).

You can create custom widget areas with the 'Widget Area Wizard'. With the wizard you can also edit the widgets' layout in a widget area, even the predefined ones.

Having done all this, you only have to decide which widget area to display on which page's sidebar. You can do this with the 'Additional Sidebar Widget Area' option on the edit page screen. If you would like to customize the sidebars of the post, category or tag pages, use the 'Additional Sidebar Widget Area' settings under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings. Finally, if you would like to customize the sidebars of special pages (date, search, author, 404), use the settings under Theme Options » General » Special Pages.

9.2 Width and alignment of the sidebar

Dottoro provides various page templates for its users Every page template allows you to set whether the sidebar should be shown on the default, left or the right side, or to turn it off. These options are located in the General Page Settings box on every page. Sidebars of special pages (date, search, author, 404) will always be displayed on the default side. The default position of the sidebar is right.

10. Widget Areas

Widget areas can be managed under Theme Options » Widget Areas. Here you will find both the predefined and custom widget areas. The predefined widget areas cannot be deleted but you can modify their properties; e.g. the layout of the widgets they contain.

Creating Widget Areas:

11. Widgets

Since our goal is to provide an extremely flexible theme for our users we improved the standard WordPress widgets; they now have more settings options than the original ones.

• The Theme provides a comprehensive post type support applying to widgets as well. For a number of widgets you can specify by which post type they should display results. Post type independent ('any') and 'auto' modes are also supported. When set to post type independent mode, the widgets will display posts from every post type; when set to auto mode, they will display results by the post type of the page (e.g. posts for blog pages, news items for news pages). There are pages that are not related to any post type (home, search, 404, etc.). If you set their widgets to 'auto', they will be displayed according to the settings specified in the Default Post Type settings.
• The improved WordPress widgets do not only provide support to post types; it also enables selecting the icons displayed with items in list type widgets. You can choose from various icons and you can also set their color. When the color of the icons is set to 'auto', the skin settings (style_skin.css file under skins/default) of the theme determines the color.

The following list contains a short description of the widgets introduced by the theme:

• Author Testimonial

  This widget will enable you to display information on the author of a post, news or portfolio item.

• Connects Menu

  With this widget your visitors can easily become familiar with your pages on the most frequently used websites, such as Facebook, Twitter, YouTube and Flicker. The widget also enables adding other websites. You can add websites with the following code (one website per line):

  [connect url="http:// ..." img="absolute image url"]

• Contact Form

  With this widget you can add a contact form to any of your pages, so your visitors could easily contact you.

• Contact Info

  This widget gives you the possibility to easily display your contact info - phone number, email address and post address.

• Flickr Photos

  This widget enables you to publish your or any other users' Flicker images and to arrange them according to various criteria. The whole-size images can be viewed with the help of Dottoro Gallery Viewer by simply clicking on the thumbnails.

• Google Maps

  This widget allows you to easily insert Google Maps into your pages.

• Latest Tweets

  This widget enables you to display your latest tweets by various criteria.

• Navigation Bar

  With the help of the Navigation Bar widget you can place a custom menu or a part of your primary menu on any of your pages. In case of the primary menu, you can decide whether you want to display the children and/or siblings of the current page, but you can also display the whole menu.

• Popular Posts

  This widget enables you to display your most popular posts based on the number of comments to them. You can of course display your news and portfolio items in a similar way.

• Recent Posts

  This widget has an improved WordPress version, and a brand new version fully developed by Dottoro. The new version contains a large number of extra settings the WordPress version lacks. This widget is for displaying your recent posts, news- and portfolio items according to different criteria. You can also set what data about the entries to display.

• Related Posts

  This widget enables you to display posts related to the post on a single blog, news or portfolio page. You can choose whether you want to relate to posts by categories or tags.

• Slideshow

  With this widget you can display slideshows on your pages. The default settings of the slideshows do not affect widgets thus you have to edit the size, thumbnail type and other properties of slideshows here. For further information, see the Slideshows section.

• Tabbed Widgets

  This widget is for displaying widgets with tabs. Just select a widget area that contains the widgets to be tabbed. It is allowed to specify the title, the alignment and the outlook of tabs as well. Read more about widget areas on the Widget Areas section.

12. Breadcrumb

You will find breadcrumb settings under Theme Options » General » Breadcrumb:

13. Shortcodes

Shortcodes are the most powerful tools of WordPress themes; they give you full authority over creating the contents of your pages. Elastic Theme supports over 90 shortcodes. These enable you to place a high variety of components (buttons, tables, tabs, tooltips, etc.), widget areas, widgets, slideshows, media galleries, videos and other content on your pages. You can also apply skins to the majority of our shortcodes. This feature enables you to customize the appearance of the displayed elements without bothering with codes and web programming.

Shortcodes in detail:

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 all column layout shortcodes, excluding the [row] shortcode.

Live example

Line Break

[br /]

This shortcode displays a line break.

Highlighted texts

[highlight]

This shortcode serves to highlight parts of a text.

Live example

Blockquotes

[blockquote]

With this shortcode you can create block quotations.

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.

Live example

Drop Caps

[dropcap]

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

Live example

Drop-Cap Box

[dropcap_box]

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

Live example

Lists

[list]

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

Live example

Frames

[frame]

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

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

Font Icons

[icon]

With this shortcode you can display font icons. Elastic 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.

Live example

Buttons

[button]

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

Live example

Image Frame

[image_frame]

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

Live example

Links

[link]

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

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.

Live example

Animated scrolling

[top], [scroll_to]

The scroll_to shortcode displays a link that allows scrolling to a location in a page with animation. The top shortcode works the same way, the only difference is the link text is 'Top' by default.

Live example

FAQ

[faq], [question], [answer]

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

Live example

Boxes

[box], [box_title], [box_content]

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

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.

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 users with permission to publish posts.

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

Tabset

[tabset], [tab_labels], [tab_label], [tab_contents], [tab_content]

With these shortcodes you can display tabbed contents.

Live example

Toggle

[toggle_group], [toggle], [toggle_title], [toggle_title_closed], [toggle_title_open], [toggle_content]

With these shortcodes you can display collapsible contents. The [toggle_title], [toggle_title_open], [toggle_title_closed] and [toggle_content] shortcodes display the title and the collapsible content of a toggle and can only be used within a [toggle] shortcode. Clicking on the title expands and collapses the content.
The difference between the [toggle_title], [toggle_title_open] and [toggle_title_closed] shortcodes is that the content displayed by the [toggle_title] shortcode is always visible while the [toggle_title_open] shortcode displays its content only when the toggle is open, the [toggle_title_close] shortcode only when the toggle is closed.
The [toggle_title_open] and [toggle_title_closed] shortcodes are mostly useful if you want to display different titles when the toggle is open and closed.

A single toggle may have multiple collapsible contents and titles. In that case, clicking on any title opens or closes all collapsible contents. You can see how it works via the Live Example link below.

Toggles can be arranged in groups. Use the 'group' attribute of toggles to arrange them in groups and use the toggle_group shortcode if you want to change the default settings of a group (the minimum and maximum number of open toggles).

Live example

Tooltip

[tooltip]

Creates a tooltip.

Live example

Table

[table]

With this shortcode you can display attractive tables.

Live example

Testimonial

[testimonial]

With this shortcode you can display user testimonials.

Live example

Bubble

[bubble]

With this shortcode you can display rounded boxes or bubbles.

Live example

Widget shortcodes

With this shortcodes you can display widgets in the contents of pages and subheaders. This is only a convenience feature really because you can create custom widget areas in the Elastic Theme and publish them anywhere in the contents of pages and subheaders with the [widget_area] shortcode. Thus you can not only publish widgets in the contents available with shortcodes but any widget you want.

• Author Info Widget

  [author_info_widget]

  With this shortcode you can display an Author Testimonial widget.

  Attributes:
  show_avatar	Show avatar? ( true | false )
  show_biography	Show user biography? ( true | false )
  show_fullname	Show user full name? ( true | false )
  show_nickname	Show user nick name? ( true | false )
  show_website	Show user website? ( true | false )
  title	The title of the widget.
  bio_length	The length of biography, in characters.
  user_id	The ID of the user you want to display.
  show_headers	Set whether to add labels to data. (e.g. 'Fullname :' John Smith)
  layout	Set the layout of author testimonial. ( list | box ). Default: 'box'.

  Live example

• Connects Menu Widget

  [connects_menu_widget], [connect]

  With the [connects_menu_widget] shortcode you can display a Connects Menu widget. Use the [connect] shortcode within the [connects_menu_widget] shortcode to add custom websites to the widget.

  The following attributes are supported by the [connects_menu_widget] shortcode
  email	Your email address
  rss_show	Display RSS icon ( true | false )
  skin	Skin of the connect icons (available skins). Skins are different color schemes that provide attractive appearance.
  title	The title of the widget.
  title_as_tooltip	Boolean that sets whether the title text of social icons should appear as a tooltip or not. [true | false]
  social urls*	URL of page accounts. For example: youtube_url="..." twitter_url facebook_url flickr_url linkedin_url youtube_url google_url vimeo_url delicious_url digg_url dribbble_url technorati_url

  The following attributes are supported by the [connect] shortcode
  img	URL of the image to display in the connects menu
  url	URL of the target website

  Live example

• Contact Form Widget

  [contact_form_widget] 

  With this shortcode you can display a Contact Form widget.

  Attributes:
  akismet	Akismet filtering ( true | false ).
  bcc	Bcc (hidden recipients).
  cc	CC (additional recipients).
  email	Email address.
  show_subject	Show subject field ( true | false ).
  subject_prefix	Subject prefix.
  submit_button_text	Text of the submit button.
  thank_you_msg	Thank You message.
  use_captcha	Enable captcha spam filtering (true | false). Default is false.

  Live example

• Flickr Photos Widget

  [flickr_photos_widget]

  With this shortcode you can display a Flickr Photos widget.

  Attributes:
  image_size	Image Size ( square | thumbnail | small | medium | large ).
  number_of_images	Number of images to show (1-20).
  thumbnail_overlay	The identifier of the overlay that should appear over the Flickr photos. Use the value of 'none', if no overlay is needed. If the overlay is not specified, the built-in overlay 'Gallery' will be used. More on Overlays.
  use_dottoro_gallery	Enable this option if you want the Flickr photos to be shown in the Dottoro Gallery Viewer (true | false). Default is true. This option must be enabled if the Dottoro Gallery Viewer should be open from the thumbnail overlays (see thumbnail_overlay attribute above).
  set_id	Set ID.
  user_id	Flickr User Id.
  tags	Tags (Comma separated list, no spaces).
  title	The title of the widget.
  image_width	The width of the thumbnail images.
  image_height	The height of the thumbnail images.
  show_image_frame	Set whether to show a frame around the thumbnails or not.
  refresh_interval	Specifies how often, in seconds, the widget should check Flickr for new images. It is not recommended to set the interval less than 3600, because the image synchronization process can take some time to complete. Default: 43200. (12 hours)

  Live example

• Latest Tweets Widget

  [tweets_widget] 

  With this shortcode you can display a Latest Tweets widget.

  Attributes:
  avatar	Show user avatars before tweets ( true | false )?
  exclude_replies	Hide @ replies ( true | false )?
  hide_sender_name	Hide default sender name ( true | false )?
  link_title_to_twitter	Link title to twitter account ( true | false )?
  list_icon	Specifies an icon for the tweets. Only has effect if the avatar option (see above) is false. For a complete list of icons, see Font Icons.
  list_iconset	Specifies the icon set that contains the tweet icon (see list_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.
  list_icon_color	Color of the tweet icon. For the supported values, see CSS color property. The list_icon_color_type attribute must be set to 'custom' for this attribute.
  list_icon_color_type	The color type of the tweet icon ( auto | custom ). Default: auto. The 'auto' value means that the color of the icon is the current font color, the 'custom' value means that the color of the icon is specified with the list_icon_color attribute.
  interval	Refresh interval, in minutes.
  number_of_tweets	Number of tweets to show (at most).
  open_in_new_window	Open links in new window ( true | false )?
  show_date	Show Tweet date ( true | false )?
  title	The title of the widget.
  screen_name	Your Twitter name.

  Live example

• Navigation Bar Widget

  [navigation_bar_widget] 

  With this shortcode you can display a Navigation Bar widget.

  Attributes:
  list_icon	Specifies an icon for the list items. For a complete list of icons, see Font Icons.
  list_iconset	Specifies the icon set that contains the list icon (see list_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.
  list_icon_color	Color of the list icon. For the supported values, see CSS color property. The list_icon_color_type attribute must be set to 'custom' for this attribute.
  list_icon_color_type	The color type of the list icon ( auto | anchor | custom ). Default: auto. The 'auto' value means that the color of the icon is the current font color. The 'anchor' value means that the color of the icon is the current link color. The 'custom' value means that the color of the icon is specified with the list_icon_color attribute.
  show_all	Sets whether the widget should display the whole menu or only the part of the menu determined by the show_children, show_descendants and show_siblings options. Possible values: true | false. Default is true.
  show_children	This option only has effect only if the show_all and show_descendants options are turned off. Sets whether the widget should display the direct child menu items of the current page (where the menu appears on). If the current page is not in the menu or the current page has no child nodes in the menu, then no menu items will be displayed by this option. Possible values: true | false. Default is false.
  show_descendants	This option only has effect only if the show_all option is turned off. Sets whether the widget should display the descendant menu items of the current page (where the menu appears on). If the current page is not in the menu or the current page has no child nodes in the menu, then no menu items will be displayed by this option. Possible values: true | false. Default is false.
  show_siblings	This option only has effect only if the show_all option is turned off. Sets whether the widget should display the sibling menu items of the current page (where the menu appears on) or only the current page. If the current page is not in the menu, then no menu items will be displayed by this option. Possible values: true | false. Default is false.
  title	The title of the widget.

  Live example

• Popular Posts Widget

  [popular_posts_widget] 

  With this shortcode you can display a Popular Posts widget.

  Attributes:
  category__in	The ID's of categories from which you'd like to display the most popular posts. (comma separated list)
  comment_count	Display posts that have at least the specified number of comments.
  excerpt_length	Set the length of excerpts in characters.
  list_icon	Specifies an icon for the list items. For a complete list of icons, see Font Icons.
  list_iconset	Specifies the icon set that contains the list icon (see list_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.
  list_icon_color	Color of the list icon. For the supported values, see CSS color property. The list_icon_color_type attribute must be set to 'custom' for this attribute.
  list_icon_color_type	The color type of the list icon ( auto | anchor | custom ). Default: auto. The 'auto' value means that the color of the icon is the current font color. The 'anchor' value means that the color of the icon is the current link color. The 'custom' value means that the color of the icon is specified with the list_icon_color attribute.
  newer_than	Display posts that are newer than (number of days).
  number_of_posts	Number of posts to show (at most).
  post_not_in	The ID's of posts you'd like to leave out. (comma separated list)
  post_type	Set the desired post type, but you can also set it to post type independent mode (auto).
  posts_offset	Number of posts to displace or pass over.
  show_excerpt	Boolean that sets whether the excerpt should be visible or not (true | false). Default: true.
  show_thumb	Display post thumbnails ( true | false )? Default: true.
  thumb_height	The height of thumbnail images, in pixels. Default: 50.
  thumb_width	The width of thumbnail images, in pixels. Default: 50.
  title	The title of the widget.

  Live example

• Recent Posts Widget

  [recent_posts_widget] 

  With this shortcode you can display a Recent Posts widget.

  Attributes:
  list_icon	Specifies an icon for the list items. For a complete list of icons, see Font Icons.
  list_iconset	Specifies the icon set that contains the list icon (see list_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.
  list_icon_color	Color of the list icon. For the supported values, see CSS color property. The list_icon_color_type attribute must be set to 'custom' for this attribute.
  list_icon_color_type	The color type of the list icon ( auto | anchor | custom ). Default: auto. The 'auto' value means that the color of the icon is the current font color. The 'anchor' value means that the color of the icon is the current link color. The 'custom' value means that the color of the icon is specified with the list_icon_color attribute.
  number_of_posts	Number of posts to show (at most).
  posts_offset	Number of posts to displace or pass over.
  order_by	Order by ( date | modified | title )
  same_category	Display posts that have categories common with of the current one ( true | false )? Default: false.
  same_tags	Display posts that have tags common with the current one ( true | false )? Default: false.
  show_excerpt	Boolean that sets whether the excerpt should be visible or not (true | false). Default: true.
  show_thumb	Display post thumbnails ( true | false )? Default: true.
  thumb_height	The height of thumbnail images, in pixels. Default: 50.
  thumb_width	The width of thumbnail images, in pixels. Default: 50.
  title	The title of the widget.

  Live example

• Related Content Widget

  [related_content_widget] 

  With this shortcode you can display a Related Content widget.

  Attributes:
  list_icon	Specifies an icon for the list items. For a complete list of icons, see Font Icons.
  list_iconset	Specifies the icon set that contains the list icon (see list_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.
  list_icon_color	Color of the list icon. For the supported values, see CSS color property. The list_icon_color_type attribute must be set to 'custom' for this attribute.
  list_icon_color_type	The color type of the list icon ( auto | anchor | custom ). Default: auto. The 'auto' value means that the color of the icon is the current font color. The 'anchor' value means that the color of the icon is the current link color. The 'custom' value means that the color of the icon is specified with the list_icon_color attribute.
  number_of_posts	Number of posts to show (at most).
  posts_offset	Number of posts to displace or pass over.
  order_by	Order by ( date | modified | title )
  same_category	Display posts that have categories common with of the current one ( true | false )? Default: true.
  same_tags	Display posts that have tags common with the current one ( true | false )? Default: false.
  show_excerpt	Boolean that sets whether the excerpt should be visible or not (true | false). Default: true.
  show_thumb	Display post thumbnails ( true | false )? Default: true.
  thumb_height	The height of thumbnail images, in pixels. Default: 50.
  thumb_width	The width of thumbnail images, in pixels. Default: 50.
  title	The title of the widget.

  Live example

Widget area

[widget_area]

In Elastic theme, you can create custom widget areas. You can display them in the subheader and the content with the [widget_area] shortcode. For further information, please see the Widget Areas section.

Post List

[post_list]

Displays a list of blog posts.

Live example

News List

[news_list]

Displays a list of news items.

Live example

Portfolio List

[portfolio_list]

Displays a list of portfolio items.

Live example

Breadcrumb

[breadcrumb]

This shortcode serves to highlight parts of a text.

Galleries

[gallery]

The [gallery] shortcode is used in a Post or Page to display a thumbnail gallery of images attached to that post. In WordPress, you can upload images, videos and other media for every post, made visible by using the [gallery] shortcode. In Elastic Theme, clicking the gallery images will open the Dottoro Gallery Viewer displaying the images in an attractive manner. Read more on the use of the [gallery] on the Gallery Shortcode page.

Live example

[dottoro_gallery]

The WordPress gallery is not identical to the Dottoro Gallery. In the Elastic Theme, you can create galleries for every post and page (see Gallery Settings). You can edit this gallery more flexible than the standard WordPress Gallery; e.g. you can set the order of images. You can make the gallery available to your users in more ways (read more in the Galleries section). One way is using the [dottoro_gallery] shortcode. It allows you to display any HTML content that opens a gallery or galleries in the viewer. Additionally, with this shortcode, you can create custom galleries as well.

Examples:

This example shows how to create a link that opens the gallery of the current page (that can be managed under Gallery Settings on the Edit Page/Post screen):

[dottoro_gallery value="Show the gallery"/]

This example is the same as the previous one, but it also adds an image to the gallery. Clicking on the link opens the viewer that will start with this image.

[dottoro_gallery value="Show the gallery" href="http://www.example.com/myimage.jpg"/]

This example is the same as the first one, but it creates a heading element instead of a link.

[dottoro_gallery for="example"/]
<h1 id="example">Show the gallery</h1>

This example defines two different galleries (fruits, friends) on the same page. The fruits gallery contains three, the friends gallery two images. Clicking on the 'Show Fruits' link opens the fruits gallery, clicking on the 'jennifer' image opens the friends gallery.

[dottoro_gallery group="fruits" href="http://www.example.com/banana.jpg"/]
[dottoro_gallery group="fruits" href="http://www.example.com/pear.jpg" value="Show Fruits"/]
[dottoro_gallery group="fruits" href="http://www.example.com/peach.jpg"/]

[dottoro_gallery group="friends" href="http://www.example.com/peter.jpg"/]
[dottoro_gallery group="friends" for="img_jen" href="http://www.example.com/jennifer.jpg"/]
<img id="img_jen" src=" http://www.example.com/jennifer.jpg"/>

Live example

Slideshow

[slideshow]

Elastic Theme provides broad support for creating and displaying slideshows. You can display slideshows with the SlideShow Widget and with the [slideshow] shortcode. For further information, please see the Slideshows section.

Live example

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 document (on post, news, portfolio items 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)

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

[layer start="opacity:0" on="opacity:1" style="left:0, top:0"]Layer content[/layer]

Example 2

[layer start="opacity:0" on="opacity:1" starttime="0" startduration="2000" style="left:0, top:0"]Layer content[/layer]

Example 3

[layer start="left:0, top:0" on="left: 100, top: 50"]Layer content[/layer]

Example 4

[layer start="opacity:0, left:'0%'" on="opacity:1, left: '50%'" end="opacity:0, left:'100%'" style="top:'0px'"]Layer content[/layer]

Example 5

[layer start="top:'100%'" on="top:'0%'" style="left:0px"]Layer content[/layer]

Example 6

[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

[layer start="clip:{right:0}" on="clip:{right:'auto'}" style="left:0, top:0"]Layer content[/layer]

Example 8

[layer start="clip:{left:'100%W'}" on="clip:{left:'auto'}" style="left:0, top:0"]Layer content[/layer]

Example 9

[layer start="clip:{left:-1}" on="clip:{left:'auto'}" style="left:0, top:0"]Layer content[/layer]

Example 10

[layer start="clip:{right:0, bottom:0}" on="clip:{right:'auto', bottom:'auto'}" style="left:0, top:0"]Layer content[/layer]

Example 11

[layer start="trafo:{moveX:0}" on="trafo:{moveX:100}" style="left:0, top:0"]content[/layer]

Example 12

[layer start="trafo:{moveX:0, moveY:0}" on="trafo:{moveX:100, moveY:100}" style="left:0, top:0"]content[/layer]

Example 13

[layer start="trafo:{rotate:3.14}" on="trafo:{rotate:0}" style="left:0, top:0"]content[/layer]

Example 14

[layer start="trafo:{rotate:3.14, originX:'0%', originY:'0%'}" on="trafo:{rotate:0}" style="left:0, top:0"]content[/layer]

Example 15

[layer start="trafo:{scaleX:0}" on="trafo:{scaleX:1}" style="left:0, top:0"]content[/layer]

Example 16

[layer start="trafo:{scaleX:0, originX:'100%', originY:'100%'}" on="trafo:{scaleX:1}" style="left:0, top:0"]content[/layer]

Example 17

[layer start="trafo:{scaleX:0, scaleY:0}" on="trafo:{scaleX:1, scaleY:1}" style="left:0, top:0"]content[/layer]

Example 18

[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

Flash Slideshow

[flash_slideshow]

With this shortcode you can place animations displayed by the Dottoro Flash Slideshow in the contents of your pages. You can use the shortcode for displaying both slideshows created under 'Flash Slideshows' and custom XML files.

For further information, see the Slides and Slideshows section and the documentation of the Dottoro Flash Slideshow application.

Video

[video]

With this shortcode you can display videos on pages.

Live example

Gray Image

[grayimage]

With this shortcode you can display gray images. Just embed an image tag into a grayimage shortcode and the image will appear grayed out. The color image becomes visible when the mouse hovers over the gray image.

For example:

[grayimage]<img src="myImage.jpg" width="200" height="200" />[/grayimage]

Live example

Google Maps

[google_maps]

With this shortcode you can insert Google Maps into the contents of your pages.

For example:

[google_maps latitude="40.777203" longitude="-73.961475" zoom="17" marker="true" info="My Info" /]

You can embed the [marker_info] shortcode within the [google_maps] shortcode to display more complex content within the marker's bubble.

For example:

[google_maps latitude="40.777203" longitude="-73.961475" zoom="17" marker="true"]
[marker_info]Any HTML content[/marker_info]
[/google_maps]

Footer shortcodes

Along with the subheaders and contents of pages, you can also use shortcodes in the content of the lower region of footers (see ' Copyright and other notices on Footer'). Because usually there is not much written content in this region (only copyright information, date), there are shortcodes created to be used here but of course you can use them in subheaders and contents as well. You can read about these shortcodes in this section.

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

Live example

Subheader shortcodes

Subheaders often contain information about the page (title, teaser). These information can be displayed by shortcodes; thus you will not have to create subheaders for every page. The shortcodes can of course be used in the contents as well but you will most often need them in the subheaders.

These shortcodes are the following:

[subheader_title], [own_title], [category_title], [matching_title]
[subheader_teaser], [own_ teaser], [category_ teaser], [matching_ teaser]

Do Action

[do_action]

Executes a hook action. This shortcode works the same as the WordPress do_action function.
Functions can be hooked on to an action with the add_action function. The [do_action] shortcode allows you to call the hooked PHP functions from anywhere where you can use shortcodes. So, you have the possibility to display dynamically generated content in posts and pages.

Attributes

Examples

add_action ('welcome_text', 'display_welcome_text');
function display_welcome_text () {
	echo ('Hi User!');
}

[do_action action="welcome_text" /]

function display_welcome_text () {
	echo ('<h1 style="color: red;">Hi User!</h1>');
}

If you want, you can pass arguments to the hooked function. If the hooked function seems like this:

add_action ('welcome_text', 'display_welcome_text');
function display_welcome_text ($args) {
	$tag = isset ($args['tag']) ? $args['tag'] : 'h1';
	$color = isset ($args['color']) ? $args['color'] : 'red';

	echo ($tag .' style="color: '. $color .';">Hi User!');
}

[do_action action="welcome_text" tag="h2" color="blue" /]

[do_action action="welcome_text" tag="h1" color="green" /]

If

[if]

Displays its content only if the given condition is true.
With the help of the meta_key and meta_value attributes, you can display some content depending on the value of a post meta (such as a custom field). If you need a more complex condition, use the 'function' attribute of the shortcode.

Examples

Example 1

This [if] shortcode only displays its content if the value of the 'my_field' custom field is 'show':

[if meta_key="my_field" meta_value="show"]Hello[/if]

Example 2

This [if] shortcode only displays its content if the post format is 'link':

[if function="show_on_link_format"]Visible in link post format[/if]

function show_on_link_format () {	
	if ( has_post_format( 'link' ) ) {
		return true;
	}
	return false;
}

Example 3

The first [if] shortcode only displays its content if the post format is 'link', the second one only if the post format is 'image'. The 'format' custom attribute will be passed to the filter_by_post_format method.

[if function="filter_by_post_format" format="link"]Visible in link post format[/if]
[if function="filter_by_post_format" format="image"]Visible in image post format[/if]

function filter_by_post_format ($args) {	
	if ( has_post_format( $args['format'] ) ) {
		return true;
	}
	return false;
}

Shortcodes in alphabetical order

• admin_note
• breadcrumb
• answer
• author_info_widget
• blockquote
• box
• box_bar
• box_button
• box_content (boxes), box_content (box bars)
• box_title
• bubble
• button
• category_teaser
• category_title
• clear
• col
• col2
• col23
• col25
• col3
• col34
• col35
• col4
• col45
• col5
• col56
• col6
• connect
• connects_menu_widget
• contact_form_widget
• copyright
• divider
• divider_top
• do_action
• dottoro_gallery
• download
• dropcap
• dropcap_box
• faq
• flash_slideshow
• flickr_photos_widget
• frame
• gallery
• gallery_button
• grayimage
• google_maps
• highlight
• icon
• image_description
• image_frame
• image_title
• info
• layer
• link
• list
• matching_teaser
• matching_title
• message
• navigation_bar_widget
• next_post_link
• news_list
• notice
• own_teaser
• own_title
• popular_posts_widget
• portfolio_list
• post_article
• post_author
• post_body
• post_category
• post_comments
• post_comments_num
• post_content
• post_date
• post_edit_link
• post_excerpt_tip
• post_footer
• post_header
• post_list
• post_meta
• post_pagination
• post_read_more
• post_tags
• post_thumbnail
• post_title
• post_type
• post_visit_site
• previous_post_link
• protected
• pullquote
• question
• read_more_button
• recent_posts_widget
• related_content_widget
• row
• rss
• scroll_to
• slideshow
• subheader_teaser
• subheader_title
• tab_content
• tab_contents
• tab_label
• tab_labels
• table
• tabset
• testimonial
• theme-link
• the-year
• toggle
• toggle_content
• toggle_group
• toggle_title
• toggle_title_open
• toggle_title_closed
• tooltip
• tooltip_content
• tooltip_over
• top
• tweets_widget
• video
• visit_site_button
• warning
• widget_area
• wp-link

Nested Shortcodes

You can use shortcodes within shortcodes in the Elastic theme. So for example the following code snippet displays a three-column layout, a button in the first column, a post list in the second one and a slideshow in the third one:

[row]
	[col3]
		[button href="#" skin="sand" size="medium"]
			[icon icon="users" /]Users
		[/button]
	[/col3]
	[col3]
		[post_list
			datas_to_show="title, preview, read_more"
			posts_per_page="6"
			columns_num="1"
		/]
	[/col3]
	[col3]
		[slideshow name='Home' /] 
	[/col3]
[/row]

Sometimes the need arises to use the same shortcode within itself. For example when you want to use tabs in tabs, or toggles in toggles, or a two-column layout within a two-column layout. Unfortunately WordPress doesn't allow that, so for example the followings are invalid:

[foo]
	[foo]
	[/foo]
[/foo]

[row]
	[col2]
		content ...
		[row]
			[col2]
				content ...
			[/col2]
			[col2]
				content ...
			[/col2]
		[/row]
		content ...
	[/col2]
	[col2]
		content ...
	[/col2]
[/row]

Elastic theme provides a solution to this issue. Just add a plus sign to the beginning of the shortcode's name at each nested level and your are done:

[foo]
	[+foo]
		[++foo]
		[/++foo]
	[/+foo]
[/foo]

[row]
	[col2]
		content ...
		[+row]
			[+col2]
				content ...
			[/+col2]
			[+col2]
				content ...
			[/+col2]
		[/+row]
		content ...
	[/col2]
	[col2]
		content ...
	[/col2]
[/row]

Please note that the plus sign can only be used in the right context:

[+foo]
[/+foo]

[foo1]
[+foo2]
[/+foo2]
[/foo1]

[foo]
[++foo]
[/++foo]
[/foo]

[row]
	[col2]
		content ...
		[+row]
			[+col3]
				content ...
			[/+col3]
			[+col3]
				content ...
			[/+col3]
			[+col3]
				content ...
			[/+col3]
		[/+row]
		content ...
	[/col2]
	[col2]
		content ...
		[+row]
			[col3]
				content ...
			[/col3]
			[col3]
				content ...
			[/col3]
			[col3]
				content ...
			[/col3]
		[/+row]
		content ...
	[/col2]
[/row]

14. Slides and Slideshows

14.1 Creating Slides

Adding layers (captions) to slides

For example:

[layer]Some text[/layer]
[layer style="top:20px;left:100px"]<a href="#">Link</a>[/layer]
[layer start="top:20,left:10" on="top:0,left:10" starttime="600"]<img src="myImage.jpg" />[/layer]
[layer start="right:30,bottom:50;" on="right:0,bottom:10" end="right:-30,bottom:-50"]text[/layer]

14.2 Creating Slideshows

14.3 How to add Slideshows to your pages

14.4 Flash Slideshows

The automatically created XML files cannot take advantage of all the features of the Dottoro Flash Slideshow. If you want more impressive image transition effects, you have to modify the content of the files under 'Flash Slideshows'. You can also use Dottoro Flash Slideshow to create your very own XML files.

15. Galleries

In WordPress, there is an image gallery to every page and post containing the images uploaded to them. These galleries are unfortunately not very flexible. One image can belong to only one gallery and it is rather difficult to modify the order of images.

This is why we created the Dottoro Gallery. There is a 'Gallery Settings' option box in the theme for every page and post that serves for creating galleries. The Dottoro Gallery is fully customizable, independently from the content of the page or post and from the WordPress gallery of the page. Here you can freely arrange the images and have the option of easily copying the images in the WordPress gallery to the Dottoro Gallery ('Import Images from WordPress Gallery' button).

• Autoplay

  Here you can set whether the gallery should automatically change media or not. The 'default' means that this value will be taken from Theme Options » General » Gallery Settings.

• Autoplay interval

  The interval (in seconds) on how often to change media. The default interval is specified under Theme Options » General » Gallery Settings. If you want to use other interval, you can set it here.

• If you set a thumbnail for a single blog post, news or portfolio item, clicking on it will open the gallery.
• On portfolio list pages, you can specify whether clicking the thumbnails should open the gallery or the portfolio item page. You can also set the gallery to display only the gallery images of the selected portfolio item or the gallery images of all the items on the portfolio list page.
• The Dottoro Gallery Button is an additional button on the toolbar above the standard WordPress content editor. If you place an image in a page's content with the Dottoro Gallery Button, clicking the image will open the Dottoro Gallery.
• Finally, with the [dottoro_gallery] shortcode you can display any HTML content on the page pointing to its gallery, but you can also create galleries with it. For further information please see the [dottoro_gallery] shortcode.

The images in the Dottoro Gallery will be displayed by a JavaScript image viewer applicaton, the Dottoro Gallery Viewer. To enhance the look of you website, the image transitions are animated.

16. Overlays

Overlays make it possible to display any HTML content over post thumbnails and images. You can display image titles and descriptions, post meta data (titles, teasers, categories, etc.), buttons that open the gallery viewer and much 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. An overlay behaves actually like a slide in a slideshow. 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.

• 16.1 Displaying Overlays
• 16.2 Built-in Overlays
• 16.3 Creating Overlays
• 16.4 Overlay Specific Shortcodes

16.1 Displaying Overlays

There are several options to display overlays in the theme:

• The Thumbnail Overlay option under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings allows you to select an overlay to appear over the post thumbnail on single pages.
• This settings can be overridden for each single post with the Thumbnail Overlay option on the post page.
• With the Thumbnail Overlay option, it is also possible to set an overlay to appear over the post thumbnails on portfolio pages.
• The overlay attribute of the dottoro_gallery shortcode allows you to set an overlay that should appear over the content of the shortcode. So you have the possibility to display an overlay over any HTML content not just images.
• The Thumbnail Overlay option of the Flickr Photos Widget allows you to set an overlay that should appear over the Flickr photos

16.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 built-in overlays can be viewed under Overlays » Built-in Overlays. Overlays with a name starting with 'Post' are made for post thumbnails, the others can be used over any image on the site. As you can see, each overlay contains a list of layers.

• The first layer displays a semi-transparent gray background with a fade in-out effect in each overlay.
• The last layer displays a gallery button (and a read more and visit site buttons in post overlays) in each overlay.
• The other layers display image and post titles and descriptions.

• Every layer is absolute positioned. For example, if you take a look at the first layer of the Gallery overlay, you will see that its left, top, right and bottom positions are zero so it fills the whole overlay. And since its background color is black (#000), start opacity 0 and the 'on' opacity is 0.5, it will display a black (that seems to be gray) semi-transparent background with a fade in-out effect.
• If you take a look again at the first layer you will notice an allow_empty="true" attribute. Empty layers (layers without content) are not displayed by default, but with the allow_empty attribute you can change this behavior. Since this layer has no content but needs to be displayed, the allow_empty attribute must be set to true.
• The second layer in the Gallery overlay displays a button (gallery_button shortcode) that opens the gallery viewer. As you can see its 'required' 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. If this overlay should appear over a post thumbnail and the post has no gallery, the gallery_button shortcode does not display anything. That's why the second layer won't be displayed (empty layers are displayed only if their allow_empty attribute is set to true). Since this overlay has only one required layer, if the post has no gallery, the overlay will not appear.
• Another important thing in the second layer is the '-50%W' and '-50%H' values of the marginLeft and marginTop CSS properties. The value of the 'start', 'on' and 'end' attributes can contain a comma separated list of CSS property-value pairs in JavaScript syntax. It means that the JavaScript CSS property names must be used (camelcase names, e.g. marginLeft instead of margin-left) and string values (such as '10px' and '20%') must be quoted.

  But what do the '-50%W' and '-50%H' values mean?
  The %W and %H are special length units supported by the layer shortcode. The W identifies the width, the H identifies the height of the layer. 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 it is needed?
  Unfortunatelly, CSS does not make it easy to center an absolute positioned element within its parent element. If the left and top CSS properties of an element are set to '50%', then the top-left corner of the element will be placed in the middle of its parent element. But what can you do if you want the center point of an element to be placed in the middle of its parent element? If you know the exact width and height of the element (let's say 200 pixels), then set its margin-left and margin-top CSS property to the negative half width and height (-100px). If you don't know the size of the element, you need to use JavaScript to get the width and height and to set the margins dynamically (the margin-left: 50% sets the left margin to the half width of the parent element not the half width of the current element).
  
  That's why it was necessary to extend the list of CSS length units with the %W and %H units. Since the left and top positions of the second layer is set to '50%' and the marginLeft and marginTop properties are set to '-50%W' and '-50%H' in the 'on' attribute, the layer will always be centered in the overlay regardless of the size of the layer. And since the marginLeft property is set to '-50%W' and the marginTop property is set to 0 in the 'start' attribute, the show animation moves the layer upward.

• The overlay 'Gallery - follow mouse' is very similar to the overlay 'Gallery'. The first layer is the same, but the second layer is different in the two overlay. The second layer displays a gallery button in both overlay, but its animation is different. The start_left, start_top, start_right and start_bottom attributes allow you to specify the start state of a layer depending on the direction the mouse pointer has been moved into the area of the overlay. Similarly, the end_left, end_top, end_right and end_bottom attributes allow you to specify the end state of a layer depending on the direction the mouse pointer has been moved out of the area of the overlay. The end, end_left, end_top, etc. attributes are not specified in this layer because they don't need to be specified if they are the same as the start, start_left, etc. attributes. The gallery button in this overlay moves in the same direction as the mouse pointer when it appears and disappears.
• Another attribute we need to talk about is the breakanim attribute. Every layer has a show and hide animation. The show animations of layers start (maybe with some delay - depending on the starttime attribute of the layer) when the mouse pointer moves into the area of the overlay and the hide animations start when the mouse pointer moves out of the area of the overlay. 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 the breakanim attribute. If the breakanim attribute is set to true, the show animation stops and the hide animation starts.
  Since the breakanim attribue is set to true in the second layer of the overlay 'Gallery - follow mouse', the gallery button moves out of the overlay in the same direction as the mouse pointer did even if the show animation of layer is running when the mouse leaves the area of the overlay element.
• Finally, the last thing worth mentioning is the 'Post Complex' overlay. It is quite similar to the overlay 'Post title, excerpt, gallery and read more'. Both display the post title and excerpt at the top, the gallery, read more and visit site buttons at the bottom. But there is an important difference. If the post title and excerpt are turned off (the Hover meta info option on portfolio pages allows you to set what meta information should be displayed when hovering over thumbnails), the 'Post Complex' overlay displays the gallery, read more and visit site buttons vertically centered not at the bottom. This is why it was necessary to use the do_action shortcode, because this feature requires some PHP coding.

16.3 Creating Overlays

Overlays can be created and managed under the Overlays menu in WordPress admin panel. 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:

• select a built-in overlay that fits your needs most (Overlays » Built-in Overlays)
• copy its content to the clipboard
• go to Overlays » Add New
• give your new overlay a name (similar to post titles)
• paste the clipboard content into the content editor below the title field
• make the required modifications in the content of your overlay
• finally, click Publish

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.

It is also possible to change some properties of the overlay. You can find a 'General Overlay Settings' box below the WordPress content editor. Here you can customize further your overlay.

16.4 Overlay Specific Shortcodes

These shortcodes can only be used in overlays and display image titles and descriptions furthermore buttons that open the gallery viewer or a post page.

• [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 not 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.

• [gallery_button]

  Displays a button that opens the Gallery Viewer. If the overlay appears over a post thumbnail and the post has no Dottoro gallery, the button will not be displayed.

• [read_more_button]

  Displays a button that opens the post. This shortcode can only be used over post thumbnails.

  Attributes:
  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 the External URL option of the portfolio post. If the external URL is not specified, the button will not be displayed.
  This shortcode can only be used over portfolio post thumbnails.

  Attributes:
  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.

17. General Theme Settings

The theme supports a high number of setting options. Some of them apply to post types (see Post Type specific settings), to posts (see Settings on single post/news/portfolio pages), to pages (see Page Templates and Pages) and some to the whole website. The settings in this section apply to the whole site.

You will find these options under Theme Options » General » General:

18. Export / Import settings

Our demo content was created the exact same way.

How to migrate post thumbnails to Elastic theme

19. Localization

Elastic Theme is translation ready, meaning it comes with english po languages files.
There are one language file for admin and one for front-end pages. So, for example, if you only want to translate public pages, you only need to translate the front-end po file.

How to translate:

Steps:

• Create a new directory called languages in the root folder of your child theme
• Create the following two directories under the newly created languages directory: admin and public
• Copy the po files from Elastic theme to your child theme:
  

  Source file: dottoro/admin/languages/default.po
  Destination file: dottoro_child/languages/admin/default.po

  Source file: dottoro/common/languages/default.po
  Destination file: dottoro_child/languages/public/default.po

• Rename the po files under your child theme to your locale (e.g. en_US.po). More on WordPress Locale Setting.
• Translate the content of the po files under your child theme, then compile .mo files from your .po files.
• Finally, use the dottoro_locale_settings filter to specify the path to your language files. Insert the following lines into the functions.php file of your child theme:

  add_filter ('dottoro_locale_settings', 'custom_local_settings');
  function custom_local_settings ($settings) {
  	$settings['admin_folder'] = FOLDER_CHILD_THEME . '/languages/admin';
  	$settings['content_folder'] = FOLDER_CHILD_THEME . '/languages/public';
  	return $settings;
  }

  You are done.

20. Headings

Headings are one of the most important factors in SEO. Search engines give higher weight to words within heading elements (H1, H2, .., H6) than the others. H1 has the highest weight, H2 a little lower and so on.

Headings normally appear in larger font sizes but sometimes keywords important for SEO should not appear too large. To facilitate this, the theme offers five different font size settings for headings:
no class, headings_small, headings_xsmall, headings_xxsmall, headings_xxxsmall.

<h1>title</h1> is the largest, <h1 class="headings_small">title</h1> is a bit smaller, and so on.
Similarly, <h2>title</h2> is the largest, <h2 class="headings_small">title</h2> is a bit smaller, and so on.
These CSS classes can also be used for the container elements of headings. The following headings:

<div class="headings_small">
    <h1>Main title</h1>
    <h2>Subtitle</h2>
</div>

<div class="headings_xsmall">
    <h1>Main title</h1>
    <h2>Subtitle</h2>
</div>

Another important feature in the theme is related to page and post titles. Page titles (and the post titles on single post pages) are displayed in h1, post titles within post lists are displayed in h2 elements. That is typically good for SEO, but if you want, you can modify it. The dottoro_content_title_args and dottoro_post_meta_title_args filters allow you to change the heading tags and their CSS classes. For further details, please see Child Themes and Filter Hooks.

Post list shortcodes also allow you to specify the properties of headings. Further details, please see the heading_tag and heading_class attributes of the post_list, news_list and portfolio_list shortcodes.

21. Child Themes

22. CSS Classes

22.1 Body CSS Classes Based On Page Types

How to use them?

.search {
	background-color: red;
}

.single {
	background-color: red;
}

.post_type_news.single {
	background-color: red;
}

.single-news {
	background-color: red;
}

.category {
	background-color: red;
}

.post_type_news.category {
	background-color: red;
}

22.2 CSS Classes For Blog, News and Portfolio lists

These CSS classes allow you to customize the look of post, news and portfolio lists separately; single-, two-, three- and four-column layouts separately and much more. They play an important role in responsive design.

Every list has two wrapper elements: an outer wrapper that sourrounds the inner wrapper that holds the list items.

22.3 CSS Classes For Blog Posts, News and Portfolio items

In addition, there is a Post CSS Class option for every post that allows you to customize the look of posts separately.

How to use them?

On single news item pages:

.single-news .post_title {
	color: red;
}

In news lists:

.news_list .post_title {
	color: red;
}

23. Responsive Design

Internet use via mobile devices and cell phones is growing every day. The goal of responsive design is to present content in a way that best suits the device the visitor is using. Technically it means flexible layout, flexible images, CSS media queries and some JavaScript. Media queries allow you to apply changes to your website design based on the size of your visitor's browser window. For instance, you could specify styles that take effect only when the browser window is narrower than a certain width.

Since Elastic theme provides you a highly flexible environment (you can set the page width, thumbnail sizes, the number of columns in post lists, etc.), it is not possible to create a responsive stylesheet that contains all required styles and works on all sites created with the Elastic theme. And due to the nature of CSS media queries, we believe that using them in a child theme provides much more freedom than hard-coding them in the stylesheet of the Elastic theme.
We also use a child theme on our demo site to adapt the layout to the viewing environment. Our demo child theme and the next examples will give you a good starting point to create your own responsive design.

In addition, there are some items that require special handling. These are the menu and the slideshow. Elastic theme offers additional options which help you in making the menu and and slideshow responsive.

First Steps

• If you are building a new website
  just download our demo site content and child theme and install them on your site.
  At the end of the process you will have a mobile friendly website. It is worth to read the whole section, because it covers all the thing you need to know when creating your own responsive design.
• If you already have a website, download our child theme.
  Then, if you don't use child theme yet:

  • install our child theme on your site

  otherwise:

  • unzip our child theme on your local drive
  • open the style.css file located in the unzipped 'dottoro_child' folder with a text editor
  • copy its content and paste it into the style.css file of your child theme

  You need to make some other changes, please continue reading.

Theme options for a responsive design

• Mobile devices resize websites to match the width of the display screen. This feature must be disabled for a responsive design. You can find a Responsive design option under Theme Settings » General » Header Settings. Please select this option to tell the browser to use the device width as the viewport width.
• There is an 'auto scale' option for every slideshow. If this option is enabled, the slideshow will be scaled down when there is not enough room for it.
• There is a compressed option under Theme Settings » Header » Navigation Settings. Here you can set the width of browser window (in pixels) below which the menu should be shown as compressed. The compressed menu is typically useful when there is not enough room for the main menu items on low resolution devices. Check out our demo site and resize your browser window to a small size, and you will see what compressed menu means.

Create your own responsive design

• If you take a look at the first media query:

  @media only screen and (max-width: 980px) {

  you can see that it takes effect only when the browser window is not wider than 980 pixels. The skin settings (style_skin.css file under skins/default) of the Elastic theme sets the page width to 980 pixels, but if you want, you can modify it from a child theme. If you change this, you should also change the value in this media query.
• The first style rule in the first media query makes pages full width on your website.
  The next style rules (below the comment similar to this: 'fixed width sidebar, fluid content') creates a flexible layout with fixed width (315px) sidebar and a flexible-width content. If your sidebar is not 315 pixels wide, you should modify these rules.
  Let's see how you can create a flexible layout with fluid sidebar and content. Just replace the lines:

  		/* fixed width (315px) sidebar, fluid content */
  	#content_wrapper {width:100% !Important;}
  	.left_sidebar #content_wrapper {margin-left:-315px !Important;}
  	.left_sidebar #content {margin-left:315px;}
  
  	.default_sidebar #content_wrapper {margin-right:-315px !Important;}
  	.default_sidebar #content {margin-right:315px;}
  
  	.right_sidebar #content_wrapper {margin-right:-315px !Important;}
  	.right_sidebar #content {margin-right:315px;}

  with these lines:

  		/* fluid sidebar, fluid content */
  	#content_wrapper {width:68% !Important;}
  	#sidebar_wrapper {width:32% !Important;}

  in the style.css file of your child theme and you are done. In this case, please also remove these lines:

  		/* remove margins added above */
  	.default_sidebar #content {margin-right:0px;}
  	.right_sidebar #content {margin-right:0px;}
  	.left_sidebar #content {margin-left:0px;}

  from the second media query, because these lines are only required for the fixed width sidebar - fluid width content layout.
• There are only a few things left that are worth noting. One of them is the menu related media rules.
  Let's see the first one:

  @media only screen and (max-width: 810px) {
    #header {height:130px !Important;} /* original header height: 90px + menu height: 40px */
    #nav {left:0 !Important; right:0 !Important; bottom:0 !Important; top:auto !Important} /* full width menu at the bottom */
  }

  The skin settings (style_skin.css file under skins/default) of the Elastic theme has a right aligned menu, but if you want, you can modify it from a child theme. Since the menu in the demo content is quite wide so when the viewport is narrower then 810 pixels, it overlaps the site title.
  This media query increases the height of the header, moves the menu below the site title and description and changes it to full width. The pixel values in this media query are highly dependent on the height and layout of the header and also on the width and the aligment of the menu. For example, if the menu is full-width on your site, you don't need this media query. Or, if the menu is narrower on your site than in our demo, you should change the 810px value.
• The other menu related CSS rules apply to the compressed menu (read more on compressed menu).

  The first two rules:

  .compressed_menu #header {height:90px !Important;}
  .compressed_menu #nav {left:auto !Important; right:0 !Important; width:auto !Important;}

  set the header height back to 90 pixels and move the comressed menu to the right. If you want to place the compressed menu in a different position, you should change these rules.

  The next ones:

  @media only screen and (max-width: 310px) {
  	.compressed_menu #header {height:130px !Important;} /* original header height: 90px + menu height: 40px */
  	.compressed_menu #nav {right:37% !Important;} /* compressed menu position, right aligned because of the back button */
  }

  increase the height of the header and move the compressed menu to a bit left on small screen sizes to prevent the menu to overlap the site title.

  Finally, the rest:

  .compressed_menu #nav .sub-menu li.folder > a .submenu_icon_after:after {content:'\f008' !Important;}
  .compressed_menu #nav .sub-menu li.folder:hover > a .submenu_icon_after:after {content:'\f008' !Important;}

  set submenu icons to the compressed menu. Submenu icons make multilevel compressed menus more usable. You might not need these rules if your menu design already uses submenu icons.

• The last important thing is the media queries for post lists. You can find them at the bottom of the stylesheet below the comment 'Post Lists - Grid Layout'. Elastic theme adds several CSS classes to post, news and porfolio lists to help you in designing them (see CSS Classes For Blog, News and Portfolio lists for details). With the help of these CSS classes you can easily change 4-column layouts to 3-column layouts or even single-column layouts in certain screen sizes. The media queries in our demo stylesheet are ideal for page width of 980 pixels and sidebar width of 310 pixels. If the page or sidebar width is different from these values on your site, you should change the pixel values in the media queries.

24. Action Hooks

25. Filter Hooks