What is the 'transition type' & ' module style' of demo

Hello, great template by the way!

Can you tell me what is the transition type and module style that is used in the demo template home page for the 4 large buttons please?

I am having trouble getting mine to match the vertical rolling movement and have a 'white square' that covers each image on mouseover.

Any suggestions are welcomed

thanks
D

Hi

Transition type is a javascript effect which You are choosing to change from one slide to another.

Module style is all about the look. With different module style module will look different.

Hello again,

I am having trouble getting my animated transition between the big button styles to match the demo site version.

I want my transitions to be vertical (like the demo) but mine are horizontal and have a blank white block that covers the buttons during transition.

Can this be fixed by selecting different 'transition types' from the back end? If so, what is the name of the Animation transition that I need to select please?

If not, what would you suggest?


Here is my deev page http://175.107.174.3/~sapdev/dev/index.php

regards
D

Hi

I can see template was modified so it may be because of that or an interference from a 3rd party extention. Please send me an access to joomla panel so maby I'll be able to tell more by checking settings.

Hi

I've logged to Your site and than I understood what You are talking about. This transition is not an animation transition of the module mentioned and selectible from module settings. This is a CSS transform function connected when this module is displayed in "mainbody" position.

Code responsible for that is simply:

Code: Select all

.big .gkTab ul.gkTabs li.gkTab-2 {
    background-position: -155px 0;
    -moz-transition:background 0.25s ease-out 0s, color 0.15s ease-out 0s;
}

.big .gkTab ul.gkTabs li.gkTab-1:hover, .big .gkTab ul.gkTabs li.gkTab-1.active {
    background-position: 45px -200px;
}

.big .gkTab ul.gkTabs li.gkTab-2:hover, .big .gkTab ul.gkTabs li.gkTab-2.active {
    background-position: -155px -200px;
}

.big .gkTab ul.gkTabs li.gkTab-3:hover, .big .gkTab ul.gkTabs li.gkTab-3.active {
    background-position: -355px -200px;
}

.big .gkTab ul.gkTabs li.gkTab-4:hover, .big .gkTab ul.gkTabs li.gkTab-4.active {
    background-position: -555px -200px;
}

etc....


Hello again,

Fantastic, thats really helpful, I now know where to start, thanks!

Issue
I am having an issue with width and would like to be able to show at least 4 buttons in the one horizontal space.

Background
I would like this transform effect to be used in a position that can span the whole width of the site (perhaps position 1) and at the same time allow me to keep a right column underneath in the "right position"

Questions
1. Is there any reason why I could not copy the CSS transform function code to work in one of the top 1-6 positions as well? (any conflicts)
2. Is it possible to have the buttons smaller (by 50%) and keep the same 'CSS transform function' effect?

I know this would be custom coding but what would I need to consider for this?

Thanks again.

regards
D

Hi

Issue: Please place 4 buttons and show me this page. We'll figure out something.

Background: Sorry I do not get this one.

Questions:
1. No You can copy it for all.
2. Of course it's possible. Please just put back this buttons and I'll tell You the code.