Vista Glass

Designer's Comments

Look carefully for specific instructions

This one took me a while,
So I would greatly appreciate all feedback
I know it works in ff,
Haven't tested ie
It's incredibly customisable once you know what you're doing,
So all you developers can make it better for yourselves if you want,
But I'd still like some credit :)

Oh, and the ad does show up,
It's just because of the cb preview if it doesn't
So don't worry about being deleted ;)

BRIEF HOWTO
This layouts a little tricky,
Because I wasn't exactly trying to keep it userfriendly
And the html is a bit sloppy,
So bear with me :)

Just search for the XXXXXX
And replace it with your friendid
Search for Name, and well that's obvious
Change this text to your About Me
Search for IMAGEURL,
And replace it with the URL's of you're photo's
And find the music and change it to what you want
Blah blah blah, Use it now :)

Using This Layout

For specific instructions read designer's comments

This is a div overlay layout, html knowledge required!
1. Log into myspace.com
2. Click on Edit Profile (Profile 1.0)
3. Copy (ctrl c) and paste (ctrl v) code to the specified fields

Update Friend ID

Input Friend ID to automagically update code

Layout Code

Copy and paste to About Me

Help

<div style="border: 3px double white; overflow: hidden; visibility: visible; position: absolute; left: 50%; text-align: center; font-size: 10px; text-decoration: none; top: 100%; font-family: segoe ui,arial; margin-left: -550px; background-color: lightBlue; color: rgb(102, 102, 102); width: 294px; height: 210px; margin-top: -249px;"><br/><small>
<b><big><big>Vista Glass</big></big></b><br/>
<b><big>How To Use</big></b><br/>
This layouts a little tricky,<br/>
Because I wasn't exactly trying to be userfriendly<br/>
Also, the html is a bit sloppy,<br/>
So bear with me :)<br/><br/>

Just search for the XXXXXX<br/>
And replace it with your friendid<br/>
Search for Name, and well that's obvious<br/>
Change this text to your About Me<br/>
Search for IMAGEURL,<br/>
And replace it with the URL's of you're photo's<br/>
And find the music and change it to what you want<br/>
Blah blah blah, Use it now :)
</small></div>

<div style="border: 3px double white; overflow: hidden; visibility: visible; position: absolute; left: 50%; text-align: center; font-size: 10px; text-decoration: none; top: 100%; font-family: segoe ui,arial; margin-left: 250px; background-color: lightBlue; color: rgb(102, 102, 102); width: 304px; margin-top: -250px; height: 212px;"><br/><small>
My Favourite Artists<br/>
My Favourite Artists<br/>
My Favourite Artists<br/>
My Favourite Artists<br/>
My Favourite Artists<br/>
My Favourite Artists<br/>
My Favourite Artists<br/>
My Favourite Artists<br/>
My Favourite Artists<br/>
My Favourite Artists<br/>
My Favourite Artists<br/>
My Favourite Artists<br/>
My Favourite Artists<br/>
My Favourite Artists<br/>
My Favourite Artists<br/>
My Favourite Artists<br/>
</small></div>

Layout Code

Copy and paste to I'd Like to Meet

Help

<img src="http://cbimg9.com/layouts/08/05/27960aa.png" style="position: absolute; left: 0px; height: 30px; width: 100%; top: 100%; margin-top: -30px; visibility: visible;" class="taskbar" id="taskbar"/>
<a style="overflow: hidden; visibility: visible; position: absolute; left: 50%; width: 300px; margin-left: -550px; text-align: center; font-size: 10px; text-decoration: none; font-family: Times New Roman; top: 100%; height: 250px; margin-top: -250px;" href="http://marcusboom.createblog.com/" linkindex="376" set="yes" class="pics">
<br style="margin-top: 190px;"/>
<img style="border: 0px none ; position: absolute; top: 100%; left: 0px; height: 30px; width: 100%; visibility: visible; margin-top: -30px;" src="http://cbimg9.com/layouts/08/05/27960aa.png"/>
<img style="border: 0px none ; height: 30px; position: absolute; left: 65px; top: 100%; margin-top: -30px;" src="http://img131.imageshack.us/img131/5879/selectleftix8.png"/>
<img src="http://cbimg9.com/layouts/08/05/27960ab.png" style="border: 0px none ; position: absolute; top: 100%; margin-top: -30px; width: 150px; height: 30px; left: 75px;"/>
<img style="border: 0px none ; height: 30px; position: absolute; left: 225px; top: 100%; margin-top: -30px;" src="http://img68.imageshack.us/img68/641/selectrightou3.png"/>
<p style="position: absolute; color: white; top: 100%; text-decoration: none; font-family: Segoe UI,Arial; text-align: center; left: 50%; font-size: 14px; margin-top: -25px; margin-left: -27px;">About Me </p>
<img class="wmpb" style="border: 0px none ; position: absolute; left: 0pt; margin-top: -234px;" src="http://img66.imageshack.us/img66/1919/wmpleftim2.png"/>
</a>
<a style="overflow: hidden; visibility: visible; position: absolute; left: 50%; width: 500px; margin-left: -250px; text-align: center; font-size: 10px; text-decoration: none; font-family: Times New Roman; top: 100%; height: 250px; margin-top: -250px;" href="http://marcusboom.createblog.com/" linkindex="376" set="yes" class="pics">
<br style="margin-top: 190px;"/>
<img style="border: 0px none ; position: absolute; top: 100%; left: 0px; height: 30px; width: 100%; visibility: visible; margin-top: -30px;" src="http://cbimg9.com/layouts/08/05/27960aa.png"/>
<img style="border: 0px none ; height: 30px; position: absolute; left: 165px; top: 100%; margin-top: -30px;" src="http://img131.imageshack.us/img131/5879/selectleftix8.png"/>
<img src="http://cbimg9.com/layouts/08/05/27960ab.png" style="border: 0px none ; position: absolute; top: 100%; margin-top: -30px; width: 150px; height: 30px; left: 175px;"/>
<img style="border: 0px none ; height: 30px; position: absolute; left: 325px; top: 100%; margin-top: -30px;" src="http://img68.imageshack.us/img68/641/selectrightou3.png"/>
<p style="position: absolute; color: white; top: 100%; text-decoration: none; font-family: Segoe UI,Arial; text-align: center; left: 50%; font-size: 14px; margin-top: -25px; margin-left: -20px;">Photos </p>
<img class="wmpb" style="border: 0px none ; position: absolute; left: 0px; margin-top: -234px;" src="http://img66.imageshack.us/img66/3615/wmpmidys3.png"/>
</a>
<a class="pics" set="yes" linkindex="376" href="http://marcusboom.createblog.com/" style="overflow: hidden; visibility: visible; position: absolute; left: 50%; margin-left: 250px; text-align: center; font-size: 10px; text-decoration: none; font-family: Times New Roman; top: 100%; margin-top: -250px; height: 250px; width: 310px;">
<br style="margin-top: 190px;"/>
<img src="http://cbimg9.com/layouts/08/05/27960aa.png" style="border: 0px none ; position: absolute; top: 100%; left: 0px; height: 30px; width: 100%; margin-top: -30px; visibility: visible;"/>
<img style="border: 0px none ; height: 30px; position: absolute; left: 65px; top: 100%; margin-top: -30px;" src="http://img131.imageshack.us/img131/5879/selectleftix8.png"/>
<img src="http://cbimg9.com/layouts/08/05/27960ab.png" style="border: 0px none ; position: absolute; top: 100%; margin-top: -30px; width: 150px; height: 30px; left: 75px;"/>
<img style="border: 0px none ; height: 30px; position: absolute; left: 225px; top: 100%; margin-top: -30px;" src="http://img68.imageshack.us/img68/641/selectrightou3.png"/>
<p style="position: absolute; color: white; top: 100%; text-decoration: none; font-family: Segoe UI,Arial; text-align: center; left: 50%; font-size: 14px; margin-top: -25px; margin-left: -25px;">Music </p>
<img class="wmpb" style="border: 0px none ; position: absolute; left: 0px; margin-top: -233px;" src="http://img103.imageshack.us/img103/1180/wmprightzk4.png"/></a>
<img style="position: absolute; visibility: visible; left: 50%; width: 1114px; top: 100%; margin-left: -551px; margin-top: -712px;" src="http://img103.imageshack.us/img103/3135/wmptopri1.png"/>
<img src="http://cbimg9.com/layouts/08/05/27960ac.png" style="position: absolute; visibility: visible; top: 100%; margin-top: -35px; left: 10px;"/>
<div style="visibility: visible; position: absolute; left: 50%; font-family: Arial; width: 800px; margin-left: -400px; text-align: center; height: 200px; background-color: transparent; margin-top: 200px;"><a set="yes" style="font-size: 100px; text-decoration: none; font-family: Times New Roman; background-color: transparent;" href="http://marcusboom.createblog.com/" linkindex="355">Name</a><br/>
<form method="post" action="http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value=""/>
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value=""/>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value=""/>
<textarea style="border: 1px solid grey; text-align: center; background-color: rgb(34, 34, 34); color: white;" name="ctl00$cpMain$UserWriteCommentsControl$commentTextBox">Hello there,</textarea><br/>
<input type="submit" name="ctl00$cpMain$UserWriteCommentsControl$postcommentImageButton" value="Comment" style="text-align: center;"/>
</form></div>
<style type="text/css">
html body div table tbody tr td {
position:absolute;
top:180px;
}
.latestblogentry, .navigationBar, .extendednetwork, .friendspace, .friendsComments, .userProfileDetail, .userProfileSchool, .interestsAndDetails, .contactTable, .userProfileURL, table tbody tr td div font, table tbody tr td div div, .orangetext15, .profileinfo {
display:none;
}
img.pic {
border:1px solid dodgerblue;
}
img.wmpb:hover {
opacity:0;
}
embed, object {
height:0pt;
left:0pt;
position:absolute;
top:0pt;
width:0pt;
}
td, body {
background-color:white;
}
.text {
visibility:hidden;
}
a:link, a:visited {
background-color:transparent;
color:dodgerblue;
}
a.pics:hover {
background:transparent none repeat scroll 0%;
color:dodgerblue;
}
a:hover {
color:lightblue;
}
a:active {
color:dodgerBlue;
}
textarea:focus {
color:dodgerblue;
}
</style>

Layout Comments

Showing latest 10 of 13 comments

this is in firefox 3.0

By DeMoN100 on Sep 26, 2008 8:27 am

Its ok but it pushes the navigation to the right which makes you scroll over so it kind of makes the layout out of place & the backround dont load either since it wont show it so it kinda failed

By DeMoN100 on Sep 26, 2008 8:26 am

this layout looks so good but im using IE so its messed up but the screenshot looks pretty amazing! also from comments, i wish i could see what the pop up sections looked like =(

By funky_hippo on Jun 4, 2008 8:50 am

this layout works about as well as VISTA does. . .
Great job!

By bandgeek2011 on Jun 2, 2008 11:49 pm

It works perfect in FF 1280x800... not IE though. Yeah, the pop up sections are neat. :)

By dreamgurl36 on Jun 2, 2008 5:46 am

It is a definitely a challenge and it will need some tweaking on the part of whomever dares to try to use it....very interesting...Hit me up when you do more....

By jaynickdee on Jun 1, 2008 1:35 pm

I am gonna try this later. I just go thru reading everyone's comments and I honestly like to give stuff a try for myself because sometimes people dont put things in croeectly or play with it for a while and figure out what works.....I will give you feedback if it doesn't work or does work for me.....but I will definitely not criticize cuz I am still learnign myself....I can't wait to try it...the live preview looks very interesting....MUCH RESPECT

By jaynickdee on Jun 1, 2008 12:57 pm

I think you had a good idea, it just didn't come through.

By gamecockgirl85 on Jun 1, 2008 9:21 am

The pop up sections in it are really neat, but that's it. You should redo it though, and then resubmit. I make skins for SkinStudio on WindowBlinds 6 for Vista, and XP... what you could do is get into designing those, and make your own skin, submit it, then from the images you made the skin with, use to make a div overlay for MySpace with the pop up rollover navigation, add some clicking sounds for it, but not annoying ones, and maybe some animation, and wham, there you go. :)

By CreativeArticulate on Jun 1, 2008 6:52 am

yep, its messed up....

By PiNK-RAGe on May 31, 2008 8:36 am

View all »

Layout Details

Designer	MarcusBOOM
Submitted on	May 30, 2008
Page views	29,877
Favorites	74
Comments	13
Reviewer	highwayto4355
Approved on	May 30, 2008

Vista Glass

Designer's Comments

Using This Layout

Update Friend ID

Layout Code

Layout Code

Layout Comments

Layout Details

Layout Colors

Layout Tags

Layout Tools

Layout Affiliates