AllRoots

Did a bit more digging on my end and posting the solution in case anyone else has a similar problem, in hopes of helping prevent hours of frustration for someone else. 🙂 If using custom CSS, it must go within the HTML, after <style> and before </style>. These were missing from my code, so I added them in.

Hi Creedon - thanks for the response. I do not have the "display source code" toggled on.

I'm trying to insert a code block into my website to show progress bar for donations, but when adding a code block and choosing CSS, the full code is showing up on my site instead of the progress bar it's supposed to be showing. Am I missing something in my code? Here is the code, for reference: body { padding: 50px; } .progress-bg { margin: 0 auto; width: 55%; height: 78px; border-radius: 10px; text-align: center; -moz-box-shadow: inset 0 0 10px #ccc; -webkit-box-shadow: inset 0 0 10px #ccc; box-shadow: inset 0 0 10px #ccc; } .progress-bar { height: 78px; border-radius: 10px; float: left; width: 50%; /* fallback */ background-color: #1c314a; /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1c314a), to(#27425f)); /* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #1c314a, #27425f); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #1c314a, #27425f); /* IE 10 */ background: -ms-linear-gradient(top, #1c314a, #27425f); /* Opera 11.10+ */ background: -o-linear-gradient(top, #1c314a, #27425f); } .progress-bg h3.goal, .progress-bg h3.raised { font-family: Arial,sans-serif; font-size: 1.5em; font-weight: 600; line-height: 78px; margin: 0; padding: 0; text-align: center; display: inline; } .progress-bg h3.raised { color: #fff; padding: 0 25px 0 0; } .progress-bg h3.goal { color: #b2b2b2; text-align: center; } body .progress-bg h3.raised { -webkit-animation: fadein 4s; /* Safari and Chrome */ -moz-animation: fadein 4s; /* Firefox */ -ms-animation: fadein 4s; /* Internet Explorer */ -o-animation: fadein 4s; /* Opera */ animation: fadein 4s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Firefox */ @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari and Chrome */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Opera */ @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .progress-bg h3.goal { float: right; display: inline; padding: 0 25px 0 0; text-align: center; } body .progress-bg div { -webkit-animation: progress-bar 2s ease forwards; -moz-animation: progress-bar 2s ease forwards; -o-animation: progress-bar 2s ease forwards; animation: progress-bar 2s ease forwards; } @-webkit-keyframes progress-bar { from { width: 0%; } to { width: 20%; } } @-moz-keyframes progress-bar { from { width: 0%; } to { width: 20%; } } @-o-keyframes progress-bar { from { width: 0%; } to { width: 20%; } } @keyframes progress-bar { from { width: 0%; } to { width: 20%; } }