Log In · Register

 

Help Topic Rules and Requirements


For a list of all requirements and guidelines pertaining to posting a new Help topic, please click here.

This Month's Contests | Hosts Looking for Hostees | Hostees looking for Hosts | Big Book of Resources

Submission Guidelines

Making a Band Layout, Version 2
YDG
post Jul 20 2009, 09:20 PM
Post #1


Senior Member
*******

Group: Staff Alumni
Posts: 7,063
Joined: Jul 2008
Member No: 670,288



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
 
 
Start new topic
Replies
YDG
post Aug 16 2009, 11:18 AM
Post #2


Senior Member
*******

Group: Staff Alumni
Posts: 7,063
Joined: Jul 2008
Member No: 670,288



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.
 

Posts in this topic
A1Bassline   Making a Band Layout   Jul 20 2009, 09:20 PM
A1Bassline   Getting Started Here is a list of things you migh...   Jul 20 2009, 10:05 PM
A1Bassline   Changing the Look & Feel Once you're all ...   Jul 20 2009, 10:25 PM
A1Bassline   Adding a Top Banner If you want to add a top bann...   Jul 20 2009, 10:56 PM
dimmu1   QUOTE(A1Bassline @ Jul 21 2009, 05:56 AM)...   Aug 16 2009, 04:18 PM
A1Bassline   Slicing Images This is an optional part of the tu...   Jul 20 2009, 11:04 PM
A1Bassline   Working With Rollover Images This, as well is an ...   Jul 20 2009, 11:23 PM
A1Bassline   Creating a Custom Left Side If everything thus fa...   Jul 20 2009, 11:41 PM
A1Bassline   Adding Headers There isn't really much of an ...   Jul 21 2009, 12:00 AM
A1Bassline   Moving Blogs to the Left Side This has become qui...   Jul 21 2009, 12:08 AM
A1Bassline   Adding a Shows Header If you got the top banner c...   Jul 21 2009, 12:19 AM
A1Bassline   Finishing Up This brings you to the end of my ban...   Jul 21 2009, 12:25 AM
A1Bassline   Frequently Asked Questions Q: My left side overla...   Jul 21 2009, 12:31 AM
JaredxSmith   Perfect. :)   Jul 22 2009, 01:07 PM
sethisamazing   sweeeeeeeet. Pictures would be a nice addition t...   Jul 29 2009, 01:20 PM
A1Bassline   Screenshots are coming soon.   Jul 29 2009, 02:19 PM
ZeT0   Haha, I'm going to need the screenshots to und...   Jul 30 2009, 10:36 AM
A1Bassline   They're really not that complicated you have t...   Jul 30 2009, 10:40 AM
bberinger13   Ok so I've been working on this top header i h...   Jul 31 2009, 10:29 PM
dollywood   Hi The band tutorial is great and im almost done ...   Aug 3 2009, 05:49 AM
augiedesign   this tutorial is a great help, but i need a little...   Aug 3 2009, 07:16 PM
jigokume   yoo can someone tell me how to make the view all f...   Aug 4 2009, 11:32 AM
jigokume   oww there's a way of doing that on the tutoria...   Aug 4 2009, 01:29 PM
Mike   Posts merged.   Aug 5 2009, 03:59 PM
SwaggLookinGood   is for a DIV or a regular layout?????   Aug 11 2009, 06:14 PM
SwaggLookinGood   it says i should hide anything....but if i want to...   Aug 11 2009, 07:48 PM
Mike   Since you're limited with which elements you c...   Aug 11 2009, 07:53 PM
SwaggLookinGood   like how? make a big templete and just cover it up...   Aug 11 2009, 08:06 PM
thesnowpirate   anyone have a completed band page done? and a cop...   Aug 13 2009, 05:33 PM
A1Bassline   Posts Merged.   Aug 13 2009, 07:58 PM
fromshiptoshore   hey mike, tj told me to comment on here and you co...   Aug 14 2009, 12:32 AM
Mike   Thanks for that, Thesnowpirate. Keep it up. Fromsh...   Aug 14 2009, 05:46 AM
SwaggLookinGood   1. whats a good, document size for the layout? 2....   Aug 14 2009, 01:26 PM
Mike   Those are all subjective. It's up to you how y...   Aug 14 2009, 01:38 PM
SwaggLookinGood   i have been looking around, i wanna start making i...   Aug 14 2009, 01:50 PM
Mike   How can you be stuck? You're making the design...   Aug 14 2009, 01:58 PM
thesnowpirate   i kind of been making my own, and after testing a ...   Aug 14 2009, 04:51 PM
SwaggLookinGood   whats the width and height of the music player?   Aug 15 2009, 10:04 PM
monkeyprince   Er...I'm having a bit of trouble on the custom...   Aug 16 2009, 03:53 AM
A1Bassline   QUOTE(thesnowpirate @ Aug 14 2009, 05:51 ...   Aug 16 2009, 11:18 AM
monkeyprince   Okay, again with the custom left side...is there a...   Aug 16 2009, 04:49 PM
Mike   QUOTE(monkeyprince @ Aug 16 2009, 10:49 P...   Aug 17 2009, 06:10 AM
A1Bassline   QUOTE(dimmu1 @ Aug 16 2009, 05:18 PM) tut...   Aug 16 2009, 09:06 PM
monkeyprince   Sorry, lol, I'm new to CSS and DIVs and everyt...   Aug 18 2009, 04:01 AM
lucasnotreally   ^ yes, once you get all the image urls in the slic...   Aug 18 2009, 08:14 AM
monkeyprince   You mean between the divclass=topbanner? or what? ...   Aug 18 2009, 04:06 PM
lucasnotreally   QUOTE(monkeyprince @ Aug 18 2009, 05:06 P...   Aug 20 2009, 10:41 AM
monkeyprince   QUOTE(lucasnotreally @ Aug 20 2009, 10:41...   Aug 22 2009, 05:04 PM
innerdemon25   This tutorial is very good on how to really get st...   Aug 20 2009, 12:44 AM
A1Bassline   QUOTE(innerdemon25 @ Aug 20 2009, 01:44 A...   Aug 20 2009, 03:42 PM
thesnowpirate   whats the best way for positioning the player?   Aug 23 2009, 11:33 AM
Mike   Try using my code.   Aug 23 2009, 12:09 PM
thesnowpirate   QUOTE(Mike @ Aug 23 2009, 01:09 PM) Try u...   Aug 23 2009, 01:28 PM
Mike   That won't work because each comment has an in...   Aug 23 2009, 01:34 PM
thesnowpirate   im actually testing it in: Firefox Version: 3.52 ...   Aug 23 2009, 02:03 PM
Mike   Unfortunately, that's not possible. Do you min...   Aug 23 2009, 04:51 PM
thesnowpirate   http://www.myspace.com/thesnowpirates im just pra...   Aug 23 2009, 07:00 PM
Mike   Try replacing the codes you posted with this: COD...   Aug 24 2009, 06:56 AM
thesnowpirate   QUOTE(Mike @ Aug 24 2009, 07:56 AM) Try r...   Aug 24 2009, 11:54 AM
Mike   On this bit here: CODEobject object, td td td obj...   Aug 24 2009, 11:55 AM
YoakeYukai   this is awesome!!   Aug 28 2009, 05:14 PM
GEDDON666   I'm trying to add a banner under the nav with ...   Sep 3 2009, 10:52 AM
A1Bassline   http://www.createblog.com/forums/index.php...t...   Sep 3 2009, 11:16 AM
ZeT0   Would love if rollover screen shots were working. ...   Sep 6 2009, 09:44 AM
mekko   Hello, How can i hide the Navbar TOP ARTIST/SHOWS/...   Sep 15 2009, 07:08 PM
Deammer   Amazing tutorial A1Bassline, you just earned my et...   Sep 19 2009, 03:40 PM
Mike   Try adding this to your codes: CODE<style...   Sep 19 2009, 03:43 PM
Deammer   I basically changed all the colors in the codes co...   Sep 19 2009, 03:54 PM
Mike   No problem. Good job with the page by the way.   Sep 19 2009, 04:02 PM
svdis   So...I think like last week there was a link right...   Sep 21 2009, 12:30 PM
Mike   That link was removed yesterday. If you want to hi...   Sep 21 2009, 12:51 PM
audioasylum   This has been by far the best help anywhere on the...   Sep 29 2009, 12:03 AM
fixtatik   A few things I feel should be updated (just sugges...   Sep 29 2009, 01:06 PM
hiddenflaw   Hey guys, I'm having some trouble with my layo...   Oct 1 2009, 02:46 PM
ZeT0   ^ Post your code so people can try and help you ou...   Oct 1 2009, 09:03 PM
hiddenflaw   Okay, so here's all of my code. It's prob...   Oct 2 2009, 05:58 AM
bullets   Hi, i'm just trying to put a simple background...   Oct 4 2009, 02:58 PM
erics0n   Wow this is wonderful.   Oct 9 2009, 09:24 PM
chadrockman   Does any of this code disable the calender from sh...   Oct 12 2009, 11:50 AM
Mike   Are you talking about the Upcoming Shows table?   Oct 12 2009, 12:45 PM
chadrockman   QUOTE(Mike @ Oct 12 2009, 12:45 PM) Are y...   Oct 12 2009, 02:59 PM
Mike   Have you tried pushing down everything below the n...   Oct 12 2009, 02:59 PM
chadrockman   QUOTE(Mike @ Oct 12 2009, 02:59 PM) Have ...   Oct 12 2009, 03:13 PM
Mike   Have you even posted any shows yet?   Oct 12 2009, 03:20 PM
chadrockman   QUOTE(Mike @ Oct 12 2009, 03:20 PM) Have ...   Oct 12 2009, 03:22 PM
Mike   Well those dates aren't showing up for some re...   Oct 12 2009, 03:29 PM
chadrockman   QUOTE(Mike @ Oct 12 2009, 03:29 PM) Well ...   Oct 12 2009, 03:45 PM
Mike   No problem.   Oct 12 2009, 03:54 PM
hiddenflaw   Hey guys, in IE my code apparently makes the littl...   Oct 12 2009, 09:39 PM
TonyRoots   Hey everyone :) Just wanna say, excellent tutoria...   Oct 13 2009, 11:05 AM
Mike   QUOTE(hiddenflaw @ Oct 13 2009, 03:39 AM)...   Oct 13 2009, 12:11 PM
TonyRoots   thanks a lot :) its hard work working out all the ...   Oct 13 2009, 12:50 PM
Mike   Use the second code on this post to put up a heade...   Oct 13 2009, 12:54 PM
hiddenflaw   Hey Mike, here's the rest of my code. CODE...   Oct 13 2009, 02:35 PM
Mike   Find this line in your codes: CODEobject {positio...   Oct 13 2009, 02:42 PM
hiddenflaw   Thanks Mike, it totally did. I am having a little...   Oct 13 2009, 03:19 PM
norm311   Mike, I've noticed you've been able to so...   Oct 14 2009, 11:27 PM
Mike   Look for this line: CODE.tg_left {position:ab...   Oct 15 2009, 07:15 AM
norm311   Works perfectly. Thanks so much, really appreciat...   Oct 15 2009, 09:10 AM
teamteamspirit   Could anyone help me with this? I'd greatly ap...   Oct 22 2009, 05:53 PM
2 Pages V   1 2 >


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: