Hover Effect of another template for this

as I can make the effect of the template on the More News section.


In More News

http://demo.gavick.com/joomla25/news/


I want to do for The World News II template

The hover properieties are:

Code: Select all

.gkMenu > ul > li:hover > a, .gkMenu > ul > li:active > a, .gkMenu > ul > li:focus > a {
background: #E25B32;
border-color: #2A2A2A;
border-bottom: none;
border-top: none;
-webkit-box-shadow: inset 0 0 27px rgba(0, 0, 0, 0.75);
-moz-box-shadow: inset 0 0 27px rgba(0,0,0,0.75);
-ms-box-shadow: inset 0 0 27px rgba(0,0,0,0.75);
box-shadow: inset 0 0 27px rgba(0, 0, 0, 0.75);
}


while standard (not hovered) are:

Code: Select all

.gkMenu > ul > li > a {
border: 1px solid rgba(0, 0, 0, 0);
border-top: none;
border-bottom: none;
border-left: none;
color: #C7C7C7;
display: block;
font-size: 14px;
font-weight: 400;
height: 45px;
line-height: 45px;
margin: 0;
padding: 0 14px;
text-transform: uppercase;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}


The important thing to get the animation effect is to add transition parameters, and then modify some aspects of an element look.

Hello:

Where I have to change that. ??

Its not that You have to change that - You need to get properietes from the world news 2 properieties.
You could use the css file: /templates/gk_twn2/css/override.css and enable "CSS override" in template settings - advanced section.
If You don't have at least basic knowledge on css, let me know, Ill try to prepare working classes for You.

In template module suffix news, I see you use "nsp bigtitle nsphover".

Lo que quiero conseguir es esto:

01-06-2013 11-25-04.jpg

But I get having added to override the code you gave me is this:

01-06-2013 11-27-28.jpg

OH, so You was not talking about menu but other items - next time please be more precisely when describing what You would like to do.
Please name all elements that You would like to look like "News" template, or place screenshots comparing side to side those elements.

I want to do with the module news show pro GK4 or GK5.

That I have to put suffix, guess I'll have to add some CSS in my template to get it.

Each template has its own styling.
With "News" template, depending on style type Ypu have selected (style1-6 in settings) You get the desired or other view.
here:
http://demo.gavick.com/joomla25/news/
style1 is used, and from file /gk_news/css/style1.css this section is used:

Code: Select all

/* gk_stuff.css */
.nspPagination li:hover,
.nspPagination li.active {
   background: #e25b32;
}
.nspNext,
.nspPrev {
    background-image: url('../images/style1/nsp_interface.png');
}
.nspArt h4.nspHeader a:active,
.nspArt h4.nspHeader a:focus,
.nspArt h4.nspHeader a:hover {
   color: #eb592a;
}
.nspArt p.nspInfo a:active,
.nspArt p.nspInfo a:focus,
.nspArt p.nspInfo a:hover {
   color: #eb592a;
}
.dark .nspLinks ul li h4 a:active,
.dark .nspLinks ul li h4 a:focus,
.dark .nspLinks ul li h4 a:hover {
   color: #eb592a;
}
.dark .nspArt h4.nspHeader a:active,
.dark .nspArt h4.nspHeader a:focus,
.dark .nspArt h4.nspHeader a:hover {
   color: #eb592a;
}
.dark .nspNext,
.dark .nspPrev {
   background-image: url('../images/style1/nsp_interface.png');
}
.box.header .nspImageWrapper h4:hover {
   background: #e25b32;
}
.box.header .nspLinks .nspLinkScroll1 div ul li:hover {
      background: #e25b32;
}
.nsphover .nspInfo2 {
   background: #e25b32;
}
.nsphover .nspHoverOverlay {
   background: #e25b32;
}
.nsphover .nspHoverOverlay .nspText,
.nsphover .nspHoverOverlay .nspText a {
   color: #ffbfab;
}
.nsphover .nspHoverOverlay .nspHeader a:active,
.nsphover .nspHoverOverlay .nspHeader a:focus,
.nsphover .nspHoverOverlay .nspHeader a:hover {
   color: #ffbfab;
}
.gkwTemp {
    color: #E25B32;
}
.nspMainPortalMode7 .nspArt:hover .nspHeader a {
    color: #fb5a29;
}
.nspMainPortalMode7 .nspPrev,
.nspMainPortalMode7 .nspNext {
    background-image: url('../images/style1/nsp_portal_mode_7_interface.png');
}


If You know css enough You could try to copy and correct those declarations to override.css to get same result.
Just remember to enable "CSS override" in template settings - advanced section.

Hi Cyberek,

i would like use this effect by new template Creativity, This template use "News Show Pro GK5". I copied your css code in my override css and set same settings from "News Show Pro" module, which is integrated by template http://demo.gavick.com/joomla25/news/, but this effect (nsphover) do not work.

My Website, where you can see this is http://www.audiomeister.de/template-features/module-variations.html. The correct section is named as "More News".

Please, can you help me to find a solution to use effect "nsphover" by this template?

I´m installed "News Show Pro GK4" too and configured module with same Settings and css code, but this modul do not work correct.

regards
Dominik

Sadly this is quite big customization work that we does not support.
As I have written above, each template uses its own classes to customize some standard modules, so in each template same module might look quite different. Also there is jQuery code attached to some events so everything will work.
So to copy look from one of template to another, there is a lot of css digging, fine tunning of classes and Js editing.