Making a Band Layout, Version 2 Options

[YDG]

MySpace Band Layout Tutorial

Welcome to Version 2 of the Band Layout Tutorial! This tutorial will help you out in making those professional looking layouts that graphic designers are making for these rising bands. A lot of people are getting into this kind of thing, and resources for Band Layouts are very slim, so I hope this topic helps anyone out that needs the help and resources.

Rules:

• Do not spam this thread.
• Please look through other posts to see if a problem similar to yours is resolved.
• If you see a broken link, unavailable screenshot, or non-working code, please report it to me.
• If you are having any trouble, feel free to ask in here or PM me.
• If you leave me a PM, please give me a week to reply before sending me more PM's.
• If you have any requests for my tutorial, please post in this topic.

Table of Contents:

1. Getting Started
2. Changing the Look & Feel
3. Adding a Top Banner
4. Slicing Images
5. Working With Image Rollovers
6. Creating A Custom Left Side
7. Adding Headers
8. Moving Blogs to the Left Side
9. Adding a Shows Header
10. Finishing Up
    --------------------
11. Frequently Asked Questions

[thesnowpirate]

i kind of been making my own, and after testing a few sizes, 800 seems to be the best width. the height of course depends on how much content youre putting in between everything.


to be more specific, the image im working on is 2240 wide, including the background. i think thats probably a good place to start. ive dabbled a little bit before but never have made a full blown pro-coded page, which is waht im working on.

so try making a new document 2240x 500 or so to start and work your way through. but be sure when you slice later that you make a new doc of just 800x500, and the background is its own seperate file.

definitely start with understanding everything thats on top of the player itself and leave the extra stuff for later. ive gone and looked through about 30 pro myspaces between last night and today and using A1Bassline's stuff as a reference, ive really pulled stuff together (coding wise).



EDIT:

so heres what i got after more playing. i basically stole to code from paramores myspace ( www.myspace.com/paramore ) using bassline's stuff as a reference, and rebuilt the table they had in photoshop/notepad with my own little design for learning purposes. and i gotta thank bassline for the first post.

live page (will stay this way until i fix the space at the bottom): http://www.myspace.com/thesnowpirates

snapshot:


code (put in influences, i put a couple comment tags in there to let you know whats what w/ the css):

CODE

<style>

{ moving the player}

div[id="profile_mp3Player"], table table td.text object

{position:relative!important; top: -15px; left: 50%; left:7px;

_left:16px; z-index:9;}

{hiding stuff}



.contactTable{
display: none;}

.orangetext15{
display: none;}

.whitetext12{
display: none;}

.nametext{
display: none;}

{NavBar all of this is ok makes it clear and changes font}

table table div embed, table table div object{
position:relative;
z-index:9;}

table table table table, table table table td{
background-image:none;
background-color:transparent;}

table, tr, td{
background-color:transparent;
border-style:none;}

div.profileWidth div ul li a {
font-family:Verdana;
font-size:9px;
font-weight:bold;
color:FFFFFF !important;
z-index: 9;}

div.profileWidth div ul li a:hover {
color:FFFFFF !important;
background-color:000000 !important;
display:block;
z-index: 9;}

div.profileWidth div.clearfix, .i i i {
background-image:transparent !important;
z-index: 9;}

.i {
display:none;}

div.profileWidth table td ul *,div.clearfix i i i {
color: 000000 !important
font-family:verdana !important;
font-size:9px !important;
font-weight:bold !important;
z-index: 9;}

{Body}

body table{
margin-top: 330px; margin-bottom:0px;}

body div table, body table table, body td table{
margin-top:0px;}

body{
background-image: URL('http://www.rocketnight.com/images/myspace/test1/grassbg.jpg');
background-position:center;
background-repeat:repeat-y;
background-attachment: fixed;
background-color: f0efed;}




{main banner or table height auto keeps it fine}

div.topbanner {
width: 870px;
height: auto;
top: -2px;
margin-left: -435px;
_margin-left: -435px;
left: 50%;
position: absolute;
align: center;
z-index: 3;
overflow: hidden;
background-color: FFFFFF;}
}

{end banner}

</style>
<div class="topbanner">
<center>
<table id="Table_01" width="870" border="0" cellpadding="0" cellspacing="0">
..
<tr>
<td colspan="22"><img src="http://www.rocketnight.com/images/myspace/test1/header_01.jpg" width="870" height="118" alt="" /></td>
</tr>
<tr>
<td colspan="22"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29t"></a><img src="http://www.rocketnight.com/images/myspace/test1/header_03.jpg" width="870" height="28" alt="" /><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmZ1ZWxlZGJ5cmFtZW4uY29t" target="_blank"></a></td>
</tr>
<tr>
<td colspan="22"><img src="http://www.rocketnight.com/images/myspace/test1/header_05.jpg" width="870" height="32" alt="" /></td>
</tr>
<tr>
<td height="211" colspan="22"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnBhcmFtb3JlLm5ldC9zaG93cw

==" target="_blank"><center><img src="http://www.rocketnight.com/images/myspace/header.png" width="810" height="256" border="0" /><center></td>
</tr>





<tr>
<td height="29" colspan="22">&nbsp;</td>
</tr>
<tr>
<td colspan="22"><img src="http://www.rocketnight.com/images/myspace/test1/header_29.jpg" width="870" height="17" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="2"><img src="http://www.rocketnight.com/images/myspace/test1/header_30.jpg" width="29" height="242" alt="" /></td>
<td colspan="5"><a href="http://viewmorepics.myspace.com/index.cfm?

fuseaction=user.viewAlbums&friendID=11730869"> <img src="http://www.rocketnight.com/images/myspace/test1/default_photo.jpg" width="324" height="222" border="0" alt="" /></a></td>
<td colspan="2" rowspan="2"><img src="http://www.rocketnight.com/images/myspace/test1/header_32.jpg" width="13" height="242" alt="" /></td>
<td colspan="11" rowspan="5"><img src="http://www.rocketnight.com/images/myspace/test1/header_33.jpg" width="504" height="369" alt="" /></td>
</tr>
<tr>
<td colspan="3"><img src="http://www.rocketnight.com/images/myspace/test1/header_34.jpg" width="164" height="20" alt="" /></td>
<td width="81"><a href="http://viewmorepics.myspace.com/index.cfm?

fuseaction=user.viewAlbums&friendID=11730869"> <img src="http://www.rocketnight.com/images/myspace/test1/view_photos.jpg" width="81" height="20" border="0" alt="" /></a></td>
<td width="79"><a href="http://vids.myspace.com/index.cfm?

fuseaction=vids.showvids&friendID=11730869&n=11730869"> <img src="http://www.rocketnight.com/images/myspace/test1/view_videos.jpg" width="79" height="20" border="0" alt="" /></a></td>
</tr>
<tr>
<td colspan="11"><img src="http://www.rocketnight.com/images/myspace/test1/header_37.jpg" width="366" height="48" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="4"><img src="http://www.rocketnight.com/images/myspace/test1/header_38.jpg" width="20" height="157" alt="" /></td>
<td colspan="3"><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2

luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZSZmcmllbmRJRD0xMTczMDg2OQ==">

<img src="http://www.rocketnight.com/images/myspace/test1/send_message.jpg" width="169" height="39" border="0" alt="" /></a></td>
<td colspan="5"><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2

luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwuZm9yd2FyZCZmcmllbmRJRD0xMTczMDg2OSZmPW

ZvcndhcmRwcm9maWxl"> <img src="http://www.rocketnight.com/images/myspace/test1/forward_to_friends.

jpg" width="177" height="39" border="0" alt="" /></a></td>
</tr>
<tr>
<td colspan="3"><a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbm

RleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJZD0xMT

czMDg2OQ=="> <img src="http://www.rocketnight.com/images/myspace/test1/add_to_friends.jpg" width="169" height="40" border="0" alt="" /></a></td>
<td colspan="5"><a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZWVkaXQubXlzcGFjZS5jb2

0vaW5kZXguY2ZtP2Z1c2VhY3Rpb249dXNlci5hZGRUb0Zhdm9yaXRlJmZyaWVuZElEPTExNz

MwODY5JnB1YmxpYz0w"> <img src="http://www.rocketnight.com/images/myspace/test1/add_to_favorites.jp

g" width="177" height="40" border="0" alt="" /></a></td>
</tr>
<tr>
<td colspan="3"><a href="http://www.myspace.com/..

%20MySpace.invokeWebIMWrapper();"> <img src="http://www.rocketnight.com/images/myspace/test1/instant_message.jpg

" width="169" height="39" border="0" alt="" /></a></td>
<td colspan="5"><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbm

RleC5jZm0/ZnVzZWFjdGlvbj1SYXRlSW1hZ2UuVXNlclJhdGluZyZVc2VySUQ9MTE3MzA4Nj

k="> <img src="http://www.rocketnight.com/images/myspace/test1/rank_user.jpg" width="177" height="39" border="0" alt="" /></a></td>
<td colspan="11" rowspan="2"><img src="http://www.rocketnight.com/images/myspace/test1/shows.jpg" width="504" height="78" alt="" /></td>
</tr>
<tr>
<td colspan="3"><a href="http://www.msplinks.com/MDFodHRwOi8vZ3JvdXBzLm15c3BhY2UuY29tL2luZG

V4LmNmbT9mdXNlYWN0aW9uPWdyb3Vwcy5hZGR0b2dyb3VwJmZyaWVuZElEPTExNzMwODY5">

<img src="http://www.rocketnight.com/images/myspace/test1/add_to_group.jpg" width="169" height="39" border="0" alt="" /></a></td>
<td colspan="5"><a href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbm

RleC5jZm0/ZnVzZWFjdGlvbj1ibG9jay5ibG9ja3VzZXImdXNlcklEPTExNzMwODY5">

<img src="http://www.rocketnight.com/images/myspace/test1/block_user.jpg" width="177" height="39" border="0" alt="" /></a></td>
</tr>
<tr>
<td width="6"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="6" height="1" alt="" /></td>
<td width="4"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="4" height="1" alt="" /></td>
<td width="10"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="10" height="1" alt="" /></td>
<td width="9"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="9" height="1" alt="" /></td>
<td width="67"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="67" height="1" alt="" /></td>
<td width="93"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="93" height="1" alt="" /></td>
<td width="4"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="4" height="1" alt="" /></td>
<td><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="81" height="1" alt="" /></td>
<td><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="79" height="1" alt="" /></td>
<td width="3"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="3" height="1" alt="" /></td>
<td width="10"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="10" height="1" alt="" /></td>
<td width="2"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="2" height="1" alt="" /></td>
<td width="9"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="9" height="1" alt="" /></td>
<td width="95"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="95" height="1" alt="" /></td>
<td width="62"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="62" height="1" alt="" /></td>
<td width="39"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="39" height="1" alt="" /></td>
<td width="129"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="129" height="1" alt="" /></td>
<td width="34"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="34" height="1" alt="" /></td>
<td width="85"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="85" height="1" alt="" /></td>
<td><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="1" height="1" alt="" /></td>
<td width="38"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="38" height="1" alt="" /></td>
<td width="10"><img src="http://www.rocketnight.com/images/myspace/test1/spacer(1).gif" width="10" height="1" alt="" /></td>
<td width="1"></td>
</tr>
..
</table>
</center>
</div>

some stuff gets repeated, and some stuff probably isnt neccessary. i hope this helps anyone else. the only thing i cant figure out, and it happens on paramores myspace as well, is why there is so much extra space at the bottom under the comments. anyone have any ideas?

This post has been edited by A1Bassline: Aug 16 2009, 11:15 AM

Reason for edit: Please use [codebox][/codebox] tags when posting long codes. Thanks. - TJ