kawaii_mihoko

Hi Leap13,

Thanks for the additional information!
Too bad that custom CSS animation applied to a widget is not coded to render the same way as ‘Entrance Animation’ would but I will live with that.

Thanks again for looking into my questions!

Hi leap13support,

Thanks for having an answer to the entrance animation!

As for the image animation, here is what I did:
– Add Elementor’s Image widget
– Define a Class ID
– In the widget’s custom CSS: add the CSS (animation and @keyframes) for the new Class ID

Initially, I set the animation to the timing of one slide (5 seconds + 1 second transition = 6 seconds) but it doesn’t work. The animation for every slide starts when the slider runs instead of when the slide appears, so by the time you reach the second and third slide, etc., all animations are over because they all have run when the first slide appears.

My solution is to set the image animation to run the entire course of one loop of the slider and not a single slide.
For example, 5 seconds + 1 second transition for 5 slides = 6 x 5 = 30 seconds.

Plus, to sync up the start of the animation and when the slide appears, I added an animation-delay to the image CSS.

The set up above works when the slider is left to run in infinite loop; however, the visual effect of the animation fails when users click on the carousel’s navigation dots to see a particular slide. The animation is running according to the slider’s clock and not when a slide appears. The users see whatever the image is set to be animated at that moment in the slider loop when the slide is not supposed to be in view.

If it helps, here’s my complete Custom CSS:

Note: in @keyframes, 0% to 20% is the actual image animation, the rest is extra code to extend the time to the end of one slider loop and to reset the animation to its initial state for the next time the slide is run.

.hpslider-gloves3-img {
    width: 100%;
    height: 100%;
    transform: translateY(-100vh) scale(1.15);
    z-index: -1;
    animation: pan-gloves3 30s infinite;
    animation-delay: 6s;
    -moz-animation: pan-gloves3 30s infinite;
    -moz-animation-delay: 6s;
    -webkit-animation: pan-gloves3 30s infinite;
    -webkit-animation-delay: 6s;
    -o-animation: pan-gloves3 30s infinite;
    -o-animation-delay: 6s;
}

@keyframes pan-gloves3 {
  0% {
    transform: translateY(-100vh) scale(1.15);
  }
  2% {
      transform: translateY(0vh) scale(1.15);
  }
  20% {
    transform: translateY(0vh) scale(1.1);
    }
  95% {
    transform: translateY(0vh) scale(1.1);
  }
  98% {
    transform: translateY(-100vh) scale(1.15);
    }      
  100% {
    transform: translateY(-100vh) scale(1.15);
  }
}

@-moz-keyframes pan-gloves3 {
  0% {
    transform: translateY(-100vh) scale(1.15);
  }
  2% {
      transform: translateY(0vh) scale(1.15);
  }
  20% {
    transform: translateY(0vh) scale(1.1);
    }
  95% {
    transform: translateY(0vh) scale(1.1);
  }
  98% {
    transform: translateY(0vh) scale(1.1);
    }
  100% {
    transform: translateY(-100vh) scale(1.15);
  }
}

@-webkit-keyframes pan-gloves3 {
  0% {
    transform: translateY(-100vh) scale(1.15);
  }
  2% {
      transform: translateY(0vh) scale(1.15);
  }
  20% {
    transform: translateY(0vh) scale(1.1);
    }
  95% {
    transform: translateY(0vh) scale(1.1);
  }
  98% {
    transform: translateY(0vh) scale(1.1);
    }
  100% {
    transform: translateY(-100vh) scale(1.15);
  }
}

@-o-keyframes pan-gloves3 {
  0% {
    transform: translateY(-100vh) scale(1.15);
  }
  2% {
      transform: translateY(0vh) scale(1.15);
  }
  20% {
    transform: translateY(0vh) scale(1.1);
    }
  95% {
    transform: translateY(0vh) scale(1.1);
  }
  98% {
    transform: translateY(0vh) scale(1.1);
    }
  100% {
    transform: translateY(-100vh) scale(1.15);
  }
}

Please let me know if this helps and if you need further information. Thanks!

Hi Long,

The culprit turns out to be one of my plugins. Problem solved. Thanks!

Hi Leah,

It looks like the culprit is a mix of set widths:

1. My theme’s default width is 720px
2. tribe-events-bar.js has set the minimum width to 728px

Adding 8px to one of the above should do the trick. Thanks!

Problem solved! It turns out what I need is custom css on the theme and not adding background-position in Optiontree.

Problem solved! I finally figured out that the catch is changing the header spacing rather than the body background image position. Just in case anyone wants the same customization:

In custom.css, add the following:

#header {
padding-bottom: 0px;
margin-bottom: 60px;
}

Hi Alexander,

Thanks for your quick reply! My webhost is a localhost with cURL enabled, but I don’t know if safe_mode is off. I will check.

Meanwhile, I’ve found the following strange solution on Sharrre’s support forum as follows, and it seems to work for both visibility and increase in count:

$('#googleplus').sharrre({
  share: {
    /* Change this LINE! */
    facebook: true
  },
  enableHover: false,
  enableTracking: true,
  click: function(api, options){
    api.simulateClick();
    api.openPopup('googlePlus');
  }
});

Hi Benz1,

I just want to let you know that my host has restored my account and deleted the wp_gcb table before I had the chance to ask them to do so. For fear of jeopardizing my account again, I didn’t attempt to install GCB again to identify where the glitch was.

It’s too bad that I don’t get to try GCB, but much thanks for your speedy responses! Keep up the good work, and perhaps I would be able to use GCB in future projects.

Guess we won’t know until or if I get my account back…

Since my host has identified specifically the wp_gcb table, and I don’t have any similar plugins installed, I doubt it was a conflict with another plugin. I landed on GCB on recommendation from another WP developer, so I wasn’t expecting this problem either.

@dheraty: This works for me:

mysite.com/feed/?ai1ec_event&events_categories=

At the end of “=”, add the slug name of your category

Not sure if you need to add /blog back in your address.

Hope this helps. ??

Skyscraper is still not working for me with WP 3.3.1 & Scociable 4.2.6. I have unchecked Classic version and Skyscraper is still not on my pages. Anything else I can do?

Solved! Thanks for your clarification!

Hi Yani,

Thanks for your suggestion! I’ve tried looking into the theme’s scripts in the past few days, but I couldn’t figure out how to change the scripts. I’ve also looked at the wp_posts database table of both websites, one with ai1ec activated and the other with a different event calendar plugin activated, and data inputs look identical.

For example, for both websites under these wp_posts table columns:
– Post_status: “publish” for event entry with the post_id visible in the url of the event edit page as listed in my original message
– Post_status: “inherit” for all instances associated with the “publish” entry
– Post_type: The proper custom post type name, eg. ai1ec_event, is listed

Also, revisions made to an event will also generate a new entry in the wp_posts table in both cases with post_type = “revision”.

The only difference I can spot between the two databases is not being able to find the corresponding tables for events, categories, feeds, instances, etc. of the second calendar plugin.

Would you mind to be more specific on how to get this to work? Much thanks!!!

I have looked at my backend database and found multiple records (each with a new post_id) for my multi-day events. However, I see them as one event with a single admin edit page on the wp admin frontend. Not sure if this helps explain my enigma?