Boney Horizon

Designer's Comments

Look carefully for specific instructions

This is a Horizontal layout.

Basic knowledge of CSS and HTML are needed to use all of this layout's features.

Replace, "FRIENDID" and, "USERID" with your own and replace, "LINK" with the link to your pics.

Extra credits
- Fixtatik's tutorial on hiding default coding & fixing ad -
http://www.fixtatik.com/tutorials/myspace/regular-div-layout

- Joyboner.com's tutorial on how to show comments in a div -
http://joyboner.com/scrollable-div-myspace-comments-complex/

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

<p><a href="http://www.createblog.com/myspace-layouts/" title="Grab Myspace Layouts and Myspace Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Myspace Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><style>
.profileInfo, .contactTable, .userProfileURL, .interestsAndDetails, .userProfileDetail, .userProfileNetworking, .userProfileSchool, .userProfileCompany, .extendedNetwork, .latestBlogEntry, .blurbs td.text, .orangetext15, table div { display:none!important; 
}

div table div, table table div { 
display:block!important; padding:0; 
}

table, tr, td { 
background:none; border:none; 
}

.clearfix, .clearfix div { 
background-image:none!important; 
overflow:hidden; 
}

.clearfix { 
position:relative; 
top:-30px; 
width:728px; 
}

.clearfix .clearfix { 
bottom:-30px; 
margin:-45px 0 0; 
position:relative; 
top:auto; 
width:auto; 
}

.clearfix .clearfix div { 
margin:45px 0 0; 
}

.clearfix .clearfix div div { 
margin:auto; 
}

.profile, .profile div, .profile input, .clearfix select, .clearfix option, .clearfix ul { 
display:none!important; 
filter:alpha(opacity=0); 
-moz-opacity:0; 
opacity:0; 
}

body {
background-image: url(http://cbimg6.com/layouts/08/09/31625aa.gif);
background-repeat: repeat-x;
background-attachment:fixed;
background-position: bottom;
background-color: white;
width: 2754px;
scrollbar-3dlight-color:fff;
scrollbar-arrow-color:ed145a;
scrollbar-base-color:fff;
scrollbar-darkshadow-color:fff;
scrollbar-face-color:fff;
scrollbar-highlight-color:fff;
scrollbar-shadow-color:e1e1e1;
}

b {
color: f7941d;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
}

i {
color: f7941d;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
}

u {
color: f7941d;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
}

a:link { 
color: f7941d;
text-transform: uppercase;
font-size: 9px;
}

a:visited { 
color: f7941d;
}

a:hover { 
color: ed145a;
background-color: e1e1e1;
text-decoration: none;
}

a:active { 
color: f7941d;
}

.wrapwrap {
position: absolute;
left: 0px;
top: 100px;
width: 2754px;
z-index: 1;
}

.wrap {
margin-left: 60px;
}

.navbox {
float: left;
width:389px; 
margin-top: 0px;
}

.content { 
float: left;
}

.content h4 {
font-size: 1.2em;
}

.par {
margin: 0px 0px 0 60px; 
float: left; 
width: 389px;	
overflow: hidden;
}

.alt {
background-color: white;
padding: 2px;
color: a0a0a0;
font-size: 13px;
font-family: Helvetica;
text-align: justify;
margin-bottom: 15px;
}

div{
color: a0a0a0;
font-size: 13px;
font-family: Helvetica;
text-align: justify;
}

h2 {
border-bottom:1px solid; border-color:ed145a;
font-size: 14px;
letter-spacing: 5px;
color: ed145a;
font-family: Helvetica;
background:  url(http://cbimg6.com/layouts/08/09/31625ab.gif) left no-repeat;
text-indent: 15px;
text-transform: uppercase;
}

h1 {
font-size: 12px;
color: ed145a;
font-family: Helvetica;
text-transform: uppercase;
}

p {
color: a0a0a0;
font-size: 13px;
font-family: Helvetica;
text-align: justify;
margin-bottom: 15px;
}

.quote {
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: ed145a;
padding: 7px;
color: a1a1a1;
background-color: fefbf0;
font-size: 9px;
margin: 10px 10px 10px 10px;
}

textarea {
border: 0px;
width: 300px;
height: 150px;
letter-spacing: 3px;
font-family: helvetica;
font-size: 9px;
text-transform: uppercase;
color: ed145a;
font-weight: bold;
padding: 5px;
background-color: ebebeb;
overflow: hidden;
}

input {
letter-spacing: 3px;
font-family: helvetica;
font-size: 9px;
text-transform: uppercase;
color: ed145a;
font-weight: bold;
border: 0px;
}

.comt td, .comt table{
width:0px!important; 
height:0px!important; background-color:transparent!important; border:0px!important; 
_padding:2px!important;
}

.comt, .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{
visibility:visible;
}

.comt td td td b{
top:0px; 
display:inline;
}

.comt td td td table, .comt .redtext15, .redlink, .comt .btext, .frnd{
display:none;
}

.comt td b, .blacktext10 {
display:block;
}

.comt {
z-index:7;
}

.comt table, .comt b {
position:relative; top:-29px; _top:-20px;
}

.comt {
width:389px; 
overflow:hidden;
background-color:white; 
position:absolute; 
top: 90px; 
left: 2305px; 
}

.blacktext10 {
width: 300px; 
border-bottom:1px solid; 
border-color:ed145a;
font-size: 14px;
letter-spacing: 5px;
color: ed145a;
font-family: Helvetica;
background:  url(http://cbimg6.com/layouts/08/09/31625ab.gif) left no-repeat;
text-indent: 15px;
text-transform: uppercase;
}

.comt td td td .ImgOnlineNow{
display:none;
}

.comt td b{
display:none;
}

.blacktext10{
border-bottom:1px solid; 
border-color:ed145a;
}

.comt td td td, .comt td td td b {
color: a0a0a0;
}

</style>

Layout Code

Copy and paste to I'd Like to Meet

Help

<div class="content">
      <div class="par alt" id="first">
        <h2>About.</h2>
<h1>CSS Layout</h1>

<p>"Boney Horizon" has a fixed background. There are no fixed heights, so you can have as much text as you want in either section of content.</p>

<h1>Example</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ..Integer vel pede. Fusce tellus lectus, faucibus non, vulputate ac, <b>bold</b> vel, dui. Ut lectus erat, <div class="quote">quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote quote </div>arcu...Phasellus tristique viverra sem. Cum sociis natoque penatibus et magnis dis parturient <i>italics</i>, nascetur ridiculus mus. Aliquam at risus. Praesent ac purus a felis auctor consequat. Sed pretium rhoncus mauris. Sed placerat.
</p><p>
Pellentesque pellentesque elit quis dui. Nam et dui. Duis imperdiet purus quis nisi. Aliquam erat volutpat. Nulla sed quam. Cras rhoncus suscipit magna. Mauris odio. Nullam congue pharetra quam. Maecenas dapibus bibendum libero. Nunc vitae augue. <u>underline</u> tempus pede in lorem. Morbi tincidunt.
</p><p>
Donec gravida gravida augue. Pellentesque at turpis sed tellus laoreet condimentum. Morbi in leo. In lacus lectus, dapibus in, dignissim non, faucibus vel, nisi. Aliquam malesuada purus pretium dolor. Morbi eget felis vel nulla varius rhoncus. Morbi mollis nunc quis arcu. Maecenas vel magna vel nibh hendrerit posuere. Donec facilisis sapien nec tellus. Pellentesque facilisis sem ut ipsum. Sed tempor. Nullam pretium nulla nec quam.
</p><p>
Praesent metus sem, dapibus sit amet, viverra et, iaculis posuere, velit. Aliquam erat volutpat. Duis nec mauris. Nullam ultricies massa et turpis. Integer ut lectus. Sed accumsan ligula eu ipsum. Cras tortor est, sollicitudin quis, fringilla et, volutpat ut, metus. Ut nec diam. Phasellus pulvinar mi eu libero. Vivamus enim neque, fermentum et, venenatis vitae, scelerisque non, magna. In risus lacus, vestibulum ac, semper id, accumsan eu, ante.
</p><p>
Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec id lacus eget mauris lobortis suscipit. Donec erat elit, ornare vel, fermentum quis, iaculis dapibus, nisi. Nunc scelerisque euismod mauris. Sed ligula tellus, ullamcorper non, congue sit amet, egestas in, velit. Cras dictum ante eu sem. Cras dignissim venenatis nisi. Proin a dui. Nulla consectetuer ornare lectus. Suspendisse potenti. Ut posuere nisi ut dui. Nulla at elit. Morbi non urna ac nulla fermentum cursus. Nulla malesuada auctor nisi. Curabitur vestibulum velit sit amet augue. Nam porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent in nisi. </p>

<div class="par alt" id="third">
        <h2>Music.</h2>
		Lorem ipsum dolor sit amet, consectetuer adipiscing
        elit. Morbi lacus felis, euismod at, pulvinar sit amet,
        dapibus eu, eros. Etiam tellus. Nam vestibulum porttitor
        urna. Phasellus aliquet pretium quam. Proin pharetra, wisi
        nec tristique accumsan, magna sapien pulvinar purus, vel
        hendrerit ipsum tellus at ante.Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit. Morbi lacus felis, euismod
        at, pulvinar sit amet, dapibus eu, eros. Etiam tellus. Nam
        vestibulum porttitor urna. Phasellus aliquet pretium quam.
        Proin pharetra, wisi nec tristique accumsan, magna sapien
        pulvinar purus, vel hendrerit ipsum tellus at ante.Lorem
        ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
        lacus felis, euismod at, pulvinar sit amet, dapibus eu,
        eros. Etiam tellus. Nam vestibulum porttitor urna.
        Phasellus aliquet pretium quam. Proin pharetra, wisi nec
        tristique accumsan, magna sapien pulvinar purus, vel
        hendrerit ipsum tellus at ante.
      </div>
      <div class="par alt" id="fourth">

<h2>T.V./Movies.</h2>
		Lorem ipsum dolor sit amet, consectetuer adipiscing
        elit. Morbi lacus felis, euismod at, pulvinar sit amet,
        dapibus eu, eros. Etiam tellus. Nam vestibulum porttitor
        urna. Phasellus aliquet pretium quam. Proin pharetra, wisi
        nec tristique accumsan, magna sapien pulvinar purus, vel
        hendrerit ipsum tellus at ante.Lorem ipsum dolor sit amet,
        consectetuer adipiscing elit. Morbi lacus felis, euismod
        at, pulvinar sit amet, dapibus eu, eros. Etiam tellus. Nam
        vestibulum porttitor urna. Phasellus aliquet pretium quam.
        Proin pharetra, wisi nec tristique accumsan, magna sapien
        pulvinar purus, vel hendrerit ipsum tellus at ante.Lorem
        ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
        lacus felis, euismod at, pulvinar sit amet, dapibus eu,
        eros. Etiam tellus. Nam vestibulum porttitor urna.
        Phasellus aliquet pretium quam. Proin pharetra.
      </div>
      <div class="par alt" id="fifth">

<h2>Comment.</h2>
<center>
		<form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="412648947" type="hidden" /><textarea name="f_comments">I'm leaving a comment!</textarea> 
<br /> <input value="Insert" type="submit" /> <input value="clear" type="Reset" /></form></center>
      </div>
      </div>
      </div>
      </div>

</td></tr></table></td></tr></table>
<div class="comt"><table class="off"><tr><td><table><tr><td>

Layout Comments

Showing latest 10 of 12 comments

i love it XD thank you so much make more of these please

By imadinorawr on Sep 26, 2008 6:26 am

this is cute. i like.

By futura on Sep 25, 2008 8:48 pm

aliiicimo, I thought about that, but I hate scrollbars. I'd rather have only 2 places to scroll at, being the bottom and the right side, rather than having 8 different scroll bars. There really isnt much difference when you think about it - actually, a little less complex looking than it would be with more scrollbars.

By manic on Sep 25, 2008 3:17 pm

The only thing I don't like is how it scrolls down as well as right...
I wouldn't be able to get the hang of it :/

By aliiicimo on Sep 25, 2008 2:16 pm

I think it's really cool that you went with a horizontal scroll! The layout on a whole looks cool. I really wish CB would make the live previews work (I know it's not *your* fault).

By SJalways on Sep 24, 2008 10:31 pm

I love it, the colors are awesome and I think the scroll looks all right. Great job.

By none345678 on Sep 24, 2008 8:59 pm

It's nice, but I don't like how far it scrolls to the right.

Good job, regardless.

By JennyThePirate on Sep 24, 2008 8:56 pm

this is like the first time ive seen a layout that goes left and right instead of up and down.
its cool though.

By neinernever on Sep 24, 2008 7:47 pm

Very interesting setup. I've only seen a layout like this one other time in my life.

I like the pink and orange.

By tokyo-rose on Sep 24, 2008 6:28 pm

I'm not a fan of horizontal scrolls, but I actually think this type of layout would grow on me. Very innovative. :)

By schizo on Sep 24, 2008 5:57 pm

View all »

Layout Details

Designer	manic
Submitted on	Sep 24, 2008
Page views	14,173
Favorites	79
Comments	12
Reviewer	schizo
Approved on	Sep 24, 2008

Boney Horizon

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