Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Animate a widget area or the widget icon.

Hello,

I am trying to animate the first widget area on the home page of my theme. This is located right below the test-slider area on dev.robertsonwebdesigns.com. There are three "services" areas below the slider with a rain drop at the top of each widget. The problem is that the service areas are not defined as widgets and I am having a hard time locating the file folders for the code.. I am new to using chrome dev tools(but that is another topic), so now I am lost. What I would like to do is use animate.css to animate the whole service area or at least the rain drops for each area.

Any help would be greatly appreciated!

4 Answers

Andreas Anastasiades
Andreas Anastasiades
2,916 Points

I see,

You'll need to take the part

<i class="icon-facebook animated bounceInDown"></i>

add animated and bounceInDown to it.

Unfortunately I'm guessing it's part of a plugin that generates the icons with fontawesome? So I don't think you'll be able to edit it, unless you go in the plugin itself and change the code there.

Note that when you update your plugin, your changes will be gone.

What you can try, not sure if this will work, add the class with js / jquery

$(function() {
  $('.iconcircle i').addClass('animated bounceInDown');
});

This should give all i elements in .iconcircle these classes, so the 3 blocks.

Try it this way and let me know.

Thanks Andeas,

Would I put that into the functions.php folder?

Thanks for your help!

Andreas Anastasiades
Andreas Anastasiades
2,916 Points

Michael,

No it's not a WP function

Try and go to Appearance > Editor

There select your header.php file

In the <head> </head> tags try adding

<script>
$(function() {
  $('.iconcircle i').addClass('animated bounceInDown');
});
</script>

and check if it works :)

If you already have a .js file with scripts you use, just add this to it

$(function() {
  $('.iconcircle i').addClass('animated bounceInDown');
});

PS you seem to have lost your connection to the fontawesome font, might want to check this :)

Brandon Mowat
Brandon Mowat
8,186 Points

I suggest you read the README.md docs for animate.css. That will help you a lot. https://github.com/daneden/animate.css/blob/master/README.md

When you say "animate", it's pretty vague. Can you be a little more specific as to what you're trying to do?

Thanks Brandon,

By animate I would like to have each individual service area icon drop into the page upon scroll. The animate.css is bounceInDown, I am aware of which animate.css class to use, but I can't find where to put it. The theme has 17+ different layouts and I can't seem to locate the correct folders to place the animate.css into.

Thanks for your interest in the topic!

Andreas Anastasiades
Andreas Anastasiades
2,916 Points

Hi Michael,

What exactly is the problem? Just the position where to place the animate.css file?

To make it easy for testing, just copy the content of the animate.css file on the bottom of your style.css, located through the backend at appearance > editor

Try pasting it there and see if you can get the animation you want in working order.

OK I guess I am confusing this a bit. I have the animate.css file already uploaded and in use on various parts of the site. I want to animate the service area icons but i don't know where to put the code. I have used dev tools but cannot decipher where to insert the bounceInDown class to achieve the desired results.

I have found the icon ids, but not there location within the website. So where to place the class "animate bounceInDown" to animate the service area icons is my question! Thanks for you help, I know I am confusing..

Thanks Andres,

That unfortunately did not work. I inserted the code above the </head> tag. Thanks for pointing out the origins of the icons. They are located directly on the theme developers website. So I am not sure if this is even possible..