Unite Revolution Slider Extension Issue

Hi,

I want to animate my headers using the Unite Revolution Slider extension, but it doesn't work.

I'm attaching a home page screenshot with the header that I want to animate with the Slider component.

Right now with the Slider component, the home page just show the blue sky slide background: http://coorambiental.org/ basically because the layers position are in the bottom of the slide.

Do you have any idea how this issue can be fixed?

Thanks!

Hi

I'm afraid I do not know this extension or how it should works, so I may not be able to help. Can You show me an example of working slider or explain what You wish to achieve ?

Hello,

Basically with this extension you can create containers (sliders), and inside each of them you can add different kind of layers (text, images, video) and animate them. The result is amazing, well in theory, look: http://www.unitecms.net/joomla-extensio ... responsive

The whole setup process is inside its component and through a module you display the content.

I'm attaching an image with the setup parameters section. As I said, I've tried with different combinations that makes sense to me, but neither of them had worked.

It looks that there is a conflict with the "header" template position.

Thanks a lot for your help, if you need to get in to see how the component works, let me know and I'll give you access.

Best,

Dario

Hi

I'm still not sure, but for stary please remove any code related with this module position from template.css file:

Code: Select all

#gkHeaderNav {
    margin: 0 auto;
    max-width: 100%;
    padding: 0;
    position: relative;
    top: 0;
    transition: margin-left 0.3s ease-out 0s;
    width: 1440px;
    z-index: 10;
}
#gkHeaderMod {
    background: #26292b none repeat scroll 0 0;
    overflow: hidden;
    position: relative;
    text-align: center;
}
#gkHeaderMod .gkPage {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
#gkHeaderMod img {
    height: auto;
    left: 50%;
    max-width: none !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 100%;
    will-change: top;
}
#gkHeaderMod > .parallax-img.gk-vertical {
    height: 100%;
    width: auto;
}
#gkHeaderMod > .parallax-img.gk-horizontal {
    height: auto;
    width: 100%;
}
#gkHeaderMod h1 {
    color: #fff;
}
#gkHeaderMod h1 + p, #gkHeaderMod h1 + h2 {
    margin-top: 10px;
}
#gkHeaderMod h2, #gkHeaderMod h1 + p {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 32px;
}
#gkHeaderMod .btn-border {
    margin: 80px 5px 0;
}
#gkHeaderMod .btn-border:hover {
    border-color: #111 !important;
    color: #111 !important;
}
#gkHeaderMod .btn-thin-border {
    background: transparent none repeat scroll 0 0 !important;
    border: 1px solid #26292b !important;
    color: #f079a3 !important;
    margin: 80px 5px 0;
}
#gkHeaderMod .btn-thin-border:hover {
    border-color: #fff !important;
    color: #fff !important;
}
#gkHeaderMod sub {
    bottom: 65px;
    color: #fff;
    font-size: 12px;
    left: 0;
    letter-spacing: 2px;
    line-height: 1.8;
    position: absolute;
    text-transform: uppercase;
    width: 100%;
}
#gkHeaderMod .big-icon {
    color: #26292b;
    font-size: 60px;
    left: 50%;
    margin-left: -30px;
    position: absolute;
    top: -130px;
}


Hello,

Sorry for the waiting..

Ok, I was doing some experimentation with the extension and I found a very close setup to fit in this template.

Now, following your indications, removing the all code doesn't work because I lost the whole header functionality for the other pages.

So, I just started removing by parts and at this moment I just removed this lines:

/*
#gkHeaderMod img {
height: auto;
left: 50%;
max-width: none !important;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
-moz-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
width: 100%;
will-change: top;
}
*/

As you can see at http://coorambiental.org/ the home page header is already animated, but the responsiveness functionality is not working properly.

It's almost done but my css knowledge is so basic, so I appreciate any further idea to fix it, thanks!

Hi

Do You mean a header height ? I think it's working correctly. There is an image in back which whole slider it fitting to, but there is no code from this module to resize smaller images on this screen, so it's the best responsiveness You can get here I'm afraid.

Well, it's frustrating because I'm in the middle of the extension and the template and I'm not a Joomla Developer, so at the end the I see that this extension gives a great functionality, but it doesn't fit properly in this template.

I'm attaching an screenshot with its advance parameters, so do you think that there is maybe some template class, suffix, etc that it can help to work the responsiveness issue in a proper way?

Thanks for your help,

dp

Hi

It's not about template code. I'm attaching a screenshot of css classes used for images in slider. I'll try to explain what it means. As You can see the piece of styling I've underlined is coming from our template. It's crossed over which means that this code has been overwritten and is not used, which means only slider styling is being used in slider. The first class in styling has dimensions for the image. They are static while it should be resizing if it has a responsive functionality, but the size stays same for all the screen widths. This means module is not suitable for responsive layout.

Please make a simple test and disable our template, use Protostar, which is the default joomla template. You will see module will not act responsively than as well. I would really like to help, but I simply cannot implement such functionality to a module which is not our product, sorry.

Hello,

I appreciate the time you took to explain to me this extension limitation in a visual way.

It's a shame that this extensión doesn't fit well in responsiveness templates, I produce motion graphics in AE, and to have this kind of animation inside headers is totally amazing to me.

Anyways, thanks again for your explanation, so kind from your part!

Hi
Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro