Skip Navigation

Customizing Your Blog Template

Community Highlights Travellerspoint Customizing Your Blog Template

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

large_customise.jpg

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:

#header {
border-bottom: 1px solid #333;
padding: 2em 0;
background-image: url(img/1/bg-header.jpg);
color: #e0e8ef;
text-align: center;
}

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.

Picture_34.png

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:

#wrapper {
position: relative;
width: 690px;
margin: 0 auto;
margin-left: auto;
margin-right: auto; /* use long form to avoid problems with Mac IE5 */
border: 1px solid #000;
padding: 0;
background-color: #fff;
}

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.

Picture_44.png

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:

#wrapper {
position: relative;
width: 930px;
margin: 0 auto;
margin-left: auto;
margin-right: auto; /* use long form to avoid problems with Mac IE5 */
border: 1px solid #000;
padding: 0;
background-color: #fff;
}
#header {
padding:0;
background-image: url(http://www.travellerspoint.com/photos/originals/4/tpblog_header.jpg);
width:100%;
height:283px;
color: #e0e8ef;
border-bottom: 1px solid #333;
text-align: center;
}

#header h1,#header p {
margin:0;
font-family: "trebuchet ms", verdana, arial, sans-serif;
}

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:

body {
background-color:#abaea3;
font:12px georgia, Palatino, Palatino Linotype, serif;
margin: 0;
padding:0;
color: #333;
line-height:1.5em;
}

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:

Picture_72.png

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:

#wrapper {
position: relative;
width: 930px;
margin: 0 auto;
margin-left: auto;
margin-right: auto; /* use long form to avoid problems with Mac IE5 */
padding: 0;
background:#abaea3 url(http://www.travellerspoint.com/photos/originals/4/content_wrapper.jpg) repeat-y;
}


and looks like:

Picture_84.png

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:

#header {
padding:0;
background-image: url(http://www.travellerspoint.com/photos/originals/4/tpblog_header.jpg);
width:100%;
height:283px;
color: #e0e8ef;
text-align: center;
}

#center {
width:930px;
padding:0;
}

looking like:

Picture_94.png

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:

#navigation {
float: right;
width:220px;
margin:0 95px 0 15px;
border: 0; /*specify to avoid a bug in MacIE5 */
padding:0;
}

Looking like:

Picture_103.png

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:

#blogcontent {
width: 930px;
margin:0;
background:url(http://www.travellerspoint.com/photos/originals/4/content_bg_top.jpg) no-repeat;
padding:85px 0 0 85px;
}
#brand_line {
position:relative;z-index:1;
margin:0;
padding:0;
width:100%;
height:32px;
border-top:1px solid #f4f1df;
}
#brand_line a{
text-decoration:none;
color:#f4f1df;
}
#brand_line a:hover{
text-decoration:underline;
}
#brand_line #tp_branding{
border:none;
float:left;
margin-left:15px;
padding:9px 0 9px 95px;
color:#f4f1df;
}
#brand_line #user_links {
margin:0;
padding:2px 10px 0 0;
color:#4d5863;
line-height:30px;
float:right;
}
#brand_line p a {
padding:9px;
}
#header {
margin-top:-32px; [i](this pulls the header up and basically puts it in front of the bar)[/i]
height:283px;
background:#3b4b4b url(http://www.travellerspoint.com/photos/originals/4/tpblog_header.jpg) no-repeat;
width:100%;
}

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.

#navigation h3 {
margin-top:10px;
border-bottom: 1px solid #ebe6d3;
padding:5px 0 0 5px;
}

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:

Picture_113.png

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

.entry {
width:480px;
margin:0 0 25px 13px;
padding:0 10px;
}

Much better!

Picture_132.png

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:

Picture_153.png

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:

#footer {
display: block;
clear: both;
border-top: 1px solid #abaea3;
width: 760px;
margin:15px 0 0 75px;
padding:10px;
background:#ebe6d3;
}

Now that looks beautiful:

Picture_161.png

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! :)

By Sam I Am

Posted Thursday, November 15, 2007