Who’s afraid of CSS? How to remove the Picasa logo from web pages generated with Picasa

July 10th, 2005

For the last six months I have enjoyed making web pages to show photos using Google’s free photo management product Picasa. Now I’ve learned a new trick which makes it even better.

Making web pages with Picasa is really simple. First, Picasa is a great tool for organizing all the photos on your hard drive. Using Picasa to look at your photos (whether the ones you just took or all the digital photos you’ve ever taken), you just pick the photos you want, sequence them in the order you want, hit ctrl-w and, voila, you have a web page ready to upload to a server. Composition of the web page really is a one-click affair. Picasa produces it complete with an index page of thumbnails linked to larger versions of each picture. Picasa lets you pick a variety of layouts and background colors (black, gray or white) for the page. I then use SmartFTP and simply drag the Picasa output (all in a single folder) to the directory I want it to appear in on the internet. It’s done. I then send the web page address to my Mom in an email (as a link), so she just clicks on it and can see the latest pictures of her granddaughter.

In the pre-digital era, sharing photos like this would have required a lot more work on my part. I would have had to take the film somewhere to be developed, picked up the film, chosen the good shots (and many exposures on a roll would not be good) then I would have had to mail duplicates of the decent images to Grandmother. Realistically, these added steps and time delays (and some added expense, if you don’t figure in the cost of the computer and network connection) mean that I would not have done it very often. In contrast, I’ve made about 30 of these Picasa web pages over the last 6 months. That’s an average of just over one per week, and I’ve emailed some images that I didn’t put into web pages. So Grandmother has been able to share the joy of watching Helen grow and develop. In this case, digital technology really has improved an aspect of my life.

The ease of this process is one reason it works so well. I did have to acquire access to a server to which I could upload files (in my case, I registered a domain and pay a small monthly hosting fee), but I am shielded from HTML and other arcane techno gibberish. I am free to concentrate on my photos and sharing them, not gearhead stuff.

Picasa does a good job and is free, so I am a fan of it. But there are some trade-offs. In terms of web pages, in order to keep things simple it doesn’t give you a lot of choices over the appearance of the pages you produce. It is not highly customizable. It’s the equivalent of a point-and-shoot website maker, without manual controls to override the default settings. You can just dial in a few choices. Well, as I have made more of these photo web pages with Picasa, I find that I want to modify them beyond those dial-in choices.

For example, when I have a shot that is vertically taller than it is wide, I find that I have to scroll down a bit to see the whole image on my laptop screen. This wouldn’t be necessary if Picasa didn’t put its logo on the top of the page above the photo, but there is no way within Picasa to move the logo to the bottom of the page (I have no fundamental objection to the logo—seems like a fair trade for free software), but the scrolling issues annoyed me. I had visited the Picasa site and a Google group about Picasa but never found instructions for how to solve this. I had looked at the html file Picasa produces, trying to find some code that I could edit to remove or change the position of the logo. I didn’t find anything, and I’ve never edited CSS files before, so I demurred at exploring that route.

But yesterday I did a Google search for “Picasa web pages remove logo” and found this Picasa tutorial from Walter Gajewski, director of the Media Development Lab at Cal-State Long Beach. It has simple, clear instructions about how to remove the logo from a Picasa web page and adjust the top margin! Here are the steps from Walter Gajewski:

Tip from Walter:

To eliminate the Picasa logo from your web pages and move the rest of the material closer to the top margin, do the following before uploading the web pages to your web server:

* Find the file called Style.css
* Edit the file in any text editor (e.g. Word Pad or Notepad)
* Change the “MARGIN-TOP: 70px” to read “MARGIN-TOP: 10px”
* Delete the entry that reads “BACKGROUND-IMAGE: url (‘logo.gif’);”
* Save the newly edited style.css file.

I’ve sent an email to thank him for sharing this. It’s going to allow me to enjoy Picasa even more.

Also of note, there is a WP Picasa Gallery plugin that allows you to use an xml file created with Picasa’s web page export feature to add photo galleries within a WordPress post. I’ve used it a few times, for example here and here, and really like it. However, I find I tend to prefer an entirely separate page for a large collection of photos and thus rely on Picasa to generate galleries that I can think link to through WordPress, with perhaps a single sample image in the post itself. For uploading a single image to a WordPress entry IImage works well for me.

One response

  1. Walter Hutchens’ Blog » Blog Archive » Installing Windows on a Mac to Run Picasa and for Tablet PC Functionality pings back:

    [...] web album. Picasa ships (downloads?) with some nice web album templates. Early on I additionally learned how to modify the output to de-brand the albums the software creates. I’ve also added some thrid-party, free templates to [...]

Leave a comment