Making a Band Layout, Version 2 |
Making a Band Layout, Version 2 |
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:
|
|
|
Jul 21 2009, 12:00 AM
Post
#2
|
|
Senior Member Group: Staff Alumni Posts: 7,063 Joined: Jul 2008 Member No: 670,288 |
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;} |
|
|