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.
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.
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.
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" ... /]
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 |
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 |
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.
| 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 |
| 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 |
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.
.my_popup .popup_button_bar {position:absolute; top: -25px; right: -25px;}.popup.standard .popup_title_bar .popup_button_bar {position:absolute; top: -25px; right: -25px;}.popup.standard .popup_button_bar.abspos_buttons {top: -25px; right: -25px;}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 |
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;}.layer.banner {padding:10px;position:relative;}.layer.banner {padding:10px;left:0;right:0;}