Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: Custom effect no longer working

Custom effect no longer working 17 May 2017 13:31 #42184

Hi.
I achieved a custom Image Effect based on Ming. I called it rose_red.
Until 7 days ago (more or less) it worked fine. Now, it works perfectly on mobile, not on desktop (there are two media queries at the end of the code).
I had inserted the css code into the custom css panel of Template Creator, but now this code seems to be not completely recognized.
If I put this code at the end of imageeffectck.css, it works, but not perfectly (title anyway visible, wrong color and so on).
So, my questions:
  • did you changed something to Image Effect CK?
  • how can I implement my own effect?
  • if I can't put the code in Template Creator, how can I override imageeffectck.css, to avoid overwriting during the updates?
You can find my code at the end of the message.
And finally: I know my questions are not about an Image Effect issue. Nevertheless, any help would be greatly appreciated. Tell me if I need to open a sort of paid ticket.

/*
*/
/****** Rose ******/
/* Basato su Ming */
/*
*/


/***** Red *****/

figure.effectck-rose_red {
background: #ff0000;
}

figure.effectck-rose_red img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}

figure.effectck-rose_red figcaption::before {
position: absolute;
top: 7%;
right: 7%;
bottom: 7%;
left: 7%;
border: none; /* 2px solid #fff; */
box-shadow: 0 0 0 7% rgba(255,255,255,0.2);
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(1.4,1.4,1);
transform: scale3d(1.4,1.4,1);
}

figure.effectck-rose_red .imageeffectck_title {
margin: 7% 0 10px 0;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
font-weight: 700 !important;
visibility: hidden;
}

figure.effectck-rose_red .imageeffectck_desc {
padding: 1em;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.5);
transform: scale(1.5);
text-transform: none;
}

figure.effectck-rose_red:hover .imageeffectck_title {
-webkit-transform: scale(0.9);
transform: scale(0.9);
border-top: 2px white solid;
border-bottom: 2px white solid;
visibility: visible;
}

figure.effectck-rose_red:hover figcaption::before,
figure.effectck-rose_red:hover .imageeffectck_desc {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}

figure.effectck-rose_red:hover figcaption {
background-color: rgba(255,0,0,0.4) !important;
}

figure.effectck-rose_red:hover img {
opacity: 0.4;
}

@media screen and (max-width: 480px) {
figure.effectck-rose_red .imageeffectck_title {
font-size: 0.8em !important;
line-height: 0.9em !important;
}

figure.effectck-rose_red:hover .imageeffectck_title {
padding-top: 0.6em;
padding-bottom: 0.6em;
}

figure.effectck-rose_red .imageeffectck_desc {
font-size: 0.6em !important;
line-height: 0.7em !important;
}
}

@media screen and (min-width: 481px) {
figure.effectck-rose_red .imageeffectck_title {
font-size: 1.5em !important;
line-height: 1.6em !important;
}

figure.effectck-rose_red:hover .imageeffectck_title {
padding-top: 1em;
padding-bottom: 1em;
}

figure.effectck-rose_red .imageeffectck_desc {
font-size: 0.8em !important;
line-height: 0.9em !important;
}
}

Please Log in or Create an account to join the conversation.

Do you need VirtueMart Documentation? Check VirtueMart Matters
Last Edit: by ClaudioRomeo. Reason: Attachment not valid

Custom effect no longer working 17 May 2017 18:49 #42200

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 17674
  • Karma: 391
  • Thank you received: 2264
Hi
first I don't have made any changes and if you don't update yourself, there is no changes at all for sure

now to use a custom effect, you can simply put your code in a CSS (of your template for example). If you apply any css class "effectck-XXX" to your image, the plugin will process it and your css will apply
CEd

Please Log in or Create an account to join the conversation.

Joomlack Webmaster and Developer

Custom effect no longer working 22 May 2017 09:54 #42375

Hi, Ced.
There is something going wrong, in my opinion.
I made a simple test.

I made a copy of the Ming section from imageeffectck.css and pasted it into a text editor

Searched and replaced effectck-ming -> effectck-mong

I put the modified section into the Custom CSS panel of Template Creator. Saved and applied.

Modified the class of the image from effectck-ming to effectck-mong. It doesn't work.

You can find it at https://carbsandprotein.com/ . ANVIL, BRICK and EMBER are effectck-ming and work. SPARKS is effectck-mong and doesn't work.

These images are withing a Page Builder module.

A simple change like this, worked perfectly until two weeks ago: this drives me crazy!

I can't figure out which is the mistake I made!

Please Log in or Create an account to join the conversation.

Do you need VirtueMart Documentation? Check VirtueMart Matters

Custom effect no longer working 22 May 2017 10:01 #42376

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 17674
  • Karma: 391
  • Thank you received: 2264
Hi
please clear your browser cache
CEd

Please Log in or Create an account to join the conversation.

Joomlack Webmaster and Developer

Custom effect no longer working 22 May 2017 10:04 #42377

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 17674
  • Karma: 391
  • Thank you received: 2264
forget my answer ... lol

you have an eror in your custom css on

/* Dimensione immagine prodotto sul mobile */
@media screen and (max-width: 524px) {
.vm-product-container .vm-product-media-container {
width: 100%;
}

it misses the closing bracket

Please Log in or Create an account to join the conversation.

Joomlack Webmaster and Developer

Custom effect no longer working 22 May 2017 10:12 #42378

AARRGGHHH!
It seems I was made to act as a stupid!
:blink: :oops:
Thank you, Ced...

Please Log in or Create an account to join the conversation.

Do you need VirtueMart Documentation? Check VirtueMart Matters

Custom effect no longer working 22 May 2017 10:31 #42379

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 17674
  • Karma: 391
  • Thank you received: 2264
CSS is something really funny beause sometimes you think it works, but in fact it does not ;)

Please Log in or Create an account to join the conversation.

Joomlack Webmaster and Developer
  • Page:
  • 1
Time to create page: 0.339 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 197 guests and no members online