Joomla Templates Club 406,261 posts

[Município de Vila Real Friend Município de Vila RealJoin date: January 2017Posts: 44Downloads:29Uploads:17 Thanks: 11]

#1005879

Hi,
I have the same problem, so you basically say there is no way of making this template work properly in IE?
I asked the very same question to your vendor and i was told this problem would be solved!!
Is there at least for now, a way of disabling the blend mode in all browsers?
Regards

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

#1006703

Hi,

The drawback here is that IE doesn’t support blend mode that’s why it doesn’t work properly.

In case that you want to disable this mode, you can open the less file: ROOT/templates/ja_mono/acm/cta/less/style.less

Look for this css rule:

.acm-cta {
  display: table;
  height: 100vh;
  width: 100%;
  background-color: @brand-primary;
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center center;

then change property: background-blend-mode: multiply;

to: background-blend-mode: normal;

If your site is running with development mode, just refresh front-end of your site to see the change. If Development mode is OFF, you will need to backup all current css files on your site first then compile less to css (you will see this button in template manager section).

Regards

[Município de Vila Real Friend Município de Vila RealJoin date: January 2017Posts: 44Downloads:29Uploads:17 Thanks: 11]

#1007369

Hi, what you suggested did not work. What i did was remove the .background line in all ie8,ie9,ie10… instances. That seems to work, i hope i did not brake anything else in the process.

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

#1007482

Hi,

Kindly remember to backup the old files first (just in case).

And let me know if you need further helps.

Regards

[thepeakconsultancy Friend thepeakconsultancyJoin date: January 2016Posts: 14Downloads:31Uploads:8 Thanks: 1 Thanked: 3 times in 2 posts]

#1012203

Hi, I have had this problem for a while and have used this workaround. It doesn’t fix the blend but using #111111 at 50% gives a decent effect that at least makes the site look good in IE and Edge. Try a different filter colour to give an effect close to the blended page in Chrome (my mid-tone is a near neutral grey so #111111 at 50% is a close match).

You will need to change the filter and add .ie12, .ie13, etc. to make it also work for Edge – we are at ie14 so far, I think, but adding 15, 16, 17, etc. shouldn’t hurt (I haven’t tried it yet).

Make sure you have the latest Mono template downloaded – and make sure you have all your other CSS changes backed up before you update the template.

In templatesja_monolocalcssthemesstyle.css:
Find:
.ie11 .acm-cta,
.ie10 .acm-cta,
.ie9 .acm-cta,
.ie8 .acm-cta { … }

Add:
.ie12 .act-cta,
through
.ie14 .act-cta,

Do the same for .ie11 .acm-cta:before but also set the styles:
background: #111111;
…
opacity: 0.5;
filter: alpha(opacity=50);

Save the file.

Now open templatesja_monolocalcssthemestemplate.css and do the same for:
.ie11 .articles-list.ja-isotope-wrap.packery .item .article-img:before,
.ie11 .articles-list.ja-isotope-wrap.packery .item:hover .article-img:before,
.ie11 .blend-bg.jamasthead:before,

You may need to do this in other places (I’m sure @saguaros can advise) but this seems to work for me – you can see the results on dev.thepeakconsultancy.co.uk.

Good luck!

2 users say Thank You to thepeakconsultancy for this useful post

1. Saguaros
2. brusamolino

[Author]

Posts