Modifying Your Personal Home Page

GeekTech shows you how to create your very own searches on your favorite personal Web page.

Alexandra Krasne, Special to PC World

Alexandra Krasne doesn't mind if you call her a geek; and she doesn't use a big, fancy word processing program when a little text editor will do. Have a question or a comment? Contact GeekTech.

In my last column, I showed you how to ditch your Favorites folder and home page in favor of a Super Kickstart page with links to all of your favorite sites.

This time I'll focus on some more stuff you can do to personalize your page, while at the same time experiencing all of the joys of hand-coding HTML and JavaScript. Pretty geeky, huh?

Those who already know HTML and JavaScript basics likely won't get too much out of this column. But if you'd like to learn, keep reading.

And if you haven't already, download the Kickstart file I linked to in my last column.

Changing Colors

Now, maybe your favorite colors are pink and puce: The existing blue, black, and burgundy Kickstart scheme doesn't do it for you.

To change the background color on your page, open the Kickstart file in your text editor. Toward the top, you'll see the word color right below font-family. After the colon and before the semicolon, you can specify another color that suits you.

If you want to get really specific, peruse a Hexidecimal Color Chart to get hex codes for all 216 Web-safe colors, then plug those in rather than using the color name. If you're inserting a hex code, be sure to add a # symbol directly preceding it; if you're copying over an existing hex code, make sure not to delete that #. If you're going to use the name rather than the code, you'll want to take out the #.

Right below the font color in the Kickstart file is the background color, which you can also change to suit your style.

You'll see those handy hex codes or color names scattered throughout the text file. Go ahead and experiment to see what happens. You can change font colors, colors for visited and unvisited links, and colors behind the boxes scattered throughout the page. (Make sure you save a backup copy of the file, just in case.)

Change the Page Title

At the top of the file, you'll see the codes <title> and </title>; in between, it currently says "superKickstart." Perhaps you'd like to call it something else, like "Helen's Crazy Links Page" or "Herbert's Links R Us." Whatever you decide, just edit the text in between > and < to give your page a spiffy new title.

Creating Your Own Searches

We all have sites we perform searches on regularly. Being able to search those sites right from your Kickstart page is much easier and way cooler than going to the sites themselves. The way the Kickstart page is set up, you've got all of your searching at your fingertips, including Barnes & Noble, IMDB (Internet Movie Database), UPS, and other sites. Setting up these searches is relatively easy, if you're willing to endure a little trial and error, and investigation--and you have the inclination to once again wade through source code. (A word of warning: Some searches, like those on Amazon, do not produce URLs that you can use for this project.)

Don't worry, in the immortal words of Easy E, I'mma break it down for you. When you're done, you'll be the envy of all your geeky cohorts.

To get started, decide on a site you'd like to perform a search on. For this example, I'm changing a search called "Dictionary" (at the top of the Kickstart page) to "Powells.com."

Open Kickstart in a text editor and do a "Find" for the word dictionary. You'll go to a block of text that looks like this:

<a href="http://www.dictionary.com/">Dictionary</a><a class="parens" href="javascript:Qr=prompt('Dictionary keyword:','');location.href='http://www.dictionary.com/cgi-bin/dict.pl?term='+escape(Qr)">()</a>

Now replace http://www.dictonary.com with http://www.powells.com/. Next, change Dictionary</a> to Powells.com</a>. At this point, the code should look like this:

<a href="http://www.powells.com/">Powells.com</a><a class="parens" href="javascript:Qr=prompt('Dictionary keyword:','');location.href='http://www.dictionary.com/cgi-bin/dict.pl?term='+escape(Qr)">()</a>

Remove the text that says Dictionary keyword: and replace it with Powells keyword:. Now the code looks like this:

<a href="http://www.powells.com/">Powells.com</a><a class="parens" href="javascript:Qr=prompt('Powells keyword:','');location.href='http://www.dictionary.com/cgi-bin/dict.pl?term='+escape(Qr)">()</a>

Now, go to Powells.com and perform a search so you can get the actual URL that sends search queries. For example, when I search on Powells.com for the word geek, this URL appears in my browser's Address field: http://www.powells.com/search/DTSearch/search?kw=geek&pokey=skeptopotamus

To construct a search in my Kickstart page, I need everything before the keyword geek. So the next step is to copy http://www.powells.com/search/DTSearch/search?kw= and paste it between the single quote marks after location.href= to replace http://www.dictionary.com/cgi-bin/dict.pl?term=.

Now the code looks like this:

<a href="http://www.powells.com/">Powells.com</a><a class="parens" href=" javascript:Qr=prompt('Powells keyword:','');location.href='http://www.powells.com/search/DTSearch/search?kw='+escape(Qr)">()</a>

Now, save your Kickstart page and open it in your browser. Click the () to see if your search works. If it doesn't, make sure you didn't strip out any commas, parentheses, or quote marks.

Next month: making more modifications and creating your own search widgets.