By this Author: Sam I Am

I was inspired by a post in the forum where Angela_ notices that Tenerife is 'missing' in our mapping software to do a quick post about mapping photos and trips.

I've noticed from mapping my own photos and trips that some destinations seem to be missing just because of how I/we commonly refer to them. Tenerife is a great example because that's how most of us would refer to it as a destination. Unfortunately, if the island doesn't also happen to be a country (like Australia), then it might just not be listed as a destination because it's an island and not EITHER a country OR a city OR town. We have around 2 million destinations mapped and with that I mean towns, cities and countries in well over 99.99% of the cases. There might be a handful of famous sites, but only those that we added manually ourselves out of sheer frustration (suggestions are always welcome for more!)

So how do you go about mapping a destination like Tenerife with the above knowledge in hand? That's right, try and map it to a city or town within the island itself. If you know the name, you would start just by typing it into the box and the autofill will probably find it for you, however in some cases you might not be able to remember the name or there might be several cities with the same name in the same country making it hard to find the right one this way. This is the perfect moment to actually use the zoom function that is part of the mapping system (the buttons at the top right of the map). I did some zooming in on the island of Tenerife and here's an initial selection of towns and cities our mapping system comes up with:

That's pretty detailed!! I'm guessing for most people that would actually be sufficient, but let's say you happen to be staying at "Buenavista del Norte" which you know to be somewhere on that left side of the island but still not showing. Even further zooming in and panning to the left will bring up the following shot:

Wow! There's a whole bunch more little towns showing up over there!

Okay, so what if that tree you are camping under doesn't show up as a destination but you know (roughly) where it's located? The system actually lets you create your own individual markers and give them your own name. To do this, after finding the right location on the map, just click on the 'select on map' button (next to the lat/long fields) and click whereever on the map you want. Type in the location name and you're good to go! The system will actually remember that name for the next photo or trip you are mapping, so you don't have to keep doing this. Just start typing the name you gave it next time around to find it listed or click on the little black icon and the system will put it in the right place. Yeah, it's pretty cool!

Here's an example of a destination I mapped myself because Lake's aren't always considered destinations (note: this is a live map so you can click/zoom in & out etc.):

Hope that helps someone!!

We've just put some updates to the video upload functionality live. The main difference is the increase in the amount of supported (video) formats. And boy, are there some formats supported!

Here's the list:

• .mov
  
• .avi
  
• .flv
  
• .mpeg
  
• .wmv
  
• .mpg
  
• .mp4
  
• .3gp
  
• .dv
  
• .qt
  
• .asf
  
• .mp3
  
• .wav
  
• .wma
  
• .qcelp
  
• .amr-nb
  
• .movieclip
  
• .mod
  
• .3g2
  

Now, if you're like me, you will have no clue what half these formats are for, but that's okay as the common ones are also listed there. A few of the new additions are mobile formats which should prove useful considering the day and age we live in Video uploading and hosting is provided by our partner Fliqz and I'm told there might be some minor issues with some of the less popular video formats at this time, so consider this beta software please (hey, everyone does that these days!).

There's also a bunch of more minor adjustments to make posting to your blogs easier and some clarification on how long it will take to transcode your videos as well as some reworking on the back end which isn't noticable. As always there's no limit to how many videos you can upload but there is a 300MB per file limit.

If you're not familiar with the video gallery and video upload areas, they can be found through your control panel on Travellerspoint (which is where pretty much where everything can be found!) or click on one of the screenshots below.

Last but not least, I will leave you with an mp3 that I uploaded. Instant Travel Guru status for the person that can pick out the singer (just kidding, I don't have that kind of power)!!

If you're one of those users of Travellerspoint that just likes spending countless hours looking through the magnificent travel photography that's been uploaded and featured by the brilliant photography moderator team (superlatives anyone?!), and you have one of those spiffy customized Google homepages, then this post is for you.

Did you know we have a featured travel photography google gadget that you can add to your personalized Google homepage? Well, we do and now you know It's conveniently located in Google's gadget directory, and if you want to go ahead and add it to your iGoogle page, then the direct link is http://www.google.com/ig/adde?moduleurl=http%3A//www.travellerspoint.com/googlegadgets/featuredphotos.xml

So now you can even get your featured travel photos fix if your boss has blocked off Travellerspoint because of your over usage (honestly, why else wouldn't you visit Travellerspoint every day?!)

At times you come across people that clearly just don't know what they're talking about when they post their lists of best travel sites online. At other times, you just know the person has taken time, researched the market and actually come up with their own list without copying it off of some other site. I can only assume that Darren of Travel Rants is one such person after having rated Travellerspoint the best travel community of 2007

Quoting "Darren @ Travel Rants"

There are thousands of travel community sites providing travellers with a platform to ask questions and write about their own travel experiences. I chose Travellerspoint because of the obvious passion for travel and the very useful wikitravel guide and travel maps.

Obviously a genius!

Note: this post is several years old now and some of the information map not be entirely up to date. Some parts have been updated in an attempt to keep it relevant

I've been meaning to write this post for a LONG time, so today I sat myself down with a few cups of coffee and just got started. This post is meant to be a pretty basic 'How To' guide to creating your own customized template for your Travellerspoint blog. To do so, I'll be updating the Travellerspoint blog template at the same time and documenting how to make similar changes to your own blog. I won't be going into detail with all the small changes needed to make our design work, but giving information on what to change to get a different background color and header image, font, text size etc. This is a really long post so I might have to create a synopsis at some stage of some of the main things you might want to update. We'll still be working out kinks over the next few days/weeks, so please let us know if you find any bugs!

HERE WE GO

Basic background info
There's a few different tools which we'll use to achieve this customization. The main one is called CSS which stands for Cascading Style Sheets. Essentially the entire design of each blog on Travellerspoint (and most other decent well coded blogging systems) is controlled by a page of CSS. By making changes to that page, the entire look and feel of the blog can be changed while leaving all the content exactly the same.

Most travel blogging platforms don't give you the possibility to change your style yourself, but here at Travellerspoint we like to be a little different, so this option has been available from day one. To find it, in your blog management area choose the TEMPLATE tab at the top. You will see a number of templates there to choose. The currently selected one includes a link to "Customise this Template", which you should click

You'll see a big input area here with a lot of scary looking code. It's not my intent to go into depth on what each and every bit of that code does and can or can't do, but some of the settings are pretty straightforward and changing just a few settings can make a huge difference. Here's some important bits (officially called properties) that often come back and a basic explanation:

• color = the color of the text (no, I have no idea why it's American spelling)
  
• margin = the spacing between the object and the next object above, below or to the sides of it.
  
• padding = the spacing to all sides within the object.
  
• border = speaks for itself. This adds a border to the object.
  
• background = sets a background color or image (or both).
  

Already confused? Don't worry, many people would be! The beauty of this system is that it allows you to try different things without messing up any of the content/writing etc. that you have done. Expect to make mistakes, even if it isn't your first time creating your own template! You aren't locked down in any way and can just change things back to how you started out (I like to copy/paste things I'm happy with in an external file while I tinker with the next set of changes for example).

Phase 1 - the header
I thought it would be fun to start off with one of the most common changes that really can make your entire blog look different in one clean sweep. Changing the header (top part) of your blog. First things first, I like to start with one of the more simple designs and then tinker with that to get the effect I'm after. So set your template to the 'Travellerspoint' template and save it. Now let's open up the Edit form and look for the code that controls the header. Sure enough, there is something that looks promising:

We can see a border here, some padding, a background image, the text set to some kind of color and aligned in the center. Let's see what changing that background image does for things! Essentially what this declaration is saying is look at url (link) {blogdomain}/img/1/bg-header.jpg and you'll find the image to show in the background. So for us to put a different image here, all we need to do is change the link to link to our new header image. Seeing as I've uploaded all these new images using the bulk upload function, all I have to do is figure out the exact link for these images (use right-click on the "Download Original" link next to each photo in your personal gallery to get the direct link). If you have uploaded your images somewhere else, just get the direct links and use those.

There you have it, I've changed the image. Okay, it looks terrible, but that's because I have an image that's a totally different size than what's already there. This is where the tinkering comes in I need to adjust the height to match my new image. So I'll add this property in: height:283px (matches what I know is the height of my image). It still looks a little whacky since it seems to be adding some space to both the top and the bottom of the image. Let's make sure the padding and margins on the header are 0 to counter that!

For some reason though the image doesn't seem to be showing entirely. The reason is quite simple, the new image is much wider than the default width setting for the blog. That clearly needs changing! One reason for this new design is that I think the current blog width is too narrow given the improvements in screen resolutions, so I've purposely made the header image a bit wider than the old one. To change the width for the blog, look for the following:

This wrapper wraps all the content on the page in a 'box' so to speak. As we can see here, it's set to 690px wide, whereas the image I just uploaded is 930px. Clearly asking for trouble! Let's change that width setting and see what it does.

Much better!! Now we're seeing the total image and it's actually looking semi-decent. Here's a re-cap of the code changes so far:

See how easy it is to change the header on your blog?! That's all it takes!

Phase 2 - the background colors & font
Now of course we can't live with this horrendous clashing of colors, so let's change the background color for the blog. To do this, we find the #body area and change the background color to something more suiting. These color codes are going to be like chinese characters for anyone that doesn't understand them, so either replace them with common color names like red/blue/black (this works only for basic colors!) or try and figure out the code from other parts of the site or from an image editing program if you have this at your disposal. Here is a great tool for finding colors that will match one color you already really like. In this case I'm going for the same greyish color currently surrounding the header image. I'm also not happy with the font so will also change that. The change ends up being:

Seeing as I'm feeling lucky, I want this default font to be used across the entire blog, so I'm going to remove any other instances of font I find anywhere else in the template (there's a few). Changed the background color and font; how do things look:

Clearly the content area is too wide compared to that header and there's a nasty small black border there disrupting things. In fact, let's try and make it a bit nicer by adding a background image that we tile (duplicate) all the way down the page and removing that black border. To do that, we locate the wrapper once again (remember, that wraps the entire blog!) and we remove the border and add in a background image instead of just a plain color. We add the repeat-y to tile vertically down the page.

The resulting code ends up being:

Clearly something is still wrong. We've got a black border here under the header and the content is not in the middle for some reason. Deleting the black border is easy, that just means we have to find the right code and sure enough, there it is in the #header area. Finding the cause of the other issue is a little more tricky, but with a bit of playing around you quickly find out that it's the #center area that is causing this. Let's change that to make sure it's the same width as the header and also remove that background image. Here's the resulting changes:

looking like:

Now we're really cooking with gas! The navigation is still way over to the right though, so we'll need to bring it back a bit.

Phase 3 - the tinkering phase
Here I tinker a little with the width, margins and padding on the navigation and end up with the following:

Looking like:

To be honest, this just about seems like enough for the top of the page, but there's something wrong about where that header hits the wrapper. There's a tiny little color difference there. Ah yes, I was planning to put another image in between there to keep things a little interesting I'm also going to ditch the blue color all the way at the top in the branding 'bar'. The header text needs some pushing around as well. This all requires quite a bit of tinkering, but I end up with the following main changes:

Now that we've gotten rid of some strange looking colors, let's also ditch the colors on the navigation to the right and that image in front of the titles on the left.

Delete the entire #blogcontent h2:before block to get rid of the image in front of those titles on the left (of course you could also replace it with your own image if you felt like it!).

Further on down the page there seems to be an issue with content stretching way beyond the navigation, like this:

To fix this, let's make sure the width of the entries can't be too wide!

Much better!

Phase 4 - Fixing the footer
To be honest, I'm starting to get quite happy with this design. The only thing really off now is the footer area, but that doesn't look too difficult to fix! Let's look at what's wrong first:

Okay, all the way over on the left and a background color that we don't like. Let's add some padding to the footer, give it a fixed width, change the background color and position it in the right place by playing with the margins. Here's the code that I end up with after some more tinkering:

Now that looks beautiful:

Pat yourself on the back; you've come a long way!

That pretty much takes care of all the really big things and only leaves some finessing to do! I'll probably have to make some changes to get this looking exactly like it should in Internet Exploder as well. That browser is notorious for doing things wrong (in case you haven't already switched to Firefox, do so now!! It's free and does follow the standard rules unlike IE). Over the course of the next few days/weeks I'll try and document some of those changes too (we might want to style the comments for example).

It's a long post, but really I've only just scratched the surface of what can be done with CSS. I hope you've enjoyed it and I hope to see some attempts at changing templates going forward based on this 'how to'. If I can be of any help, feel free to pop me a pm anytime over on my profile!