|
Custom Calendar
Here is an example of what we will be making:
This tutorial requires knowledge of your graphic program, and also basic html knowledge.
Okay, on to the work!
You will need the following programs:
- Any graphics program (i.e. Paint, Photoshop, Paint Shop Pro)
- Notepad
- Winzip, winrar or any other unzipping program
What we basically are going to do, is to draw a background image, and then stick the calendar digits to the top of this image. It is very important that you follow all steps of this tutorial.
1. Download THIS .rar-file.
2. Open calendar_01.gif in your graphics program
This file is just an example of what the backgroundimage of the calendar could look like.
Create your own backgroundimage using your graphic program, any size you want your calendar to be, as long as there's room for all the text in the calendar (minimum size of your calendar should be about 87x92 pixels). You can even animate the image if you want to, transparency is also no problem! Overwrite the existing calendar_01.gif file.
3. Open calendar_01.htm in Notepad
Edit yoururl.com to your own url (i.e. turtlebug.net) in the following line:
<img border="0" src="http://www.yoururl.com/calendar/calendar_01.gif">
Edit the numbers 5 and 4, to the position where you want the top left of the calendar to appear in your image (left is the number of pixels from the left in your image, top is the number of pixels from the top of your image) in the following line:
POSITION: absolute; left: 5px; top:4px;">
It is also possible to change border-color, fon, font-color etc. on your calendar. I will not describe exactly which lines that need to be edited in this tutorial. If you feel quite secure about what you are doing, feel free to experimet a bit, but always keep a backup of this file in case something should go terribly wrong.
Save the changes to calendar_01.htm
4. Open calendar_01.js in Notepad
Edit width and height to the size of your backgroundimage (size is measured in pixels)
Edit yoururl.com to your own url
Save the changes to calendar_01.js
5. Upload the folder, with all files in it, to your webspace.
6. Open the page that you want your calendar to appear on in Notepad (i.e. your home.htm page), then copy and paste the following code anywhere you want between the <body> and </body> tags:
Edit yoururl.com to your own url
Save and upload.
7. That's it! You now have your very own custom calendar on your website!
 
|