Dottoro Theme Editor Documentation

A WordPress theme design automation product with a point & click interface

1. Introduction

Dottoro Theme Editor is an online WordPress theme design automation product with a point & click interface that lets you build fantastic looking, unique web sites and blog themes without having to bother with any code or web programming.
The smooth interface of editor gives you total creative freedom so you can focus on the design. You can select from several theme and menu skins, you can change backgrounds, fonts, colors, borders and layouts and so on. You can save your designs and activate them with a few clicks anytime; thus you can change the look of your website as often as you need.

2. Quick Start

Start by signing up for a Dottoro account (join). You can register with your Facebook, Windows Live, Google and several other OpenID account or with providing a valid email address and a password. Non-registered users can also use the Theme Editor but they only get limited access to our services.

Theme Editor gives you an option to create your design before downloading the theme, so you no need Dottoro Theme to try out this service (open Theme Editor).

If you have a Dottoro theme and you installed it to WordPress, you can access the editor through your theme's admin panel (Theme Options » Theme Editor). Thus you get a chance to modify the appearance of your pages while getting a real time preview with your actual website content.

You need a service key to use the Theme Editor through your theme. 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'.

3. Basics

The Theme Editor consists of two frames. The upper frame contains a ribbon bar interface; the lower one displays content created with Dottoro Theme.

If you access the Theme Editor through your theme admin panel, you will see your actual website content in the lower frame. If you use the Theme Editor on Dottoro.com, the lower frame will display a demo content created with the Dottoro Theme.

The ribbon bar in the upper frame contains the tools for designing the appearance of your website. Those who already have a Dottoro Theme can modify the appearance of their website in real time. Those who do not have a Dottoro Theme can also use the Theme Editor so they will get a chance to become familiar with its services.

The upper frame contains a toolbar and a tabbed menu system, introduced in the next chapter. You will also find a Save button in the right upper corner of the upper frame. Clicking that button opens the 'Save a skin' dialog, where you can save the current skin settings.

4. Toolbar

The toolbar is located at the left hand side of the upper frame. It contains six buttons:

1. Opens the home page.
2. Saves the setting you made to the edited skin. This command is basically identical to word processor's 'Save' command and does the same as the 'Quick Save' button under the Skins menu. The button will only be available when editing an already saved skin.
3. Opens the 'Save a skin' dialog where you can save the current skin settings. This command is basically identical to word processor's 'Save As' command and does the same as the 'Quick Save' button under the Skins menu and the 'Save' button in the upper right corner.
4. Opens the 'Copy settings' dialog, where you can transfer values between identical settings groups.
5. Opens the 'Replace Colors' dialog, where you can replace all or some occurrences of a color with another color.
6. Opens a page that contains your saved skins. You can also manage your skins on this page.
7. Opens the Theme Editor Documentation page (this page).

5. Menu System

5.1 Menu system - Skins

Under the Skins menu you will find controls responsible for managing your skins.

• Theme Skins button:
  Opens the 'Theme Skins' dialog. It enables you to apply predefined Dottoro theme skins to your contents.
• 'Submenu Skins' button:
  Opens the 'Submenu Skins' dialog. It enables you to apply predefined Dottoro menu skins to your contents.
• 'Load a skin' button:
  Opens the 'My Skins' dialog. It enables you to apply your saved skins to your contents.
• 'Save current skin' button:
  Opens the 'Save a skin' dialog where you can save the current skin's settings.
  This button does the same as the

  button on the toolbar and the 'Save' button in the upper right corner.
• 'Quick Save' button:
  This button is enabled only if you are editing on of your saved skins.
  This command is basically identical to word processor's 'Save' command and does the same as the

  button on the toolbar.

5.2 Menu system - Whole page

Here you can edit the width and alignment of your blog page and set a background color and image to your whole blog page. To define the proportion of the width of the sidebar to the width of the content, use the Sidebar / Placement menu.

5.3 Menu system - Headers

The Dottoro Theme header consists of two areas: Header and Subheader. The header contains the site logo, title and description and the primary navigation. The subheader is a fully customizable area whose content and size can depend on the page settings.

The design settings of the header and subheader can separately be adjusted in the Theme Editor. You will find all setting options for the header in this menu, except settings for the theme menu. You will find these under the 'Menu' menu.

You can also adjust the settings of the subheader here. Since the content of the subheader is fully customizable, it can contain widgets and elements displayed by shortcodes as well. You can find settings options related to widgets under the Widgets menu. For other special settings, use the Components menu.

5.4 Menu system - Menu

You can adjust the settings of your theme's menu here. Such settings include positioning, background, borders, menu item fonts, etc. For easy setting of the menu use the 'Copy settings' dialog.

5.5 Menu system - Footer

In Dottoro Theme the footer consists of two areas. You can place widgets in the upper area and text (e.g. copyright information) in the lower. You can customize these separately in the Theme Editor.

5.6 Menu system - Body

The body is the part of the page between the header and the footer. It contains the actual content and the sidebar.

This menu contains the settings of the body and the content. For sidebar designing use the Sidebar menu. Since your content can contain widgets and other element as well, your body settings may not apply to all of your body contents! You can find settings options related to widgets under the Widgets menu. For other special settings use the Components menu.

5.7 Menu system - Sidebar

The sidebar is located on the left or right hand side of the content and contains widgets. In the Theme Editor you can adjust the width of the sidebar, its distance from the content, its background, etc. You can also set the default location of the sidebar in the Theme Editor. For further details, please see the Width and alignment of the sidebar section in the Dottoro Theme documentation.

5.8 Menu system - Widgets

Here you can style widgets in the header, subheader, content, sidebar and the footer separately. To make this process simpler, use the 'Copy settings' dialog.

5.9 Menu system - Comments

Here you can adjust settings of comments at the bottom of posts and the comment form. You can use different settings for author and visitor comments. The 'Copy settings' dialog can be a great help here, too.

5.10 Menu system - Components

You will find a number of submenus under this menu. These options may not seem important at first but will actually take up most of your time while designing a theme. These settings will affect the appearance of a page just as much as the settings of its major areas. The 'Copy settings' dialog offers, without doubt, the greatest help here.

5.11 Menu system - Meta Info

Here you can change the appearance of post meta data. You can set fonts, colors and icons for each meta data separately. The 'Copy settings' dialog can be a great help here, too.

5.12 Menu system - Defaults

Here you can set the default look of widgets and shortcodes for every region (header, subheader, content, sidebar and footer) of pages separately. Of course you have the possibility to change the appearance of each widget and shortcode in the theme, but the advantage of default settings is that if you updated the skin settings of your whole theme, widgets and shortcodes that use the default settings will match your new design.

6. Dialogs

6.1 'Theme Skins' dialog

With the help of this dialog you can apply predefined Dottoro skins to your current settings. You can open this dialog by clicking the 'Theme Skins' button under the Skins menu.

You'll find two tabs at the top of the dialog:

1. Skins tab
   When you choose a skin from the list you can view in real time in the lower frame how it would look with your content. This will make it easy for you to decide which Dottoro skin to apply to your website.
2. 'Skin load options' tab
   Here you can set what adjustments to apply to your current settings when you choose a skin from the list. In default mode, all the settings of the selected skin will apply. If you are generally satisfied with a skin but don't really like a part of it, you can also apply changes to only those areas you don't like. E.g. if you check 'footer' and go back to the 'Skins' tab page, only settings regarding the footer will be applied to your theme; the rest of the settings remain unmodified.
   You can always reset settings to default by clicking the 'Reset Settings' button.

6.2 'Submenu Skins' dialog

You can open this dialog by clicking the 'Submenu skins' button under the Skins menu.

In this dialog you can apply predefined Dottoro submenu skins to the current settings. This dialog looks very similar to the 'Theme Skins' dialog but its skins only change the appearance of the submenus. This dialog also contains two tabs. The Skins tab will list the submenu skins you can choose from, while on the 'Skin load options' tab you can select which settings to apply after choosing the desired skin.

6.3 'My Skins' dialog

You can open this dialog by clicking the 'Load a skin' button under the Skins menu.

With this dialog you can apply your saved skins to the current settings. Similar to the 'Theme Skins' dialog, it also contains two tabs. The Skins tab will list your saved skins, while on the 'Skin load options' tab you can select which settings to apply after choosing the desired skin.

6.4 'Save a skin' dialog

You can open this dialog by clicking the 'Save' button at the right upper corner or the button on the toolbar or the 'Save current skin' button under the Skins menu.

Here you can save your current skin settings. This dialog is basically identical to word processor's 'Save as' dialog.

Every skin you save must have a unique name. This dialog also contains the list of your saved skins. If you give the name of an already saved skin, it will overwrite the old setting after saving.

6.5 'Copy settings' dialog

You can open this dialog by clicking the button on the toolbar.

With this dialog you can transfer values between identical settings groups; e.g. if you want the settings of the widgets on the header, subheader, content, sidebar and footer to be identical. If the backgrounds of the sidebar and the footer are similar, you will probably want the widgets' appearance to match. With the 'Copy settings' dialog you will only have to set the options for the sidebar and then transfer those settings to the widgets on the footer.

• This dialog will also prove very helpful when designing theme menus, shortcodes and other page components as well.
• You can also select to transfer only some of the settings.
• Since the Theme Editor contains a great number of options, the 'Copy settings' dialog can save you a lot of time and effort while designing your website.

6.6 'Replace colors' dialog

You can open this dialog by clicking the button on the toolbar.

With this dialog you can replace all or some occurrences of a color with another color. Specify the color to search for and click on the Search button. The search result will be visible on the right. Here you can select the items whose color you want to change. Now, if you change the color in the Replace Box on the left, you will see that the color of the selected items will change. Of course, it is also possible to select or unselect some items in the search result tree on the right, after you changed the color.

6.7 'Font family settings' dialog

You can open this dialog by clicking any of the font family controls.

In Dottoro Theme, you can upload custom fonts (link). After uploading them you will find your fonts in the 'My Fonts' list of this dialog. You can also use Google Web Fonts and web-safe fonts. Always use a web-safe font regardless of whether you use a custom or a Google font. If a browser does not support your web font setting, it will use a web-safe font. Furthermore, always use a generic font family name at the last position of web-safe fonts; they are supported by all browsers (see font-family).

6.8 'Font color settings' dialog

You can open this dialog by clicking any of the icons near font color settings options.

With this dialog you can set the font colors of different areas at once or transfer font color settings from one area to the other. The left side of the dialog contains the font color setting options, while on the right hand side you will find the areas to which you can apply the changes to in a tree structure. You can apply the same adjustments to more than one area, but you can also select a font color for multiple areas at once. If you select a color on the left side it will change all the fonts in the areas you checked on the tree of the right hand side of the dialog box.

You will also find an arrow pointing to the left in the box. It serves to grab a font setting from the right hand tree to the left area of the dialog.

6.9 'Link settings' dialog

You can open this dialog by clicking any of the icons near link settings options.

With this dialog you can set the colors of different links at once or transfer settings from one link to the other. The left side of the dialog contains the link setting options, while on the right hand side you will find the areas to which you can apply the changes to in a tree structure. You can apply the same adjustments to more than one area, but you can also select to adjust multiple areas at once. If you select a color on the left side it will change all the links in the areas you checked on the tree of the right hand side of the dialog box.

You will also find an arrow pointing to the left in the box. It serves to grab a color setting from the right hand tree to the left area of the dialog.

6.10 'Background color settings' dialog

You can open this dialog by clicking any of the icons near background color settings options.

With this dialog you can set the background color of different areas at once or transfer settings from one area to the other. The left side of the dialog contains the background color setting options, while on the right hand side you will find the areas to which you can apply the changes to in a tree structure. You can apply the same adjustments to more than one area, but you can also select to adjust multiple areas at once. If you select a color on the left side it will change all the links in the areas you checked on the tree of the right hand side of the dialog box.

You will also find an arrow pointing to the left in the box. It serves to grab a color setting from the right hand tree to the left area of the dialog.

6.11 'Background image settings' dialog

You can open this dialog by clicking any of the icons near background image settings options.

With this dialog you can set the background image options of different areas at once or transfer background image settings from one area to the other. The left side of the dialog contains the background image setting options, while on the right hand side you will find the areas to which you can apply the changes to in a tree structure. You can apply the same adjustments to more than one area, but you can also select to adjust multiple areas at once. If you select a color on the left side it will change all the links in the areas you checked on the tree of the right hand side of the dialog box.

You will also find an arrow pointing to the left in the box. It serves to grab a image setting from the right hand tree to the left area of the dialog.

6.12 'Pick a color' dialog

This dialog is identical to Photoshop's color selector.

6.13 'Background patterns' dialog

With this dialog you can choose from the number of background patterns to enhance your theme's appearance. You can also set the opacity of every background pattern near the button that opened the dialog.

6.14 'Gradient background' dialog

With this dialog you can create linear gradient backgrounds. The latest browsers support more advanced background settings but IE8 does not. Since IE8 is still one of the most widely used browsers we support a gradient background option that will be displayed properly on every browser. In case you will use a linear gradient background you have to set the size of either the height or the width - depending on gradient direction - in pixels. For elements with variable sizes it is advised to set the background color to the gradient's starting or ending color.

6.15 'My images' dialog

With this dialog you can upload custom images and set them as a background image. The dialog contains two tab pages: Images and Alignment.

1. Images tab
   On the Images tab page, you can upload and delete images and select them as a background.
2. Alignment tab
   On the Alignment tab page, you can set the alignment of the background image. At the bottom of the Alignment tab, you will find information about the size of the container element.

6.16 'Submenu icons' dialog

With this dialog you can select what icons to display for menu items that contain submenus.

7. Theme Layout