Joomla Templates Club 406,261 posts

[etchot Friend etchotJoin date: November 2012Posts: 40Downloads:0Uploads:6 Thanks: 16 Thanked: 5 times in 1 posts]

#187896

I would like to remove the grayscale image effect from the JA Content Popup module. As a result the images should always be displayed with their real color (not white and black). How can I do it?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#494506

Hi etchot,

As mentioned in user guide of this template for tips to add grayscale image: http://www.joomlart.com/forums/topic/ja-one-page-template-userguide/

If you wanna remove it, you can simply remove the ‘class=”img-grayscale”‘ inside the img tag.

Hope it helps.

[etchot Friend etchotJoin date: November 2012Posts: 40Downloads:0Uploads:6 Thanks: 16 Thanked: 5 times in 1 posts]

#494526

Hi Saguaros,

Thank you for your message. I am afraid that your answer applies to the Custom HTML module but I want to remove the grayscale image from the JA Content Popup module.

[etchot Friend etchotJoin date: November 2012Posts: 40Downloads:0Uploads:6 Thanks: 16 Thanked: 5 times in 1 posts]

#495129

I just commented line 167 in templatesja_onepagejsjs.script and the greyscale image was removed from the JA Content Popup module.

// Grayscale(this);

3 users say Thank You to etchot for this useful post

1. phong nam
2. jmredondo
3. iwadeaz

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#501787

The /* block comment worked for me..

/* Grayscale (this);

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#501789

Although, it doesn’t work for IE (8), still gray… ??

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#501876

Hi

With IE versions below IE9, this template uses css filter for these grayscale image. You can change LESS or CSS file:

– For LESS, you open file: /templates/ja_onepage/less/style.less, at line 923


img.jaimage,
div.circle_image .img-grayscale,
.clients .img-grayscale{
max-width: none9 !important;
filter: gray9; <<<<< Remove this line
}

.clients .testimonial .hiring .img-grayscale,
.partners .span2 .img-grayscale,
.thumbnails li div.thumb-mask .mask-inner .img-grayscale{
max-width: none9 !important;
filter: gray9; <<<<< Remove this line
}


Then go to backend > template manager > compile less to css

– With CSS, depending on the theme you are using, you will see the same css code in associated template.css file and remove the filter property like above

Suppose that you’re using default theme, you can open file: /templates/ja_onepage/css/template.css

If you want to edit css, I recommend you to make change in custom.css file in /templates/ja_onepage/css folder, you can add this css code:


img.jaimage,
div.circle_image .img-grayscale,
.clients .img-grayscale{
max-width: none9 !important;
filter: none9;
}

.clients .testimonial .hiring .img-grayscale,
.partners .span2 .img-grayscale,
.thumbnails li div.thumb-mask .mask-inner .img-grayscale{
max-width: none9 !important;
filter: none9;
}


Hope this helps

[Author]

Posts