| Read more about this book |
(For more resources on this subject, see here.)
Looks quite interesting, doesn’t it? Let’s get started!
Introduction
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!
Using Cufón to include any font we like in our theme
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.
Getting ready
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.
How to do it…
Ready to start this first recipe? Let’s go:
- First we have to decide which font to use; this is totally up to you. In this example I’m going to use this one: http://www.dafont.com/aldo.font. It’s a free font, and looks very good! Thanks to Sacha Rein. Just download it or find any other font of your liking.
- Now we need to use the Cufón generator in order to create the font package. We will go to this URL: http://cufon.shoqolate.com/generate/. There we will be able to see something similar to the following screenshot:
- On that screen we only have to follow all the instructions and click on the Let’s do this button:
- This will create a file called Aldo_600.font.js, which will be the one we will be using in this example. But we also need something more, the Cufón library. Download it by clicking the Download button:
- After downloading the Cufón library, we will download a file called cufon-yui.js.
- We now have all the necessary tools. It’s time to make use of them.
- First place cufon-yui.js and Aldo_600.font.js inside skin/frontend/default/rafael/js.
- Now we need to edit our layout file. Let’s open: app/design/frontend/default/rafael/layout/page.xml.
- Once we have this file opened we are going to look for this piece of code:
<action method="addCss"><stylesheet>css/960_24_
col.css</stylesheet></action>
<action method="addCss"><stylesheet>css/styles.
css</stylesheet></action> - And just below it we are going to add the following:
<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.
- With this done, our theme will load these two JS files. Now we are going to make use of them. Just open app/design/frontend/default/rafael/template/page/2columns-right.phtml.
- At the bottom of this file we are going to add the following code:
<script type="text/javascript">
Cufon.replace('h1');
</script>
</body>
</html> - And that’s all we need. Check the difference! Before we had something like the following:
- And now we have this:
Every h1 tag of our site will now use our Aldo font, or any other font of your liking. The possibilities are endless!
How it works…
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.
SlideDeck content slider
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!
How to do it…
Making use of the slider in our theme is quite simple, let’s see:
- First we need to go to http://www.slidedeck.com/ and download SlideDeck Lite, as we will be using the Lite version in this recipe.
- Once downloaded we will end up with a file called slidedeck-1.2.1-litewordpress-1.3.6.zip. Unzip it.
- Go to skin/frontend/default/rafael/css and place the following files in it:
- slidedeck.skin.css
- slidedeck.skin.ie.css
- back.png
- corner.png
- slides.png
- spines.png
- Next, place the following files in skin/frontend/default/rafael/js:
- jquery-1.3.2.min.js
- slidedeck.jquery.lite.pack.js
- Good, now everything is in place. Next, open: app/design/frontend/default/rafael/layout/page.xml.
- Now look for the following piece of code:
<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> - Place the jQuery load tag just before the prototype one, so we have no conflict between libraries:
<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> - Also add the following code before the closing of the block:
<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> - The following steps require us to log in to the administrator panel. Just go to:
http://127.0.0.1/magento/index.php/admin.
- Now to CMS/Pages, open the home page one:
- Once inside, go to the Content tab.
- Click on Show/Hide editor.
- Find the following code:
<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 → - And replace it with the following:
<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 → - Save the page and reload the frontend.
- Our front page should have a slider just like the one seen in the following screenshot:
- And we are done! Remember you can place any content you want inside these tags:
<dl class="slidedeck">
<dt>Slide 1</dt>
<dd>Sample slide content</dd>
<dt>Slide 2</dt>
<dd>Sample slide content</dd>
</dl>
How it works…
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.
