Theming Magento: cms pages

How to display a Static-Block in a CMS-Page

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="210" data-original-width="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" /></a></div>
 
One of the coolest things in Magento, is the ability to call a static block within a CMS page. Here is how you can do just that. 
 
FOLLOW STEPS 
 
1. Copy this code into your CMS page 
 
<span style="background-color: #eceff1; color: #3d4245; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; white-space: pre-wrap;">{{block type="cms/block" block_id="ur-block-id"}} 
 
"<span style="background-color: #eceff1; color: #3d4245; font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , sans-serif; white-space: pre-wrap;">ur-block-id" is your block id, remember to change it to correspond to your static block identifier. 
 
//if your block does not display, it simply means your need to set your cms/block permission. 
 
2. Set permission for your CMS/Block (follow steps below to do so, if you have not set it already) 
 
<div style="background-color: white; border: 0px; box-sizing: inherit; clear: both; color: #3d4245; font-family: roboto, arial, sans-serif; font-stretch: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
<code style="background-color: #eceff1; border: 0px; box-sizing: inherit; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 1px 5px; vertical-align: baseline; white-space: pre-wrap;">System > Permissions > Blocks</code></div>
<div style="background-color: white; border: 0px; box-sizing: inherit; clear: both; color: #3d4245; font-family: roboto, arial, sans-serif; font-stretch: inherit; line-height: inherit; margin-bottom: 1em; padding: 0px; vertical-align: baseline;">
Now click on <code style="background-color: #eceff1; border: 0px; box-sizing: inherit; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 1px 5px; vertical-align: baseline; white-space: pre-wrap;">Add New Block</code> and write <code style="background-color: #eceff1; border: 0px; box-sizing: inherit; font-family: consolas, menlo, monaco, "lucida console", "liberation mono", "dejavu sans mono", "bitstream vera sans mono", "courier new", monospace, sans-serif; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 1px 5px; vertical-align: baseline; white-space: pre-wrap;">cms/block</code> on Block Name, finally set YES, on the allow tab and save.</div>
And That's it, you should be able to see you static block display within your CMS page.

One of the coolest things in Magento, is the ability to call a static block within a CMS page. Here is how you can do just that. FOLLO...

How to load custom javascripts and style sheets to specific CMS Pages

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="210" data-original-width="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" /></a></div>
<div style="text-align: center;">
 </div>
In most cases, you may want to run a promotion, which might require you to add custom styling sheet and javascripts files that do not need to be loaded on any other CMS page. 
 
For this task, simply navigate to your Magento Admin panel, 
 
CMS >> Pages >> Select your page >> open Design (under the Page Information Menu not the "Page Information" tab). 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoskA3u_wEqVFhqXi67gAOS8qB3fk6bXtHTvK0Bk9Ar3C2JT5LuFz1zvVZCKxn9T0RCWZes-Pq8QY7wVQFi01tg5EX38agT6LLIM9JMXmMR55l1_8ep4PeKGvAxAJFmvs3bQ2us-u4EOWv/s1600/Screenshot-2018-2-19+New+Page+Manage+Content+Pages+CMS+Magento+Admin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="587" data-original-width="1121" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoskA3u_wEqVFhqXi67gAOS8qB3fk6bXtHTvK0Bk9Ar3C2JT5LuFz1zvVZCKxn9T0RCWZes-Pq8QY7wVQFi01tg5EX38agT6LLIM9JMXmMR55l1_8ep4PeKGvAxAJFmvs3bQ2us-u4EOWv/s640/Screenshot-2018-2-19+New+Page+Manage+Content+Pages+CMS+Magento+Admin.png" width="640" /></a></div>
 
<div class="separator" style="clear: both; text-align: center;">
</div>
 
On the Layout Update XML text-area, add xml script to pull in your custom style sheet and javascript. Magento will load these files only on that CMS page. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje4205rrl2bFaG0jyc_NQ7h_13_hYsS3fEIv97zGpVY4d9mh4dyADS_JP0tJ1q3UrZqjHtg4dQDJzIzHToSkmYbCEB2S5_kqE-CFPhgZap7sDipFwaMmBKes7Pih03L8vy4Cg-KH7tE1EU/s1600/Screenshot-2018-2-19+New+Page+Manage+Content+Pages+CMS+Magento+Admin%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="300" data-original-width="594" height="321" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje4205rrl2bFaG0jyc_NQ7h_13_hYsS3fEIv97zGpVY4d9mh4dyADS_JP0tJ1q3UrZqjHtg4dQDJzIzHToSkmYbCEB2S5_kqE-CFPhgZap7sDipFwaMmBKes7Pih03L8vy4Cg-KH7tE1EU/s640/Screenshot-2018-2-19+New+Page+Manage+Content+Pages+CMS+Magento+Admin%25281%2529.png" width="640" /></a></div>
 
 
 But if you want add custom css and js on all pages of your store, you need to use local.xml (Read: <a href="http://theming-magento.blogspot.co.za/2018/02/localxml-for-beginners.html">local.xml for beginners</a>). 
 
Note: Your custom CSS and JS files need to be located on your Skin's Theme folder. 
skin/frontend/package_name/theme_name/ 
This is where magento will look for your files, in the /css,  /images and /js folder. 
 
I hope this article was helpful to you, please leave your question/s on the comments section below and I will do my best to answer back.

In most cases, you may want to run a promotion, which might require you to add custom styling sheet and javascripts files that do not ne...