Series 2 – Street

Author: Alexander Agnarson

Submitted: 6th September 2008

Category: Grunge, Light, Music

Views: 48,611

Author Comments

The forth design of the new myspace series. It will require some code replacement if you want your own images on the spots. Same for the Add to friends and Send Message buttons.

THE CODE

Copy the code & paste it in the “I’d Like to Meet: box“.

I’ve made even more tweaks and fixes to this code, so the boxes should be perfectly aligned in both Internet Explorer and Firefox, if you don’t stretch them out and mess them up (;

<a class="msg" href="http://yourmessagelinkgoeshere.com" title="Send Message"><span>Send Message</span></a>
<a class="friend" href="http://yourfriendlinkgoeshere.com" title="Add to friends"><span>Add to friends</span></a>

<a class="credit" href="http://designmyspace.org" title="Design by Alx"><span>Credit</span></a>

<div class="id2"><span class="color">08.</span>Your MySpace Title</div>
<div class="id3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer adipiscing mollis augue. Pellentesque erat lectus, cursus sit amet, volutpat a, porta nec, dui. Ut ante orci, rutrum id, commodo vitae, rutrum ac, sem. Donec leo lacus, semper non, vulputate eu, gravida ut, turpis. Donec justo nisl, imperdiet et, suscipit id, ultrices a, turpis. Cras volutpat aliquam tellus. Pellentesque pede nulla.</div>  
<div class="id4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit usiun.</div> 
<div class="id5">Photo Description here!</div> 
</div>

.masthead {width: 900px; height: 492px; position: absolute; margin-left: -450px; left: 50%; top: 169px; background-color:transparent; background-image: url(http://i41.tinypic.com/4ugd9y.jpg);}
body table {margin-top:510px;}
masthead .id1 {
	width: 432px;
	position: absolute;
	left: 440px;
	top: 396px;
	height: 81px;
	color:747474;
	padding: 0px;
	font-size: 11px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	overflow: hidden;
}
.masthead .id2 {
	width: 374px;
	position: absolute;
	left: 119px;
	top: 122px;
	height: 40px;
	color:ffffff;
	padding: 0px;
	font-size: 30px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	font-weight: bold;
	letter-spacing: -1px;
	overflow: hidden;
}
.masthead .id2 .color{
	color:222222;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
}
.masthead .id3 {
	width: 648px;
	position: absolute;
	left: 192px;
	top: 368px;
	height: 66px;
	color:666666;
	padding: 0px;
	font-size:12px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	overflow: hidden;
}
.masthead .id4 {
	width: 374px;
	position: absolute;
	left: 119px;
	top: 161px;
	color:CCCCCC;
	padding: 0px;
	font-size:12px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	overflow: hidden;
}
.masthead .id5 {
	width: 305px;

position: absolute;
	left: 528px;
	top: 267px;
	color:505050;
	padding: 0px;
	font-size:12px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	overflow: hidden;
}
.masthead .img1 {

width:315px;
	height: 210px;
	display:block;
	position: absolute;
	left: 518px;
	top: 42px;
	overflow: hidden;
}
.masthead .img2 {
	width:110px;
	height: 102px;
	display:block;
	position: absolute;
	left: 54px;
	top: 346px;
	overflow: hidden;
}
.masthead .credit {
	width: 86px;
	height: 14px;
	position: absolute;
	left: 758px;
	top: 12px;
	display: block;
	cursor: pointer;
}
.masthead .credit span {display: none;}

a img.noborder {border: 0;}
img.border {border-style:solid; border-width:3px; border-color:92908b; }
a img.border {border-style:solid; border-width:3px; border-color:92908b; }
a:hover img.border, a img.border:hover {border-style:solid; border-width:3px; border-color:c7c4bc;}

.masthead .friend {
  position: absolute;
  left: 39px;
  top: 287px;
  display: block;
  width: 100px;
  height: 25px;
  background-image: url(http://i41.tinypic.com/1z4lijm.jpg); background-repeat: no-repeat; background-position: 0 0;
}
.masthead .friend:hover {background-position: 0 -25px;}
.masthead .friend span {display: none;}

.masthead .msg {
  position: absolute;
  left: 148px;
  top: 287px;
  display: block;
  width: 100px;
  height: 25px;
  background-image: url(http://i42.tinypic.com/zog8av.jpg); background-repeat: no-repeat; background-position: 0 0;
}
.masthead .msg:hover {background-position: 0 -25px;}
.masthead .msg span {display: none;}

body {font-size: 11px; line-height: auto;background-color:ffffff; font-family: Arial, Verdana, Trebuchet MS, sans-serif; background-repeat: repeat-x; background-position: top center; background-image: url(http://i41.tinypic.com/2a95hdl.jpg);}
p {margin: 0px 0px 1em 0px; font-family: font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a, a:link, a:visited {color:504c44; text-decoration: none; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a:hover {color:726e64; text-decoration: none}
img {border: none; max-width: 425px !important;}
br {line-height: 20px;}
form {border-width:0px;background-color:none;}
body>div {margin-left: 10px;}
table, tr, td, table table, table table td {border-width:0px; background-color: transparent;}
table table table td {background-color:transparent;margin:0px;padding: 0 26px 15px 26px}
table table table table {border-width:0px;background-color:transparent;padding:0px;margin:0px; background-image: none;}
table table table table td {padding:0px;margin:0px;}
table table table {margin:0px; background-color:e5e2db; width: 100% !important; border-bottom: 3px; border-style:solid; border-color:c2beb5; background-repeat: no-repeat; background-position: top right; background-image: url(http://i44.tinypic.com/2czbj2s.jpg);}
body td table, body div table {margin-top: 0;}
font {color:726d60;font-size:10px; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
a font:hover {color:504c44}
a.navbar:link, a.navbar:visited {color:504c44}
a.navbar:hover {color:726e64}
table tr td table tr td font {display: inline;}
table tr td table a.navbar {font-size: 10px;}
.text {color:726d60;font-size:11px; font-family: Verdana, Arial, Trebuchet MS, sans-serif;}
a.text:link, a.text:visited {color:504c44}
a.text:hover {color:726e64}
.nametext {color:ba2829; font-size: 16px; margin: 14px 0px 4px 0px; padding: 0px 0px 3px 0px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 3px 0px; border-style: double; border-color: c9c7c1; width: 280px !important; vertical-align: bottom;}
NOTE {If you want to use an image for your name, use the following code}
.nametextREMOVE {background-image: url(http://www.alxdesigns.com/images/myspace_name.gif); background-position: bottom center; background-repeat: no-repeat; overflow: hidden; height: 40px; width: 100%; font-size: 1px; text-align: left; color: 38332f; padding: 0px 0px 3px 0px; display: block; margin: 14px 0px 8px 0px; border-width: 0px 0px 3px 0px; border-style: double; border-color: c9c7c1;}
.contactTable {width: 332px !important;}
.contactTable td {padding: 0px; margin: 0px; text-align: center;}
.contactTable span.whitetext12 {position: relative; left: 24px;}
.contactTable td table {background-color: transparent; background-image: url(http://i42.tinypic.com/90cznr.jpg); background-position: center; background-repeat: no-repeat;}
.contactTable a {padding: 0px; margin: 0px 0px 1px 5px; display: block; height: 30px; width: 156px; background-color: transparent;}
.contactTable a img, .contactTable img {border: 0px; display: none; visibility: hidden;}
table tr td table tr td table tr td div strong {display: block; width: 280px; font-family: Arial, Verdana, Trebuchet MS, sans-serif;}
.whitetext12 {color:ba2829; font-size: 12px; margin: 0px 0px 4px 0px; padding: 5px 0px 7px 0px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 3px 0px; border-style: double; border-color: c9c7c1; width: 280px}
.blacktext12 {color:ba2829;font-size: 12px; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; display: block; margin-top: 14px; width: 100%;}
.contactTable span.whitetext12 {position: relative; left: 24px;}
.btext {color:ba2829; font-size: 12px; margin: 14px 0px 4px 0px; padding: 0 14px 14px 14px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 3px 0px; border-style: double; border-color: c9c7c1; width:370;}
.orangetext15 {color:ba2829; font-size: 12px; margin: 14px 0px 4px 0px; padding: 0 14px 14px 14px; text-align: center; display: block; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-weight: bold; border-width: 0px 0px 3px 0px; border-style: double; border-color: c9c7c1; width:370px;}
.lightbluetext8 {color:666666;}
.redtext,.redbtext {color:ba2829; font-family: Arial, Verdana, Trebuchet MS, sans-serif; font-size: 12px; font-weight: bold;}
a.redlink:link {color:504c44; padding-top: 3px;}
a.redlink:visited {color:504c44}
a.redlink:hover {color:726e64}
u {text-decoration: none; font-size: 10px;}
a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited { color:726d60; }
a.searchlinkSmall:hover { color:fefefe; }
td, table, tr, span, li, p, div, textarea, DIV {color:726d60;} 
h1, h2, h3, h4, h5, h6 {color:ba2829;} 
.blacktext10 {color:ba2829 !important; font-size: 11px!important;}
.searchlinksmall a{color:ba2829 !important;}
.searchlinksmall a:hover{color:ba2829 !important; text-decoration: underline !important;}
.userProfileURL {font-size: 9px!important;}
</style>

There are a few things you will need to replace. First, the images. If you want to add your own images, just cut them in the right size in Photoshop and replace the current ones. Use http://tinypic.com to upload the images to a server. Then copy the direct link and replace the current image links.

Where do I find the images in the code?

It’s about the first thing you see in the code.

As you can see, I’ve already added the height and width values, so if you want your images to look great, make sure they are 104×96px and 315×210px.

Insert the links for your buttons

In order to make the Add to friend and Send message work, you need to find this:

Then, to find your unique links, right click on the Add To Friends link in the left side block, and chose “copy link adress”. Now you will have your link. Just paste it where it’s supposed to be. Then do the same thing for Send Message.

…or remove the buttons

If you feel like the buttons are just annoying, simply remove them deleting this code:

Oh, and if you want me to continue to make myspace themes, please let the credits link stay as it is. It will hopefully give some more hits.

COMMENTS

eddieHILLS said,

September 6, 2008
4:20 pm

Umm, what’s the difference between this one and Darkstar?
eddieHILLS said,

September 6, 2008
4:20 pm

Ooops, Sorry. Was looking at the wrong preview images :P
Alexander "Alx" Agnarson said,

September 6, 2008
4:21 pm

You checked the minute I posted it. Updated thumbnail now (;
John said,

September 7, 2008
3:40 am

This couldn’t be better- thank you!
P-One said,

September 10, 2008
8:00 pm

Can I use this one for music myspace as well?
Alx said,

September 10, 2008
8:03 pm

Try it, I haven’t got a music profile so I can’t test it. Please post a link to the page if its messed up so I can fix it for you.
Korhan said,

September 12, 2008
1:35 pm

Very nice layout Alx, keep them coming :)
P-One said,

September 15, 2008
4:20 am

I try to use it on my music myspace, but when I choose the preview mode the submit button do not work :(
Alx said,

September 15, 2008
5:45 am

Hm, I need to register a music myspace and test it.
Steve said,

September 18, 2008
5:06 pm

Hi, is there anyway in this code to remove the “about me” and “blog” section completely?

Thanks!
loui said,

September 18, 2008
8:54 pm

are this site for make wep sites ? free or buy and where ?? it not work for me
plz answer me on loui-guildberg@live.dk Thanks alx
loui said,

September 18, 2008
8:54 pm

Web sites sorry
luis said,

September 20, 2008
10:04 pm

is there neway i can take out the pik tht is under the button??
Alx said,

September 20, 2008
10:57 pm

Yes. Remove the following code:

<a class="img2" href="#" rel="nofollow"><img class="border" src="http://i35.tinypic.com/10wtyqe.jpg" width="104px" height="96px" /></a>
John said,

October 8, 2008
7:26 am

i saw the code you posted that i would have to remove to get rid of the picture under the buttons. but, is there a way to remove that whole box that the picture and text are in?
Alexander (Alx) said,

October 8, 2008
1:32 pm

I’m afraid not, it’s part of the whole background image, so you have to edit the image background for the masthead class to fix it :(
Rudy Cross said,

October 8, 2008
10:49 pm

For music profiles, do not use the preview. Just copy the code, sign into your account, go to edit in Safe Mode, and then paste the code into Bio, then save changes, and then click on View Profile link at the top. Then you’re set. Everything should work fine.
altfilms said,

October 9, 2008
10:19 am

Hello,
I absolutely love this design but was wondering how to get rid of the online and new friends tabs. Thanks a lot and keep up the awesome work!
Alexander (Alx) said,

October 10, 2008
11:29 pm

Check out the Help area, you might find your answer there!
erika said,

October 11, 2008
1:29 am

just wondering if it was possible to add another button like the add friend…i just copied the code and changed it to comments instead but it didn’t work… help please! :)
ken seavert said,

November 23, 2008
10:41 pm

when I edit my profile theme by adding my own photo i get a message that says terms of service violation, whats up?
JR said,

December 8, 2008
3:00 am

Hey. This layout is awesome, but I wanted to make a piece of text in my About Me bigger. What code should I take out?
PGS said,

December 31, 2008
11:05 am

I LOVE IT! YOU EXPLAINED EVERYTHING PERFECTLY EVEN I WAS ABLE TO DO IT! THANKS SO MUCH!
Qais said,

January 9, 2009
5:16 am

Hey can someone make me like this layout i will send u a couple of pictures i cant cut them in right shape

Please help me out for those genius that can make it.

Qais_habibi28@hotmail.com

atm this is my myspace http://www.myspace.com/qais28

PLEASE EMAIL ME!
churchsox90 said,

February 16, 2009
2:42 am

Ok uhm..i’m new here to this, so how do i add your my own images and replace the current ones???
Jason said,

March 4, 2009
3:23 pm

You most likely know this, but most tinypic images you have used have been deleted on quite a few layouts
Sean Cleary said,

March 5, 2009
11:05 pm

Hi, I was using a profile but due to the tinypic deal it was wrecked & i’ve switched to this urban one which looked even better until today parts of the background can’t be seen and are just leaving grey patches leaving the page looking shabby, how can i fix this??
josh said,

March 8, 2009
8:27 pm

Is there a reason why the background and all the little images on this now say “TINYPIC THIS IMAGE HAS BEEN MOVED OR DELETED” Now it looks TERRIBLE
dj_hozer said,

March 9, 2009
2:25 am

First of all thank you for the wicked layouts! Nice designing. I’m having a problem with the one of your layouts. I tried utilizing your code and and manipulated it by just adding a background but the design only shows up on half of the page when I scroll down and othe other other half is shaded gray. I was wondering if you could tell me what code I can use to add my design to the other half. The design I tried to manipulate is on my wifes go-go page! You can click the link below to view her page!

Respectfully,
JL

http://www.myspace.com/sexxyyvie
dj_hozer said,

March 10, 2009
5:26 am

Could anyone help me please? All I would like to know is how to add a picture instead of just a plain color (101010) gray for the second half of the darkstar profile. As you know the top half has a design. I would like to know what coding can I add in order to execute this!

Respectfully,
dj hozer
Scott said,

March 31, 2009
6:03 am

This doesn’t work anymore, the background images have been moved or deleted.
Can this be fixed please :)
Mason said,

May 4, 2009
4:45 pm

Hi there I have slightly modified one of your overlays and it is great but I can not for the life of me figure out how to remove the ‘about me’ section and the ‘myspace url’ section……is it because I have a myspace music page? thanks
Richard said,

May 24, 2009
3:57 pm

Thank you so much for making such cracking myspace page layouts! I’ve just implemented it into my profile – a Myspace Music one – and it looks great! I’ve been looking for a really good professional one (for free) for ages, and you have solved my problem with ease! Thank you so much! Check it out here:

http://www.myspace.com/mrrichardmatthews

Thank you again!
Ceelos said,

May 26, 2009
4:19 am

I’m having some trouble with editing the “add to friends” and “message” links…Not sure how what to replace these links with in order to get them working correctly.

Also, how can the pics be replaced w/o having to use tinypics.com, can photobucket be used instead?

Is their anyone super proficient in html coding that can assist me editing my page? Much appreciated!

ccordova60630@yahoo.com
søren said,

June 23, 2009
1:01 pm

Thanks man, amazing :)
Chris Parry said,

July 28, 2009
11:00 am

Thanks so much for the layout
Lidu Al said,

August 16, 2009
2:55 pm

HOT LAYOUT.
question: how can i get rid of the pic under the add and message button and put one of my own there?
Sansür said,

November 30, 2009
2:49 pm

Güzel temalar Thanks!!
abe said,

December 9, 2009
6:12 pm

Great layouts but i’ve pasted the code in the “about me section” and there was no change to the layout in myspace.What have i done wrong?
RomyxXx said,

December 16, 2009
2:13 pm

yea
austin said,

March 8, 2010
3:13 am

Its perfect! Except i have one problem, how do i get rid of that giant space between the profile and the bio thingy? Go look at “Myspace.com/propstv”

Copy the code & paste it in the “I’d Like to Meet: box“.

I’ve made even more tweaks and fixes to this code, so the boxes should be perfectly aligned in both Internet Explorer and Firefox, if you don’t stretch them out and mess them up (;

<a class="credit" href="http://designmyspace.org" title="Design by Alx"><span>Credit</span></a>

position: absolute;
	left: 528px;
	top: 267px;
	color:505050;
	padding: 0px;
	font-size:12px;
	font-family: Arial, Verdana, Trebuchet MS, sans-serif;
	overflow: hidden;
}
.masthead .img1 {