Read more about this book |
(For more resources on this subject, see here.)
Looks quite interesting, doesn’t it? Let’s get started!
You will find all the necessary code in the code bundle; however, some JavaScript libraries won’t be included. Don’t worry, they are very easy to find and download!
This technique, which allows us to use any font we like in our site, is quite common these days, and is very, very useful. Years ago, if we wanted to include some uncommon font in our design, we could only do it by using a substitutive image. Nowadays, we have many options, such as some PHP extensions, @font-face, Flash (sIFR), and, of course, Cufón. And that last option is the one we are about to use.
If you would like to copy the code, instead of writing it, remember you can find all the necessary code in the code bundle in Chapter 5, recipe 1.
Ready to start this first recipe? Let’s go:
<action method="addCss"><stylesheet>css/960_24_
col.css</stylesheet></action>
<action method="addCss"><stylesheet>css/styles.
css</stylesheet></action>
<action method="addJs"><script>../skin/frontend/
default/rafael/js/cufon-yui.js</script></action>
<action method="addJs"><script>../skin/frontend/
default/rafael/js/Aldo_600.font.js</script></action>
See, we are adding our two JavaScript files. The path is relative to Magento’s root JavaScript folder.
<script type="text/javascript">
Cufon.replace('h1');
</script>
</body>
</html>
Every h1 tag of our site will now use our Aldo font, or any other font of your liking. The possibilities are endless!
This recipe was quite easy, but full of possibilities. We first downloaded the necessary JavaScript files, and then made use of them with Magento’s add JS layout tag. Later we were able to use the libraries in our template as in any other HTML file.
Sometimes our home page is crowded with info, and we still need to place more and more things. A great way of doing so is using sliders. And the SlideDeck one offers a very configurable one. In this recipe we are going to see how to add it to our Magento theme. You shouldn’t miss this recipe!
Making use of the slider in our theme is quite simple, let’s see:
<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/
prototype.js</script></action>
<action method="addJs" ifconfig="dev/js/
deprecation"><script>prototype/deprecation.js</script></action>
<action method="addJs"><script>lib/ccard.js</script></
action>
<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>../skin/frontend/
default/rafael/js/jquery-1.3.2.min.js</script></action>
<action method="addJs"><script>prototype/
prototype.js</script></action>
<action method="addJs" ifconfig="dev/js/
deprecation"><script>prototype/deprecation.js</script></action>
<action method="addCss"><stylesheet>css/slidedeck.skin.css</
stylesheet></action>
<action method="addCss"><stylesheet>css/slidedeck.skin.ie.css</
stylesheet></action>
<action method="addJs"><script>../skin/frontend/default/rafael/js/
slidedeck.jquery.lite.pack.js</script></action>
http://127.0.0.1/magento/index.php/admin.
<div class="grid_18">
<a href="#"><img src="{{skin url='img_products/big_
banner.jpg'}}" alt="Big banner" title="Big banner" /></a>
</div><!-- Big banner →
<div class="grid_18">
<style type="text/css">
#slidedeck_frame {
width: 610px;
height: 300px;
}
</style>
<div id="slidedeck_frame" class="skin-slidedeck">
<dl class="slidedeck">
<dt>Slide 1</dt>
<dd>Sample slide content</dd>
<dt>Slide 2</dt>
<dd>Sample slide content</dd>
</dl>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.slidedeck').slidedeck();
});
</script>
<!-- Help support SlideDeck! Place this noscript tag on
your page when you deploy a SlideDeck to provide a link back! -->
<noscript>
<p>Powered By <a href="http://www.slidedeck.com"
title="Visit SlideDeck.com">SlideDeck</a></p>
</noscript>
</div>
<!-- Big banner →
<dl class="slidedeck">
<dt>Slide 1</dt>
<dd>Sample slide content</dd>
<dt>Slide 2</dt>
<dd>Sample slide content</dd>
</dl>
This recipe is also quite easy. We only need to load the necessary JavaScript files and edit the content of the home page, in order to add the necessary code.
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…