My good friend Taylor recently re-launched his site TaylorRankin.com, its a lot more bold than it was previously.

After some discussion and analysis we decided to build off of Bandzoogle.com’s existing platform and that it was possible to fit it to our design needs.

By the way, Bandzoogle for those of you who do not know is a web hosting platform with a slew of features catered primarily to independent musicians.

Anyway it was challenging as there is no templating language to use at this time.  The analysis work itself was based on CoreySmith.com, an atypical Bandzoogle hosted site.  After looking at the source code with Firefox’s Firebug I realized the following:

  1. The custom elements on the page were being loaded in the footertext div.
  2. Those extra html elements were being managed by the custom styles.css.
  3. A lot of the images were being hosted on a server other than Bandzoogle’s.

If you happen to use or are considering to use Bandzoogle and are looking for inspiration on how to customize it, or just curious, read on.

The setup:

  1. Since editing your site live on Bandzoogle can be slow and potentially aggravate your fan base in the process I recommend that you mirror the site to a local drive.  You’ll work from this local drive.
  2. Open up the local html source and browse down to <div id=”footertext”>, this is where you will want to place all of your custom HTML elements.
  3. If you don’t have a custom styles.css file yet, create one and place it after all the other CSS files.
  4. Keep track of any extra images you decide to use as you’ll need to upload those to a third party hosting platform.

Once you’re finished with your new design:

  1. If you do have any extra images upload them to a host of your choosing and link them appropriately into your css and html.
  2. Login to your Bandzoogle account and navigate to Design & Options.
  3. Copy the contents of your styles.css and browse down to Custom Stylesheet and click on the here link to paste your CSS.
  4. On your html page compress the footertext class down to one line and on the left hand menu of Design & Options click on Footer Text and copy/paste that line into the provided field.  Make sure to omit the footertext div from that line.
  5. Save and voilà!

Thankfully there is no max length set for the footertext field.

If you’d like to hear about tips and tricks on leveraging Bandzoogle.com’s platform or have any questions please leave me a comment.  Thanks!