Cloudflare animate class css

This may not be the place to ask but maybe someone might be able to help…

I am creating a page in wordpress and I’ve add the cdn for the cloudflare animate css and it just doesn’t get the external css, I am trying to use the bounce class. It works fine in the FCC challenge and independently on my laptop but not on WordPress!!

I’ve added the link below to my page and I’ve also tried the plugin and neither works…has anyone had this issue before

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

works wherever I test it except in Wordpress

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

WordPress caches stylesheets by default. I know when I’ve worked on WP sites, it can be a pain updating the stylesheets. Make sure you clear your browser cache, and also clear your WP cache, and make sure you contact your site hosting provider to turn off caching on your site. That might be the problem. Open up inspector and see if you get any errors or if your files are loading correctly.

Or, show us the link to your page and we can look if it’s loading correctly.

http://capecodwebdesigns.atwebpages.com/?page_id=166&preview=true

this is a draft…it’s not been published… as mentioned couldn’t get the plugin to work either. thanks

Are you putting the link in the HTML source or are you just putting the link in the WYSIWYG box?

Also, what do you mean plugin? You shouldn’t need a plugin for this.

For the page, I’m getting this also:

Is that what you are working on, or is that an error?

ok I’m just starting in WP so I am putting the html in the add pages section of the dashboard within the text tab, not the visual tab. I’ve read that you can use the cloudflare plugin in wordpress if it doesn’t work.

I just copied the url into a new browser page and it brings me right to it…could it be authority?

thanks…

I take it that you are doing something like this:

I don’t believe that will work. When you add that there, that will be put in the post body most likely. I think you should try putting this in the theme’s files.

I think there might be confusion here between cloudfare and animate.css. The cloudfare plugin optimizes your site. Animate.css is a css file that is hosted by cloudfare’s cdn. The CDN is separate from your site, so having the plugin on your site shouldn’t help you at all.

Most likely. Since it is a draft, I don’t think WP let’s unauthenticated users see it.

yes that’s exactly what I’m doing…under the text tab. I add my other cdns there for bootstrap and javascript and they work fine it’s just the css…oh well… thanks for your help…i’ll keep plugging away at it…again wondering if you can get to the link because it’s a draft…

hmm. I’ll have to try that out on my end, I’m probably wrong.

If you want to publish it, I’ll look at it.


@camperextraordinaire, do you have any ideas what may be the problem?

k…just published it…i will delete it after

http://capecodwebdesigns.atwebpages.com/bounce2/

i think because the draft was under admin it may have been an authority issue

I find I can do way more outside of WordPress then it. I have more control…

WordPress is open source. You should be able to edit all of the files via ftp… but yeah, I get your point. I prefer static websites to a lot of WP stuff now.

I’ll look at it here, taking a break from computer for 40mins. I can see a couple errors so far.

please don’t go crazy with this…just something I was testing and got hung up on…thanks again

You can just hardcode and add the animate css link into your WP theme’s header.php file, in between the head tags.

1 Like

Ok, so if you open up your code in your browser, this is the part where you are adding your code:

<div class="post-entry">
					<p><!DOCTYPE html><br />
<html lang="en"><br />
<head></p>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><br />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></p>
<p><script>
$(document).ready(function(){
   $("button").addClass("animated bounce");
    });</p>
<p></script></p>
<p></head></p>
<p><body></p>
<p id="demo">JavaScript can change HTML content.</p>
<p><button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button></p>
<p><!-- Only change code above this line. --></p>
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button><br />
        <button class="btn btn-default target" id="target2">#target2</button><br />
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
</p></div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button><br />
        <button class="btn btn-default target" id="target5">#target5</button><br />
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
</p></div>
</p></div>
</div>
<p></body><br />
</html></p>
									</div><!-- end of .post-entry -->

				

<div class="post-edit"></div>
							</div><!-- end of #post-166 -->

You have an error with your script tag inside a p tag.

Try fixing that and see if it works. But, I would do like owel mentioned and I suggested above by editing your theme.

tried that…it didn’t work…i don’t add the p tags they get generated but I removed that before and recreated the page and no luck…I will try what he suggested…

the code without the p tags works fine outside of WP…the problem is WP inserts the p tags and I don’t know where they are stored to remove them.

also WP doesn’t store html…

It’s been a long time, but if I remember right script tags in the body are removed, due to security issues and some chars may also be replaced with their html encoded equivalent… again, to prevent malicious scripts from being embedded and executed in the dynamic copy.

apparently so…just for kicks I copied the code from WP and stripped out the p tags and it works fine outside of WP these are getting inserted and since it doesn’t store html I can’t figure out how to get to it to remove the p tags…oh well…giving up for the time being…thanks again