Welcome to the Host Club...!

Designer's Comments

Look carefully for specific instructions

Ouran High School Host Club~

Everything you need to edit is in your About Me section.
1. Replace XXXXXXXX with your ID#.
2. The banner is animated upon entering.
3. Use [h1] to create the larger texts; use [h2] for the smaller ones.
4. [p] automatically makes the first letter of your about me/paragraph uppercase and font-size bigger.
5. There are XXXXXXXX's to be replaced for the COMMENT BOX to work! Be sure to check that out! The HTML for the comment box starts with [form action].
6. PLEASE do NOT remove credits.

Everything in the "I'd Like To Meet" section are CSS codes. Do Not Mess With Them.

Enjoy! Creator's Myspace: myspace.com/ancientwhisper

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

<a href="http://www.myspace.com/" class="navigation"> MYSPACE</a>

<a href="http://www.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX" class="navigation"> COMMENT ME</a>

<a href="http://www.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX" class="navigation"> MESSAGE ME</a>

<a href="http://friends.myspace.com/index.cfm?fuseaction=block.blockuser&userID=XXXXXXXX" class="navigation"> BLOCK ME</a>

<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=XXXXXXXX" class="navigation"> MY FRIENDS</a>

<a href="http://www.myspace.com/AncientWhisper" class="navigation"> AncientWhisper</a>

</div>

<div style="width:629px; position:absolute; top:605px; margin-left:135px; height: 195px; overflow: auto ; filter:chroma(color=BFBFFF);

scrollbar-arrow-color: BFBFFF;
scrollbar-face-color: BFBFFF;
scrollbar-3dlight-color: BFBFFF;
scrollbar-darkshadow-color: 000000;
scrollbar-highlight-color: 000000;
scrollbar-shadow-color: BFBFFF;
scrollbar-track-color: BFBFFF;">

<h1>YOUR LOVELY HOST,</h1>
<h2> AND YOURS TRULY</h2>
<p>Welcome, my precious, lovely guest to our beloved host club!!! Please enjoy your wonderful stay, and please do speak to us what's in that brilliant mind of yours. Oh, no need to ask my humble friend; this celestial being who stands before your dazzling eyes goes by the name of Cindy. Do I catch your interest? Or maybe you fancy those who are the wild type? [Mori] How about loli-shota? [Hunny] Little devil [Kaoru + Hikaru] or cool..?[Kyoya] Maybe perhaps prince?[Tamaki] Some would prefer a more original beautiful--- do you like the natural?[Haruhi] Whatever suits you, the Host Club proudly presents these six lovely figures to suit your fancy.</p>

<p>Aside from the odd greeting, I would just like to make some "author's notes". This layout features the cast of Ouran High School Host Club. It was created about two or three years ago prior to the actual release of it. I retouched the layout before I re-released it to the public since I thought it was a tad bit plain. Such changes includes the background, and the animation on the banner. I thought that it would be incredibly fitting to make a layout that welcomes guests. I apologize for the pink attack; I know it's incredibly rosy and girly. x] <b>Bold</b>, <i>Italics</i>, <u>Underline</u>. </p>

<h1>FIRST IMPRESSIONS</h1>
<h2>WORDS ONLY YOU WILL UNDERSTAND</h2>
<p>
<blockquote> "...And I would like to find
a hand like yours to take mines."</blockquote> 
</p>

<h1>CLOSING TIME</h1>
<h2>WE'LL WELCOME YOU WITH OPEN ARMS</h2>
<p>Leaving so soon? What a shame. Well, I suppose it's not possible to withhold such a flawless angel like you for an eternity. Please come back whenever you have time to kill, and perhaps we can engage into more conversations about YOU. Until then, you can leave me a few comments, and the Host Club will gladly read it into consideration.<br /> <br />

<center><b>Let us meet each other again in the near future...<br />
<i>-The Host</i></b></center>

</p>
</div>

<div style="width:310px; position:absolute; top: 840px; left:290px; height:137px; overflow:auto; overflow-x:hidden; filter:chroma(color=BFBFFF);

scrollbar-arrow-color: 939081;
scrollbar-face-color: BFBFFF;
scrollbar-3dlight-color: BFBFFF;
scrollbar-darkshadow-color: BFBFFF;
scrollbar-highlight-color: BFBFFF;
scrollbar-shadow-color: BFBFFF;
scrollbar-track-color: BFBFFF;
">
<center>
<br /> <br />

<form action="/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX" method="post"><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 name="ctl00$ctl00$cpMain$UserWriteCommentsControl$commentTextBox" class="talk">Hello; hello! How are you today? :]</textarea><br /><input type="submit" name="ctl00$cpMain$UserWriteCommentsControl$postcommentImageButton" value="Submit" class="talk" /></form>

Layout Code

Copy and paste to I'd Like to Meet

Help

.redlink, .orangetext15, .btext {
COLOR: FFFFFF;
FONT-SIZE: 1;
}

div div table td td font {visibility: hidden;}

b, strong, .btext {
  font: 11px tahoma; 
  font-weight: heavy; 
  color: FA162E; 
  text-align: justify;
  }

i, em, .itext  {
  font-family: tahoma; 
  font-size: 11px;
  color: 000000;
  text-align: justify;
  }

u, s, .stext, .sbtext, .swtext {
  font-family: tahoma; 
  font-size: 11px;
  color: DB8C63;
  text-align: justify;
  }

a, a:link,a:active {FONT: 11px tahoma;
color:939081; 
text-decoration: none
letter-spacing: 0px;
font-weight: bold;

}

a:visited{FONT: 11px tahoma; 
color:939081; 
text-decoration: none
letter-spacing: 0px;
font-weight: bold;
}

a:hover {FONT: 9px tahoma; 
color:ffffff; 
text-decoration: none
letter-spacing: 0px;
font-weight: bold;
}

a:hover.pic img {filter:alpha(opacity=80);}
a:link img { filter: Gray; }
a:hover img {filter: none; }

img {filter: progid:DXImageTransform.Microsoft.BasicImage(color=1); border: 1;}

li, .redtext, font, .navbar, .lightbluetext8, .blacktext12, .label, .whitetext12, .orangetext12, .nametext{font: 0px arial; letter-spacing: 0px; text-align: justify; display: none;}

.blacktext10 {FONT: 11px arial; color:000000; letter-spacing: 0px; text-align: justify; display:block;}

.header {
font-weight: normal; font-size: 9; padding-bottom: 2pt; padding-top: 0pt; COLOR: 000000; border-bottom:000000 0px solid; font-family: arial; text-decoration: none;  text-align: center; letter-spacing: 0.0em;
z-index: 3;
}

.content{
background-color: transparent; font-family: Arial; font-size: 8pt; color:CCCCCC; background-color: 000000;display:block; overflow:auto; text-align:justify; }

.nametext {display: none !important;}

.profileInfo { display:none; }

table, tr, td {background:transparent;}

td.text td.text table b, td.text td.text{ width: 280px;}
table table td {width: 280px;}

.blurbs td td .orangetext15, td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext, text {display:none !important;}

.footwarpper {display: none;}

td div a.text{left: 50%; margin-left: 500px; visibility:visible; font-size:5px;  a.hover-size:5px; font-spacing:-2px;}

html td.text td.text table table td a img {width:0px;}*

.friendSpace {display:none;}
.contactTable { display: none }
</style>

blockquote {
overflow:visible;
padding: 5px 5px 5px 5px;
text-align:center;
background-color:F6EFEF;
border-width:1px; 
border-style: dotted; 
border-color:E80F86;
font: tahoma;
font-size: 10pt;
color: EF6D7B;
line-height: 20px;
letter-spacing: 1px;
font-family: times new roman;
font-style: italic;
}

a.navigation{
font: 9px tahoma;
color: DB3755;
border: 2px outset; 
border-color: F26759;
height: 13px;
     width:81px;
text-align: center;
background-color: FBAEB7;
display:table-cell;
}

a.navigation:hover {
     font: 9px tahoma;
border: 2px outset; 
border-color: ffffff;
height: 13px;
     width:81px;
text-align: center;
color: F26759;
background-color: FBE5E4;
display:table-cell;
}

a.navigation:visited  {
font: 9px tahoma;
text-align: center;
color: DB3755;
border: 2px outset; 
border-color:F26759;
height: 13px;
     width:81px;
background-color: FBAEB7;
display:table-cell;
}

h1
{
color: BF5E61;
font-weight: normal;
margin: 0 .5em;

}

h2
{
color: 693131;
position: relative;
top: -1em;
font-size: 9px;
font-weight: normal;
margin: 0 3.5em;
letter-spacing: .5em;
text-transform: uppercase;
top: -1px;
border-bottom: 3px double BF5E61;
}

h1, h2	
{
font-family: Georgia, times new roman;
}

p:first-letter{font: 20px georgia; color: 693131; }

p, table, tr, td, th, div{
border: 0px;
FONT: 11px tahoma; COLOR: D95B4C; 
LETTER-SPACING: 0px; TEXT-ALIGN: justify
font-weight: bold;
}

textarea.talk 
{
font:normal 11px tahoma; 
color:555555; 
scrollbar-track-color: F6A8AC; 
SCROLLBAR-FACE-COLOR:F6A8AC; 
SCROLLBAR-HIGHLIGHT-COLOR:F6A8AC;
SCROLLBAR-SHADOW-COLOR:F6A8AC; 
SCROLLBAR-3DLIGHT-COLOR:000000; 
SCROLLBAR-ARROW-COLOR:000000; 
SCROLLBAR-DARKSHADOW-COLOR:000000;
border-color:000000;
background: url(http://cbimg6.com/layouts/09/06/35027af.jpg);  
width: 240px;
height: 50px;
}

input.talk 
{
font:normal 11px tahoma; 
color:FC627E; 
scrollbar-track-color: 000000; 
border-color:000000;
background-color:000000;  
width: 240px;
} 
</style>

Layout Comments

Showing latest 10 of 11 comments

I LOVE IT...but could you possibly do it as a 2.0? i prefer 2.0's because of the content i have on my page...thank you...if you can! :)

By tuttibugg on Jul 4, 2009 10:38 am

OHSHIZZZ !
this is a hella good job !
i give two thumbs ;DD
really love this series

By beautifulxtragedy on Jul 2, 2009 12:56 pm

it's so pretty +.+
i love it! haha

By lostinLDN on Jul 1, 2009 9:41 am

I LOOOVE OURAN!
I love this layout, too!
Although I don't like the navigation buttons, everything else is just
perfect!
This should get wayy more views in the future.
it's beautiful!

By VogueBeauty on Jun 30, 2009 9:40 pm