CSS-Tricks PSD to HTML: You Design - We XHTML

Launch: Band Website Template

bwt-csstricks

I’ve been working on this joint project for quite a while now, and it’s finally ready. Introducing the Band Website Template! Brought to you by yours truly and David Walsh.

 

What is the Band Website Template?

The Band Website Template is a downloadable package with everything you need to put up a website for a band. Just unzip and upload the files, create a database on your server, run the installer, and you are ready to start customizing! The primary feature is the Gig Calendar. This puts the power of editing the calendar securely into the band’s control. Shows can be added, edited, and deleted directly from the calendar page. No need for any back-end CMS or HTML editing skills.

The idea for this was born from a band website I maintain for some friends of mine. They wanted to maintain the gig calendar themselves. This was years and years ago, and my best solution at the time was to install WordPress and use a “page” for their calendar. Then they could log into WordPress and edit that page themselves. It worked, but it was way overkill and they basically needed to learn HTML anyway (the calendar was a part of a table which needed manual editing). Bad solution, and it needed a fix.

 

What do you get?

The Band Website Template comes with all of the files you need for a complete website. This includes all the PHP, CSS, and image files you need. You also get the original Adobe Photoshop mockup file that was used to create site, so you can make alterations to that and customize the look to your own! All of the code is clean and commented, so if you are an aspiring web developer, this would be a great project to poke around through and see how things were done.

Included in the files are a couple of modules that a band website might find useful like a little MP3 player (just point at your own MP3’s) and a sliding slideshow (just replace the images with your own).

 

How much is it?

The regular rate is going to be $60, but for the launch period, we are selling it for only $30!

 

The affiliate program

The Band Website Template can help you make money! Earn $10 on every sale that comes from a click on your site. Check out the affiliate program page for more details and to sign up.

 

Band Website Template


Theoretically Related Articles:


Responses


  1. 1

    Gravatar

    I wish it was free! :P


    Comment by fdog — May 8, 2008 @ 6:44 pm

  2. 2

    Gravatar

    Very nice.

    Couldn’t help but notice that the header was very similiar to a tutorial from http://www.psdtuts.com/

    I love it!


    Comment by Tor Máhtte Eira Mathisen — May 9, 2008 @ 12:54 am

  3. 3

    Gravatar

    Nice template I hope it is a success. Who cares if it isn’t free bands spend a lot more for crap. $100 beats that MySpace crap.

    Just out of curiosity does the customer need to understand basic web design to update it or is there a web based update system?

    This could totally evolve into a better myspace for bands…
    Your the one that bought bandspace.com aren’t you?


    Comment by Kyle — May 9, 2008 @ 5:06 pm

  4. 4

    Gravatar

    @Kyle: We don’t own bandspace.com (damnit!) Thank you for the comments and if this product sells well, we will definitely consider your ideas for a version 2. Thank you for commenting!


    Comment by David Walsh — May 9, 2008 @ 5:29 pm

  5. 5

    Gravatar

    It would be nice if the News/Updates section could easily be updated as well. As it is, the only way I can see to update that section is to FTP in and change the code itself. Is this correct?


    Comment by Todd — May 10, 2008 @ 10:45 am

  6. 6

    Gravatar

    @Todd: A couple folks have asked about this now and yes, as it is now you would have to manually update that page. At the time of writing it, we didn’t really feel the need to “reinvent the wheel” as far as a blogging engine. If you need true blogging functionality, using something like WordPress is going to be a lot more robust solution and could totally be used in conjunction with our template.

    However… since this has been asked a couple times now, I’m thinking a simple way to add/remove/edit “news” entries in a similar fashion to the show calendar may be something we work on adding soon.

    Stay tuned.


    Comment by Chris Coyier — May 10, 2008 @ 3:49 pm

  7. 7

    Gravatar

    @Chris: Sounds like a great idea. I am a diehard WordPress fan so I can see where you were originally coming from but having also been in a touring band with 4 other guys who know nothing about the web, I believe folks would appreciate the simplicity of just being able to log in and say a thing or two without having to have a separate platform to do so. You wouldn’t necessarily have to “reinvent the wheel” but maybe simplify it a bit. Categories, pages, archives, etc. might not be necessary at all.

    Best of luck, guys and keep up the good work.

    PS- I bought the template just to poke around a bit. Dorky, I know.


    Comment by Todd — May 13, 2008 @ 6:59 pm

  8. 8

    Gravatar

    No hard promises just yet, but we’ve begun working on something that should make this blog editing thing a reality. Should we get it working, this will be a free upgrade for everyone who has purchased.


    Comment by Chris Coyier — May 14, 2008 @ 7:56 am

  9. 9

    Gravatar

    Hi, just donwloaded the template. The installing instructions are very vague. I don’t really know what to do, I’ve put all of the files on my server now i’m being asked to provide database details?? am i missing something??

    please help

    cheers

    Tom


    Comment by Tom — May 15, 2008 @ 6:58 am

  10. 10

    Gravatar

    @Tom: Yep, you need a MySQL database on your server for the show calendar. The show calendar needs it to store the data about the shows. Check with your host on how to add one. It is usually very easy.


    Comment by Chris Coyier — May 15, 2008 @ 7:08 am


Leave a comment

Sick of typing in all this info everytime you comment? Register or Login and save yourself time!

LINKS: You can use <a href="">LINK</a> tags here.
CODE SAMPLES: Please wrap code samples in BOTH <pre> and <code> tags.

Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.