Joomla Templates Club 406,261 posts

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#200454

Hi,

JA Muzic comes by default with a nice zoom effect on pictures when hovering the article containing it.

But unfortunately, it also “zooms” my galleries for example (I use Simple Image Gallery Extended).
See for example
http://www.fesdig.com/fr/editions-precedentes/edition-2014/photos

How to avoid this unwanted side-effect ?
(if not possible to “filter”, how to simply disable it then ? Or choose another effect that would enlarge *all* pictures of the galleries, like black&white or whatever)

Txs 🙂

Marc

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#545764

Hello i am afraid its needs several changes in the css file and needs to add more css to make the zoom effect only for the specific items or page .
Try this .
Go to css/template.css
find this code
.items-row .item article:hover img,
.items-leading .leading article:hover img {
transform: scale(1.05);
-ms-transform: scale(1.05);
-webkit-transform: scale(1.05);
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}


change it into

/*.items-row .item article:hover img,
.items-leading .leading article:hover img {
transform: scale(1.05);
-ms-transform: scale(1.05);
-webkit-transform: scale(1.05);
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}
*/
it will disable the hover zoom effect for intro article images .
Clear cache and check .
Let me know if it helps 🙂

1 user says Thank You to Pankaj Sharma for this useful post

1. woluweb

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#545818

Hi,
Txs, you have indeed pointed to the right CSS piece of code.
Actually, it is sufficient to comment the second line to disable the hover effect on the whole site (intro images, normal images, gallery images).

I was hoping to be able to disable hover effect only on galleries, but I think I can live with no hover effect at all then 🙂

By the way, the file I had to edit was the following
/templates/ja_muzic/local/css/themes/my_theme/template.css

How comes ?
I had never noticed this local directory before…

.items-row .item article:hover img,
/*.items-leading .leading article:hover img*/ {
transform: scale(1.01);
-ms-transform: scale(1.05);
-webkit-transform: scale(1.05);
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
}

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#545821

<blockquote>I had never noticed this local directory before…</blockquote>
Hello the local css feature is added by the T3 plugin . as you know many users have issue when they are updating the template the custom changes are lost .so the css are stored in the local folder .
here you can read the full information about this feature 🙂

1 user says Thank You to Pankaj Sharma for this useful post

1. woluweb

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#545823

Waouw, I have discovered that new feature thanks to you !
Interesting, because it means that a user can now override a layout which was already overriden by the template (without loosing changes when updating the template).

3. Override Joomla core layout

Joomla core layouts are stored in: {root}/templates/{template-name}/local/html. For example, if you want to override the Joomla article layout:

{root}/templates/{template-name}/local/html/com_content/article/default.php

Personnally, I used to duplicate manually one of the themes delivered with the Template.
But the Documentation is not very clear : should continue I to duplicate a theme and edit my LESS files in
/www/templates/my-template/less/themes/my-theme
Or is it now better to use “local” to override an existing Theme ?

By the way, when I click on “compile LESS to CSS”, the files are created in
/www/templates/my-template/local/css/themes/my-theme
and not in
/www/templates/my-template/css/themes/my-theme
But should I keep my LESS theme where it was, namely
/www/templates/my-template/less/themes/my-theme ?

Txs 🙂

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#545848

Hello
yes you can create article layout in the local folder .
if you want to create a complete new article layout , then i suggest you , you can use this .and if its a change in the template override article layout , then i prefer you to use local folder . 🙂
<blockquote>But should I keep my LESS theme where it was, namely
/www/templates/my-template/less/themes/my-theme ?
</blockquote>
The template theme css and less files are the default files , don`t delete them ever .
if you will delete the local css files then it will be created auto from default files .

Here is the complete Article about this .
Hope it helps you 🙂

[Author]

Posts