Zen Follower
- Join Date:
- Dec 2009
- Posts:
- 236
- Plugin Contributions:
- 0
Want to make your text look like an image? Here's how..
In the interest of giving something back, I thought Id share this.
As you're aware, the various headings, sidebox titles etc, in Zen Cart are text generated. IMHO, this can sometimes look a little 'ordinary' in the browser. (the text isnt anti-aliased like it is in an image)
Further to that, you may have a font you want to use throughout your site, but its not a common font that people's computers necessarily have and therefore, know how to display. And if you want to substitute an image for the various headings in Zen Cart (page titles, sideboxes, shopping cart etc) you're going to be in for a MOUNTAIN of work doing it. :smile:
But there's an alternative - what if the text headings in Zen Cart could be shown in any font you liked and also looked nice and smooth like an image? (I realise Im starting to sound like an ad, bear with me!)
There's a tool called Cufon. Its amazing.
Basically, you feed the Cufon generator a font - and it creates a javascript file that 'represents' that font.
Here's an example; https://www.crushcosmetics.com.au - the logo is of course an image. But notice the sidebox headings? The page titles? - thats Cufon and its using the same font as is used in the company logo.
Here’s another; https://www.scolina.com – all of the sidebox titles, header navigation links are text not images, and the font used there is Myriad Pro. Normally, you’d never be able to show a font like that unless you rendered an image instead.
So the beauty is that Zen Carts files are not modified in any way - but Cufon takes over and 'styles' the areas that I choose.
So how do you implement Cufon into your site?
Best thing is to follow these instructions; http://fearlessflyer.com/2009/10/cufonize-your-pages-how-to-add-cufon-to-your-web-design/
After you’ve done that, download the javascript files and put them in;
includes/templates/YOUR_TEMPLATES/jscript
Then find the file html_header.php file and put it in the 'common' folder of your template. Include the following lines of code so that they show up in the HEAD of your web page;
<script type="text/javascript" src="includes/templates/YOUR-TEMPLATE/jscript/cufon-yui.js"></script> <script type="text/javascript" src="includes/templates/ YOUR-TEMPLATE /jscript/YOUR_CHOSEN_FONT.font.js"></script> <script type="text/javascript" src="includes/templates/ YOUR-TEMPLATE /jscript/cufon-replace.js"></script>How do I choose what gets “Cufoned”?
Open up the cufon-replace.js file and feed it class or id names that appear in your CSS stylesheet.
For example, if you want the sidebox text headings to be Cufoned, you’d add this line to your file; ```
Cufon.replace('h3.rightBoxHeading', {hover: true});
The h3.rightBoxHeading – is declared in the style sheet. The hover:true part will let the text change colour if you have the hover attribute already declared too.
To save you some time, here’s my entire Cufon-replace file. It style most, if not all page headings, sidebox headings, header navigation, and error messages.
Cufon.replace('h3.rightBoxHeading', {hover: true});
Cufon.replace('h2.centerBoxHeading');
Cufon.replace('#navTopContainer');
Cufon.replace('li.navTopContainer');
Cufon.replace('#navcontainer', {hover: true});
Cufon.replace('.messageStackWarning');
Cufon.replace('.messageStackError');
Cufon.replace('.messageStackSuccess');
Cufon.replace('.messageStackCaution');
Cufon.replace('#cartDefaultHeading');
Cufon.replace('#cartEmptyText');
Cufon.replace('#createAcctDefaultHeading');
Cufon.replace('#loginDefaultHeading');
Cufon.replace('#gvFaqDefaultHeading');
Cufon.replace('#discountcouponInfoHeading');
Cufon.replace('#pageThreeHeading');
Cufon.replace('#pageTwoHeading');
Cufon.replace('#pageFourHeading');
Cufon.replace('#advSearchDefaultHeading');
Cufon.replace('h2.manufacturer');
Cufon.replace('#productListHeading');
Cufon.replace('#indexCategoriesHeading');
Cufon.replace('h4.optionName');
Cufon.replace('#ezPagesHeading');
Cufon.replace('#attribsOptionsText');
Cufon.replace('#checkoutSuccessHeading');
One final note, as good as Cufon is, it is a little "processing intense" in that it has to convert your chosen headings from text to a canvas of sorts. Dont cufon everything on your site, or you'll likely discover a performance hit.
Use it sparingly and it can really lift the design of your website without any performance penalties.
Cheers,
Scott.
Donation made. Enjoy those donuts! :-)
