Forums > Making a Band Layout

Forums > Resource Center > Support Center > MySpace Support

Pages: 1, 2, 3, 4

YDG

Jul 20 2009, 09:20 PM

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:

YDG

Jul 20 2009, 10:05 PM

Getting Started

Here is a list of things you might want consider using to make your layout:

Adobe Photoshop CS4
Adobe Illustrator CS4
GIMP
Notepad

Some of this tutorial will be based on Adobe Photoshop CS4, but the steps are optional, so you don't have to follow those steps.

Before we even start making the layout, make sure you have everything prepared for the layout. Make sure you get rid of all of your current coding on your MySpace, but make sure you do all of your editing in Safe Mode. If you don't do editing in Safe Mode, you will not be able to save your changes.

Also, make sure you have your images ready to put on the layout. You will want to have your pictures all uploaded, unless you are looking into slicing images, then you'll have to upload as you go along. Here are some websites you can use to upload your pictures.

In my opinion, I would recommend using webs, because Photobucket and Imageshack aren't that reliable.

YDG

Jul 20 2009, 10:25 PM

Changing the Look & Feel

Once you're all prepared to start your layout, now you're ready to start changing the look and feel of your layout. Feel free to use this stylesheet. I recommend that you use it because using generated layout stylesheets make it much harder for me to pinpoint a problem / fault in your layout.

CODE

<style type="text/css">

.orangetext15 {display: none;}
.whitetext12 {display: none;}

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

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

body {
background-color: 000000;
background-image:url();
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
}

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

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:FFFFFF;
font-size:9pt;
line-height: 10pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

strong, .lightbluetext8, .btext, .redtext, .redbtext{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{
color:FFFFFF;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

a {
color: FFFFFF !important;
font-family: Arial !important;
}

a:hover {
color: 666666 !important;
font-family: Arial !important;
}

a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:normal ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

table table table table, div table table table{
border-style:none;
}

</style>

This gets asked a lot, but I wouldn't ask how to hide things in this tutorial, and it's something I can't / will not go over. Table classes for band layouts are much more different than regular profiles, so it's nearly impossible to hide one section without the code conflicting with something else in your layout.

YDG

Jul 20 2009, 10:56 PM

Adding a Top Banner

If you want to add a top banner to your layout, there are two ways of going about it. You can put a top banner above the navigation, or you can put one below the top banner. I will not be going over how to add a top banner above the navigation, but here is how to put one under the navigation.

With the following code, here are some important aspects you'll have to look at:

Line 1: .profileWidth table {margin-bottom:###px; width:800px; }
Line 5: width:###px; height:###px;
Line 7: margin:0px 0 -400px -###px;

What each line means:

Line 1: Margin-bottom is the height of your top banner image..
Line 2: The width and height are the dimensions of your top banner image.
Line 7: Just edit the very last property in that line. For example, in this code, I have the number -###. You will change the number to the height of your image, but make sure the negative symbol is there.

This code goes at the very top of your Band Biography section. If it gets placed anywhere, it will not create the right gap.

CODE

Okay, now your going to have to use some DIV positioning codes to position your top banner in between the gap. If you are not familiar with DIV codes, you might want to check out this tutorial for more information and practice.

Use the following code:

CODE

.topbanner {position:absolute; left:50%; top:###px; margin-left:###px; _margin-left:###px; width:###; height:###px; z-index:1;}

I didn't put style tags between the code, because you should add this piece of coding to your stylesheet. It makes it a lot easier to find things, and it throws some more organization into your stylesheet.

All you have to do here is change the ### symbols to the number that works for you. As you can see, there are two margin-left properties. _margin-left:###px; is a fix for Internet Explorer to get it to work right in both Internet Explorer and Firefox. Do not change left:50%; to any other percent. Almost everyone does this, and that's where they run into their problems. left:50%; makes sure everything stays in the same area in both browsers.

Now just add the DIV class in the Band Bio section and you're set:

CODE

<div class="topbanner">
Image code here
</div>

YDG

Jul 20 2009, 11:04 PM

Slicing Images

This is an optional part of the tutorial. Slicing images will help greatly with your images loading faster, and it also helps add links to images, since imagemapping will not work on band layouts.

For more information on this, check out my tutorial on how to slice images and add links.

YDG

Jul 20 2009, 11:23 PM

Working With Rollover Images

This, as well is an optional part of the tutorial, but it is also one of the hardest parts. You're going to have to pay super close attention to what I say so you can grasp a better understanding of how to do this. There are other methods as to how to do rollovers with images, but I find my way a lot easier, especially if you slice your images to make them links.

There isn't really any explanation needed as far as the codes go to get this to work, you just need to be able to position things correctly, and this should be a snap for you.

Here is the code you will use for your rollovers:

CODE

.topbannerhover {position:absolute; top:###px; left:50%; margin-left:###px; _margin-left:###px; width:###px; height:###px; z-index:1;}
 
div.topbanner a:hover{
	border-top: none;
	opacity: 0.0;
	filter: alpha(opacity=0);
width: 0px; 
height: 0px;	
        z-index:1;
}
 
.topbanner {position:absolute; top:###px; left:50%; margin-left:###px; _margin-left:-###px; width:###px; height:###px; z-index:1;}

I'll try to give the best explanation of this I can, but it's pretty self-explanatory. The first code for positioning will be the hover layer (the rollover images), the middle code causes the image to change on rollover. The only thing you need to change in that code is the name of the layer to the name of the layer used for positioning the image before hovering. In this case for the coding, the code with the rollover images will be .topbannerhover, and the two parts, div.topbanner a:hover and .topbanner, for the image before rollover.

If you are having trouble understanding, the screenshots provided will give you an idea of what you're going to be doing:

Screenshots are temporarily unavailable...

The .topbannerhover and .topbanner need the same exact attributes for positioning, that way one is on top of the other. When you put the DIV classes up for them, they will look something like this:

CODE

<div class="topbannerhover">
Image rollover code
</div>

<div class="topbanner">
Sliced image code
</div>

Your on-hover layer will always come first. Once you're done, save changes and check to see if you've done it correctly. If not, keep trying. If you do get it, keep doing the same process any other time you may need it.

YDG

Jul 20 2009, 11:41 PM

Creating a Custom Left Side

If everything thus far has been easy for you on this tutorial, you should have no problem creating your own custom left side. As I said earlier, you can not hide tables on band layouts without running into a problem somewhere else, so covering it up with a DIV layer is going to be our fix for this problem.

Before you create your left side, keep these things in mind.

The maximum width is 325px.
You must set a background color to cover the tables.
If the width is less than the maximum, you must specify it.
It is not recommended to have a width less than 325px.
If sections show up under your left side, it's because of your positioning.

For your left side, here is the code for positioning a DIV layer again:

CODE

.tg_left {position:absolute; top:###px; left:50%; margin-left:###px; _margin-left:###px; width:325px; height:###px; z-index:1;}

As I said earlier, I did not add style tags because I recommend you incorporate it in your stylesheet, and replace the ### symbols with numbers that work for you.

Once you think you have it positioned where you want it, add a div class code in the Band Bio section:

CODE

<div class="tg_left">
Left side codes / images here.
</div>

It may take a couple tries to position, just be patient with it.

FREQUENTLY ASKED QUESTION:

Q: My left side overlaps my comments, how do I fix it?
A: Simple, just fill up the right side of your layout with information, headers, and other miscellaneous items. The right side will go down, pushing your comments down with it. You can also position your comments by moving them to the left, but it causes browser problems most of the times, so I'm not recommending it or linking how to.

YDG

Jul 21 2009, 12:00 AM

Adding Headers

There isn't really much of an explanation needed here, all you have to do is change the parts that I've highlighted in bold for you. There are header codes for the band biography, blogs, friends, and comments. Once again, I am not adding style tags because I recommend adding it into your stylesheet.

Band Biography:

CODE

<img src="imageurlhere" />

Blogs:

CODE

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry{
	background-color: transparent !important;
	color: ###### !important;
	width: 450px !important;
	border-collapse: collapse !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-top: 15px !important;
	padding: 0 !important;
	table-layout: fixed !important;
	position: relative !important;
	background-image: url(BACKGROUNDIMAGEHERE);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	overflow: hidden;
	_background-position: 0px 2px;
	_margin-left: -4px !important;
	_margin-top: 0px !important;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr{
	display: inline;
	margin: 0 !important;
	padding: 0 !important;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td{
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 449px !important;
	font-family: Arial;
	color: ###### !important;
	clear: both !important;
	font-size: 1px !important;
	line-height: 0px;
	vertical-align: middle;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td a{
 	float: right;
 	line-height: 35px;
 	color: ######;
 	padding: 0px !important;
 	margin: 0px !important;
 	padding-right: 5px !important;
 	position: relative;
 	z-index: 6;
 	font-weight: normal;
  	font-size: 10px !important;
  	display: block;
	height: 35px;
	text-transform: Capitalize;
    _font-size: 10px !important;
    _width:120px;
    _text-align:right;
    _font-weight: normal;
    _postion: absolute !important;
    _margin-top: -4px !important;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td span.text{
 	line-height: 35px;
 	position: absolute;
 	display: block;
 	border-bottom: 1px dotted dimgray;
 	border-color:  ######;
 	width: 443px;
 	color: ######;
 	padding: 0px !important;
 	margin: 0px !important;
 	padding-left: 5px !important;
  	z-index: 5;
 	font-weight: normal;
  	font-size: 10px !important;
 	height: 35px;
   	_font-size: 10px !important;
  	_margin-top: -3px !important;
  	_font-weight: normal !important;
  	_margin-left: -3px !important;
    _width:449px;
}

html body.bodyContent table tbody tr td table tbody tr td.text table.latestBlogEntry tbody tr td span.btext{
	display: block;
	float:  left;
	width: 50px !important;
	height: 43px;
	font-size: 1px;
	overflow: hidden;
	color: ###### !important;
	line-height: 300px;
}

Friends:

CODE

html body.bodyContent table tbody tr td table tbody tr td.text table.friendSpace tbody tr td.text table tbody tr td span.orangetext15{
	display: block !important;
	height: 45px !important;
	width: 450px !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 1px;
	overflow: hidden;
	background-image: url(BACKGROUNDIMAGEURL);
	background-repeat: no-repeat;
	color: 000000 !important;
	line-height: 10px !important;
	margin-top: -3px !important;
}

Comments:

Comments are the hardest headers to work with. The recommended width for the comment header is 780px. The code is very hard to follow, so you will have to experiment around with this code.

CODE

html body.bodyContent table tbody tr td table.friendsComments { 
  width: 720px !important; 
  margin: 0 !important; 
  padding: 0 !important; 
  margin-top: 20px !important; 
  overflow: hidden !important; 
  background-color: transparent !important; 
  margin-left: -1px !important; 
  _width: 720px !important;
  _margin-left: -2px !important;} 
 
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table { 
  width: 100% !important; 
  border-collapse: separate !important; 
  border-spacing: 0px 0px !important; 
  background-color: transparent !important; 
  height: auto !important;} 
 
table.friendsComments tbody tr td.text table tbody tr td { 
  background-color: transparent !important; 
  height: auto !important;} 
 
table.friendsComments tbody tr td.text table tbody tr td span.orangetext15 {
  background-image: url(imageurlhere); 
  background-repeat: no-repeat !important; 
  background-color: transparent; 
  display: block !important; 
  height: 40px !important; 
  color: 000000 !important; 
  width: 800px; position: relative; 
  overflow: hidden; 
  font-size: 1px; 
  text-align: right; 
  margin-top: 5px; 
  line-height: 300px !important; 
  _width: 800px !important; 
  _border-left: 1px 000000 !important; 
  _border-right: 1px 000000 !important; 
  _height: 40px !important; 
  _margin-bottom: -1px !important;} 
 
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b { 
  display: block; 
  position: absolute; 
  z-index: 9; 
  width: 750px; 
  height: 15px; 
  line-height: 15px; 
  overflow: hidden; 
  margin: -25px 0 0 8px; 
  text-align: right; 
  padding-right: 12px !important; 
  color: 000000;
  font-weight: normal; 
  font-size: 12px; 
  _margin: 0px 0 0 15px; 
  _font-size: 12px !important; 
  _color: 000000;} 
 
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b span.redtext { 
  font-weight: normal; 
  color: 666666; 
  padding: 0px 2px;} 
 
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td b a { 
  color: 666666 !important; 
  font-size: 12px !important; 
  text-transform: none; 
  margin: 0 -7px 0 -8px !important; 
  padding: 0 9px 0 9px !important; 
  background-color: transparent !important; 
  position: relative !important; 
  display: inline !important; 
  z-index: 9; 
  border: none !important; 
  letter-spacing: 0px !important; 
  _font-size: 11px !important; 
  _margin: 0 !important; 
  _padding: 0 !important;} 
 
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table { 
  overflow: hidden !important; 
  border: 1px 000000 !important; 
  border-color: 000000 !important; 
  width: 100% !important;} 
 
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td { 
  background-color: transparent !important; 
  text-align: left; 
  vertical-align: top; 
  overflow: hidden !important; 
  font-size: 12px !important; 
  line-height: 12px !important; 
  text-transform: none !important; 
  letter-spacing: 0px; 
  color: 000000 !important; 
  margin: 0 !important; 
  padding: 5px 0px 5px 0px; 
  border-bottom: 0px 000000 !important; 
  border-color: 000000 !important; 
  _line-height: 16px !important;} 
 
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td span.blacktext10 { 
  color: 000000 !important; 
  text-transform: None !important; 
  margin: 0px !important; 
  padding: 0px important; 
  display: block !important; 
  font-size: 12px; 
  font-family: arial, sans-serif !important; 
  font-weight: normal; 
  letter-spacing: 1px; 
  text-align: right; 
  margin: 10px 10px -12px 0px !important; 
  width: 650px; 
  border-top: 1px 000000; 
  _margin: 12px 0px -.5em 0px !important; 
  _width: 650px;} 
 
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td { 
  background-color: transparent !important;} 
 
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td a { 
  display: block; 
  border: 0px 000000 !important; 
  border-color: 000000 !important; 
  border-top-style: solid !important; 
  border-top-width: 0px !important; 
  text-align: center; 
  text-transform: Uppercase; 
  padding: 8px; 
  font-size: 12px; 
  letter-spacing: 1px; 
  color: transparent !important; 
  position: relative !important; 
  margin-top: -3px !important; 
  background-color: transparent; 
  _margin-top: -6px !important;} 
 
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td a {
  display: block !important; 
  color: 000000 !important; 
  margin: 0px !important; 
  padding: 10px 10px 0px 10px !important; 
  text-transform: none !important; 
  margin-bottom: -15px !important; 
  font-size: 10px !important; 
  line-height: 11px !important; 
  border: none !important; 
  letter-spacing: 0px !important; 
  text-align: center !important; 
  width: 110px !important; 
  overflow: hidden !important; 
  font-weight: normal; 
  _width: 124px !important; 
  _margin-bottom: -15px !important;} 
 
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td a img { 
  visibility: visible !important; 
  border: 0px 008080 !important; 
  border-color: 000000 !important; 
  padding: 0px !important; 
  margin: 0px !important; 
  margin-top: -12px !important; 
  width: auto !important; 
  _margin-left: 0px;} 
 
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td img.ImgOnlineNow {
  display: block; 
  position: relative; 
  margin: 15px 0 -20px 26px !important; 
  border: none !important; 
  _margin: 15px 0 -20px 21px !important;} 
 
html body.bodyContent table tbody tr td table.friendsComments tbody tr td.text table tbody tr td table tr td img {
  max-width: 100%; 
  margin: 0px !important; 
  margin: 0px 0px 12px 0px !important;}

YDG

Jul 21 2009, 12:08 AM

Moving Blogs to the Left Side

This has become quite popular for band profiles, and a lot of people have been asking me for my code that I use to do that, so I'm going to go ahead and provide it for you. All you have to do is position it, and you're good. What I highlighted in bold is all you need to change.

CODE

.latestBlogEntry {
position:absolute;
top:###px;
margin-left: -###px;
left:50%;
width: 325px;
background-color: transparent;
z-index: 9;
}
 
table .latestBlogEntry {
	width:325px!important;
}

To add a header to the blog when you move it to the left side, it's simple. All you have to do is create another DIV layer and position it above the blogs section, and it looks just as good.

YDG

Jul 21 2009, 12:19 AM

Adding a Shows Header

If you got the top banner code down, then this will also be easy for you. This is a really simple code, and it's foolproof.

Use this code to create a gap between the player and shows section. The bold part is the only part that you need to change:

CODE

table table table table td.text span.whitetext12 {
position: relative;
top: 0px;
display: block;
left: 0px;
visibility: visible;
width: 1px;
height: 10px;
text-indent: -999999px;
background: transparent url() bottom left no-repeat;
}

Then just add a positioning code and DIV class code to position a shows header in between the space you created and you're all set.

CODE

.shows {position:absolute; top:###px; left:50%; margin-left:###px; _margin-left:###px; width:325px; height:###px; z-index:1;}

CODE

<div class="shows">
Image code here
</div>

FREQUENTLY ASKED QUESTION
Q: Whenever I add a new show, the shows header moves down / up. How do I stop it from doing this?
A: Most of the time your problems starts with the left side DIV layer you've created. The width may overlap over towards the right side, causing it to be pushed down. Check that out and see if that is causing the problem.

YDG

Jul 21 2009, 12:25 AM

Finishing Up

This brings you to the end of my band tutorial. If there are any parts that confused you, feel free to bring it up by posting in here or you can PM me, but I prefer you post in here first.

To make sure your layout looks good in all browsers, check out Browsershots.org and choose the browsers you want screenshots for. It will let you know if anything is misaligned. If that's the case, look through your codes for any possible errors. If you are stumped and can't find out why something is acting up, post in here or leave me a PM.

YDG

Jul 21 2009, 12:31 AM

Frequently Asked Questions

Q: My left side overlaps my comments, how do I fix it?
A: Simple, just fill up the right side of your layout with information, headers, and other miscellaneous items. The right side will go down, pushing your comments down with it. You can also position your comments by moving them to the left, but it causes browser problems most of the times, so I'm not recommending it or linking how to.

Q: Whenever I add a new show, the shows header moves down / up. How do I stop it from doing this?
A: Most of the time your problems starts with the left side DIV layer you've created. The width may overlap over towards the right side, causing it to be pushed down. Check that out and see if that is causing the problem.

JaredxSmith

Jul 22 2009, 01:07 PM

Perfect. :)

sethisamazing

Jul 29 2009, 01:20 PM

sweeeeeeeet.

Pictures would be a nice addition though :D

YDG

Jul 29 2009, 02:19 PM

Screenshots are coming soon.

ZeT0

Jul 30 2009, 10:36 AM

Haha, I'm going to need the screenshots to understand the rollovers!
I've been trying for days. D:

YDG

Jul 30 2009, 10:40 AM

They're really not that complicated you have to take it little by little and read over a couple times.

QUOTE(A1Bassline @ Jul 29 2009, 03:19 PM)

Screenshots are coming soon.

bberinger13

Jul 31 2009, 10:29 PM

Ok so I've been working on this top header i have it sliced and coded with all the images up and running and all hosted on tinypic and no longer hosted locally. I've run into some trouble on getting this top header in the right spot. I've had experience with putting top headers up but with no links so its not just an upload image. Do i use a divs? Codes would help out a ton. Thanks so much.

dollywood

Aug 3 2009, 05:49 AM

Hi

The band tutorial is great and im almost done with my page

However ive got a niggly prob - with the header for the blogs section mine overlaps onto the blogs...if i change any margin attributes it shifts the header over left

ideally i want to line it up with my shows header but fiddling with the code doesnt seem to do anything

unfortunately i am at work so i cant attach a screenshot but my myspace address is www.myspace.com/tgvisualsbands

any help would be great

thanks

augiedesign

Aug 3 2009, 07:16 PM

this tutorial is a great help, but i need a little more of that: how would i put rollover links in the left div cover

edit: nvm. got it

jigokume

Aug 4 2009, 11:32 AM

yoo can someone tell me how to make the view all friends text to look like " view all of blablabla's friends " and how to make lines on comments and moving the add comments text to the right?

ur help will be greatly appreciated!! ^^
sorry for asking so much guys... XP

Mickey

Aug 4 2009, 11:34 AM

Have you read the tutorial at all?

jigokume

Aug 4 2009, 01:29 PM

oww there's a way of doing that on the tutorials?

sorry then my bad... i go through with the tutorial first, the ask for questions later.. XP

sorry -_-

yay i tinkered with the codes for the comment part and managed to get it goin with the one i hv now.. there a bit of a problemo thoo.. i still dun get how to make the lines show up and there's hint of i dunno wht just on top of the comments part,, can somebody tell me how to get over this mess? sorry XP

nevermind guys! i figured it out!!
thank u so much for the lovely tutorial!! ^^

Mickey

Aug 5 2009, 03:59 PM

Posts merged.

MoneyIsDaMotive

Aug 11 2009, 06:14 PM

is for a DIV or a regular layout?????

Mickey

Aug 11 2009, 06:39 PM

It's a bit of both, but it's leaning more towards a standard band profile. You can make it more complex by adding more DIVs on the page.

MoneyIsDaMotive

Aug 11 2009, 07:48 PM

it says i should hide anything....but if i want to make a div, how do i do it?

Mickey

Aug 11 2009, 07:53 PM

Since you're limited with which elements you can hide, I recommend just covering up the tables on your page using your layout design.

MoneyIsDaMotive

Aug 11 2009, 08:06 PM

like how? make a big templete and just cover it up
and then add the div image on top?

thesnowpirate

Aug 13 2009, 05:33 PM

anyone have a completed band page done?

and a copy of the source code? some parts are a bit hard to figure out without screenshots.

took me a bit to figure out why the header was so low on the page, and then i realised i was an idiot.

so for anyone having trouble w/ the header this is what i got:

and the only code i have on the bio page:

CODE

hopefully this helps anyone else who was lost. compare mine with step one and it should clear it up.

(great tut so far btw)

YDG

Aug 13 2009, 07:58 PM

Posts Merged.

fromshiptoshore

Aug 14 2009, 12:32 AM

hey mike, tj told me to comment on here and you could help me,
i am having so much trouble doing the rollovers, but i do not feel comfortable posting my code on here.
is there a way i can talk to you on msn messenger or over myspace about this? message me back on here not in comment

Mickey

Aug 14 2009, 05:46 AM

Thanks for that, Thesnowpirate. Keep it up. Fromshiptoshore, how about sending me your codes so you don't have to put it up? It will be difficult trying to identify the issue if I have nothing to look through.

MoneyIsDaMotive

Aug 14 2009, 01:26 PM

1. whats a good, document size for the layout?

2. what should a banner say when your just getting noticed?
and gonna keep the layout for a while, so what should it say.
listen to "one" song, ? or just say "official myspace page" ??

3.how mayne sections should the div have?
updates, (upcoming shows?)
friends&&comments,
about the band
pictures,

anything alse im missing????
and can i add "from the fans"
so i can put the hacks and fan sigs on?

Mickey

Aug 14 2009, 01:38 PM

Those are all subjective. It's up to you how you want your page to look and what you'd like to have on there. If you want to get a feel of how music pages look, just check out the pages of other artists. Personally, I'd put "Listen to This Track" instead of "Official MySpace Page". A fans section would be a great addition, but you definitely need to put up essential content. The tables you listed should do.

MoneyIsDaMotive

Aug 14 2009, 01:50 PM

i have been looking around,
i wanna start making it. but the document size is
leaving me stuck..

Mickey

Aug 14 2009, 01:58 PM

How can you be stuck? You're making the design; you can decide how big or small you want it to be at any stage of the building process.

thesnowpirate

Aug 14 2009, 04:51 PM

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?

MoneyIsDaMotive

Aug 15 2009, 10:04 PM

whats the width and height of the music player?

monkeyprince

Aug 16 2009, 03:53 AM

Er...I'm having a bit of trouble on the custom left side thing, I'm not too good with dimensions and honestly this is my first time coding, so what are good dimensions? Like an example?

YDG

Aug 16 2009, 11:18 AM

QUOTE(thesnowpirate @ Aug 14 2009, 05:51 PM)

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

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

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?

That's because you aren't using my codes, like I suggested and recommended. I recommended you stuck with my codes so problems like this didn't have to be dealt with. The body table code was used and that creates a big space at the bottom.

QUOTE(SwaggLookinGood @ Aug 15 2009, 11:04 PM)

whats the width and height of the music player?

425px wide
345px high

QUOTE(monkeyprince @ Aug 16 2009, 04:53 AM)

Er...I'm having a bit of trouble on the custom left side thing, I'm not too good with dimensions and honestly this is my first time coding, so what are good dimensions? Like an example?

In my tutorial, I said 325px is the best width. Height doesn't matter. Just set the height in the div layer to autopx. That's what I do.

dimmu1

Aug 16 2009, 04:18 PM

QUOTE(A1Bassline @ Jul 21 2009, 05:56 AM)

Adding a Top Banner

CODE

<style>
.profileWidth table { margin-bottom:800px; width:600px; }
.rail { display:none; }
.gap {
  background:url(myimage) top left no-repeat;
  width:900px; height:1150px;
  position:absolute; top:175; left:115%;
  margin:0px 0 -400px -1150px
</style>

<div class="gap"></div>

I got it what did I do wrong.the width:900px; height:1150px was the problem :] I just put it on width:600px; height:800px and now is good.thanks again! keep up the good work

monkeyprince

Aug 16 2009, 04:49 PM

Okay, again with the custom left side...is there any way I can turn some of the images into links? to like pictures and add to friends and stuff?

YDG

Aug 16 2009, 09:06 PM

QUOTE(dimmu1 @ Aug 16 2009, 05:18 PM)

tutorial is great and it really help me but when I set my top banner logo and clicked preview all was great but I can't submit or edit.what ever of those two I click nothing happens :S what's wrong and how to fix it? I use this setup

I got it what did I do wrong.the width:900px; height:1150px was the problem :] I just put it on width:600px; height:800px and now is good.thanks again! keep up the good work

QUOTE(A1Bassline @ Jul 20 2009, 11:05 PM)

Getting Started

Here is a list of things you might want consider using to make your layout:

Adobe Photoshop CS4
Adobe Illustrator CS4
GIMP
Notepad

Some of this tutorial will be based on Adobe Photoshop CS4, but the steps are optional, so you don't have to follow those steps.

Before we even start making the layout, make sure you have everything prepared for the layout. Make sure you get rid of all of your current coding on your MySpace, but make sure you do all of your editing in Safe Mode. If you don't do editing in Safe Mode, you will not be able to save your changes.

Also, make sure you have your images ready to put on the layout. You will want to have your pictures all uploaded, unless you are looking into slicing images, then you'll have to upload as you go along. Here are some websites you can use to upload your pictures.

In my opinion, I would recommend using webs, because Photobucket and Imageshack aren't that reliable.

QUOTE(monkeyprince @ Aug 16 2009, 05:49 PM)

Okay, again with the custom left side...is there any way I can turn some of the images into links? to like pictures and add to friends and stuff?

QUOTE(A1Bassline @ Jul 21 2009, 12:04 AM)

Slicing Images

Mickey

Aug 17 2009, 06:10 AM

QUOTE(monkeyprince @ Aug 16 2009, 10:49 PM)

Okay, again with the custom left side...is there any way I can turn some of the images into links? to like pictures and add to friends and stuff?

Just use a link code with the image code, like this:

CODE

Replace the first URL with the page you want the link to go and the second URL with the image you want to use.

monkeyprince

Aug 18 2009, 04:01 AM

Sorry, lol, I'm new to CSS and DIVs and everything. I just did the slicing tutorial and everything and was wondering if there was any way to get the table code to appear where the top banner would?

lucasnotreally

Aug 18 2009, 08:14 AM

^ yes, once you get all the image urls in the slice table, copy the whole table (from the first table tag to the second one) and put it where your top image is.

if you used tjs tutorial i think the class is .topbanner

im pretty sure he goes over it in his slice tutorial though, but i could be wrong.

monkeyprince

Aug 18 2009, 04:06 PM

You mean between the divclass=topbanner? or what? Could I please get an example of what the code should look like?

innerdemon25

Aug 20 2009, 12:44 AM

This tutorial is very good on how to really get started with coding a band layout. But I am sorry to say, that by uploading images to webs.com just for hosting them without having a website open through them, is against the terms of service, and will delete your account without warning. They have done it to me before. Just something i think you should have included.

-Brandon L
-Revolutions Designs

lucasnotreally

Aug 20 2009, 10:41 AM

QUOTE(monkeyprince @ Aug 18 2009, 05:06 PM)

You mean between the divclass=topbanner? or what? Could I please get an example of what the code should look like?

it should look like this:

CODE

<div class="topbanner">
SLICES TABLE HERE
</div>

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.