Docs

[Kashevko]

Hello!
Thank you for a great theme!
I’m using integrity stack and my developing website is ponylab.studio.
I have 3 questions:

1.

I would like to implement the same code from the ”Animate It” plugin as I implemented for the footer: faded effect.
So, I have a CSS class:

animated fadeIn duration7 eds-on-hover

The question is:
How could I specify in the customizer-custom CSS that I want to implement a particular class to a particular object? (in my situation to all top navbar headings such as home, contacts, etc.

2. I would like to apply some effect for the website background image while it’s appearing. Let’s, for example, take the same code from the first question. Which code should I implement that it will say to the integrity theme to use this class for the background image?

3. You could see on the website that my footer is little up. How could I fix it to the bottom?
I already have this custom javascript:

jQuery(document).ready(function($) {
   var $main = $('.x-main'),
       $windowHeight = $(window).outerHeight(),
       $masthead = $('.masthead').outerHeight(),
       $wpbar = $('#wpadminbar').outerHeight(),
       $footer = $('.x-colophon.bottom').outerHeight() + $('.x-colophon.top').outerHeight();

   $main.css('min-height', $windowHeight - $masthead - $wpbar - $footer);
});

It helped me to down a footer from the top, but it still little up. And in some page refreshment, it even pushes the footer little higher.
What could I do?

Thanks in advance for helping and for awesome product,
Serg

[Rad]

Hi there,

Thanks for posting in.

1. The plugin could be using javascript too, hence it has to be included if you wish to implement it. And those class names are needed to be implemented to element class attribute and not on custom CSS.

Example,

<div class="animated fadeIn duration7 eds-on-hover"></div>

Contacting the plugin author will greatly help you 🙂

2. You’ll have to integrate that plugin or any library that provides animation effect, then integrate it through element’s class attribute as the sample above.

3. Footer is empty, would you mind providing a screenshot of how it’s supposed to look like?

Thanks!

[Kashevko]

Thanks for the reply!
Let me describe precisely:

3. Let’s begin with the third question as it will give the understanding of my concern.
Please, see the attached screen below.
Simple text: ”(c) Ponylab 2017. All love reserved.” is all my footer for now 🙂
I would love it to be fixed a little lower.

2. As you may see, while website page is downloaded, footer text appears with a little fade animation.
I’ve got this effect by the simple implementation of this code to the footer in the Customizer footer area:

[edsanimate_start entry_animation_type= "fadeIn" entry_delay= "0" entry_duration= "3" entry_timing= "linear" exit_animation_type= "" exit_delay= "" exit_duration= "" exit_timing= "" animation_repeat= "1" keep= "yes" animate_on= "load" scroll_offset= "" custom_css_class= ""]
<p style="color: #000000";>(c) Ponylab 2017. All love reserved.</p>[edsanimate_end]

It’s regular ”Animate It” plugin code which could be implemented on any page.
But the Plugin authors also have the class generator (http://www.downloads.eleopard.in/class-generator-wordpress) to “generate animation classes and add these classes to the “custom CSS” option of the plugin where you wish to apply the animation.”

And in the class generator, this code took a look of this:
animated fadeIn duration7 eds-on-hover

So, for the background image in my style.css I have the code:

.home.x-boxed-layout-active .site {
background-image: url('ponylab.studio/wp-content/uploads/2017/02/ponyspace2.png');
}

I’ve tried this to implement animation for the background image:

 <div class=" animated jello duration12 eds-on-hover ">
.home.x-boxed-layout-active .site {
background-image: url('ponylab.studio/wp-content/uploads/2017/02/ponyspace2.png');
}
</div>

But it doesn’t work. Could you please tell me where I’m wrong with the code?

1. The same question for the ”HOME”, ”CONTACTS” and ”PAQ” menus in my header.
I’d like to implement some animation on hover there too.
Could you please tell me which file and area should I edit so the plugin classes will work?

Thanks!

[Christopher]

Hi there,

#3 Please update your code to :

<p style="color: #000000;margin-bottom: 0;">(c) Ponylab 2017. All love reserved.</p>

Add following CSS in customizer :

body footer .x-colophon-content {
    margin-bottom: 0 !IMPORTANT;
}

#2 Your code is wrong, such code doesn’t exist :

 <div class=" animated jello duration12 eds-on-hover ">
.home.x-boxed-layout-active .site {
background-image: url('ponylab.studio/wp-content/uploads/2017/02/ponyspace2.png');
}
</div>

It could be :

 <div class=" animated jello duration12 eds-on-hover ">
<img src="ponylab.studio/wp-content/uploads/2017/02/ponyspace2.png">
</div>

Not sure if it works or not but at least the format is correct.

#1 Please let us know what animation you want, we might be able to help you with this.

Thanks.

[Kashevko]

Hi Cristopher!

Problem #3 solved. Thanks!

#2

Doesn’t work…

#1 the same as for the footer: when website downloads the menu smoothly appears.

Thanks.

[Christopher]

Hi there,

#2 It sounds like you might be having an issue with a third party plugin or script. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

#1 There is no animation i n your footer, please provide us with screen shot or screen cast.

Thanks.

[Kashevko]

#2 Ok, I understand, thanks.

#1 Please check this screen cast.
https://drive.google.com/file/d/0B-B7y9ntb1DWUENIREpyWFNIX0U/view

[Rupok]

Hi there,

Thanks for the screenshot. So your problem is the text appearing a bit slow, right? It’s because you are using a plugin called “animate it” that’s applying fade in animation there. So either you need to check what you are doing with that or try disabling the plugin.

Cheers!

[Kashevko]

Hi!

Nope, I want to apply the same effect for the menu ”Home”, ”Contacts”, ”PAQ” but don’t know where to implement the CSS.
Could you please tell me how my css code in the customizer should look so it will apply this <div> for my menu?
<div class="animated fadeIn duration7 eds-on-hover"></div>

Thanks.

[Rue Nel]

Hello There,

Thanks for updating in! If you want to animate your menu items, you will have to add the custom class to your menu items. To know more how you can add some custom classes to each of the menu items, please check this out: http://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item

You can follow the steps 1, 2, and 3. You’ll need to insert your custom css in #3. #4 step is no longer necessary since you are just using the Animate It Plugin.

Hope this helps.

[Kashevko]

Works like a charm.
Great thanks Rue!

[Paul R]

You’re welcome! 🙂

[Author]

Posts