Pocket IE Start Page Documentation

Page Sections: Contents

Last revised on 2004-04-10

Contents

Page Sections: Contents - Back to Top

Introduction

Although developing this project took far more time that I care to admit publicly, using it or modifying it shouldn't prove to be too difficult as long as you have a basic understanding of HTML. I don't recommend editing the HTML files in a WYSIWYG editor such as FrontPage due to the sheer amount of useless crap it tends to add to the files if you've never changed the default settings. (Configured "properly," about the only things it adds are a couple of meta tags.)

I created the HTML and CSS files using UltraEdit-32 in Windows. The graphics were created using Photoshop v7.0.1, but the layered images should be compatible with Photoshop 6.x, Paint Shop Pro 7/8, The Gimp, or any other graphics application that can open layered Photoshop images. I do not know if layer effects such as drop shadows translate properly to other applications, however, so you may have to be creative with some things.

Important note because I know it will be problem: This version of the Pocket IE Start Page only works with the version of Internet Explorer included as part of Windows Mobile 2003 for Pocket PC, a.k.a., Pocket PC 2003. Because it uses CSS for formatting, a feature not supported by previous Pocket PC versions, it will not work properly with previous versions of IE.Please do not ask why it doesn't look right on your Pocket PC 2002. If anyone wishes to take the time to convert it to a PPC 2002-friendly format, by all means do so. Let me repeat: To use the Pocket Internet Explorer Start Page properly, you must be using a Pocket PC with Windows Mobile 2003 for Pocket PC.

Page Sections: Contents - Back to Top

Copyright and other Fine Print

Short version: I designed and created the Pocket IE Start Page, not you. Don't say you did. I'm not responsible if anything bad happens.

Long version: I worked hard on this little project to make sure everything works well and looks right. It was not originally intended to be used by anyone other than myself, but now that I'm releasing it to the general Internet public free of charge, I feel the need to write the following.

You are free to modify the Pocket Internet Explorer Start Page in any way you like for personal use only. (That's why I took the time to write this instructional document, after all.) If you choose to modify it and re-release it, please include some text along with it giving me credit and provide a link to my Web site (http://www.beauvais1.com). I would also ask that you preserve the copyright notice in the HTML and CSS files.

You may not charge a fee of any kind for it, nor include it on any CD or with any software collection for which you charge a fee. You don't need to request permission to redistribute it, but if you've made changes to it, I'd like to know about it just to see how people have made use of my work. Perhaps your changes could be incorporated into my "master copy."

I really have no way of enforcing this, but please try to remember that a lot of time went into making this, and I'm releasing it for everyone to use and enjoy out of the goodness of my heart. If you change the title of the page and make it available as your own work, I will be... annoyed with you.

Finally, while the chances of anything bad happening to you, your Pocket PC, your PC, your friends and loved ones, or any other property are remote at best, I cannot be held liable for anything bad that happens as a result of your use or misuse of this page, these instructions, or anything else associated with it. If, during the course of editing an image, your hard drive crashes, understand that I had no part of that. (Besides, you do have a backup... right?). If you become frustrated while trying to learn about cascading style sheets and all your hair falls out, don't send me the bill from Hair Replacement Services because I won't pay it.

Page Sections: Contents - Back to Top

How to Install and Use the Pocket IE Start Page

One important thing to note is that I use a font size of "Smaller" in Pocket IE, and so the page is designed with that in mind. If you use the default font size of "Medium," you will want to adjust the font size of certain page elements in the CSS file(s). The entries most likely to be affected by the global font size are commented and I include a suggested value. Please feel free to adjust these font sizes as desired to suit your eyesight, but be aware that larger sizes may not fit well with the included background image. Edit the CSS files using a text editor such as Notepad.

Extracting the Files

Okay, so just how do you use this thing? The zip file contains all the files needed for the Pocket IE Start Page. Simply unzip the file into your Synchronized Files folder on the PC, making sure to use an extraction program such as WinZip or WinRAR which can recreate the folder structure. When done, you should have a folder named PIE_Start with the following folder structure inside your ActiveSync Synchronized Files folder:

\PIE_Start\
\PIE_Start\images
\PIE_Start\images\logos
\PIE_Start\images\menu
\PIE_Start\_ReadMe

The "root" of those folders contains the five HTML files which make up the pages of the Start Page as well as six CSS files. There is one style sheet (CSS file) for each "color theme" I created, which were designed to match the four Windows Mobile 2003 themes which Microsoft released, as well as another which is used as an example theme. The file named style.css is the active style sheet, but I will touch on that in just a few paragraphs in the Changing the Theme section.

Using ActiveSync, sync up your Pocket PC so that the above files are copied over to the My Documents folder of your Pocket PC. You can keep the _ReadMe folder and its contents in there if you like, but I'd suggest moving it out since there's no real need to waste storage space on your Pocket PC with the large Photoshop image files. Move them somewhere else on your PC for use later and don't sync them over to your Pocket PC.

Page Sections: Contents - Back to Top

Setting the Start Page as the PIE Home Page

Setting the Pocket IE Start Page as the default Home page in Pocket Internet Explorer is really quite easy. Once you've synced the files over using ActiveSync, perform the following steps on your Pocket PC.

  1. Open your File Explorer of choice and navigate to \My Documents\PIE_Start.
  2. Tap index.html and the main "tab" of the PIE Start Page will open up in Pocket IE.
  3. Tap the Tools menu in Pocket IE and select Options...
  4. In the Options dialog, tap the "Use Current" button under the "Home page" section, and the Pocket IE Start Page will now be your default Home page whenever you start IE.

Simple, huh? If you want a different tab to be the default Home page, simply choose another file in step 2.

Page Sections: Contents - Back to Top

Changing the Theme

Okay, this is probably the most complex part of the whole package. I created and include five themes with this package, one for each of the four colors that Microsoft included in their Windows Mobile 2003 themes, (Blue, Green, Orange, and Yellow,) and one extra to show how much simply changing the background image can effect the appearance of the page. The default configuration for the Start Page is the Blue theme because I think that one looks the best. The Yellow WM2003 theme is just hideous, but if I didn't include a matching Start Page theme for it, I'm sure someone would complain.

In the PIE_Start folder on your Pocket PC, you have five CSS files. One is named style.css, and the other five are style_blue.css, style_blue_fade.css, style_green.css, style_orange.css, and style_yellow.css. To change themes, delete the file style.css, make a duplicate copy one of the other CSS files, and rename the duplicate to style.css. This will change everything except the color of the bullet. For that, go to PIE_Start\images and follow the same procedure to replace bullet.gif with the one which matches the theme color you've selected. (I tried to find a way of changing the bullet using CSS, but couldn't get it to work in Pocket IE. If you find a way of doing this that works in Pocket IE, please let me know!)

That's it! Now, the next time you start up IE, you'll see a new color scheme complete with matching bullets, background, etc. It's possible to make this change on the Pocket PC itself, but it's often faster and easier to do it on the PC and just sync the changes over using ActiveSync.

Page Sections: Contents - Back to Top

Modifying the Start Page

Alright, so now you know how to use the page. I doubt most people will want the same links on their page as I have on mine, so this section will give a basic overview of modifying the page. I am going to assume you have a basic understanding of HTML and I apologize if this is not the case. If you're not familiar with HTML, there are plenty of resources available to you. The major benefit to using CSS for formatting is that almost all of the most difficult aspects of page formatting are eliminated from the HTML file itself. Really all that's left is simple hyperlinks, which I feel are pretty easy to understand.

Page Sections: Contents - Back to Top

Structure of the HTML File

This long section will discuss the structure of the HTML files, describing things of importance, and concludes with a Pocket PC screenshot which shows what the page looks like in its final form. It looks pretty messy, I know, especially if you're not familiar with HTML. This is the HTML file behind the "Blogs" tab of the Start Page, index_blogs.html. The actual HTML file contains many long lines without line breaks which makes sense for me, but may annoy or confuse you. Sorry! Also note that this section was written using v3.01 of the Start Page, so things might have changed just a little since then.

<html>

<head>
<title>PIE Start Page - Blogs</title>
<meta name="Version" content="3.01" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="ClearType" content="True" />
<base target="_top" />

That was the main part of the "head" section of the HTML file. It contains such things as the page title and meta tags, including one which enables ClearType for the page in case you don't have it enabled system-wide on your Pocket PC. If you don't like ClearType, set that to "False" or remove that meta tag from the file entirely and ClearType will go away. Note that the actual HTML files contain a couple more meta tags as well as a copyright notice which I omitted here for the sake of space and readability.

<link rel="stylesheet" href="style.css" type="text/css">
</head>

That was the end of the "head" section. That line is what directs the browser to load the style sheet file and apply any formatting defined in that file to the appropriate elements on the page. (Have I mentioned that CSS rocks?)

The next section sets up the table which contains the entire content of each tab of the Start Page. It's a two column by one row table which is sized to 100% of the width and height of the Pocket IE window. The left column contains the menu tabs, while the right holds the page content itself. In the next block of HTML, you can see how the menu tabs are setup. (Yes, I know this looks really messy.) As long as you are happy with the menu tabs as they are, you shouldn't have to mess with this section very often.

<body>

<table border="0" cellspacing="0" width="100%" cellpadding="0" height="100%">
<tr>
<td width="31">
<a href="index.html">
 <img alt="Pocket PC" border="0" src="images/menu/menu_normal_ppc.gif"
 width="26" height="57" />
</a><br />
<img alt="--" border="0" src="images/menu/menu_separator.gif"
 width="26" height="3" /><br />
<a href="index_info.html">
 <img alt="Main" border="0" src="images/menu/menu_normal_info.gif"
  width="26" height="29" />
</a><br />
<img alt="--" border="0" src="images/menu/menu_separator.gif"
 width="26" height="3" /><br />
<a href="index_searches.html">
 <img alt="Searches" border="0" src="images/menu/menu_normal_searches.gif"
  width="26" height="53" />
</a><br />
<img alt="--" border="0" src="images/menu/menu_separator.gif"
 width="26" height="3" /><br />
<img alt="Blogs" border="0" src="images/menu/menu_selected_blogs.gif"
 width="26" height="30" /><br />
<img alt="--" border="0" src="images/menu/menu_separator.gif"
 width="26" height="3" /><br />
<a href="index_misc.html">
 <img alt="Misc" border="0" src="images/menu/menu_normal_misc.gif"
  width="26" height="30" />
</a>
</td>

That was the end of the left menu column. As you can see, each tab consists of a hyperlink and an image. Each image is separated by a "separator" image which is the line you can see between the tabs. The active tab does not have a hyperlink; since you're on that tab already, why have a link to it? The active tab's menu image is also specified by the "_selected" suffix on the filename.

The next section contains the actual content of the page, and is what most people will be editing. You'll notice that some of the HTML tags contain a "class" attribute. The class specified corresponds with a style defined in the style sheet. For example, the fourth line below has a class of "section_head". The style for this class is a colored background with a colored 1 pixel border around it. If you open one of the CSS files in a text editor, you'll see the definition for that style.

<td valign="top" width="100%">
<p class="page_header">Pocket IE Start Page</p>
<p class="page_title">Blogs and Personal Web Sites</p>
<p class="section_head">Friends and Colleagues</p>
<p class="section">
<img src="images/bullet.gif" alt="-" align="middle" width="5" height="5" />&nbsp;<a href="http://www.gospacewaitress.com/">Space Waitress Gate A</a><br />
<img src="images/bullet.gif" alt="-" align="middle" width="5" height="5" />&nbsp;<a href="http://www.gospacewaitress.com/pocketspace/">Space Waitress Docking Station</a><br />
<img src="images/bullet.gif" alt="-" align="middle" width="5" height="5" />&nbsp;<a href="http://www.wessalmon.com/mobile.html">Wes Salmon</a><br />
</p>
<p class="section_head">Lockergnome</p>
<p class="section">
<img src="images/bullet.gif" alt="-" align="middle" width="5" height="5" />&nbsp;<a href="http://chris.pirillo.com/">Chris Pirillo</a><br />
</p>
<p class="section_head">Misc</p>
<p class="section">
<img src="images/bullet.gif" alt="-" align="middle" width="5" height="5" />&nbsp;<a href="http://www.beauvais1.com/">Dave Beauvais' Web Site</a><br />
</p>
</td>
</tr>
</table>

</body>

</html>

If you look at the HTML code above, you'll see where the bullet in front of each item is defined, as well as the hyperlink and text for each list item. I could have simplified things dramatically by using an actual list, but Pocket IE's CSS implementation doesn't allow you to specify the distance between the bullet and the text which follows it, so the list looks very bad and wastes a lot of the already limited screen real estate with empty space.

Here's what the preceding HTML file looks like when rendered in Pocket Internet Explorer on a Pocket PC running Windows Mobile 2003.

PNG Image, 240×320, 16.1 KB
Figure 1: This is what the HTML file above looks like on the Pocket PC.

Page Sections: Contents - Back to Top

Modifying the Graphics

Since I only own Photoshop and haven't used any other graphics program for several years, I can only give examples and instructions based on Photoshop. I know that Paint Shop Pro 7 and 8 can open layered Photoshop images, but I don't know which features are supported and which aren't. If you use a program other than Photoshop and encounter problems, post a comment on my site to see if anyone can help you out.

Background Image

The background image is a Photoshop image that consists of several layers. The layers include the background of the content section of the page, the background of the menu/tab bar, the background of the page header, the white line to the right of the menu bar, and another layer with a Photoshop drop shadow layer effect applied to it. Each of these is on a separate layer to make color changes, addition of textures, or other modifications easy to do without affecting the entire image.

The background image included in this package includes all the color combinations for the four main themes. Figure 2 below shows Photoshop's Layers palette so you can see what I am describing. I used Photoshop's layer color feature to make it easier to identify which layers go with which theme. I don't know if other graphics programs will display those colors, so the layer names may have to suffice.


Figure 2: This is the Layers palette in Photoshop v7.0.1 showing some of the layers which make up the background image.

The eye icon to the left of each layer or layer effect indicates that the layer is visible or enabled. In the image above, the layers shown are for the blue theme. You can see that each layer has a descriptive name as well as a colored label. (Again, the color may or may not be supported in other applications.) The checkerboard pattern indicates transparency; anywhere you see that means that whatever is behind/under it will show through.

The tiny padlock icon indicates there is some sort of lock on the layer. In this case, transparency is locked which means that nothing you do to, say, a menu bar, can stray into the transparent area of the image. This makes it possible to fill the entire layer with a pattern or color, and it will actually only fill the non-transparent areas.

I think that's probably enough detail for this document. I don't want this to turn into a Photoshop tutorial. With the image itself and a little experimenting, I'm sure most people would be able to figure out how all this works. Oh yeah... in case you open the background image file and you're wondering why it's so long, I designed it in case you add a lot of links to a page which cause it to scroll down. It would look dumb if the background ran out before the page content did.

Page Sections: Contents - Back to Top

Menu/Tab Images

Unfortunately, the images which make up the menu bar text kind of evolved over time and I lost the Photoshop image for the current menu items after a hard drive crash a few weeks ago. I was able to restore an older version from a backup CD, but it's not much to work with. Enterprising users should be able to modify the current GIF images if they wish.

Page Sections: Contents - Back to Top

Updating the Page

In a way, the Pocket IE Start Page is modular. The overall appearance of the page can be changed by simply modifying or replacing the CSS file. If you wanted to go beyond that, the images themselves can be changed. If designed properly, new menu images could be dropped in to replace the current ones. As it is, a number of themes could be created simply by changing the background image. There's nothing to say you have to stick with the current design. You could make an image such as the one in Figure 3 and get away from the solid block theme-matching style I came up with.

Heck, make theme packs!


Figure 3: An alternate theme showing how much impact the background image has on the appearance of the pages.

Page Sections: Contents - Back to Top

Support

I will provide limited support via the comments feature at my Web site, but please, please read the sections above in their entirety to see if your issue is addressed here, and try to figure it out by yourself. The cascading style sheet (CSS) files are commented to give you an idea how that all works. A good CSS overview site with lots of working examples is available here if you're new to CSS. Keep in mind that Pocket IE does not support all CSS features, but most anything you'd want to do with this page is likely supported. Anyone who asks why the page looks bad on their Pocket PC 2002 will be slapped upside the face with a trout and yelled at publicly. I know it's going to happen, and the trout is ready. (Sorry, old IRC reference.)

Finally, if you find this project to be useful or enjoyable and feel like donating some money to the cause, a small PayPal donation would be very much appreciated! This is, of course, entirely voluntary. A donation link is provided below.

Thank you very much for your interest in this little project of mine, and for your patience as I prepared it for public consumption! Take care!

Page Sections: Contents - Back to Top