Mynwood Cat Jackets #1 - Adding a New Material

For PhotoImpact X3 (will probably also work with version 12).

Open a new image, 700px wide by 100px high.

New Image

Select the Text Tool.

Text tool

Use the font 'HansHand', size 27, bold. Select the Color Picker. Download the HansHand font here. Save it to your hard drive, and then double click on it to install it on your system. It should then appear in the Font drop down menu in PhotoImpact. (You may need to restart PhotoImpact to get it to display the first time.)

Colour Picker

Set the text colour to #792101.

Colour Picker

Select the Pick Tool once you have finished the text.

Selection tool

Once you've pressed the Pick Tool, the text will already be selected (you can see it's selected when there are animated dots all around the edges of the letters). Press CTRL-C to copy it.

Selecting the text

Press CTRL-SHIFT-V to 'Paste as New Image'.

Pasted as new image

Press anywhere NOT on the text to unselect it, or just press Enter, which has the same effect.
Select the Bucket Fill Tool, and then select the Color Picker Tool.

Bucket fill Colour Picker Tool

Set the colour to #947C3E by entering that value in the Hex box in the bottom right hand corner.

Corel Colour Picker

Fill the background of the image with the colour.

Text with filled background

Now I need to save the image as a GIF file, and to set the background colour as transparent. I use a background colour which is similar to the colour of the background image onto which we are going to place the custom text. This ensures that the pixels around the edge of the text are approximately the same colour as the background image, and don't stand out. If I had left the background as white, when I saved the text image, it would have light grey pixels around the edges, and this would show up on the beige background image when we put it on the web page.

Select File, Save As. Tick the box at the bottom "Invoke Options dialog box". (This lets you adjust the settings of the file before you save it.) Navigate to the folder '/images/fabric cats/' to save it. Call it 'blackandwhite-title'. Press 'Save', and you will be taken to the GIF Image Optimizer screen.

Save As window

On the right is the image that will be saved, on the left is the original. On the left hand side, press the magnify button a few times to zoom into the image. Then select the 'Mask Options' tab. Change the Mask pull down option to 'Pick Color', and select the Eyedropper.


Click anywhere on the coloured background in the left hand window, and you will see the background colour turns to a check pattern - this will be transparent in the saved image. Notice that the edges of the letters have varying shades of light brown pixels on them - this is why we had to fill the background with the light brown colour earlier, otherwise these pixels would be white or very light, if we had left the background as white.

Background colour selected

Press OK to save the image, giving it a name like "blackandwhite-title.gif". All of the title text images are like this - "soandso-title.gif". Upload the image to the server using Filezilla, to the /images/fabriccats/ folder.


To add the text to the webpage, edit the file designer.php, and duplicate the following part of it - take this text from where you want to put the new jacket material.

The first part is the beginning of the "fabricblock" div.

The second part displays the custom text, using the CSS class "eastern" in this case. What this means is "look in the CSS file for a style called "eastern" and use those values to 'style' the h3 element of this page".

This is the CSS code, which is in the file default.css. In this case, the text image is called "eastern-title.gif" and is in the "images/fabriccats/" folder. The "text-indent" property is set to -9999px, which means that the actual h3 (heading) text is shifted off the screen by 9999 pixels, and is therefore never seen, and instead we see the custom text, which we have set as the background of the h3 element.

Every time you add a new material, you will need to copy the style above, in the file default.css, and simply change the name of the image (which in the example above is "eastern-title.gif"). Just add the copied text to the end of that section in the CSS file, which all begin with "#maincontent #fabrics h3". You may need to change the "height" value too - look at the text image you created in Photoimpact and it will show you the height and width of the image.

The next bit of HTML displays the cat silhouette. You need to store the image in the "images/fabriccats/" folder, every time you make a new cat silhouette.

The CSS class "catfabric" above styles the image using the style below, from the default.css file. This doesn't need to be changed, as this style is used for every cat silhouette on the page. All it does is set the top and right margins to 10px. (The four values after a "margin:" property are for top, right, bottom and left margins, in that order.)

The next part of the code is the "form" section - this produces the Paypal form, which you copy and paste from your Paypal account, for each new fabric. We have to edit the original Paypal code, so that we have 'radio buttons', rather than a drop down menu.

But it's easier to just copy the entire "form" section above instead of using the Paypal code and trying to edit that, and then replace the gobbledegook in the third line, which will be something like "5YZ9CPZRJ2CEA", with the gobbledegook in the Paypal version of the form. That is the part that tells Paypal which product the customer is adding to their cart, so each product will have its own custom code like "5YZ9CPZRJ2CEA".

The final part is the "fabricthumbs" section, which is where we display images of either the fabric itself, or cats wearing a jacket made from that fabric. This uses Javascript to make the images expand when you click on them. Just copy the code above and substitute in the names of your new images. The thumbnail should be 75px wide, any height is fine, and the enlarged image can be anything up to 800px wide. I choose 800px because most tablets can display that wide an image.
Copy your thumbnail images to the /images/fabric thumbs/ folder, and your enlarged images to the /images/fabric fullsize/ folder. Don't forget that if you only have one image, change the final paragraph to "Click image" not "images".

Go to part two - how to create the 3D cat silhouette.

Why use BondWebDesign?

I am a freelance web designer, with five years' experience working with X-Cart, and have run my own X-Cart e-commerce site for the last four years. I offer a personal service and will endeavour to help you with any queries you have about your site's customisation.
I always reply to e-mails within 24 hours, normally within half an hour if I'm at my computer, and my Live Chat button (above) will show you when I'm working on your site, so you can contact me every day to discuss how the site is progressing.