YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar luca.congedo asked

Slideshow in the background

How do I place a Widgetkit slideshow module in the background of a section of a template yootheme pro?
it's possible?
How can I put pictures that are in the background?
thank you

  • Widgetkit
  • Tutorial
  • YOOtheme Pro

6 Answers

1

Avatar thomas.p Support Online answered

Maybe this can serve as a workaround for you in the meanwhile. It's not a wk slideshow, but a hand-scripted CSS animation, and, therefore, not that comfortable to maintain.

The CSS animation will change the background image of the section infitinetly. The animation will start after 5 seconds and the animation duration is 30s. There are four images. To implement this, create a new section (defautl style, no bg image) and add the following code at Edit Section->Advanced->CSS. Adjust the image paths and animation to your needs.

@keyframes bg-slideshow {  
  0% {  
    background-image: url('https://demo.yootheme.com/themes/joomla/2016/max/images/yootheme/blog-01.jpg');  
  }  
  20% {  
    background-image: url('http://demo.yootheme.com/themes/joomla/2016/max/images/yootheme/blog-01.jpg');  
  }  
  25% {  
    background-image: url('http://demo.yootheme.com/themes/joomla/2016/max/images/yootheme/blog-02.jpg');  
  }  
  45% {  
    background-image: url('http://demo.yootheme.com/themes/joomla/2016/max/images/yootheme/blog-02.jpg');  
  }  
  50% {  
    background-image: url('http://demo.yootheme.com/themes/joomla/2016/max/images/yootheme/blog-03.jpg');  
  }  
  70% {  
    background-image: url('http://demo.yootheme.com/themes/joomla/2016/max/images/yootheme/blog-03.jpg');  
  }  
  75% {  
    background-image: url('http://demo.yootheme.com/themes/joomla/2016/max/images/yootheme/blog-04.jpg');  
  }  
  95% {  
    background-image: url('http://demo.yootheme.com/themes/joomla/2016/max/images/yootheme/blog-04.jpg');  
  }  
  100% {  
    background-image: url('http://demo.yootheme.com/themes/joomla/2016/max/images/yootheme/blog-01.jpg');  
  }  
}  

.el-section {  
    animation: bg-slideshow 30s ease 5s infinite;  
    background-position: center center;  
    background-size: cover;  
    background-repeat: no-repeat;  
}

Kind regards
Thomas

Edited

0

Avatar thomas.p Support Online answered

Hi luca.congedo,

you cannot put a slidehosw as section background (at least not with a reasonable effort).

You can set background images for sections in the section settings, though.

Image

Note that you can add content to your Widgetkit Slideshow that overlays the media.

Kind regards
Thomas

0

Avatar enovate answered

Thanks a lot. This works for me.

But would be great anyway to have the Slideshow function implemented in Yootheme Pro. For background and as well in the content section.

Regards
Fabian

Know someone who can answer? Share a link to this question via email or twitter.