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!

• Abhishek Panchal: which magento version you are using?

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>

• magflok: Thanks, Abhishek! I've added your code directly on the CMS Page (just adjusted the CSS to be inline) and it worked! Now I just need to implement the counter to count from today to a specific date on the script.
• Abhishek Panchal: please check this answer and JS fiddle code. I did the exactly same thing which you want. magento.stackexchange.com/questions/189201/countdown-timer/… - hope it helps :) please accept the answer of its useful :)

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>

enter image description here

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

• magflok: Hello, Prince! Thanks for your answer. As I said, I do not have access to add archives on the server. So this way is not possible for me. I need to found a way where I can do everything just in the CMS Page Editor or at least, call a JS that is uploaded on another server.
• PЯINCƎ: @magflok I gave you the best way to do that and according the standards of Magento, if you haven't access to your server it's another problem.