Wednesday, January 21, 2009

My Own Custom Template: Made By ME!

So my project for the last few days has been to create and figure out how to do my own template. There are some great resources out there that have taught me how to manipulate, add to and change the html in a blog. You may have been checking in on my blog the last couple of days and seen something random for a minute or two... that was me testing the results. Anyway, if you are reading this you are seeing the final result --for now. I may play around with it a bit more. Do you like it? Is it readable? Improvements?

If you desire to have your own custom template it's not that difficult. You will need a photo editing program like Photoshop, digital scrapbooking papers and elements, and a account.

I have an old version of Photoshop Elements that did the job well. The Cutest Blog on the Block says you can also use less pricy programs like "Microsoft Publisher, Microsoft PowerPoint, or a very cool program you can download for free online from a site called"

As for digital scrapbooking paper and elements there are many availible for download for FREE, which is what I did. There are also kits that you can buy for a minimal charge. Check out these sites for details. I personally got my paper from the Shabby Princess.

After you have downloaded your papers and embelishments (and unzipped them) you are ready to use them in your photo editing program. Shabby Princess has great video tutorials on how to do this and Cutest Blog on the Block has some step by step suggestions. Cutest Blog on the Block also has suggestions as to page size and resolution.

Once you have your image the way you want your background to look save it as a .jpg or .gif. You are now ready to upload it to photobucket. You need a photobucket account so that you can utilize them to get the html code for your image that you will need to add into your blogger template html.

The exact place to put the html is explained in the steps on Cutest Blog on the Block. You must have your blogger template in "minima" for it to work.

Are you totally confussed yet?

I have also come across helpful information at the following sites as to how to manipulate the html code to change your blog format in addition to The Cutest Blog on the Block: shows you how to change the colors and remove the header border. She also has some really cute premade templates for free. is very helpful with code changes

When I did my own template I wanted to change the column width of the text and sidebars as well as center my header to better fit my new background. I had to play around with the html in order to do this and found out that in order to shift things I need to change "wrapper" width. Originally the "outer-wrapper" was 660px. I changed it to 850px which made my posts and side bar more spaced out. I also changed the "main-wrapper" width to 550px. To shift the header more to the middle I changed the "header-wrapper" width to 780px. Don't be afraid to play around with the html. Use the preview to see the results of your changes without saving them but be sure to save the changes you like so you don't loose them.

One more thing I learned in all this experimenting. There is a way to have your text colors match your background that you made. In photoshop there is an eyedrop tool. If you go to choose a color but roll over your image the eyedrop tool shows up and you can pull a color off of your image. (Not sure how this option works in other programs) In that same color choice box a number will come up specific to that color. The number is called the color's "hex code". Copy and paste that number into a little box labeled "edit color hex code" in blogger where you can adjust the fonts and colors.

I'm also working on a post on how to create and share your own button but the html is proving hard to blog with. Hopefully I'll figure it out eventually.

Anyway, if you've gotten this far on this post you are probably as nuts as I am. I hope I haven't scared you off but intrigued your interest. If you have any questions I would love to help!

Have a happy day


Charis said...

Sarah, It is very cute, I am very impressed! I think it looks great, however anything that is in blue does not show up well, in many places it doesn't show up at all because it is the very same color as the spots in your background. maybe try a different shade, or a completely different color. . . this all applies especially to the side gadgets such as the stuff about yourself and your boys. but way good job, i love it.

Annabob said...

The new look looks awesome Sarah! I love it. I agree with Charis on the bright blue color, but everything else is adorable! Love ya tons!

The Fullmers Three said...

I love the new look. I have been wanting to change my lay out. Thanks for the website insight.