Expanding & Scrolling IM Letters - Tutorial 6

Making Expanding IM Letter Part 2


By LismibaebisCreations
28 November 2010

Skill Level: Intermediate/Advanced



Needed

Programs
HTML-Kit
Power Archiver


Code
Your adjusted ExpandingLBAug2014.txt (Lesson 3)


Other Files
The folder with your bgLC.jpg, top.jpg, middle.jpg, bottom.jpg, bgfooter.png (if you have made a background for the footer area) and the extracted files from your .imf
They must all be in the same folder


Performance Notes
This tutorial is in 2 parts:
- Coding
- Making new .imf file


arrow Click on the arrow and drag it to mark the progress on this page.


Coding

1) Open HTML-Kit

2) File > Open File
Look for the Flavor.htm file

3) Delete all code starting with the first Screenshot
(The text below the pink line)

Screenshot

Only leave the code above the pink line (yours will look different to mine) intact, delete everything else

4) Open your code for expanding letters

5) Edit > Select All

6) Edit > Copy

7) Again with HTML-Kit:
Edit > Paste
(into the area you deleted)

8) Make the following adjustments to the Flavor.htm to suit your images.
You need to do this with every stat you create with this method.

Replace 'change width here' with the width of your slices.
Keep the quotation marks in place

Screenshot

9) Change 'change_me_to_top.jpg' to filename of your top slice.
Change '900' to width of your top slice.
Change '77' to height of your top slice.
Keep the quotation marks in place

Screenshot

10) Change 'change_me_to_middle.jpg' to filename of your middle slice.
Change all '333' (6x) to height of your middle slice (you might wish to do this by "Replace")
Keep the quotation marks in place

Screenshot

In this section of the code you can also change the font size if you wish.
If you want to have your text left aligned instead of centered, you would replace the word 'center' with 'left'.

11) Change 'change_me_to_bottom.jpg' to filename of your bottom slice.
Change '900' to width of your bottom slice.
Change '77' to height of your bottom slice.

Screenshot


The Padding

12) With the padding we determine where the text will start on the left and finish on the right.
In Lesson #4 you wrote down the location of the inside of the textbox, find what you wrote down.
I wrote down 17 and 582.
We want to move the text away from the edge, give it some padding.
With expanding stats like this add 15px.

Left Padding:
My example:
17 + 15 = 32

Right Padding:
This is a bit more complicated, because you first have to deduct the number you have from the total width of the image.
My example:
600 - 582 = 18
Then 18 + 15 = 33

Replace '222' with your results
Keep everything else in place

Screenshot


Width

Top stop the textbox in Expanding Letters from breaking up, we have to change the width as well.

Screenshot

13) The width is the total width minus both paddings.
My example:
32 + 33 = 65
600 - 65 = 535
My width is 535px

Screenshot


Top of the Code

14) Now move up to the very top of the code.
We are going to make a couple of changes there as well:

Replace the 'ffffff' (or what you have) in bgColor (text background color) with the color of your Textbox

Screenshot

15) With Color Cop choose a text color from your Top slice, highlight, right click and Copy. Then delete the 6 digits in COLOR and text (in my example 008000) and Paste your chosen color.

Screenshot

A little bit lower down in the code, delete the '0' (or what you have) as SIGCOLOR (Signature Color), type '#' and Paste the text color into the space.

Screenshot

To:

Screenshot

16) With Color Cop choose a link color from your top slice, highlight, right click and Copy. Then delete the 6 digits in alink, link and vlink (in my example ffff00) and Paste your chosen color.

Screenshot

17) Make all the changes in the footer area of the code according to Lesson 3

18) Click on Preview and you should see your letter :-)

Screenshot

If an image is missing, it is most likely that you entered a file name wrong.
Click on Editor to get back to the coding.

19) If it looks ok
File > Save

20) Close HTML-Kit



Making new .imf file

21) Go back to the folder with your files

22) Click "New folder"
Name = supp files

23) Move all files apart from the following list into the new folder
- Flavor.htm
- content.ini
- bgLC
- top.jpg
- middle.jpg
- bottom.jpg
- bgfooter.png (if you have made a background for the footer area)
- any .jpg .gif and/or .png file you use in the footer

24) Edit > Select All

25) Right click on any file and from the Dropdown menu choose:
Compress To... > Compress With Options...

Screenshot

CAB = Checked
Click on Add

Screenshot

26) Rightclick on new file and choose Rename from Dropdown menu.
Change ending .cab to .imf

Click on Yes when the following warning comes up:

Screenshot

27) Double-click on the .imf file (orange envelope) and your new letter should import to your IM Stylebox - ready to use



If you have any questions, please email Lismibaebi at gmail.com.



Link to previous Lesson Lesson Plan Link to next Lesson