Theming Magento: Bootstrap

<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>
Sometimes you may want to modify specific views of you store, instead of making changes to 
all of your store views. You will mostly likely us this approach to load custom css and js, instead of loading unnecessary files on all your pages. 
 
A. Loading style sheet and Javascript on specific view. 
 
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
<?xml version="1.0"?><layout></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
</pre>
<pre style="background-color: #2b2b2b; font-family: "dejavu sans mono"; font-size: 11.3pt;"><pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"> <catalog_category_default> </pre>
<pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"> <reference name="head"> </pre>
<pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"> <action method="addCss"> </pre>
<pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"> <stylesheet>css/bootstrap.css</stylesheet></pre>
<pre style="font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> </action> </pre>
<pre style="font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> </reference></pre>
<pre style="font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> </catalog_category_default></pre>

<pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"></pre>

<pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"></layout></pre>

</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
</pre>
<div>
 </div>
This will tell magento to add bootstrap.css on the <head> of the category catalog view. You may to read <a href="http://theming-magento.blogspot.co.za/2018/02/how-to-use-boostrap-in-your-magento.html">How to use Bootstrap on Magento</a>. 
 
B. Remove block on specific views of your store. 
 
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
<?xml version="1.0"?></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"><layout></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
 <catalog_category_default></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> <remove name="footer.newsletter"/> </pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> </catalog_category_default>
</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"></layout></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
</pre>
<div>
 </div>
This will tell Magento to remove the "footer.newsletter" block only on the category catalog view. 
 
Wait! What if you want to add custom style sheet and javascript only to specific CMS pages? [<a href="http://theming-magento.blogspot.co.za/2018/02/how-custom-js-and-css-to-specific-cms.html">VIEW SOLUTION HERE</a>]. 
 
Magento is a heavy system, so do your best to use as little recourse as possible. to boost the 
over roll performance of your store.  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.

Sometimes you may want to modify specific views of you store, instead of making changes to all of your store views. You will mostly lik...

<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 this article I will show you how to add Boostrap files in Magento using local.xml, 
(if you not sure what is local.xml, you will need to read "<a href="http://theming-magento.blogspot.co.za/2018/02/localxml-for-beginners.html">local.xml file for beginners</a>") 
 
Step by step 
 
1. First you need to download Bootstrap at <a href="https://getbootstrap.com/" target="_blank">https://getbootstrap.com/</a> 
 
2. Unzip files on to your Theme's Skin folder 
 
Folder Path: skin/frontend/package_name/theme_name/ 
This is where you will find you /css,  /images and /js folder 
 
3. Next you will need to create the file local.xml, under your theme's Layout folder 
 
File Path: app/design/frontend/package_name/theme_name/layout/local.xml  
 
4.  Open your local.xml and add paste the following script:  
 
 
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;">
</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"><?xml version="1.0"?><layout> </pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> <default></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;">
</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"><pre style="font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> </pre>
</pre>
<pre style="background-color: #2b2b2b; font-family: "dejavu sans mono"; font-size: 11.3pt;"><pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"> <reference name="head"></pre>
<pre style="font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> <action method="addCss"></pre>
<pre style="font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> <stylesheet>css/bootstrap.min.css</stylesheet></pre>
<pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"> </action></pre>
<pre style="font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> </reference></pre>

</pre>
<pre style="background-color: #2b2b2b; font-family: "dejavu sans mono"; font-size: 11.3pt;"> </default></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"></layout></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;">
</pre>
 
This will tell Magento to add all Boostrap file/s inside <head> of all your pages. If you would like to only load Boostrap files on specific pages of your store, you need to read "<a href="http:/#">How to use local.xml to modify specific pages</a>".  eg you will learn how to only load Boostrap or any other script files only on the product page or the category catalog view. 
 
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 this article I will show you how to add Boostrap files in Magento using local.xml, ( if you not sure what is local.xml, you will nee...

Theming Magento

How to use local.xml to modify specific pages of Magento

How to use Boostrap in your Magento store