Dottoro Theme Documentation

Tutorial to get your theme to work

PrologueFirst StepsFront PageCreating a custom front pageBlog, News and Portfolio post typesPost Type specific settingsGeneral settingsSingle post settingsCategory / Tag / Date archive page settingsPermalink settingsOptions on single post pagesGeneral page optionsImage optionsGallery settingsPage Templates and PagesPage SettingsPage TemplatesPages created from page templatesGeneral page settingsGallery settingsBlog page settingsNews page settingsPortfolio and Imagefolio page settingsContact page settingsArchives page settingsAuthors page settingsBoomarks page settingsSitemap page settingsSpecial pagesCategory and tag page settingsArchive and date page settingsSearch page settingsAuthor page settings404 page settingsHeader and MenuSubheadersSubheader specific shortcodesPredefined SubheadersCreating SubheadersAssigning subheaders to pagesFooterWidgets in the FooterCopyright and other notices in the FooterSidebarWidgets on the SidebarWidth and alignment of the sidebarWidget AreasWidgetsBreadcrumbShortcodesShortcodes In Alphabetical OrderShortcodes By CategoriesNested ShortcodesPost TemplatesOverlaysMedia and External MediaOverview of galleries, gallery listings and slideshowsGalleries and Gallery ListingsAbout Galleries In GeneralCreating And Managing Galleries[gallery_list] shortcodeSlideshows and Popup SlideshowsSlideshowsPopup SlideshowsSlideshow SettingsMost Often Used Slideshow OptionsAll Slideshow OptionsSlideshow Templates - Slideshow Specific ShortcodesStyling Guide For SlideshowsStyling Of Slideshow and Post TemplatesSlidesPopupsSelectorsWeb FontsGeneral Theme SettingsUser RolesExport / Import SettingsCreating theme designsLocalizationHeadingsChild ThemesCSS ClassesResponsive DesignCSS Extension JavaScript ToolkitJavaScript LibraryAction HooksFilter HooksCompatibility Issues
<

35. Compatibility Issues

35.1 Compatibility issues after upgrading to version 1.42

In the Dottoro theme, the whole concept of slideshows has been entirely changed in version 1.42. Although we made every effort to make the new version totally compatible with the previous versions, in some cases this was not possible. These cases will be described in the following sections.

After you have updated your theme to version 1.42, you will find a notice "Galleries and slideshows need to be updated." at the top of the page. Please click on the "Please update now" link and follow the instructions.

With the help of the upgrade wizard, you can upgrade the galleries and slideshows on your site. When you have done this, all slideshows including popup slideshows (lightboxes) should work as expected.

Check out your site. Take a look at your home slider, the slider at the top of news pages, the imagefolio slider and sliders in the sidebar and footer. Also look the popup slideshows (can be opened by clicking on post thumbnails on single pages, portfolio and imagefolio pages) and the "normal" popup windows.
Especially look at the close button of normal popup windows!
Finally, check whether tabs look the same as before.

If you don't experience any problems, there is no need to read further. Your site has been successfully updated.
But if you have changed the look of slideshows, popup slideshows or tabs using the style.css file of your child theme, further actions are required to make your modifications compatible with the new version.

How to make your custom styling compatible with version 1.42

Styling issues with basic slideshows

If you experience any problems with your home slider or slideshows in the sidebar or footer, then probably your custom styles don't take effect in the new version. But before you make any changes to your custom styles, you should check whether they are needed at all. The new slideshow system provides many more options than the previous one.

As a first step, take a look at these demo pages: Single Sliders Demo, Carousel Sliders Demo. They demonstrate the predefined slider configurations (profiles) you can choose from. As you can see there are profiles for both single and scroller (carousel) type sliders. For instance, the "Single Basic Hover" profile is designed for single sliders and displays the navigation over the slides. It was one of the most common problems in the slideshows in previous versions. The navigation was displayed below and not over the slides, and you had to add custom styling to the slideshow to change this.

Now, for instance, if you want to use the "Single Basic Hover" profile for your home slider, then you should create a new slideshow.

Please note that it is also possible to change the profile of your existing slideshow, but changing the profile overwrites all settings. Additionally, if you create a new slideshow, you can preview the changes without affecting the live site.
To create a new slideshow, go to Slideshows » Slideshows and click on "Add New" at the top of the page. Give your slideshow a name, then click on "Create Slideshow".
Now, select the "Single Basic Hover" profile at the top of the page, then click "Save Changes" at the bottom of the page.
Additionally, some settings should be copied from the "original" slideshow to the new one. Open the Slideshows menu on a new tab in your browser (e.g. right click on the Slideshows menu and "Open link in new tab", or open a new tab in your browser and open the WordPress admin page, then go to Slideshows). Click on the original slideshow and take a look at the values of the Slide Width and Slide Height options in the Slide Settings section. If they are set, specify the same values for the Slide Width and Slide Height options in the new slideshow.
Finally, click "Save Changes".

Your new slideshow is ready to use and has the same dimensions as the original slideshow. Now, go to Pages » All Pages (open it in a third browser tab) and edit your home page. Change the id in the sideshow shortcode to the id of the new slideshow:

[slideshow name="id_of_new_slideshow" ... /]
You will find the id of the new slideshow below its title on the edit slideshow screen.
Finally, click on "Preview Changes" at the top right corner of the edit screen of your homepage.

Now if you take a look at your homepage, the new slideshow will be shown. There may be a couple of things you want to change. For instance, you can change the type and skin of the navigation buttons and whether you want to navigation buttons to be displayed in a nested slider in the "Navigation Buttons" section. If you don't know which one to choose, look at the settings of the original slider.
Or, for instance, if you want to change the type, duration or easing of the slide transition animations, open the Transitions section. For further details, please see Slideshows.

Moreover, the new version allows you to create slideshows from images, videos, posts and pages. So you don't need to create slides every time you want to add a slideshow to your site.
For instance, if you want to add a slider to your homepage that displays post thumbnails, titles, teasers or other post data (author, date, category, etc.), just add the posts to a gallery and change the "galleries" attribute of the [slideshow] shortcode in the content of your homepage to refer to this gallery. It is also possible to search for posts by a certain criteria (for instance, latest posts, posts from a category, etc.) and display them in a slideshow.
Similarly, if you want your home slider to display images (or any other media), image titles and descriptions, just add the images to a gallery and specify it for the [slideshow] shortcode.
For further details and examples, please see the Slideshows section.

Let's return to your custom styles. If you still feel the need to use your custom styles, then you should rename them in the style.css file of your child theme to make them compatible with the new version. Otherwise you should remove them.

The following table contains the obsolete CSS class names and the new ones you should use instead. Please note that, in the new version, slideshows including the news and imagefolio slideshows, popup slideshows (lightboxes) and tabs are based on the same system. Therefore, if you want to change the look of only a particular slideshow, then you should add a custom CSS class to the slideshow (CSS Class option in the General section) and use this for your styling.

Old Class Name New Class Name
.slideshow_slides .CUSTOM_CSS_CLASS .slider_slides_inner_wrapper
.slideshow_slide .CUSTOM_CSS_CLASS .slider_slide
slideshow_thumbnails_wrapper If the navigation is displayed in a nested slider (Nested Slider For Navigation option in the Navigation Buttons section):
.CUSTOM_CSS_CLASS .navigationslider
otherwise
.CUSTOM_CSS_CLASS .slider_navigation_wrapper
slideshow_thumbnails If the navigation is displayed in a nested slider (Nested Slider For Navigation option in the Navigation Buttons section):
.CUSTOM_CSS_CLASS .slider_navigation_wrapper
otherwise
.CUSTOM_CSS_CLASS .slider_navigation
.slideshow_thumb.numbers .CUSTOM_CSS_CLASS .navigation_item_wrapper.numbers > .navigation_item
.slideshow_thumb.active.numbers .CUSTOM_CSS_CLASS .navigation_item_wrapper.active.numbers > .navigation_item
.slideshow_thumb.inactive.numbers .CUSTOM_CSS_CLASS .navigation_item_wrapper.inactive.numbers > .navigation_item
.slideshow_thumb.rect .CUSTOM_CSS_CLASS .navigation_item_wrapper.rect > .navigation_item
.slideshow_thumb.active.rect .CUSTOM_CSS_CLASS .navigation_item_wrapper.active.rect > .navigation_item
.slideshow_thumb.inactive.rect .CUSTOM_CSS_CLASS .navigation_item_wrapper.inactive.rect > .navigation_item
.slideshow_thumb.sphere .CUSTOM_CSS_CLASS .navigation_item_wrapper.disc > .navigation_item
.slideshow_thumb.active.sphere .CUSTOM_CSS_CLASS .navigation_item_wrapper.active.disc > .navigation_item
.slideshow_thumb.inactive.sphere .CUSTOM_CSS_CLASS .navigation_item_wrapper.inactive.disc > .navigation_item
.slideshow_thumb.images .CUSTOM_CSS_CLASS .navigation_item_wrapper.images > .navigation_item
.slideshow_thumb.active.images .CUSTOM_CSS_CLASS .navigation_item_wrapper.active.images > .navigation_item
.slideshow_thumb.inactive.images .CUSTOM_CSS_CLASS .navigation_item_wrapper.inactive.images > .navigation_item
.slideshow_thumb.images > a.active .CUSTOM_CSS_CLASS .navigation_item_wrapper.active.images > .navigation_item > a

Styling issues with the news slideshow

The following table contains the class names you should rename in the style.css file of your child theme to make your custom news slider styling compatible with the new version.

Old Class Name New Class Name
.recommended_slider .newsslider
.recommended_slider_posts .newsslider_posts
.recommended_slider_tabs .newsslider_tabs
.recommended_slider_tab .newsslider_tabs .navigation_item_wrapper
Styling issues with tabs

The following table contains the class names you should rename in the style.css file of your child theme to make your custom tab styling compatible with the new version.

Tabbed Widget
Old Class Name New Class Name
.tabbed_widget_tab .tabbed_widget_tab_wrapper
.tabbed_widget_tab_holder .tabbed_widget_tab
.tabbed_widget_contents .tabbed_widget_contents_wrapper
.tab_widget_box .tabbed_widget_content_wrapper > .slider_slide
[tabset] shortcode
Old Class Name New Class Name
.tabset_tabs .tabset_tabs_wrapper
.tabset_tab .tabset_tab_wrapper
.tabset_tab_holder .tabset_tab
.tabset_tab_contents .tabset_contents_wrapper
.tabset_tab_content .tabset_content_wrapper
Styling issues with popup windows

Before version 1.42, you could specify the position and select an icon for the close button of popup windows in the Theme Editor (Components » Popup Window » Buttons).
In version 1.42, the whole concept has been entirely changed. In new versions, you can select a popup template for every popup on your site (Template option). A popup template specifies where and how to display the close and fullscreen buttons, the title bar and more. Additionally, you can select whether you want to display the close and fullscreen buttons for every single popup and you can also select icons for them (Close Button and Fullscreen Button options).

The new popup template system gives you much more freedom, but if you have changed the icon and/or the position of the close button in the Theme Editor, the look of popup windows will change after updating your theme. If you want to change the icon of the close button, go to Popups » Popup Settings and use the Close Button option to select an icon. You will find the same option on the Edit Screen of every single popup (Popups » Popups) that allows you to select an icon for an individual popup.
The same options are provided for the fullscreen button which is a new feature in version 1.42.

If you want to change the position of the close button, you need to add a couple of lines to the style.css file of your child theme.

Of course, if you need a totally custom layout, you can always create custom popup templates (more on Popup Templates).
If the close button is placed outside the popup window, remember to add some extra space around the window (Margin option). So the close button remains visible even when the window needs to be resized on small screen devices.

Other styling issues - image frames and overlays
Image frames

The CSS classes assigned to image frames have been changed in version 1.42. If you have applied custom styles to image frames, you should change them to make your styling compatible with the new version. Please search for these classes in the style.css file of your child theme and replace them with the new classes:

Old Class Name New Class Name
.image_anchor .media_frame
.image_holder .media_wrapper

Overlays

The Overlays page on our demo site is intended to help you in creating custom overlays. At the bottom of the page, you can find the custom CSS styles used on the page. There was a bug in them that is causing problems in the new theme version. If you use these styles on your site, you should change this style declaration in the style.css file of your child theme:

.layer.banner {padding:10px;left:0;right:0;display:inline-block;position:relative;}
to this one:
.layer.banner {padding:10px;position:relative;}
or to this one:
.layer.banner {padding:10px;left:0;right:0;}
We are sorry for the inconvenience.