Want to make your text look like an image? Here's how..

[Scott_C]

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.

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; 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; 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/cuf...ur-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.

[DrByte]

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>

An even smarter way, which means you don't have to even touch the html_header.php file, is to follow the built-in auto-loading method for files in the jscript folder.

If you simply add "jscript_" as a prefix to each of the filenames that you uploaded to the /includes/templates/YOUR_TEMPLATE/jscript folder, then ALL those files will automatically be loaded by html_header.php WITHOUT HAVING TO EDIT IT at all !

[Scott_C]

I do remember trying that at the time I was first setting this up and it wasnt working. (jscript_ in front of file)

Im almost entirely sure that its because of something I was doing though!

[jasonh1234]

Tried both of these methods with 1.3.9h and neither worked.

[gjh42]

What part of it didn't work? I can't speak for the cufon or particular javascript code, but the jscript_ file method will always work on a standard Zen Cart installation if done right. So, what is non-standard about your site, or what step did you miss or mess up when doing it?

[jasonh1234]

Pardon my brevity as I'm replying from my cellphone right now.

The non-standard thing about my site is I'm using a purchased theme.

[gjh42]

Okay, we probably need to see your site to advise on what may be wrong. Do you know who made the template? Some companies like Template Monster are notorious for chopping and changing standard functionality. Do you know if the jscript_ file(s) are being called in the <head>? (Look in view source when you get to a computer.)

[jasonh1234]

I will be back at my computer in a few minutes. I was hesitant to name the source of the theme in case I got banned for advertising or something but yes it was a template monster theme. Will reply again shortly.

[jasonh1234]

The theme I am using is:
osc4.template-help.com/ zencart_30581 /index.php

I have already removed all the code and .js I put in, from this thread. But I can put it all back again for troubleshooting purposes if need be.

[gjh42]

We need to see your site with at least some of the jscript_ files installed to tell if they are being processed into the head as they should be.