Editing Tutorial

How to Edit the Tab Names, Button Names and Button LinksĀ 

Editing Instructions

There are two elements of the home page that can easily be customized: the names on the tabs, and all of the buttons. Be careful to change only the items designated below unless you are familiar with HTML coding. Although mistakes will cause no damage to your phone, they may make make the page render improperly or altogether unreadable. If this happens, you are advised to restart your editing with a fresh copy of the most recent template.

The editing can all be done in any text editor. An .html file is really just a .txt file that is designed to be opened in a web browser. So, the simplest and best program to use (assuming you're on a PC) to make small changes is Notepad. Just as good, with a few more features, is Wordpad. You can even save the file as a .txt file and manually change it to .html when you're done.

Alternatively, you could use any program that opens and saves .txt files. Microsoft Word, Wordperfect, or any word processor could certainly do it. However, I do not recommend that you use a word processor because they are often setup to make proprietary changes to .html files by default. This is likely to break the code. In short, use Notepad unless you have a very good reason to do otherwise.

There are some troubleshooting tips listed at the end of the tutorial, in case you experience any problems.

1. Changing the Tab Names

Find the section in the page labeled: <!-- Navigation Bar -->

Just below that, you will see four lines of code that all begin with: <a class="tab" ...

Near the end of each of these four lines, the tab name is specified. For example, the first tab is called "Main" and the name appears as follow: <span>Main</span>

You may change the names "Main", "News", "Sports", and "Tools" as you like. Do not make the tab names larger than the tab buttons (approximately 7 characters max) or the page may not render properly.

2. Changing the Buttons

Find the section in the page labeled: <!-- Content Panels -->

Just below that, you will see four sections of code separated by a comment line. The first section begins with <!-- Main --> and ends with <!-- end tab 1 -->. The 2nd section begins with <!-- News --> and ends with <!-- end tab 2 -->, and so forth.

Within each section are lines that start with: <a class="button" ... There will either be 9 or 12 of these lines in each section, depending on which version of the template you are using. This is where you add your own links.

The links will be displayed in a grid as follows:

[Line1 ] [Line2 ] [Line3 ]
[Line4 ] [Line5 ] [Line6 ]
[Line7 ] [Line8 ] [Line9 ]
[Line10*] [Line11*] [Line12*]

The first nine of these "button" lines are your normal buttons that will be displayed for each tab. If you have the v5 version of the template, there will be three additional lines (*). See below ("Bonus Buttons") for special instructions on the final three button lines.

Special Note for Blank Spaces: If you want to have a blank space (no button), then you must replace the ENTIRE <a class="button" ... line with the following: <div class="blank">&nbsp;</div> If you delete a button line and do not replace it or use the blank code above, your buttons may not align correctly and/or the page may render improperly.

There are three things that you can change on each button line: the link, the name, and the format.

A. Changing the Links

Each line has a link element like this: href="http://www.google.com/m/classic" You may change the portion between the quotation marks with any internet links of your choice.

B. Button Names

Each line has a label/name like this: <span class="t1">Google</span> You may change the portion between the > and the < with the name you want to appear on the button.

C. Button Format

Ordinarily, you should keep your button label/name shorter than approximately 10 characters. However, if you want to use a longer button name, then you can change "t1" to "t2" in the tag immediately prior to the button label. This will allow longer
button labels, including two-line button labels.

In sum, "t1" yields normal (larger) text on the button. while "t2" makes the text smaller and automatically reformats to accommodate longer button names or names that span two lines. If your button label exceeds the size of the button, your page may not render correctly in your browser.

3. "Bonus" Buttons

The (updated) version 5 web browser can display an additional row of buttons in "Full Screen" mode. If you do not have the version 5 web browser, or if you do not want to use the "bonus" buttons, you can simply leave them unchanged.

In each button section, the additional three "bonus" buttons are designated as follows: <!-- "bonus" buttons start here -->

You edit the "bonus" buttons exactly the same way as other buttons.

The "bonus" buttons ONLY appear when your browser is in "Full Screen" mode. Use the browser "refresh" function after switching between "Full Screen" and "Normal" view modes and the "bonus" buttons should automatically appear or disappear accordingly. In the following screenshot, the "bonus" buttons are each labeled "abc."


The Voyager browser has an "issue" rendering long URLs. When the browser encounters a URL like the following:


it erroneously allocates space in the window for the URL name. This messes with the rendering of the page, and may push some elements (e.g., the tabs) offscreen to the right.

The easiest solution is to use a URL proxy like
tinyurl.com to generate a shorter URL name. Several people who have replaced long URLs with a short one from tinyurl.com have found that this fixed their layout problems.