Cloudflare animate class css

Cloudflare animate class css
0

#1

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">

#2

We just need the link.


#3

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">

#4

I was referring to the link to your Wordpress website.

FYI - I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#5

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.


#6

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


#7

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.


#8

I get a 404 message from the link you provided. Which page are you trying to animate something using animate.css?


#9

For the page, I’m getting this also:

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


#10

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…


#11

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.


#12

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…


#13

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.


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


#14

No, I don’t use Wordpress. I was just hoping to see the page where animate.css was being referenced to see if anything popped up in the console.


#15

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…


#16

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.


#17

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


#18

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


#19

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.


#20

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…