This documentation will show you how to set up and use the Dottoro Studio Theme and it is for both novice and experienced WordPress users alike.
Thanks to its powerful set of tools, the theme provides a highly flexible environment that lets you create a wide range of websites from simple blogs to fully-fledged business solutions.Along with the standard blog post type Studio 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).
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).
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.
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 | Navigate with your favorite browser to your WordPress Admin Panel (yourdomain/wp-admin/) and sign in. |
2 | Navigate to Appearance » Themes » Install Themes » Upload. |
3 | Browse and select the dottoro_studio.zip file that is located in the same folder as this documentation file. |
4 | Click on the Install button. |
5 | Activate the theme. |
Studio 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.
The Default Template will provide full freedom and control over creating your content; Dottoro shortcodes and widgets will be most helpful during this process.1 |
First you need to create a new page (Pages » Add new), and set its template to the Default Template in the Page Attributes box at the right side of the window.
Give a title to your page (for example Home) and save it (Save Draft or Publish).
After you have saved the page you will find a lot of settings options below the WordPress Content Editor, with which you can customize the appearance of the page.
You can also use other page templates, but in most cases it is practical to use the Default Template.
However, if you would like your home page to be a blog, news or portfolio list page you can select Blog, News or Portfolio page templates as well.
|
2 | After selecting the desired front page template and saving your page you have to create your content. Studio Theme supports a wide range of shortcodes, with you can publish slideshows, blog, news and portfolio item lists, widget areas, tables and other components on your page. |
3 | After you are done with creating the content, we recommend creating a custom subheader for the front page. You can edit the content of the subheader the same way as the content of the page. You can also use shortcodes and widgets to create custom subheaders (read more: Subheaders). |
4 | After you are done with the subheader, click on the Publish button in the upper right corner. |
5 | There is only one more thing to do: set the page you have just created as the Front page. You can do this under Settings » Reading. Select 'static page' under 'Front page displays' and select your page from the 'Front page' list, then click 'Save Changes.' |
If you now open your root domain in a browser you will see your newly set homepage.
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 - Studio 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.
General Settings | |
---|---|
Page Priority | This setting is available only if there are more than one post list pages. Here you can set the priority of your post list pages; the first one will have the highest priority. The appearance of date and tag pages is based on the settings of the post list page with the highest priority. For a category page, the appearance is based on the settings of the post list page that has the highest priority and matches the category. |
Add post type RSS | In the Studio Theme you can use both post type dependent and post type independent RSS feeds. Post type-independent RSS feeds contain posts from all three kinds of post types, while post type dependent feeds contain only posts from a certain post type. You can decide for every post type what RSS subscription options you would like to grant your visitors. |
Settings | |
---|---|
Thumbnail width | The width of the thumbnail displayed on single post/news/portfolio pages, in pixels. You can override this value for every single post. |
Thumbnail height | The height of the thumbnail displayed on single post/news/portfolio pages, in pixels. You can override this value for every single post. |
Thumbnail alignment | Here you can choose whether to display the thumbnail image in left, right or center position or in left or right float position. Float means that the thumbnail and the content will be placed side by side. You can override this value for every single post. |
Thumbnail target | Here you can choose whether clicking on the thumbnail should open the attachment page, a page that only contains the image or set the thumbnail to unclickable. Note that if the post has an image gallery, clicking the thumbnail always opens the Dottoro Gallery Viewer. |
Subheader | Allows selecting a subheader to be displayed on single pages. You can override this value for every single post. Read more in the Subheaders section. |
Sidebar Position | Set the position of the sidebar or remove sidebar on single post/news/portfolio pages. The 'default' value means that the sidebar position is determined by the skin settings of the theme. You can override this value for every single post. |
Additional Sidebar Widget Area | Allows selecting an additional widget area that will be placed in the sidebar below the predefined widget areas on single post/news/portfolio pages. Read more in the Widget Areas section. |
Additional Footer Widget Area | Allows selecting an additional widget area that will be placed in the footer below the other predefined widget areas on single post/news/portfolio pages. Read more in the Widget Areas section. |
Settings | |
---|---|
Subheader | Allows selecting a subheader to be displayed on category / tag / date pages. Read more in the Subheaders section. |
Show Page Title | This option allows you to specify whether the page title should be displayed in the contents of the page. |
Additional Sidebar Widget Area | Allows selecting an additional widget area that will be placed in the sidebar below the predefined widget areas on category / tag / date pages. Read more in the Widget Areas section. |
Additional Footer Widget Area | Allows to select an additional widget area that will be placed in the footer below the other predefined widget areas on category / tag / date pages. Read more in the Widget Areas section. |
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.
Settings | |
---|---|
Subheader | Allows selecting a subheader for the page. The default value for this select list can be set under Post/News/Portfolio Settings. Read more in the Subheaders section. |
Body CSS Class | Allows adding style classes to the HTML body element. Classes should be separated by spaces. |
Post CSS Class | Allows adding space separated style classes to the HTML article element that holds the post. These style classes will be assigned to the article element both on single and post list pages as well. |
Sidebar Position | Here you can set the position of the sidebar or remove the sidebar. The 'default' value means that the sidebar position is determined by the Sidebar Position option on Post/News/Portfolio Settings. |
Editorial Recommendation | This setting is specific for the News post type. It allows marking a news item as recommended. Recommended news are displayed as headlines (in a recommended box slideshow) on news list pages. Recommended news that are left out of the recommended box (you can set the number of items in the recommended box for each page, see Number of Recommended News option) will be displayed among other news items, according to the date of publishing. |
External URL | This setting is specific for the Portfolio post type. With this feature you can assign an external URL to a portfolio item. A 'Visit site' link or button will appear on portfolio list pages opening the specified website. |
Settings | |
---|---|
Post list Image | Here you can set what image to display as a thumbnail of the post on post list pages. The size of the thumbnail is determined by the post list page settings. |
Post Thumbnail Image | Here you can set what image to be displayed on the top of the post page above the post's content. You can also set the size an alignment of the image. The default image size is specified under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings. If you want to use other image size, you can set it here. A 0 value means the original width/height of the image. |
For further details, see the Galleries section.
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.
With these you can create Post, News and Portfolio list pages. The Studio 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.
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.
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.
Creates a page that displays the site authors in alphabetical order with contact and biography information.
Creates a page that displays a list of available bookmarks.
Creates a page that displays a list of all pages and category and monthly archives, separated according to post types.
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.
General Page Settings | |
---|---|
Subheader | Allows selecting a subheader for the page. Read more in the Subheaders section. |
Subheader Title | Specifies the subheader title of the page. Use the [subheader_title] shortcode to display the subheader title. Read more in the Subheaders section. |
Subheader Teaser | Specifies the subheader teaser of the page. Use the [subheader_teaser] shortcode to display the subheader teaser. Read more in the Subheaders section. |
Show Page Title | This option allows you to specify whether the page title should be displayed in the contents of the page. |
Show Breadcrumb |
Here you can choose whether the breadcrumb should be displayed on the page or not.
For easier use, you will find the default value under Theme Options » General » Breadcrumb.
For further details, please see the Breadcrumb section.
|
Ghost Page | There are cases when we need unclickable menu items that have submenus. Similar to this, you may need unclickable items in the page hierarchy displayed by breadcrumbs. Ghost pages provide a solution to this issue. With them, you can create pages invisible to the visitors that you can use to create menu items and that can also be set as parents of pages. |
Body CSS Class | Allows adding one or more classes to the BODY class attribute, separated by a single space. |
Sidebar Position | Here you can set the position of the sidebar or remove the sidebar. |
Additional Sidebar Widget Area | Allows selecting an additional widget area that will be placed in the sidebar below the predefined widget areas on the page. Read more in the Widget Areas section. |
Additional Footer Widget Area | Allows selecting an additional widget area that will be placed in the footer below the other predefined widget areas on the page. Read more in the Widget Areas section. |
Footer Type | Allows selecting the type of the footer. You can select whether to show the full footer (widgets and copyright), copyright only, or no footer. |
For further details, see the Galleries section.
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.
Blog Page Settings | |
---|---|
Posts per page | Here you can specify the number of visible posts per page. |
Number of posts in a row | Here you can set the number of posts in a row. |
Grid layout | Here you can choose whether blog posts should be displayed in a grid or the cell height is determined by its content. |
Rendering order | Here you can select whether blog posts should be rendered left to right or top to bottom in multi-column layout. |
Sorting order | Here you can select the sorting order of posts. |
Blog Categories | Here you can specify which blog categories should be displayed on the page. The advantage of excluding categories is that you will not need to modify blog page settings every time you create a new category. Category filtering gives you the opportunity to create multiple blog pages. |
Blog post preview | Here you can choose whether the post list should contain the whole content, the teaser, excerpt or only the title of blog posts. The 'teaser or excerpt' value means that if there is a teaser to the post then it will appear otherwise the excerpt will. You can create teasers with the 'More tag'. Just specify where the teaser should end you are done (read more about the More tag). |
Excerpt Length | Here you can set the length of excerpts in characters. |
Excerpt Length Without Thumbnail | Here you can set the excerpt length for posts that appear without thumbnail, in characters. |
Thumbnail width and height | Here you can specify the size of thumbnail images. |
Thumbnail alignment | Here you can specify the alignment of thumbnail images. Float means that the thumbnail and the content will be placed side by side. |
Meta Info | Here you can specify what meta information (author name, category, publish date, etc.) should be displayed with the posts. |
How to show 'read more' text | Here you can choose whether the 'read more' text should appear as a link or button. |
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.
News Page Settings | |
---|---|
Number of latest news to show / Number of older news to show | News items on news pages are displayed in two blocks; the latest ones in the upper box, the older ones in the lower box. Here you can set how many news items to display in the blocks. |
Number of items in a row | Here you can set the number of items in a row. |
Grid layout | Here you can choose whether news items should be displayed in a grid or the cell height is determined by its content. |
Rendering order | Here you can select whether news items should be rendered left to right or top to bottom within the blocks of latest and older news items. |
Sorting order | Here you can select the sorting order of news items. |
Show Recommended Box | Here you can choose whether to show the recommended box slideshow, or not. You can mark any news item as recommended. The recommended news are displayed as headlines (in the Recommended box) on news pages. |
Recommended box dimensions | Here you can set the width and height of the recommended box slideshow, and the width of the excerpt box that is displayed over the background image, in pixels. |
Recommended excerpt lengths | Here you can set the excerpt length for recommended news items. |
Number of Recommended News | The number of recommended news items to display in the recommended box. Recommended news that are left out of the recommended box will be displayed among other news items, according to the date of publishing. |
Recommended Box Skin | Set the skin of the recommended box. The 'auto' value means that the look of the recommended box is determined by the skin settings of the theme (see Creating theme designs). |
News Topics | Categories of news post are called topics. Here you can specify which news topics should be displayed on the page. The advantage of excluding topics is that you will not need to modify news page settings every time you create a new topic. Topic filtering gives you the opportunity to create multiple news pages. |
News item preview | Here you can choose whether the news item list should contain the whole content, the teaser, excerpt or only the title of items. The 'teaser or excerpt' value means that if there is a teaser to the item then it will appear otherwise the excerpt will. You can create teasers with the 'More tag'. Just specify where the teaser should end you are done (read more about the More tag). |
Excerpt Length | Here you can set the length of excerpts in characters. |
Excerpt Length Without Thumbnail | Here you can set the excerpt length for news items that appear without thumbnail, in characters. |
Thumbnail width and height | Here you can specify the size of thumbnail images. |
Thumbnail alignment | Here you can specify the alignment of thumbnail images. Float means that the thumbnail and the content will be placed side by side. |
Meta Info | Here you can specify what meta information (author name, category, publish date, etc.) should be displayed with the items. |
How to show 'read more' text | You can set whether the 'read more' text should appear as a link or button. |
You will find the page settings below the WordPress content editor. The first box contains the General Page settings; other options are explained below.
Portfolio / Imagefolio page Settings | |
---|---|
Items per page | Here you can specify the number of visible items per page. |
Number of items in a row (portfolio only) | Here you can set the number of items in a row. |
Grid layout (portfolio only) | Here you can choose whether portfolio items should be displayed in a grid or the cell height is determined by its content. This setting has no effect at the moment, because portfolio items always have the same height on a portfolio page. |
Rendering order (portfolio only) | Here you can select whether portfolio items should be rendered left to right or top to bottom in multi-column layout. |
Sorting order | Here you can select the sorting order of portfolio items. |
AJAX Pagination (portfolio only) | Here you can enable AJAX pagination so visitors can iterate through result pages without having to refresh the entire portfolio page. |
Paging animation (portfolio only) | Here you can select an animation effect for Ajax pagination. |
Portfolio/Imagefolio categories | Here you can specify which portfolio categories should be displayed on the page. The advantage of excluding categories is that you will not need to modify portfolio page settings every time you create a new category. Category filtering gives you the opportunity to create multiple portfolio pages. |
Display Categories as filters (portfolio only) | Here you can set to display categories as browsing filters at the top of the portfolio page. |
Portfolio item preview | Here you can choose whether the portfolio list should contain the whole content, the teaser, excerpt or only the title of items. The 'teaser or excerpt' value means that if there is a teaser to the item then it will appear otherwise the excerpt will. You can create teasers with the 'More tag'. Just specify where the teaser should end you are done (read more about the More tag). |
Thumbnail width and height | Here you can specify the size of thumbnail images. |
Thumbnail alignment (portfolio only) | Here you can specify the alignment of thumbnail images. Float means that the thumbnail and the content will be placed side by side. |
Dottoro Gallery Viewer | Here you can enable using the Dottoro Gallery Viewer. The Dottoro Gallery Viewer is an image viewer application. When it is enabled, clicking the thumbnails will open the viewer, otherwise it will open the portfolio item page. |
Separate Galleries | You can enable using the Dottoro Gallery with the previous option (Dottoro Gallery Viewer). Here you can choose whether the Gallery Viewer should display only the media related to the item that holds the thumbnail or the media of all the items on the page. |
Gallery autoplay | Here you can set whether the Dottoro Gallery should automatically change media, or not. The 'default' means that this value will be taken from Theme Options » General » Gallery Settings. |
Gallery autoplay interval | The interval (in seconds) on how often to change media in the Dottoro Gallery. The default interval is specified under Theme Options » General » Gallery Settings. If you want to use other interval, you can set it here. |
Meta Info | Here you can specify what meta information (author name, category, publish date, etc.) should be displayed with the posts. |
Hover Meta Info (portfolio only) | Here you can set what meta information should be displayed when hovering over thumbnails. |
How to show links | You can set whether the 'read more' and 'visit site' texts should appear as links or buttons. |
Show title as a link | Set whether the title of portfolio items should appear as a link or a plain text. |
Show title in tooltip (imagefolio only) | Set whether the title of portfolio items should appear as a tooltip over the thumbnails. |
Show preview as tooltip (portfolio only) | Set whether the preview of portfolio items should appear as a tooltip or regular HTML content. |
Excerpt Length | Here you can set the length of excerpts. |
Excerpt Length Without Thumbnail (portfolio only) | Here you can set the excerpt length for portfolio items that appear without thumbnail, in characters. |
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.
You will find the Contact page settings below the WordPress content editor. The General Page settings and Gallery settings are detailed above; other options are explained below.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'.
You can enable Akismet spam filtering that protects comments from spam attacks. Akismet service is free for private blogs. Commercial users have to purchase the service. Please note that private blog owners should also register for this service. For more information visit the Akismet website.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.
To create an Archives page you have to create a new page (Pages » Add new), select Archives option under Page Attributes from the template list on the right, then click Publish or Save Draft.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.
Archives Page Settings | |
---|---|
List icon | Set an icon for list items displayed on the page. |
List icon color | Set the color of list icons. The 'auto' value means that the color is determined by the skin settings of the theme (see Creating theme designs). |
Excluded Post Types | Set unnecessary post types on the page. |
An Authors page displays the site authors in alphabetical order with contact and biography information.
To create an Authors page you have to create a new page (Pages » Add new), select Authors option under Page Attributes from the template list on the right, then click Publish or Save Draft.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.
Authors Page Settings | |
---|---|
Layout | Select whether to show authors in list or box view. |
Show Avatar | Set whether to show the avatar. |
Show Fullname | Set whether to show the full name. |
Show Nickname | Set whether to show the nickname. |
Show Website | Set whether to show the website. |
Show Biography | Set whether to show the biography. |
Biography length | Set the length of biography, in characters. |
A Boomarks page displays a list of available bookmarks.
To create a Boomarks page you have to create a new page (Pages » Add new), select Boomarks option under Page Attributes from the template list on the right, then click Publish or Save Draft.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.
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.
Sitemap Page Settings | |
---|---|
List icon | Set an icon for list items displayed on the page. |
List icon color | Set the color of list icons. The 'auto' value means that the color is determined by the skin settings of the theme (see Creating theme designs). |
Under Theme Options » General » Search:
General Settings | |
---|---|
Subheader | Allows selecting a subheader for the search page. Read more in the Subheaders section. |
Show Page Title | Here you can set if you want your page title to be displayed in the contents of the search page. |
Sidebar Position | Here you can set the position of the sidebar or remove the sidebar. |
Additional Sidebar Widget Area | Allows selecting an additional widget area that will be placed in the sidebar below the 'sidebar' widget area on the search page. Read more in the Widget Areas section. |
Additional Footer Widget Area | Allows selecting an additional widget area that will be placed in the footer below the other widget areas on the search page. Read more in the Widget Areas section. |
Post List Settings | |
---|---|
Posts per page | Here you can specify the number of visible posts per page. |
Number of posts in a row | Here you can set the number of posts in a row. |
Grid layout | Here you can choose whether posts should be displayed in a grid or the cell height is determined by its content. |
Rendering order | Here you can select whether posts should be rendered left to right or top to bottom in multi-column layout. |
Type of Post Lists |
Set the type of post lists:
|
List items preview | Here you can choose whether the post list should contain the whole content, the teaser, excerpt or only the title of posts. The 'teaser or excerpt' value means that if there is a teaser to the post then it will appear otherwise the excerpt will. You can create teasers with the 'More tag'. Just specify where the teaser should end you are done (read more about the More tag). |
Excerpt Length | Here you can set the length of excerpts, in characters. |
Excerpt Length Without Thumbnail | Here you can set the excerpt length for entries that appear without thumbnail, in characters. |
Thumbnail width and height | Here you can specify the size of thumbnail images. |
Thumbnail alignment | Here you can specify the alignment of thumbnail images. Float means that the thumbnail and the content will be placed side by side. |
Meta Info | Here you can specify what meta information should be displayed with the posts. |
Show Pagination | Set whether to show the pagination for multi-page results or not. |
Show Divider | Set whether to add a divider between list items or not. |
Custom | |
---|---|
Custom Search Code | You can set a custom HTML search code, such as Adsense for Search that overrides the default WordPress search code on your website. It affects both the search form and the search widget. |
Filtering | |
---|---|
Advanced search | Set whether to use an advanced or a simple search form. The advanced search form provides post type, date and category selection possibilities. This setting has effect only if the custom search field is empty. |
Show Categories | Set whether the advanced search form should contain category selection or not. |
Show Post Types | Set whether the advanced search form should contain post type selection or not. |
Show Dates | Set whether the advanced search form should contain date selection or not. |
Under Theme Options » General » Author:
General Settings | |
---|---|
Subheader | Allows selecting a subheader for author pages. Read more in the Subheaders section. |
Show Page Title | Here you can set if you want your page title to be displayed in the contents of author pages. |
Sidebar Position | Here you can set the position of the sidebar or remove the sidebar. |
Additional Sidebar Widget Area | Allows selecting an additional widget area that will be placed in the sidebar below the 'Sidebar' widget area on author pages. Read more in the Widget Areas section. |
Additional Footer Widget Area | Allows selecting an additional widget area that will be placed in the footer below the other widget areas on author pages. Read more in the Widget Areas section. |
Post List Settings | |
---|---|
Posts per page | Here you can specify the number of visible posts per page. |
Number of posts in a row | Here you can set the number of posts in a row. |
Grid layout | Here you can choose whether posts should be displayed in a grid or the cell height is determined by its content. |
Rendering order | Here you can select whether posts should be rendered left to right or top to bottom in multi-column layout. |
Type of Post Lists |
Set the type of post lists:
|
List items preview | Here you can choose whether the post list should contain the whole content, the teaser, excerpt or only the title of posts. The 'teaser or excerpt' value means that if there is a teaser to the post then it will appear otherwise the excerpt will. You can create teasers with the 'More tag'. Just specify where the teaser should end you are done (read more about the More tag). |
Excerpt Length | Here you can set the length of excerpts, in characters. |
Excerpt Length Without Thumbnail | Here you can set the excerpt length for entries that appear without thumbnail, in characters. |
Thumbnail width and height | Here you can specify the size of thumbnail images. |
Thumbnail alignment | Here you can specify the alignment of thumbnail images. Float means that the thumbnail and the content will be placed side by side. |
Meta Info | Here you can specify what meta information should be displayed with the posts. |
Show Pagination | Set whether to show the pagination for multi-page results or not. |
Show Divider | Set whether to add a divider between list items or not. |
Under Theme Options » General » 404:
General Settings | |
---|---|
Subheader | Allows selecting a subheader for the 404 page. Read more in the Subheaders section. |
Show Page Title | Here you can set if you want your page title to be displayed in the contents of the 404 page. |
Sidebar Position | Here you can set the position of the sidebar or remove the sidebar. |
Additional Sidebar Widget Area | Allows selecting an additional widget area that will be placed in the sidebar below the 'Sidebar' widget area on 404 page. Read more in the Widget Areas section. |
Additional Footer Widget Area | Allows selecting an additional widget area that will be placed in the footer below the other widget areas on the 404 page. Read more in the Widget Areas section. |
Post List Settings | |
---|---|
Posts per page | Here you can specify the number of visible posts per page. |
Number of posts in a row | Here you can set the number of posts in a row. |
Grid layout | Here you can choose whether posts should be displayed in a grid or the cell height is determined by its content. |
Rendering order | Here you can select whether posts should be rendered left to right or top to bottom in multi-column layout. |
Type of Post Lists |
Set the type of post lists:
|
List items preview | Here you can choose whether the post list should contain the whole content, the teaser, excerpt or only the title of posts. The 'teaser or excerpt' value means that if there is a teaser to the post then it will appear otherwise the excerpt will. You can create teasers with the 'More tag'. Just specify where the teaser should end you are done (read more about the More tag). |
Excerpt Length | Here you can set the length of excerpts, in characters. |
Excerpt Length Without Thumbnail | Here you can set the excerpt length for entries that appear without thumbnail, in characters. |
Thumbnail width and height | Here you can specify the size of thumbnail images. |
Thumbnail alignment | Here you can specify the alignment of thumbnail images. Float means that the thumbnail and the content will be placed side by side. |
Meta Info | Here you can specify what meta information should be displayed with the posts. |
Show Pagination | Set whether to show the pagination for multi-page results or not. |
Show Divider | Set whether to add a divider between list items or not. |
In Studio Theme the header contains your website's logo, title, description and the menu.
You can edit the text of the title and description the usual way in WordPress, under Settings » General with the 'Site title' and 'Tagline' options.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.
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).
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.
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 Studio 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. Studio 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:
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.
Displays the subheader title of the page (see Subheader Title option). If no subheader title is specified, the page title will be displayed.
Displays the name of the category assigned to the page. This shortcode can be used in single post/news/portfolio pages.
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.
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:
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.
Displays the description of the category assigned to the page. This shortcode can be used in single post/news/portfolio pages.
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.
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.
The Studio 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.
Details of predefined subheaders:Name | Source |
---|---|
Own |
The subheader displays the page title and teaser under each other on the left.
|
Own 2 Cols |
The subheader displays the page title and teaser side by side; the title on the left, the teaser on the right.
|
Category |
The subheader displays the title (category name) and teaser (category description) of the category page assigned to the page under each other on the left.
You can use this subheader on single post/news/portfolio pages to display information about the category the post belongs to in the subheader.
|
Category 2 Cols |
Similarly to the 'category' subheader it displays the category page title and teaser, but the title and teaser appear side by side; the title on the left, the teaser on the right.
|
Matching Page |
The subheader displays the title of the closest matching post, news or portfolio list page.
You can use this shortcode on single 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.
Use this subheader if your website contains multiple list pages in the same post type and you would like the subheaders of single post pages to correspond to the subheader of the list pages the post is displayed on.
|
Matching Page 2 Cols |
Similarly to the 'matching page' subheader it displays the closest matching page title and teaser, but the title and teaser appear side by side; the title on the left, the teaser on the right.
|
Steps:
1 | Select 'Add New' under the Subheaders menu box. |
2 | Enter the name of the subheader. Use a unique name for each subheader, so you can identify it later. |
3 |
Create the content of the subheader.
The contents of the subheaders can be edited the same way as the contents of your pages and posts.
Subheaders can contain shortcodes; e.g. with the [widget_area] shortcode you can place widgets inside the content of subheaders.
Subheaders often contain information about the page (title, teaser).
You can display this information with the [subheader_title] and [subheader_teaser] shortcodes.
|
4 | After creating the content, click 'Publish'. |
Additional steps:
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.
In the Studio 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.
In Studio 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.
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 Studio Theme supports a number of shortcodes to help you create the content of the footer:
The Studio 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.
The theme supports the following widget areas for the sidebar:This widget area is placed at the top of the sidebar on every page.
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).
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).
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.
After creating the necessary widget areas you can add widgets to them under Appearance » Widgets in WordPress admin panel.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.
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.
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.
You can create and manage widget areas under Theme Options » Widget Areas. Here you will find the predefined widget areas of the theme as well. 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:
1 | Click 'Create a New Widget Area' |
2 |
Enter the name of the new widget area. This name will appear in the Appearance » Widgets menu where you can add widgets to the widget area. You can use this name in the [widget_area] shortcode as well. |
3 |
Set the layout of the widget area. You can set how many lines a widget area should contain. For every line you can specify how many cells they should contain. You can also edit the width of the cells. Finally, you can specify for every cell how many widgets you want to display in them. So you can create very diverse widget layouts. You can set a unique CSS class name to the cells; thus you can display widgets with custom appearances as well. |
4 | After creating the widget areas you can add widgets to them under Appearance » Widgets. |
5 | Having done all this you only have to place your widget areas in the desired places. To place a widget area in the content of a page or subheader, use the [widget_area] shortcode. To place a widget area on the sidebar or the footer of pages, use the 'Additional Footer Widget Area' and 'Additional Sidebar Widget Area' options on the admin page of pages. To customize the sidebars and footers of post, category and tag pages, use the 'Additional Sidebar Widget Area' and 'Additional Footer Widget Area' options under Posts » Post Settings / News » News Settings / Portfolio » Portfolio Settings. Finally, to place custom widget areas on the sidebars and footers of special pages (date, search, author, 404), use the options under Theme Options » General » Special Pages. |
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 following list contains a short description of the widgets introduced by the theme:
This widget will enable you to display information on the author of a post, news or portfolio item.
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"]
With this widget you can add a contact form to any of your pages, so your visitors could easily contact you.
This widget gives you the possibility to easily display your contact info - phone number, email address and post address.
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.
This widget allows you to easily insert Google Maps into your pages.
This widget enables you to display your latest tweets by various criteria.
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.
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.
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.
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.
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.
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.
You will find breadcrumb settings under Theme Options » General » Breadcrumb:
Settings | |
---|---|
Show Breadcrumb | Set whether to display the breadcrumb or not. This setting applies to the whole website but you can change it for each page. |
Separator | Sets the text that separates breadcrumb items. |
Nofollow links |
Here you can specify whether to use nofollow links or not. Search engines do not crawl nofollow links.
More on nofollow (Wikipedia). |
Show matching page | Set whether the title of the matching page should appear in the breadcrumb on post, category, tag and date pages. |
Show post type | Set whether the post type should appear in the breadcrumb on post, category, tag and date pages. |
Show category of posts | Set whether the category should appear in the breadcrumb on post pages. |
Show taxonomy of terms | Set whether the taxonomy should appear in the breadcrumb on category and tag pages. |
Category label | Set whether to display slugs or names of tags and categories (a slug is a link friendly name). |
Shortcodes are the most powerful tools of WordPress themes; they give you full authority over creating the contents of your pages. Studio 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.
[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.
Attributes: | |
---|---|
margin | Margin of the element (none | small | medium | large | extra-large) |
[br /]
This shortcode displays a line break.
[highlight]
This shortcode serves to highlight parts of a text.
Attributes: | |
---|---|
bg_color | Background color. For the supported values, see CSS background-color property. |
text_color | Font color. For the supported values, see CSS color property. |
skin | Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance. |
[blockquote]
With this shortcode you can create block quotations.
Attributes: | |
---|---|
bg_color | Background color. For the supported values, see CSS background-color property. |
text_color | Font color. For the supported values, see CSS color property. |
icon |
Specifies the quote icon. Default: 'quote-open'. For a complete list of icons, see Font Icons. |
iconset |
Specifies the icon set that contains the quote icon (see icon above).
If no icon set is specified, the theme automatically tries to find an icon set that contains the icon. For the supported icon sets, see Font Icons. |
icon_color | Color of the quote icon. For the supported values, see CSS color property. |
author | The name of the author. |
use_dash | Insert dash sign before author name (true | false). Default is true. |
[pullquote]
Similarly to [blockquote] shortcode, this shortcode also for creating blockquotes with the difference of displaying a vertical line before the text instead of using quotation marks.
Attributes: | |
---|---|
bg_color | Background color. For the supported values, see CSS background-color property. |
text_color | Font color. For the supported values, see CSS color property. |
skin | Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance. |
type | Type of the vertical line (1-4). |
align | The alignment of the pull quote ( '' | left | right ). Default: ''. |
[dropcap]
With the help of this shortcode you can create drop-caps.
Attributes: | |
---|---|
opacity | The opacity level of the dropcap. (floating point number 0 - 1) Default: 1. |
skin | Skin of the drop cap (available skins). Skins are different color schemes that provide attractive appearance. |
type | Type of drop cap ( disc | simple | square ). |
[dropcap_box]
With the help of this shortcode you can create drop-cap boxes.
Attributes: | |
---|---|
skin | Skin of the drop-cap box (available skins). Skins are different color schemes that provide attractive appearance. |
type | Type of drop-cap box ( disc | simple | square ). |
value | The text that will be displayed in the drop-cap box. |
align | The alignment of the drop-cap box. ( top | left | right | bottom ) |
[list]
With the help of the shortcode you can place icons before list items.
Attributes: | |
---|---|
icon |
Specifies an icon for the list items. Default: 'arrow'. For a complete list of icons, see Font Icons. |
iconset |
Specifies the icon set that contains the icon referred by the icon attribute (see above).
If no icon set is specified, the theme automatically tries to find an icon set that contains the icon. For the supported icon sets, see Font Icons. |
icon_color | Color of the list icons. For the supported values, see CSS color property. |
icon_size | Size of the list icons. For the supported values, see CSS font-size property. |
[frame]
With this shortcode, you can place floating objects in a text block.
Attributes: | |
---|---|
align | Alignment of the floating object. |
[clear]
Prohibits showing floating objects on any side of the object. Use it together with the column layout and frame shortcodes.
Attributes: No attributes.
[icon]
With this shortcode you can display font icons. Studio theme supports two font icon sets by default, but you have the possibility to extend the available icons with your own ones. For details, please see Font Icons.
Attributes: | |
---|---|
icon |
Specifies an icon to display before the link. Default: ''. For a complete list of icons, see Font Icons. |
iconset |
Specifies the icon set that contains the icon referred by the icon attribute (see above).
If no icon set is specified, the theme automatically tries to find an icon set that contains the icon. For the supported icon sets, see Font Icons. |
color | Color of the icon. For the supported values, see CSS color property. |
size | Size of the icon. For the supported values, see CSS font-size property. |
[button]
With this shortcode you can create attractive buttons harmonizing with your theme's design.
Attributes: | |
---|---|
active |
The appearance of active buttons differs from the default. This attribute is most useful if you want to set buttons as tabs and you want to distinguish the current tab button from the other ones.
Possible values: true | false. |
href | The URL of the webpage that should be opened when clicking on the button. |
size | The size of the button ( normal | medium | large ). |
skin | Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance. |
type | The type of the button (normal | submit | reset). You can use Submit and Reset buttons on forms (see submit button, reset button). |
[image_frame]
With this shortcode you can add a frame around the image.
Attributes: | |
---|---|
align | The alignment of the element ( left | center | right ). |
[link]
With this shortcode you can give an attractive appearance to links on your website.
Attributes: | |
---|---|
href | The target URL of the link. |
icon |
Specifies an icon to display before the link. Default: ''. For a complete list of icons, see Font Icons. |
iconset |
Specifies the icon set that contains the icon referred by the icon attribute (see above).
If no icon set is specified, the theme automatically tries to find an icon set that contains the icon. For the supported icon sets, see Font Icons. |
icon_after |
Specifies an icon to display after the link. Default: ''. For a complete list of icons, see Font Icons. |
iconset_after |
Specifies the icon set that contains the icon referred by the icon_after attribute (see above).
If no icon set is specified, the theme automatically tries to find an icon set that contains the icon. For the supported icon sets, see Font Icons. |
[divider], [divider_top]
The divider shortcode displays a horizontal line, the divider_top shortcode displays an additional link to the top of the page.
Attributes: | |
---|---|
color | The color of the line (see border-top-color property in CSS). |
title | The text that should be placed on the divider line. |
type | The style of the line (see border-top-style property in CSS) |
width | The width of the line, in pixels. |
[faq], [question], [answer]
With these shortcodes you can enhance the appearance of your questions and answers lists.
Attributes: | |
---|---|
mark | Set the drop cap text. The default is 'Q' for questions and 'A' for answers. The [faq] shortcode does not support this attribute. |
font_size | Font size of the drop cap text, in pixels. |
image_size | The size of the drop cap image, in pixels. Default is 32. |
skin | Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance. |
type | Type of drop cap ( circle | disc | simple | square ). |
[box], [box_title], [box_content]
With these shortcodes you can display any kind of content in attractive boxes.
The following attributes are supported by the [box] shortcode. | |
---|---|
skin | Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance. |
width | The width of the box (see width property in CSS) |
[box_bar], [box_button], [box_content]
With these shortcodes you can display a short text and a button in an attractive box.
The following attributes are supported by the [box_bar] shortcode. | |
---|---|
fontsize | The font size of the content, in pixels. Default is 21. |
skin | Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance. |
width | The width of the box (see width property in CSS) |
[message], [notice], [warning], [info], [download]
With these shortcodes you can display attractive messages.
Attributes: No attributes.
[admin_note]
Only visible for users with permission to publish posts.
Attributes: No attributes.
[protected]
Users must log in to view this content. Users not logged in will see a login form.
Attributes: No attributes.
[tabset], [tab_labels], [tab_label], [tab_contents], [tab_content]
With these shortcodes you can display tabbed contents.
The following attributes are supported by the [tabset] shortcode. | |
---|---|
autoplay | Automatic tab switch (true | false). |
content_width | The width of the contents (see width property in CSS). |
height | The height of the contents (see width property in CSS). |
skin | Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance. |
tab_align | The alignemnts of tabs (justify | left | left_and_gaps | justify_and_gaps). |
type | The orientation of the tab (horizontal or vertical). |
animation_type |
The animation when changing tabs.
|
fadeie8 | Set whether fading animation is allowed in old Internet Explorer versions (8 and before). The fading effect doesn't work for positioned elements in tab content in old IE browsers. If this options is disabled, clip animations will be used as a fallback. |
[toggle], [toggle_title], [toggle_content]
With these shortcodes you can display collapsible contents.
The following attributes are supported by the [toggle] shortcode. | |
---|---|
duration | The duration of the expand/collapse animation, in milliseconds. Default: 450. |
open | Set whether the toggle should be open by default or not. (true | false). Default: false. |
eventtype | The type of user interaction that expands and collapses the toggle. (click | mouseover). Default: 'click'. |
group | Specifies the group identifier of the toggle. Toggles with the same group identifier belong to the same group. At most one toggle can open in a group. |
open_icon |
Specifies the icon to display when the toggle is open. Default: 'minus'. For a complete list of icons, see Font Icons. |
open_iconset |
Specifies the icon set that contains the icon referred by open_icon (see above).
If no icon set is specified, the theme automatically tries to find an icon set that contains the icon. For the supported icon sets, see Font Icons. |
closed_icon |
Specifies the icon to display when the toggle is closed. Default: 'plus'. For a complete list of icons, see Font Icons. |
closed_iconset |
Specifies the icon set that contains the icon referred by closed_icon (see above).
If no icon set is specified, the theme automatically tries to find an icon set that contains the icon. For the supported icon sets, see Font Icons. |
[tooltip]
Creates a tooltip.
Attributes: | |
---|---|
delayhide | The amount of time in milliseconds that the tooltip should remain visible before it hides. The value of 0 means that there is no time limit. |
delayshow | The amount of time in milliseconds after the tooltip will be visible. The value of 0 means that there is no time limit. |
direction | The default direction of the tooltip (up, down, left, right). |
hideonmouseout | Set to true if you want to hide the tooltip on mouseout. (true, false) |
hideontipmouseout | Set to true if you want to hide the tooltip when the mouse pointer moves out of it. (true, false) |
keepvisibleovertip | Set to true if you want to keep visible the tooltip while the mouse pointer is over it. (true, false) |
offsetvertical | Specifies the vertical distance between the element and the tooltip, in pixels. |
offsethorizontal | Specifies the horizontal distance between the element and the tooltip, in pixels. |
[table]
With this shortcode you can display attractive tables.
Attributes: | |
---|---|
align | The horizontal alignment of the contents within cells (left, center, right). Default is center. |
skin | Skin of the shortcode (available skins). Skins are different color schemes that provide attractive appearance. |
[testimonial]
With this shortcode you can display user testimonials.
Attributes: | |
---|---|
name | The name of the author of the testimonial. |
status | The status of the author of the testimonial. |
text_align | The alignemnt of text. |
arrow_pos | The alignment of the bubble arrow. (top | left | right | bottom) |
icon |
Specifies the quote icon. Default: 'quote-open'. For a complete list of icons, see Font Icons. |
iconset |
Specifies the icon set that contains the quote icon (see icon above).
If no icon set is specified, the theme automatically tries to find an icon set that contains the icon. For the supported icon sets, see Font Icons. |
icon_color | Color of the quote icon. For the supported values, see CSS color property. |
[bubble]
With this shortcode you can display rounded boxes or bubbles.
Attributes: | |
---|---|
arrow_pos | The alignment of the bubble arrow. (top | left | right | bottom) |
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 Studio 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]
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'. |
[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 | |
---|---|
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="..."
|
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 |
[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 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. |
[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) |
[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. |
[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.
|
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. |
[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.
|
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. |
[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.
|
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. |
[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.
|
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. |
[widget_area]
In Studio 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.
Attributes: | |
---|---|
name | The name of your widget area. |
[post_list]
Displays a list of blog posts.
Attributes: | |
---|---|
categories | Slug of categories, separated by commas. |
categories_include | The categories are allowed or forbidden ( include | exclude ). |
category_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 no category icon is specified, the skin settings of the theme determines the icon. If you want to hide the category icon, use the value of 'none'. |
category_iconset |
Specifies the icon set that contains the category icon (see category_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. |
columns_num | The number of layout columns |
comments_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 no comments icon is specified, the skin settings of the theme determines the icon. If you want to hide the comments icon, use the value of 'none'. |
comments_iconset |
Specifies the icon set that contains the comments icon (see comments_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. |
datas_to_show | The meta data to show, separated by commas (author, category, comments, date, preview, read_more, tags, title). |
date_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 no date icon is specified, the skin settings of the theme determines the icon. If you want to hide the date icon, use the value of 'none'. |
date_iconset |
Specifies the icon set that contains the date icon (see date_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. |
excerpt_length | Set the length of excerpts in characters. |
excerpt_length_nothumb | Set the excerpt length for posts that appear without thumbnail, in characters. |
grid_layout |
Set whether blog posts should be displayed in a grid or the cell height is determined by its content.
Possible values: false, true. Default: true. |
heading_class |
Specifies a CSS class for the heading of post titles. 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 based on the number of columns in the list. |
heading_tag | Specifies the HTML heading element of post titles. Default is 'h2'. |
ignore_sticky_posts | Specifies whether the sticky posts should be ignored (true | false). Default is 'true'. |
link_type | Set whether to display the 'read more' text as a button or link. ( button | link ). |
order | Specifies the sort order direction ( DESC | ASC ). Default: DESC. |
order_by |
Specifies the name of the sort field. Possible values:
|
post_ids | The identifiers of blog posts to show, separated by commas. To get the identifier of a blog post, open its page on the admin panel and look at the URL in the location bar of your browser. The URL contains a 'post=number' substring, where the number is the identifier of the blog post. |
post_preview |
Here you can choose whether the list should contain the whole content, the teaser, excerpt or only the title of blog posts.
Possible values: full, excerpt, teaser_excerpt, teaser, only_title. Default is teaser_excerpt. |
posts_per_page | The number of posts to show. |
read_more_button_skin | Set the skin of the read more button (available skins). Affects only if the read more text appears as a button (see link_type above). |
read_more_icon |
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 no read more icon is specified, the skin settings of the theme determines the icon. If you want to hide the read more icon, use the value of 'none'. This attribute has an effect only if the read more text appears as a link (see link_type above). |
read_more_iconset |
Specifies the icon set that contains the read more icon (see read_more_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. |
rendering_order | Specifies whether blog posts should be rendered left to right or top to bottom in multi-column layout (left_right | top_bottom). Default: left_right. |
show_pagination | Specifies whether the pagination should be displayed or not (true | false). Default is 'false'. |
tag_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 no tag icon is specified, the skin settings of the theme determines the icon. If you want to hide the tag icon, use the value of 'none'. |
tag_iconset |
Specifies the icon set that contains the tag icon (see tag_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. |
thumbnail_align | Set the alignment of thumbnail images (center | left | left_float | right | right_float). |
thumbnail_height | Set the height of thumbnail images, in pixels. |
thumbnail_width | Set the width of thumbnail images, in pixels. |
user_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 no user icon is specified, the skin settings of the theme determines the icon. If you want to hide the user icon, use the value of 'none'. |
user_iconset |
Specifies the icon set that contains the user icon (see user_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. |
[news_list]
Displays a list of news items.
Attributes: | |
---|---|
bottom_news_num | The number of news items to show in the lower box. Default is 0. |
categories | Slug of topics, separated by commas. |
categories_include | The topics are allowed or forbidden ( include | exclude ). |
category_icon |
Specifies a topic icon. Basically, the 'folder', 'nav', 'nav-2', 'nav-3', 'nav-4' and 'flag' icons are for topics, but you can use any icon.
For a complete list of icons, see Font Icons.
If no topic icon is specified, the skin settings of the theme determines the icon. If you want to hide the topic icon, use the value of 'none'. |
category_iconset |
Specifies the icon set that contains the topic icon (see category_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. |
columns_num | The number of layout columns |
comments_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 no comments icon is specified, the skin settings of the theme determines the icon. If you want to hide the comments icon, use the value of 'none'. |
comments_iconset |
Specifies the icon set that contains the comments icon (see comments_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. |
datas_to_show | The meta data to show, separated by commas (author, category, comments, date, preview, read_more, tags, title). |
date_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 no date icon is specified, the skin settings of the theme determines the icon. If you want to hide the date icon, use the value of 'none'. |
date_iconset |
Specifies the icon set that contains the date icon (see date_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. |
excerpt_length | Set the length of excerpts in characters. |
excerpt_length_nothumb | Set the excerpt length for news items that appear without thumbnail, in characters. |
grid_layout |
Set whether news items should be displayed in a grid or the cell height is determined by its content.
Possible values: false, true. Default: false. |
heading_class |
Specifies a CSS class for the heading of post titles. 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 based on the number of columns in the list. |
heading_tag | Specifies the HTML heading element of post titles. Default is 'h2'. |
link_type | Set whether to display the 'read more' text as a button or link. ( button | link ). |
order | Specifies the sort order direction ( DESC | ASC ). Default: DESC. |
order_by |
Specifies the name of the sort field. Possible values:
|
post_ids | The identifiers of news items to show, separated by commas. To get the identifier of a news item, open its page on the admin panel and look at the URL in the location bar of your browser. The URL contains a 'post=number' substring, where the number is the identifier of the news item. |
post_preview |
Here you can choose whether the list should contain the whole content, the teaser, excerpt or only the title of news items.
Possible values: full, excerpt, teaser_excerpt, teaser, only_title. Default is teaser_excerpt. |
read_more_button_skin | Set the skin of the read more button (available skins). Affects only if the read more text appears as a button (see link_type above). |
read_more_icon |
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 no read more icon is specified, the skin settings of the theme determines the icon. If you want to hide the read more icon, use the value of 'none'. This attribute has an effect only if the read more text appears as a link (see link_type above). |
read_more_iconset |
Specifies the icon set that contains the read more icon (see read_more_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. |
recommended_box_height | Specifies the height of the recommended box slideshow, in pixels. Default is 260. |
recommended_box_skin | Set the skin of the recommended box (available skins). |
recommended_box_width | Specifies the width of the recommended box slideshow, in pixels. Default is 600. |
recommended_content_length | Specifies the excerpt length for recommended news items without thumbnail, in characters. Default is 600. If a news item has no thumbnail, the excerpt appears in the content of the slide not in an excerpt box. |
recommended_excerpt_length | Specifies the excerpt length for recommended news items, in characters. Default is 170. |
recommended_excerpt_width | Specifies the width of the excerpt box slideshow that is displayed over the background image, in pixels. Default is 240. |
recommended_posts_num | Specifies the number of recommended news items to display in the recommended slideshow. Default is 600. |
rendering_order | Specifies whether news items should be rendered left to right or top to bottom in multi-column layout (left_right | top_bottom). Default: top_bottom. |
show_inner_widget_area |
Specifies whether the News List Inner widget area should be displayed or not ( true | false ). Default is false.
This is the widget area that is placed between the latest and older news blocks. |
show_pagination | Specifies whether the pagination should be displayed or not (true | false). Default is false. |
show_recommended_box | Specifies whether to show the recommended box slideshow, or not ( true | false ). Default is false. |
tag_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 no tag icon is specified, the skin settings of the theme determines the icon. If you want to hide the tag icon, use the value of 'none'. |
tag_iconset |
Specifies the icon set that contains the tag icon (see tag_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. |
thumbnail_align | Set the alignment of thumbnail images (center | left | left_float | right | right_float). |
thumbnail_height | Set the height of thumbnail images, in pixels. |
thumbnail_width | Set the width of thumbnail images, in pixels. |
top_news_num | The number of news items to show in the upper box. Default is 8. |
user_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 no user icon is specified, the skin settings of the theme determines the icon. If you want to hide the user icon, use the value of 'none'. |
user_iconset |
Specifies the icon set that contains the user icon (see user_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. |
[portfolio_list]
Displays a list of portfolio items.
Attributes: | |
---|---|
ajax_pagination | Set whether to use AJAX pagination or not. |
categories | Slug of categories, separated by commas. |
categories_include | The categories are allowed or forbidden ( include | exclude ). |
columns_num | The number of layout columns |
datas_to_show | The meta data to show, separated by commas (preview, read_more, title, visit_site). |
dottoro_gallery | Set whether clicking on a thumbnail should open the Dottoro Gallery Viewer (true | false). Default is true. |
excerpt_length | Set the length of excerpts in characters. |
excerpt_length_nothumb | Set the excerpt length for portfolio items that appear without thumbnail, in characters. |
grid_layout |
Set whether portfolio items should be displayed in a grid or the cell height is determined by its content.
Possible values: false, true. Default: true. |
heading_class |
Specifies a CSS class for the heading of post titles. 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 based on the number of columns in the list. |
heading_tag | Specifies the HTML heading element of post titles. Default is 'h2'. |
hover_datas_to_show | The meta data to show when hovering over thumbnails, separated by commas (preview, read_more, title, visit_site). |
link_type | Set whether to display the 'read more' and 'visit site' text as a button or link. ( button | link ). |
order | Specifies the sort order direction ( DESC | ASC ). Default: DESC. |
order_by |
Specifies the name of the sort field. Possible values:
|
paging_animation | Here you can set an animation effect for AJAX pagination.
|
post_ids | The identifiers of portfolio items to show, separated by commas. To get the identifier of a portfolio item, open its page on the admin panel and look at the URL in the location bar of your browser. The URL contains a 'post=number' substring, where the number is the identifier of the portfolio item. |
post_preview |
Here you can choose whether the list should contain the whole content, the teaser, excerpt or only the title of portfolio items.
Possible values: full, excerpt, teaser_excerpt, teaser, only_title. Default is teaser_excerpt. |
posts_per_page | The number of portfolio items to show. |
preview_as_tooltip | Specifies whether the preview of portfolio items should appear as a tooltip or regular HTML content (true | false). Default is false. |
read_more_button_skin | Set the skin of the read more button (available skins). Affects only if the read more text appears as a button (see link_type above). |
read_more_icon |
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 no read more icon is specified, the skin settings of the theme determines the icon. If you want to hide the read more icon, use the value of 'none'. This attribute has an effect only if the read more text appears as a link (see link_type above). |
read_more_iconset |
Specifies the icon set that contains the read more icon (see read_more_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. |
rendering_order | Specifies whether portfolio items should be rendered left to right or top to bottom in multi-column layout (left_right | top_bottom). Default: left_right. |
separate_galleries | Set whether to display galleries of different portfolio items separately. |
show_categories | Specifies whether to show categories as browsing filters at the top of the list (true | false). Default is false. |
show_pagination | Specifies whether the pagination should be displayed or not (true | false). Default is false. |
show_title_as_link | Set whether the title of portfolio items should appear as a link or a plain text ( true | false ). |
thumbnail_align | Set the alignment of thumbnail images (center | left | left_float | right | right_float). |
thumbnail_height | Set the height of thumbnail images, in pixels. |
thumbnail_width | Set the width of thumbnail images, in pixels. |
visit_site_button_skin | Set the skin of the visit site button (available skins). Affects only if the visit site text appears as a button (see link_type above). |
visit_site_icon |
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 no visit site icon is specified, the skin settings of the theme determines the icon. If you want to hide the visit site icon, use the value of 'none'. This attribute has an effect only if the visit site text appears as a link (see link_type above). |
visit_site_iconset |
Specifies the icon set that contains the visit site icon (see visit_site_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. |
[breadcrumb]
This shortcode serves to highlight parts of a text.
Attributes: | |
---|---|
separator |
Sets the text that separates breadcrumb items. Default is: ».
For special characters, use HTML entities. |
nofollow |
Specififes whether nofollow links should be used in the breadcrumb or not (true | false). Default is true.
More on nofollow (Wikipedia). |
show_matching_page | Set whether the title of the matching page should appear in the breadcrumb on post, category, tag and date pages (true | false). Default: true. |
show_post_type | Set whether the post type should appear in the breadcrumb on post, category, tag and date pages (true | false). Default: false. |
show_category_for_posts | Set whether the category should appear in the breadcrumb on post pages (true | false). Default: false. |
show_taxonomy_for_terms | Set whether the taxonomy should appear in the breadcrumb on category and tag pages (true | false). Default: false. |
slug_or_name | Set whether to display slugs or names of tags and categories (a slug is a link friendly name). Possible values: slug, name. Default: name. |
[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 Studio 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.
[dottoro_gallery]
The WordPress gallery is not identical to the Dottoro Gallery. In the Studio 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.
Attributes: | |
---|---|
add_to_gallery | Boolean that sets whether the media set with the href attribute should added to the gallery or not. |
for | The identifier of the HTML element that should open the viewer when the user clicks on it. If you only want to display a simple link that opens the viewer, you can use the 'value' attribute instead. |
height | Sets the height of the media that should open in the viewer. |
show_frame | Boolean that sets whether to show a frame around the image, or not. (default: false) |
show_hoverelem | Boolean that sets whether to show the magnifier over the content of the dottoro_gallery shortcode. (default: false) |
group | The identifier of the group containing the images. |
href | The URL of the image or other media that should be displayed in the gallery. |
value | Sets the text of the link that opens the viewer. If you need content other than a link to open the viewer, use the 'for' attribute instead. |
width | Sets the width of the media that should open in the viewer. |
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.
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"/>
For further details, please see the Galleries section.
[slideshow]
Studio 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.
Attributes: | |
---|---|
name | Name of slideshow. |
width | The width of the slideshow, in pixels. |
height | The height of the slideshow, in pixels. |
autoplay | Boolean that sets whether the slides should change automatically (true | false). |
autoplay_duration | The elapsed time between slide changes, in seconds. |
loop | Boolean that sets whether whether slideshow should be repeated or not. |
classname | CSS class that is assigned to the top level element in the slideshow.. |
animation_type |
Here you can set the slide transition animation.
Not all animations are supported in old browsers, clip and fade animations will be used as a fallback.
|
animation_duration | The duration of the transition effect, in milliseconds. |
animation_easing |
Easing functions (timing functions) specify how the intermediate values are calculated during the transition. It allows for a transition to change speed over its duration.
Supported functions:
See Live Demo. |
pagination_type | The type of the pagination buttons. (nopagination | sphere | rect | numbers | images) |
pagination_skin | The skin of the pagination buttons. Only supported for the following pagination button types: sphere, rect and numbers. |
pagination_align | The alignment of the pagination. (left | center | right) |
pagination_button_width | The width of the pagination buttons, in pixels. Only supported for the following pagination button types: rect and images. |
pagination_button_height | The height of the pagination buttons, in pixels. Only supported for the following pagination button types: rect and images. |
[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:
Layer Shortcode Attributes | |
---|---|
starttime | The amount of time after the show animation of the layer should start, in milliseconds. Default: 600 |
startduration | How long, in milliseconds, the show animation should take. Default: 20 |
duration | The duration until the layer is visible, in milliseconds. If set to 0, the hide animation won't start automatically. Default: 0 |
endduration | How long, in milliseconds, the hide animation should take. Default: 20 |
start |
Property and value pairs (prop: value) that are appended to the layer before showing it, separated by commas. The supported properties are:
|
on | Property and value pairs that are appended to the layer when it is visible. See the 'start' attribute for details. |
end | Property and value pairs that are appended to the layer after hiding it. See the 'start' attribute for details. |
starteasing |
Specifies the easing function for the show animation.
Easing functions (timing functions) specify how the intermediate values are calculated during the start animation. It allows for a transition to change speed over its duration.
Supported functions:
|
endeasing | Specifies the easing function for the hide animation. Possible values are the same as for the starteasing attribute. |
showonce | Boolean that sets whether the layer should appear only once, or not. [true, false]. Default: false |
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]
[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.
Attributes: | |
---|---|
align | The horizontal alignment of the slideshow (left | center | right). The default is center. |
width | The width of the slideshow, in pixels. |
height | The height of the slideshow, in pixels. |
name | The name of your Flash slideshow, created under 'Flash Slideshows'. |
url | The URL of the slideshow XML file. |
[video]
With this shortcode you can display videos on pages.
Attributes: | |
---|---|
url | The location of the video. |
url_mp4 | The location of the mp4 video. |
url_ogg | The location of the ogg video. |
url_webm | The location of the webm video. |
poster | The location of the image to show until the user plays or seeks. |
width | The width of the video. |
height | The height of the video. |
max_width | The maximum width of the video. |
max_height | The maximum height of the video. |
wmode | Sets the Window Mode property of the Flash movie (window | opaque | transparent). Default is transparent. |
[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]
Attributes: | |
---|---|
startopac | The opacity of the gray image. |
endopac | The opacity of the color image. |
[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" /]
Attributes: | |
---|---|
width | The width of the map, in pixels. |
height | The height of the map, in pixels. |
type | The type of the map. (ROADMAP | SATELLITE | HYBRID | TERRAIN) |
address | The address to show in map. |
latitude | The north-south location's coordinate. (This parameter has effect only if the address is not set) |
longitude | The east-west location's coordinate. (This parameter has effect only if the address is not set) |
zoom | The initial resolution at which to display the map (0 - 20). |
info | The information to show, when the user clicks on the marker. If you want to display more complex content, use the [marker_info] shortcode within the [google_maps] shortcode. |
marker | Set whether to identify the specified locations on the map with the standard icon, or not. (true | false) |
panControl | Set whether to show the pan control, or not. (true | false) |
zoomControl | Set whether to show the zoom control, or not. (true | false) |
mapTypeControl | Set whether to show the 'Map Type' control, or not. (true | false) |
scaleControl | Set whether to show the scale control, or not. (true | false) |
streetViewControl | Set whether to show the 'Street View' control, or not. (true | false) |
overviewMapControl | Set whether to show the 'Overview Map' control, or not. (true | false) |
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]
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.
The [rss] shortcode supports the following attributes: | |
---|---|
feed |
Possible values:
|
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]
For further information, please see the Subheaders section.
You can use shortcodes within shortcodes in the Studio 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]
Studio 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]
Slide Options | |
---|---|
Background Image | Here you can set a background image to the slide. You can also set the size, position and repetition of the image. The default image size is determined by the slideshow. If you want to use other image size, you can set it here. A 0 value means the original width/height of the image. |
CSS Class | Here you can assign a CSS class to the slide. With this value you can specify the class attribute of the top level element of the slide's HTML content. Thus you can have control over the appearance of the slide. |
Delay | Here you can set the amount of time in milliseconds that the slide should remain visible before it hides. |
Transition Animation | Here you can set the slide transition animation. Not all animations are supported in old browsers, clip and fade animations will be used as a fallback. |
Animation easing | Easing functions (timing functions) specify how the intermediate values are calculated during the transition. It allows for a transition to change speed over its duration. See Live Demo. |
Animation duration | The duration of the transition effect, in milliseconds. |
Pagination Image | Here you can set a pagination image to the slide. It has effect only if the slideshow's 'Pagination type' is set to 'images'. |
Pagination Tooltip | Here you can set a description or caption that will be displayed as a tooltip when hovering over the pagination item. |
Target and Link | The Link option specifies the URL the item points to, the Target option specifies the target window where the document should be opened. |
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]
Layers can be used not only in slides but in post, news, portfolio items and in pages as well.
The layer shortcode supports several attributes, some of them are standard HTML attributes while others are for layer animation effects.
For the available attributes, please see the [layer] shortcode.
1 | There are tabs on the top of the right side displaying the names of your slideshows and a + sign where you can add a new slideshow. | ||||||||||||||||||||
2 |
Set the settings of the slideshow.
|
||||||||||||||||||||
3 | After having assigned a name and edited other settings, click 'Save Slideshow'. You must first save settings to be able to add items to the slideshow. | ||||||||||||||||||||
4 | You can add items to slideshows with the 'Add to Slideshow' button on the left. The items of the slideshow are displayed on the right side of the screen, under each other. | ||||||||||||||||||||
5 | Set the order of slides. | ||||||||||||||||||||
6 | After creating the slideshow, click 'Save Slideshow' on the top of the page. |
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.
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).
1 | You can add images to the gallery with the 'Add new image' button. |
2 | Set the URL of your image or media. You can specify a remote or a local URL, or you can use the browse button to open the WordPress Media dialog, where you can select the media you want to insert (use the 'Insert into Post' button in the Media Dialog to insert image). The media can be an image, a flash application, a video or sound, too. |
3 | Set the title of the image (this title will be visible in the Dottoro Gallery Viewer application as the image title). With the 'Link to the attachment page' checkbox you can set the title to open the attachment page of the media when clicking on it. This is only effective for media that have an attachment page; it does not work with images set with remote URLs. |
4 | Set the dimensions of the media. This necessary only if the automatically calculated size of the media does not meet your needs. |
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.
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.
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.
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:
Header Settings | |
---|---|
Favicon | A favicon (Favorites icon) is a file that contains icon or icons associated with a website or webpage. The favicon of a webpage will appear in the address bar and bookmarks list of browsers. To set a favicon, you can use the favicon.ico file provided by the theme, or any icon file you created; it is best to use a custom favicon. |
Apple Touch Icon | Set the location of your Apple touch icon. Use .png image only. This icon will be visible if your visitor adds the link of your website to the Home Screen on Apple Devices. |
Header Includes | Here you can set an HTML content that will be inserted at the end of every page's HEAD section. You can specify additional META tags, links to external CSS and JavaScript files (see link element), analytics code and other content usual in HEAD sections. |
Pagination | |
---|---|
Page navigation settings (pagination) |
You will find paginations on multiple page pages and in long comment lists.
With these options you can specify the whether the paginations should be numerical or text (Page navigation type), the alignment of paginations (Page navigation alignment), for numbered paginations the number of page links displayed after and before the current page link (Page navigation range), and the texts displayed as links to the previous and next page (Page navigation previous/next text). |
Content Settings | |
---|---|
Author's Links | Here you can set the target of author's links. Author's links can lead to a page that contains the author's profile and posts, or a website specified on the settings page of the user. |
Default Post Type | In the theme you can set a number of widgets according to which post type to display the results. If these widgets are set to 'auto' mode, they will display the results according to the post type of the page the widgets are placed on; e.g. blog posts for blog pages and news items for news pages. There are also pages that are not related to post types (home, search, 404, etc.). If you use 'auto' widgets on these pages, they will be displayed by your Default Post Type settings. |
Post Type in document title | Here you can set whether the document title (HTML title tag) of category, tag and date pages should contain the post type text or not. The document title appears on the title bar of browsers and in search results pages. In the Studio Theme, the category, tag and date pages are post type dependent. If you use more than one post type in your theme, it is recommended to select this checkbox to avoid duplicated document titles. |
Show 'comments are closed' | Set whether to show the 'Comments are closed' text or not. |
Show comments on attachment pages | Set whether comments are allowed on attachment pages, or not. |
Disable wpautop |
Here you can disable the WordPress wpautop function.
The WordPress wpautop function automatically replaces double line-breaks with HTML paragraphs in the contents of pages and posts. That's fine in almost any situation, but it also generates p (paragraph) tags within shortcodes causing unwanted spaces. Unfortunately the wpautop function is a bit buggy and sometimes generates unclosed paragraph tags within shortcodes resulting in invalid HTML output. Therefore, if you use nested shortcodes, it is advisable to disable the wpautop function. In addition, your pages will appear faster when wpautop is disabled (this also applies to the wptexturize feature). The only drawback is that you must add paragraph tags manually to the contents of pages and posts to format their content. Please Note: after you enable this option, you must check the look of your posts (line breaks may disappear)! See wpautop (WordPress.org) for further details. |
Disable wptexturize | Here you can disable the WordPress wptexturize function - the function that automatically replaces all special characters (quotes, apostrophes, dashes, etc.) with HTML numeric character references. See wptexturize (WordPress.org) for further details. |
Gallery Settings | |
---|---|
Autoplay | Here you can set whether the gallery should automatically change media or not. This setting applies to the whole website but you can change it for each gallery. |
Autoplay interval | The interval (in seconds) on how often to change media. This setting applies to the whole website but you can change it for each gallery. |
Our demo content was created the exact same way.
You can read more about importing on the WordPress Codex Importing Content page.With the help of the turn-key theme designs, you can easily change the outlook of your whole website. Just select a premade theme skin under Theme Options » Skins then save changes and the appearance of your website changes immediately.
The CSS for the theme is split into two files: one that holds the basic markup for layout (style.css) and one that contains all information on the current skin (style_skin.css). The style.css file is located in the root folder of the theme while the skin CSS files are located under the skins folder.
Studio 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.
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.
1 | Download our demo child theme. |
2 | Log in to your WordPress dashboard and navigate to Themes / Install Themes / upload. Upload the downloaded file, install and activate it. |
3 | You are done. Now you can get to work and make changes in your child theme. |
Prior to version 1.4, the Studio theme loads the style.css file of a child theme as standard in WordPress.
It means if a child theme is used, the theme only loads the style.css file of the child theme and if you want to load the stylesheet of the Studio theme, you have to import it (@import rule).
The main drawback of this mechanism is that every time the Studio theme is updated you have to change the version number in the @import rule manually (?ver=...) to ensure that your visitors get the latest stylesheet of the Studio theme.
If you forget to modify the version number, the browsers of your returning visitors won't download the latest version of the theme's style.css file so your website will not appear properly.
To solve this problem, the loading mechanism of stylesheets has been changed in version 1.4.
Studio theme from version 1.4 loads both the style.css file of theme and the style.css file of the child theme in the following order:
@import url("../dottoro_studio/style.css?ver=...");
Page Type | CSS Classes |
---|---|
404 | error404 |
Archives | page_archives |
Author | author |
Authors | page_authors |
Blog | post_type_blog page_blog |
Blog category | post_type_blog category |
Blog date | post_type_blog date |
Blog post | post_type_blog single-post single |
Blog tag | post_type_blog tag |
Bookmarks | page_bookmarks |
Contact | page_contact |
Imagefolio | post_type_portfolio page_imagefolio |
News | post_type_news page_news |
News category (topic) | post_type_news category |
News date | post_type_news date |
News item | post_type_news single-news single |
News tag | post_type_news tag |
Portfolio | post_type_portfolio page_portfolio |
Portfolio category | post_type_portfolio category |
Portfolio date | post_type_portfolio date |
Portfolio item | post_type_portfolio single-portfolio single |
Portfolio tag | post_type_portfolio tag |
Search | search |
Sitemap | page_sitemap |
.search {
background-color: red;
}
To change the background color of single post pages in all post types (blog posts, news and portfolio items):
.single {
background-color: red;
}
To change the background color of single news item pages:
.post_type_news.single {
background-color: red;
}
or:
.single-news {
background-color: red;
}
To change the background color of category pages in all post types:
.category {
background-color: red;
}
To change the background color of news category (topic) pages:
.post_type_news.category {
background-color: red;
}
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.
Every list has two wrapper elements: an outer wrapper that sourrounds the inner wrapper that holds the list items.
The following CSS classes are added to the outer wrapper:CSS class | Description |
---|---|
post_list | Identifies a blog post list. |
news_list | Identifies a news item list. |
portfolio_list | Identifies a portfolio item list. |
mixed_postlist | Identifies a list that can contain blog, news and portfolio posts, as well. Mixed lists are displayed on search and 404 pages. |
CSS class | Description |
---|---|
grid_list | Identifies a list that has a grid layout. |
newspaper | Identifies a list that has a 'newspaper' layout (the cell height is determined by its content). |
list_1_col | Identifies a single-column list. |
list_2_col | Identifies a 2-column list. |
list_3_col | Identifies a 3-column list. |
list_4_col | Identifies a 4-column list. |
CSS class | Description |
---|---|
col1 | Assigned to each item in a single-column list. |
col2 | Assigned to each item in a 2-column list. |
col3 | Assigned to each item in a 3-column list. |
col4 | Assigned to each item in a 4-column list. |
col_idx_1 | Assigned to each item in the first column of a list. |
col_idx_2 | Assigned to each item in the second column of a list. |
col_idx_3 | Assigned to each item in the third column of a list. |
col_idx_4 | Assigned to each item in the forth column of a list. |
first_col | Assigned to each item in the first column of a list. Same as col_idx_1. |
last_col | Assigned to each item in the last column of a list. |
row_idx_n n = 1, 2, 3, ... | Assigned to each item in the n-th rows of a list that has a grid layout. |
idx_0mod2 | Assigned to the 2-th, 4-th, 6-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list. |
idx_1mod2 | Assigned to the 1-th, 3-th, 5-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list. |
idx_0mod3 | Assigned to the 3-th, 6-th, 9-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list. |
idx_1mod3 | Assigned to the 1-th, 4-th, 7-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list. |
idx_2mod3 | Assigned to the 2-th, 5-th, 8-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list. |
idx_0mod4 | Assigned to the 4-th, 8-th, 12-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list. |
idx_1mod4 | Assigned to the 1-th, 5-th, 9-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list. |
idx_2mod4 | Assigned to the 2-th, 6-th, 10-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list. |
idx_3mod4 | Assigned to the 3-th, 7-th, 11-th, ... items in a list that has a grid layout. Indexes start from 1 and go left to right, then top to bottom regardless of the rendering order of the list. |
In addition, there is a Post CSS Class option for every post that allows you to customize the look of posts separately.
On single news item pages:
.single-news .post_title {
color: red;
}
In news lists:
.news_list .post_title {
color: red;
}
From | To |
---|---|
news_author | post_author |
news_category | post_category |
news_comments | post_comments |
news_date | post_date |
news_meta | post_meta |
news_more | post_more |
news_tags | post_tags |
news_title | post_title |
folio_author | post_author |
folio_category | post_category |
folio_comments | post_comments |
folio_date | post_date |
folio_meta | post_meta |
folio_more | post_more |
folio_tags | post_tags |
folio_title | post_title |
.news_title {
color: red;
}
change it to:
.single-news .post_title, .news_list .post_title {
color: red;
}