Essentials:

Styling your GPSBabel HTML Export

If you’re like me then you may want the output of your GPSBabel conversion to look a little more pretty than the default file. Fortunately this can be taken care of with a stylesheet. When you’re converting several hundred waypoints the default layout without any styles applied can be very difficult to read. So I thought it would be nice to break it up a bit with some bold and color styles.

I had started to write some very interesting pieces of code for parsing the GPX XML files and was well on my way to completing it but then was reading around on the Groundspeak forums about some of the features of GPSBabel. For any of you interested I will be making the PHP parsing code availiable later.

The main thing is that we’re trying to get to a point where we’re paperless while geocaching. The best way to do that is to get a handle on the GPX file that Groundspeak outputs. Once you do that then you can browse them on your computer at your leisure. Even better is that you can then print the exported page to a file rather than paper and read it offline or when you’re on the road with a laptop.

So the next step is locating a PDA that will display this newly created exported HTML file in a satisfactory manner. And pretty much that’s where we’re at now.

Let’s talk GPSBabel.

This is a comparison between the default output from GPSBabel and the output when using a stylesheet. Remember there are hundreds of these on a single page.

code    
/* This style sheet is for use with GPSBabel*/
 
body, BODY, html {
 background-color: #F3F2F2;
 font-family: "Trebuchet MS", Verdana, Arial, Helvetica;
 font-size: 12px;
 color: #4F5B60;
 font-weight: normal;
 margin: 5px;
 voice-family: betty, female;
}
 
.gpsbabellogfinder{
 font-style: italic;
}
 
.gpsbabellogdate {
 
}
A:link {
 color: #EB8941;
 text-decoration:none;
}
 
A:hover {
 text-decoration: underline;
 font-style: italic;
}
 
A:active {
 text-decoration: underline;
}
 
A:visited {
 color: #EB8941;
 font-style: italic;
 text-decoration: line-through;
   }
 
p.gpsbabelcacheinfo {
 font-weight: bold;
 font-size: 120%;
}
 
.gpsbabelhint {
 font-weight: bold;
 color: #003399;
}
 
.gpsbabellogtype {
 text-decoration: underline;
 font-weight: bolder;
 color: #65842B;
}
 
hr, HR {
 noshade;
 color: #F3F2F2;
 height: 10px;
 width: 0px;
}
 
table, td {
 font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #4F5B60;
 background-color: #fafafa;
 border: 1px #d79900 solid;
 border-collapse: collapse;
 border-spacing: 0px;
 padding: 4px;
}
 
p.gpsbabelwaypoint {
 font-size: 120%; font-weight: bold
}

Copy that code in the grey box from above and past it into a new file named babel.css. Then when you’re in GPSBabel you can choose a stylesheet to use when you export you converted file to a HTML file. Simple as that.

 

No comments yet.

Add a comment

Pinwire @ tumblr

    http://pinwirecom.tumblr.com/post/99399753457http://pinwirecom.tumblr.com/post/99056819727http://pinwirecom.tumblr.com/post/98488475777http://pinwirecom.tumblr.com/post/94745420282http://pinwirecom.tumblr.com/post/92737496842http://pinwirecom.tumblr.com/post/88505613492