Dottoro Theme Documentation

First of all, we would like to thank you for choosing
Dottoro Theme!

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

The documentation will not only explain how to start a new WordPress website with the Dottoro Theme but will also provide information on how to change from your current WordPress theme to Dottoro Theme.

Some of them are:

• Post types

  Along with the standard blog post type Dottoro 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

Dottoro 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 - Dottoro 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 can be set in the Theme Editor.

  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 Dottoro 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. Header and Menu

In Dottoro 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.

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

The Theme Editor provides several menu skins that you can further customize according to your needs.

6. Subheaders

The Dottoro 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. Dottoro Theme provides a couple of useful ready-made templates but you can always create your own custom subheaders to your pages. You can manage your subheaders similarly to posts and pages; you can save, modify and delete them.

For every page you can decide whether you would like to display a subheader above your content or not; and if so which one. Thus, you can display subheaders of different contents on all your pages.

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

6.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.

6.2 Predefined Subheaders

The Dottoro 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>

6.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.

6.4 Attaching subheaders to pages

7. Footer

In the Dottoro 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.

7.1 Widgets in the Footer

In Dottoro 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.

7.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 Dottoro 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

8. Sidebar

8.1 Widgets on the Sidebar

The Dottoro 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; you will find it on the admin page of pages. 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.

8.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 can be set in the Theme Editor.

The sidebar width can also be set in the Theme Editor, so you can immediately see the ideal width for the sidebar widgets.

9. Widget Areas

You can also create custom widget areas. With them, you can display different widgets in the sidebars and footers of each page. You can even place your self-created widget areas in the contents and subheaders of pages with the [widget_area] shortcode.

Creating Widget Areas:

10. 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', you can change their colors in the Theme Editor where you can set different list icon colors for different regions (sidebar, footer, content and subheader). The advantage of default colors is that if you updated the skin settings of your whole theme, widgets that use the default icon color settings will match your new design.

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.

11. Breadcrumb

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

12. Shortcodes

Shortcodes are the most powerful tools of WordPress themes; they give you full authority over creating the contents of your pages. Dottoro Theme support 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. Dottoro theme supports two font icon sets by default, but you have the possibility to extend the available icons with your own ones. For details, please see Font Icons.

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

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], [toggle_title], [toggle_content]

With these shortcodes you can display collapsible contents.

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 Dottoro 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.

  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).
  use_dottoro_gallery	Clicking an image should open the Dottoro Gallery Viewer displaying the Flickr photos or the page of the image on Flickr.com (true | false).
  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 Dottoro 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

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 Dottoro 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 Dottoro 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. With it you can display a desired HTML content on a page, and clicking the content will open the related gallery. Additionally, with this shortcode you can create custom galleries as well.

The gallery viewer always displays images in a given group. Images set in the Gallery Settings of a page or post are always in the same group. The identifier of this group is an empty string. If you would like the shortcode to open this image group in the viewer, do not specify the 'group' attribute. If the 'group' attribute is specified, the viewer will display the images in the specified group.

With the 'href' attribute you can provide the URL of an image or other media. This media will be added to the gallery identified by the 'group' attribute. If you leave the 'href' attribute unspecified, the shortcode will not assign any new images to the gallery.

Examples:

This example shows how to create a link that opens the gallery set on the admin panel of the page:

[dottoro_gallery value="Show the gallery"/]

This example is the same as the previous one, with the only difference that it also adds an image to the gallery. The viewer will then display this image as the opening first.

[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]

Dottoro Theme provides a widespread 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:

[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"]content[/layer]

[layer start="left:'0%'" on="left:'50%'" end="left:'100%'"]content[/layer]

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

[layer start="trafo:{scaleX:0, rotate:0}" on="trafo:{scaleX:1, rotate:6.28}"]content[/layer]

Live example

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 Editor 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]

Shortcodes in alphabetical order

• admin_note
• 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
• dottoro_gallery
• download
• dropcap
• dropcap_box
• faq
• flash_slideshow
• flickr_photos_widget
• frame
• gallery
• grayimage
• google_maps
• highlight
• icon
• image_frame
• info
• layer
• link
• list
• matching_teaser
• matching_title
• message
• navigation_bar_widget
• news_list
• notice
• own_teaser
• own_title
• popular_posts_widget
• portfolio_list
• post_list
• protected
• pullquote
• question
• recent_posts_widget
• related_content_widget
• row
• rss
• slideshow
• subheader_teaser
• subheader_title
• tab_content
• tab_contents
• tab_label
• tab_labels
• table
• tabset
• testimonial
• theme-link
• the-year
• toggle
• toggle_content
• toggle_title
• tooltip
• tooltip_content
• tooltip_over
• top
• tweets_widget
• video
• warning
• widget_area
• wp-link

Nested Shortcodes

You can use shortcodes within shortcodes in the Dottoro 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]

Dottoro 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]

13. Slides and Slideshows

13.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]

13.2 Creating Slideshows

13.3 How to add Slideshows to your pages

13.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.

14. 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).

You can make your thus created Dottoro Gallery available to your users in a number of ways:

• If there is a thumbnail set to a post displayed on a post/news/portfolio list page, clicking it will open the gallery.
• For 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.

15. Web Fonts

Selecting the appropriate fonts is a crucial issue when designing a website. Unfortunately, there are only a few fonts that are supported by all browsers on all platforms (see Generic font families). Along with the generic fonts, there are a number of fonts that are supported by most of the browsers on most operation systems. These are the Web-safe fonts. If you use non-generic web-safe fonts, your website may appear differently to some of your visitors.

Luckily, all modern browsers support remote fonts. Thus you can use any fonts on your website, but you have to make sure to make the font description files available to your visitors.

Dottoro Theme and the Dottoro Theme Editor provide a solution.

You can upload fonts under Theme Options » Web Fonts on the theme admin panel you can then use on your website with the help of the Theme Editor's Font family settings dialog. The dialog also offers the fonts provided by Google Web Fonts.

Under Theme Options » Web Fonts you can upload, edit and delete fonts as well.

16. 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. In this section you can read about settings applying to the whole website.

You will find these options on the General tab of the General menu item in the Theme Options menu box:

17. Export / Import settings

Our demo content was created the exact same way.

18. Creating theme designs

With the Theme Editor you can customize the appearance of the theme before even downloading it. Also, after having your theme uploaded to WordPress, you will still be able to access the Editor through your theme's admin panel. Thus you get a chance to modify your website design while getting a real time preview with your actual content.

Service Keys:

You can access the Theme Editor from your theme's admin panel under Theme Options » Theme Editor. You will need a service key to use the Theme Editor. You can request a service key on your account page on Dottoro.com under 'Service Keys'. Click 'Generate a new service key', provide a name, then click Ok. Providing a name is only necessary because you can request more than one service key from Dottoro.com you can later identify by their names. Once you have a Service Key, copy the 32-character code into the Service Key input field you will find under Theme Options » Theme Editor and save it by clicking 'Save Service Key'.

Creating skins:

You can open the Theme Editor with the 'Open Theme Editor' link under Theme Options » Theme Editor. You can use the Theme Editor the same as before downloading your theme.

The Theme Editor consists of two frames. The upper frame contains a ribbon bar interface; the lower one contains your website in its full function, not only your homepage. You can browse the whole website in the preview frame, the same as your visitors can. With the controls in the upper frame you can modify even the tiniest detail of your website's appearance. You can download the thus created skins for later editing. For further information, please see the Dottoro Theme Editor Documentation.

Skin activation:

Changes applied in the Theme Editor will not affect the appearance of your website. Your visitors will not experience any change on your website while creating skins to your theme. To change the appearance of your theme, you have to activate the skins. You can reach your skins with the 'My Skins' link under Theme Options » Theme Editor. There is an 'Activate' and a 'View' link to every skin. Clicking the 'View' link will open the Theme Editor where you can preview your website with the chosen skin. Here you can also edit and save skin settings. To activate the skin, click 'Activate'. By activating the skin, the appearance of your website will change and your visitor can now see your website with the new appearance.

Skins in General:

Your skins will be hosted on Dottoro.com. The advantage of this is that if you use Dottoro themes on more than one domain, all your skins will be available to all your theme copies, regardless of which theme copy you used for creating them. Also, if you switch to another web hosting provider, your skins will be available to the new server as well.

When you use the Theme Editor from your theme's admin panel, the service key is used for your identification. For security reasons, service keys do not provide access to all functions on Dottoro.com. E.g. you cannot access personal information and cannot delete skins and download themes with service keys. You have to be logged in to obtain them.

Theme Editor and Security:

When you use the Theme Editor from your theme, the theme sends the following data to the Theme Editor:

• Service Key.
• The home url for your site.
• The identifier and version of your theme.
• The current skin settings of your theme.
• The name and URL of your web fonts.

Except for the above mentioned data the theme sends no other information of itself to the Theme Editor.

19. Localization

Dottoro Theme is completely localization ready. Text contents in the theme are in language resource files, thus you can easily localize contents and admin. For localization, you only have to make a language file; there's no need to bother with the source code to translate them to the desired language.

How to translate:

Translation files

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 Using 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. Using Child Themes

22. Action Hooks

23. Filter Hooks