logo maximenuck 64Maximenu CK

Maximenu CK is a Joomla megamenu dropdown with nice effects.

logo slideshowck 64Slideshow CK

Slideshow CK, nice effect with this slideshow responsive design.

logo accordeonmenuck joomlaAccordeon Menu CK

Accordeon menu CK is a joomla accordion menu with mootools effects.

logo template creator joomlaTemplate Creator CK

Template Creator CK is a tool to create your own Joomla! templates.

Welcome, Guest
Username: Password: Remember me

TOPIC: Custom effect no longer working

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

  • ClaudioRomeo
  • ClaudioRomeo's Avatar
  • OFFLINE
  • Expert Boarder
  • Posts: 91
  • Thank you received: 3
  • Karma: 0
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;
}
}
Do you need VirtueMart Documentation? Check VirtueMart Matters
Last Edit: 17 May 2017 13:32 by ClaudioRomeo. Reason: Attachment not valid
The administrator has disabled public write access.

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

  • ced1870
  • ced1870's Avatar
  • OFFLINE
  • Administrateur
  • Posts: 17463
  • Thank you received: 2230
  • Karma: 388
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
Joomlack Webmaster and Developer
The administrator has disabled public write access.

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

  • ClaudioRomeo
  • ClaudioRomeo's Avatar
  • OFFLINE
  • Expert Boarder
  • Posts: 91
  • Thank you received: 3
  • Karma: 0
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!
Do you need VirtueMart Documentation? Check VirtueMart Matters
The administrator has disabled public write access.

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

  • ced1870
  • ced1870's Avatar
  • OFFLINE
  • Administrateur
  • Posts: 17463
  • Thank you received: 2230
  • Karma: 388
Hi
please clear your browser cache
CEd
Joomlack Webmaster and Developer
The administrator has disabled public write access.

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

  • ced1870
  • ced1870's Avatar
  • OFFLINE
  • Administrateur
  • Posts: 17463
  • Thank you received: 2230
  • Karma: 388
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
Joomlack Webmaster and Developer
The administrator has disabled public write access.

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

  • ClaudioRomeo
  • ClaudioRomeo's Avatar
  • OFFLINE
  • Expert Boarder
  • Posts: 91
  • Thank you received: 3
  • Karma: 0
AARRGGHHH!
It seems I was made to act as a stupid!
:blink: :oops:
Thank you, Ced...
Do you need VirtueMart Documentation? Check VirtueMart Matters
The administrator has disabled public write access.

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

  • ced1870
  • ced1870's Avatar
  • OFFLINE
  • Administrateur
  • Posts: 17463
  • Thank you received: 2230
  • Karma: 388
CSS is something really funny beause sometimes you think it works, but in fact it does not ;)
Joomlack Webmaster and Developer
The administrator has disabled public write access.
Time to create page: 0.234 seconds
Powered by Kunena Forum

Mentions légales

Site made by Cédric KEIFLIN

Privacy policy

Copyright © 2010 - 2015

http://forum.joomlack.fr is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla!® name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

Qui est en ligne

We have 347 guests and 6 members online