FFVII: Advent Children Complete

Designer's Comments

Look carefully for specific instructions

Final Fantasy VII: Advent Children Complete Layout~

Everything you need to edit is in your About Me section.
1. Replace XXXXXXXX with your ID#.
2. The links on the banner are all animated with short clips from the movie! The background is also animated (with a longer time frame).
3. Use [h2 with class title] to create the big black text.
4. [p with class content] automatically makes the first line of your about me/paragraph uppercase and the first letter's font-size bigger.
5. The side links may be removed and add onto.
6. PLEASE do NOT remove credits.
7. Video is removable.

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

<div style="top: 0px; width: 202px; position: absolute; margin-top: 650px; _margin-top: 650px; margin-left:170px; _margin-left:173px;">
<a href="http://www.myspace.com/" class="elinks"> Home</a> <br />
<a href="http://www.myspace.com/index.cfm?fuseaction=blog.ListAllCustom&friendId=XXXXXXXX&swapped=true" class="elinks"> Blog</a> <br />
<a href="http://www.Createblog.com" class="elinks"> Createblog.com</a> <br />
<a href="http://www.myspace.com/AncientWhisper" class="elinks"> by AncientWhisper</a> <br />
</div>

<h2 class="title">Complete</h2>
<p class="content">
It's been forever since I've made a Final Fantasy-based layout. Although I have to admit, I have created over a dozen layouts with Cloud in it, this is my best one yet. (then again, the last Cloud layout I designed was from two years ago.) Well, for those who do not know, I am quite possibly one of the biggest Final Fantasy fans you can come across to (although I'm sure there are much bigger fans out there). I attend the symphonic concerts, collect the figurines and merchandises--- just about anything. On June 2nd, Final Fantasy VII: Advent Children Complete was released in the format of Blu-Ray. It is a remake of the original Advent Children film, but with about half an hour of additional cutscenes and over a thousand clip edits.</p>

<p class="content">This layout is a tribute to the release of Final Fantasy VII: Advent Children Complete! It is a lively layout with rollover buttons containing short segments from the film and an animated background. As for the buttons on the banner, I originally intended to use the ending scene for the layout but to avoid spoilers, I pretty much used trailer clips. Otherwise, I would have planted the fancy-shmancy Omnislash Version 6 clip on the very top (Add Me). But I don't want to spoil anyone on quite possibly the best scene in the movie. =]</p>

<h2 class="title">Safe & Sound</h2>

<p class="content">The new theme for Final Fantasy VII: Advent Children Complete: Safe and Sound.

<blockquote><b>"There is nothing that I don't cherish."</b> <br /> <span style="float:right;"> <i>-Cloud Strife</i></span></blockquote><br />

<h2 class="title">Calling</h2>
<b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <s>Strike-out</s>... <br /><br />
<div style="float:left;">o<a href="link"> Friend!</a><br />
o<a href="link"> Friend!</a><br />
o<a href="link"> Friend!</a><br />
o<a href="link"> Friend!</a><br />
o<a href="link"> Friend!</a><br />
</div>
<div style="float:right;">
o<a href="link"> Friend!</a><br />
o<a href="link"> Friend!</a><br />
o<a href="link"> Friend!</a><br />
o<a href="link"> Friend!</a><br />
o<a href="link"> Friend!</a><br />
</div>

</div>
</div>

</div>

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: trebuchet MS, Arial;  
  color: 345764; 
  text-align: justify;
  font-weight: bold;
  }
i, em, .itext  {
  font-family: trebuchet MS, Arial; 
  font-size: 11px;
  color: 0B172D;
  text-align: justify;
  }

u{
  font-family: trebuchet MS, Arial; 
  font-size: 11px;
  color: 57415E;
  text-align: justify;
  }

s, .stext, .sbtext, .swtext {
  font-family: trebuchet MS, Arial; 
  font-size: 11px;
  color: F8F9CC;
  text-align: justify;
  }
a, a:link
{FONT: trebuchet MS, Arial;
COLOR:2B565B; 
TEXT-DECORATION: none
Letter-spacing: 0px;
font-weight: bold;

}

a:active {FONT: trebuchet MS, Arial;
COLOR:2B565B; 
TEXT-DECORATION: none
Letter-spacing: 0px;
font-weight: bold;
text-transform: uppercase;
}

a:visited{FONT: trebuchet MS, Arial; 
COLOR:2B565B; 
TEXT-DECORATION: none;
Letter-spacing: 0px;
font-weight: bold;
}

a:hover {FONT: trebuchet MS, Arial; 
COLOR: 4D7B9B; 
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, h1, .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:FFFFFF; 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;
}

.nametext {display: none !important;}

.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; color: transparent;}

.footwarpper {display: none;}

.profileInfo { display:none; }

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

table, tr, td {background-color: transparent;}

.friendsComments {display:none;}
.footwrapper (display: none; visibility: none; }

</style>

blockquote {
overflow:visible;
margin-top: 15px 106px 15px 106px;
padding: 5px 5px 5px 5px;
text-align:center;
background-color:111111;
border:3px double; 
border-color:777777;
font-family: times new roman;
font-size: 10pt;
color: 666666;
line-height: 20px;
letter-spacing: 1px;
font-style: italic;
}

.link1{height: 89px; width: 89px; overflow: hidden; background: 
url(http://cbimg6.com/layouts/09/06/34843ac.gif) no-repeat; display: table-cell;}
.link1:hover{background-position: bottom left; }

.link2{height: 83px; width: 83px; overflow: hidden; background: 
url(http://cbimg6.com/layouts/09/06/34843ad.gif) no-repeat; display: table-cell;}
.link2:hover{background-position: bottom left; }

.link3{height: 108px; width: 109px; overflow: hidden; background: 
url(http://cbimg6.com/layouts/09/06/34843ae.gif) no-repeat; display: table-cell;}
.link3:hover{background-position: bottom left; }

.link4{height: 92px; width: 92px; overflow: hidden; background: 
url(http://img200.imageshack.us/img200/1884/zackbutton.gif) no-repeat; display: table-cell;}
.link4:hover{background-position: bottom left; }

.link5{height: 60px; width: 60px; overflow: hidden; background: 
url(http://cbimg6.com/layouts/09/06/34843ag.gif) no-repeat; display: table-cell;}
.link5:hover{background-position: bottom left; }

a.elinks{height: 25px; width: 200px; overflow: hidden; display: table-cell; color: 01141D; text-align: right center; background: 
url(http://cbimg6.com/layouts/09/06/34843ah.jpg) no-repeat; text-align: right; padding: 5px;}
a.elinks:hover{background-position: bottom left; color: 546153; text-transform: uppercase; }
a.elinks:visited{color: 01141D; }

h2.title
{
font-family: Times New Roman;
color: 000000;
position: relative;
font-weight: normal;
text-transform: lowercase;
line-height: 18px;
width: 100%;
letter-spacing: 2px;
text-align: left;
border-bottom: 3px double;
border-bottom-color: 05293B;
}

div.content
{
 font-family: Tahoma; 
font-size: 8pt; 
color:0B172D; 
display:block; 
overflow:auto; 
text-align:justify; 
}

p.content:first-letter
{font: 18pt Times New Roman; 
color: 24487F; 
text-transform: uppercase; 
font-style: italic;}

p.content:first-line
{
font: 13px Tahoma, Trebuchet MS, Arial; 
color: 3D3640; 
text-transform: uppercase;
font-style: italic;}

p, table, tr, td, th, div{
border: 0px;
FONT: 8pt trebuchet MS; 
COLOR: 0B172D; 
LETTER-SPACING: 0px; 
TEXT-ALIGN: justify;
}

table,td,tr,{padding:0px; width:; background-color:transparent; color: transparent;}

</style>

Layout Comments

Showing latest 10 of 18 comments

Wow. You put so much time and effort into this and it shows. I don't think I've seen...um...what do you call it? You know, 'links' with that kind of animation before for Add and Block, ect. Very nice.

By Butterface89 on Sep 3, 2010 12:44 pm

Hai!! I really like this div but on problem, I'm OK with html, but I'm not great, so when I wanted to make the fonts bigger, steps 3 and 4 kinda... Confused the hell out of me!! Can you help?????
3. Use [h3 with class title] to create the big black text.
4. [p with class content] automatically makes the first line of your about me/paragraph uppercase and the first letter's font-size bigger.

By MeSoDark on Jul 7, 2009 9:31 am