How to use HTML and CSS on a CMS Page?

Question

I have an e-commerce that runs Magento but we do not have the access to both code and server.

We want to create a new page to add some features like countdowns and a form for emails, but even adding all the code in the "Content Area", it still doesn't work.

For example: if I add <script>test</script> on the CMS Page editor and save, when accessing the page, it will just show <script>test</script> as if it is just a text and won't do the action that was supposed to do (in my case, show a countdown). Even with the correct tags and everything else, it just appears to be a text that was written.

So, how do I create a page with HTML, CSS and Script that works correctly on CMS Pages on Magento?

Thanks in advance!

Answer 1

Its seems like you are using <script> tag in wrong way. Because it doesn't print or alert anything if you write <script>test</script> in CMS page.

JS Fiddle https://jsfiddle.net/b8Lgvtap/

For javascript code

<script>
    var now = new Date();
    alert(now); // it will alert current date and time
    document.getElementById('countdown').innerHTML = 'current date and time - ' + now;
</script>

For HTML code

<div id="countdown">Count Down Start</div>

For style you can use <style> tag

<style>
 #countdown{ 
    display:inline;
    color: red !important; 
    font-size: 20px;
}
</style>

Answer 2

The solution to put your CSS, JS only in your cms page is to add a custom path css, js on it via xml like this :

Go to : admin CMS -> Pages -> Design -> XML Layout Updatethen add the code bellow

<reference name="head">
    <action method="addItem"><type>skin_js</type><name>js/filename.js</name></action> 
    <action method="addItem"><type>skin_css</type><name>css/filename.css</name><params/></action>
</reference>

Then you add your css code in skin/frontend/{your package}/{your theme}/css/filename.css

you add your js code in skin/frontend/{your package}/{your theme}/js/filename.js