Mycode

!!!!!!!!!!!!Read It!!!!!!!!!!!!
(⊙.⊙(☉_☉)⊙.⊙)
DO NOT LET ALL OF THESE INSTRUCTIONS FOOL YOU. This is a really simple layout. I
just want everyone to understand how to take away things or make changes to titles,
etc if need be. You will note some of these same instructions will appear in the
LIKE TO MEET Section. I have put them in there for easy reference.
A storyboard is a visual representation of your character's tale. You may include

less pics of you and add to them pictures of the place your character is from,
things he/she enjoys doing or images of those connections that are central to your
character, etc. It's really up to you what you put in here.
............................
ALL COLORS CAN BE CHANGED.For color changes, see the color palette section in About
Me. There are a ton of color schemes online. It won't take you long to change the
color set-up on this profile.
There are div ids/classes in this layout. Be VERY, VERY, VERY careful not to drop
off any of the coding.
............................
MUSIC PLAYER
REPLACE MY MUSIC PLAYER WITH YOUR OWN.
.......................................
Hover Image Panels
To replace the images in the hover panels, replace my image url with your own
wherever you see div image urls like this:
<div class="v150w355h" style="background-

image:url(http://i.imgur.com/GYzifCv.jpg);">
To find out the width and height for the picture in that section, look at the code.
In this case the code says v150w355h. That means the width is 150px and the height
is 355px. Make your picture using those dimensions.
Every image has a scrollbox underneath it. If you decide you want less hover boxes
(just leaving the pics instead), do the following:
Example:

image:url(http://i.imgur.com/wd3CzVS.jpg);">
<div class="v350w380ha">
<p>Put whatever you want here.
</div></div>
To leave just the image, remove:
</div>
So that you are left with only this:

</div>
Again, be very, very careful not to leave or take away </div> tags. Make sure if
you remove a div you remove a closed div tag too.
.......................................
TITLES
For the lines of text that make-up the visible text on the layout itself on non-
hover mode (ie "I wish I could have you here", etc), I have put in text codes and
letter-spacing so that the area is almost completely filled. If, however, you
change these and the line of text ends up being longer or shorter, you may need to
go up into About Me and locate the text div for that area. Example, if you change
victext3's wording from "Bleed me dry" to something longer, go into About Me and
find the .victext3 div. Change the letter spacing from -2pt to -4pt, etc to smash
the text together. OR you can change the font-family from arial narrow to
something that is more compact OR you can change the font-size from 50px to 45px,
etc. Just mess with it until your wording fits properly.
.......................................
Extra:
I have left out stats on this layout as I want you to design the content yourself;
however if you have need of some general statistical markers, you can add this
inside of one of the divs:
<p><font class="h3">Legal</font>
<BR><b>NAME:</b> Input info
<BR><b>NICKNAMES:</b> Input info
<BR><b>ALIASES:</b> Input info
<BR><b>DATE OF BIRTH:</b> Input info
<BR><b>PLACE OF BIRTH:</b> Input info
<BR><b>CURRENT RESIDENCE:</b> Input info
<p><font class="h3">Physical</font>
<BR><b>ETHNICITY:</b> Input info
<BR><b>HAIR COLOR:</b> Input info
<BR><b>EYE COLOR:</b> Input info
<BR><b>HEIGHT:</b> Input info
<BR><b>WEIGHT:</b> Input info
<BR><b>BIRTHMARKS/SCARS:</b> Input info
<p><font class="h3">Personality</font>
<BR><b>Traits:</b> Input Info
<BR><b>Disorders:</b> Input Info
<BR><b>Addictions:</b> Input Info
<BR><b>Likes:</b> Input Info
<BR><b>Dislikes:</b> Input Info
<BR><b>Quirks:</b> Input Info
<p><font class="h3">Education</font>
<BR><b>High School</b> Input Info
<br><b>College</b> Input Info
<br><b>Major</b> Input Info
<br><b>Degree</b> Input Info
<p><font class="h3">Employment</font>
<BR><b>OCCUPATION:</b> Input info
<BR><b>JOB DESCRIPTION:</b> Input info
<BR><b>EMPLOYER:</b> Input info
<BR><b>SKILLSET:</b> Input info
<p><font class="h3">Family</font>
<BR><b>MOTHER:</b> Input info
<BR><b>FATHER:</b> Input info
<BR><b>SISTER(S):</b> Input info
<BR><b>BROTHER(S):</b> Input info
<BR><b>Other Family:</b> Input info
<p><font class="h3">Relationships</font>
<BR><b>SEXUAL ORIENTATION:</b> Input info
<BR><b>RELATIONSHIP STATUS:</b> Input info
<BR><b>CURRENT RELATIONSHIP(S):</b> Input info
<BR><b>PAST RELATIONSHIP(S):</b> Input info
///////////////////////////////////////////////////
_______________________________________________
Don't forget to replace the XXXXX with your friend ID

number.
(>‿◠)✌
*****************************SAVE YOUR WORK AS YOU

GO.*******************************
DO NOT REMOVE THE .VICARIOUS MARKERS FROM ANY VICARIOUS LAYOUT.
-----------------------------ABOUT ME---------------------------------
</td></tr></table></td></tr></table></td></tr></table></div>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Tangerine:400,700|
Raleway:400,300|Six+Caps|Yanone+Kaffeesatz:400,700);
/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */
.vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}

.vicarious{Background Properties // BODY COLOR IS IN THE COLOR PALETTE SECTION}
body {
background-image:url( );
background-repeat:repeat;
background-position: top center;
background-attachment:fixed;
}
.vicarious{ Google Chrome Scrollbar }

::-webkit-scrollbar {width: 10px;}
::-webkit-scrollbar-track {border: 1px solid ;}
::-webkit-scrollbar-thumb {border: 1px solid ;}
.vicarious { Font Styles }
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input,
p, i, b, em {
font-family: tahoma;
font-size: 8pt ;
line-height: 90% ;
text-decoration:none;
}
P { text-align:justify; }
I { font-size:12pt;font-family: Tangerine; text-shadow: 1px 1px 2px rgba(0, 0, 0,
1); }
EM {font-size:13pt; font-family: times new roman; text-shadow: 1px 1px 2px rgba(0,
0, 0, 1); }
B {
font-family: arial narrow;
font-size:8pt;
font-weight:bold;
text-transform:uppercase;
line-height:100%;
letter-spacing: 0pt;
}
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link,

a.second:active, a.second:visited {
font-size:9pt;
text-align:center;
line-height:35px;
height:35px;
display:block;
font-weight:bold;
text-decoration:none;
-webkit-transition: all 2.4s ease-out;
-moz-transition: all 2.4s ease-out;transition:
all 2.4s ease-out;
margin-bottom:2px;
}
a.second, a.second:link, a.second:active, a.second:visited {

width:auto;
line-height:20px;
height:20px;
letter-spacing:1pt;
.h1, .h2, .h3, .h4, .h5 {

line-height:100%;
text-align:center;
display:block;
font-size: 11pt ;
}
.h1 {
font-family: copperplate gothic light;

font-size: 25pt ;
}
.h2 {
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size: 15pt ;
}
.h3 {
font-family: 'Quattrocento', serif;
font-size: 10pt ;
margin:5px 0px;
letter-spacing:2pt;
}
.h4 {
font-family: 'Raleway', sans-serif;
font-size: 14pt ;
margin:10px 0px;
padding:10px 0px;
letter-spacing:2pt;
}
.h5 {
font-family: 'Six Caps', sans-serif;
font-size: 12pt ;
margin:10px 0px;
letter-spacing:2pt;
}
.vicarious { Div IDS/Class Styles }
.buffer, .victext1, .victext2, .victext3, .victext4, .victext5, .victext6,

.victext7, .v710w300h, .v150w355h, .v350w380h, .v300w200h, .v225w255h,
.v330w225h, .v100w225h, .v245w75h, .v530w230h, .v230w150h, .v450w150h {
left:50%;
top:0%;
position:absolute;
overflow:hidden;
z-index:1;
}
.v710w300ha, .v150w355ha, .v350w380ha, .v300w200ha, .v225w255ha, .v330w225ha,

.v100w225ha, .v245w75ha, .v530w230ha, .v230w150ha, .v450w150ha {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.9s linear ;
-moz-transition: all 0.9s linear ;
-ms-transition: all 0.9s linear ;
-o-transition: all 0.9s linear
transition: all 0.9s linear ;
overflow:hidden;
text-align:left;
}
.v710w300ha:hover, .v150w355ha:hover, .v350w380ha:hover, .v300w200ha:hover,

.v530w230ha:hover, .v230w150ha:hover, .v450w150ha:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=96)";
filter: alpha(opacity=96);
opacity: .96;
overflow:auto;
}
.vicarious { Div IDS/Class Styles }

.v710w300h {margin-top:75px; margin-left:-600px;}
.v710w300h, .v710w300ha {width:710px; height:300px; }
.v150w355h {margin-top:20px;margin-left:115px;}
.v150w355h, .v150w355ha {width:150px; height: 355px;}
.v350w380h {margin-top:50px; margin-left:270px;}
.v350w380h, .v350w380ha {width:350px; height: 380px; }
.v300w200h {margin-top:435px;margin-left:-600px;}
.v300w200h, .v300w200ha {width:300px;height:200px;}
.v225w255h {margin-left:-295px;margin-top:380px;}
.v100w225h {margin-left:270px;margin-top:435px;}
.victext1, .victext2, .victext3, .victext4, .victext5, .victext6, .victext7 {
line-height:100%;
text-align:center;
display:block;
overflow:hidden;
}
.victext1 {
width:710px;
height:50px;
margin-left:-600px;
margin-top:20px;
font-size: 50px ;
letter-spacing:1pt;
}
.victext2{
width:350px;
height:25px;
margin-left:270px;
margin-top:20px;
font-size: 25px ;
letter-spacing:0pt;
font-family: georgia;
}
.victext3 {
width:300px;
height:50px;
margin-left:-600px;
margin-top:380px;
font-size: 50px ;
letter-spacing:-2pt;
}
.victext4 {
width:330px;
height:50px;
margin-left:-65px;
margin-top:380px;
font-size: 50px ;
letter-spacing:9pt;
}
.victext5 {
width:245px;
height:25px;
margin-left:375px;
margin-top:435px;
font-size: 25px ;
letter-spacing:6pt;
}
.victext6 {
width:245px;
height:115px;
margin-left:375px;
margin-top:545px;
font-size:115px ;
letter-spacing:-6pt;
font-family:arial narrow;
}
.victext7 {
width:685px;
height:50px;
margin-left:-65px;
margin-top:820px;
font-size: 50px ;
letter-spacing:0pt;
font-family: 'Yanone Kaffeesatz', sans-serif;
.buffer {
background-color:transparent;
width:1220px;
height:25px;
margin-left:-650px;
margin-top:880px;
}
.vicarious{ Color Palette}

body{ background-color:121212; }
.victext1, .victext2, .victext3, .victext4, .victext5, .victext6, .victext7,
.v710w300h, .v150w355h, .v350w380h, .v300w200h, .v225w255h, .v330w225h, .v100w225h,
.v245w75h, .v530w230h, .v230w150h, .v450w150h {background-color:000000; }
.v530w230ha:hover, .v230w150ha:hover, .v450w150ha:hover {
background-color:121212;}
::-webkit-scrollbar-track {background-color:000000 ; border-color:121212;}
::-webkit-scrollbar-thumb {background-color:383a3d; border-color:121212 ;}
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input,
p, i, b, em { color:424242; }
I { color:cfd4da; }
EM { color:b0bdcd; }
B { color:6b798a; }
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link,
a.second:active, a.second:visited { color:9fa6a9; background-color: 151c2c; }
a.first:hover, a.second:hover { color:bac6cb; background-color: 223442; }
.victext1, .victext4, .victext7 { color:6e757d; }
.victext2, .victext3, .victext5, .victext6 { color:444c57; }
.h1{ color:7a8087; background-color:122533 ; }
.h2{ color:000000; background-color: 9aabb3; }
.h3{ color:555555; background-color: 0f2733; }
.h4{ color:9fa6a9; background-color: 151c2c; }
.h5{ color:bac6cb; background-color: 223442; }
/* - - CSS!! NO TOUCHY!!! - - */
img {border:0px;}
table, tr, td {background:transparent; border:0px;}
img, .contactTable { display:none; }
.vicholder img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidden; }
font, a, .vicsc a { visibility:hidden; }
.hidenav {display:none}
div.profileWidth {margin-top: -30px !important;}
div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}
div.profileWidth div.clearfix, hidenav hidenav hidenav,
div.profileWidth div div {filter:none; opacity:0.9999}
div.profileWidth div.clearfix {position:relative; top:30px}
table table embed {display:block; width:202px; height:35px; position:absolute;
top:0px; left:0px; visibility:visible;}
table table table embed, .vicholder div embed {position:static !important;
width:auto; height:auto; }
.text, table table table table a,table table table table div,table table table
table div a {visibility:visible;}
.vicsc { display:none; }
.text, td.text td.text table, .contactTable, .lightbluetext8 {display:none;}
table table, table table td {padding:0px; height:0px;}
marquee { z-index:8; }
table div, span, td td td, table div div { visibility:hidden !important; }
.vicholder div, .vicholder div font, .vicholder div a, .vicholder div div,
.vicholder font a, .vicholder span, .vicholder div table a, .vicholder div table
img, .vicholder div
table font, .vicholder div table, .vicholder div table td, .comt, .comt td, .comt
span, .comt a, .comt div {visibility:visible !important;}
.vicDiv {content:"Layouts available @ http://vicarious-hs.tumblr.com";}
/* - - - - - - - */
.vicarious{ Hide Codes }

.userProfileURL { display:none; }
.profileInfo { display:none; }
.friendsComments { display:none; }
.friendSpace { display:none; }
.blurbs {display: none;}
.contactTable {display: none;}
.latestBlogEntry {display: none;}
.extendedNetwork {display: none;}
.interestsAndDetails {display: none;}
.userprofiledetail {display: none;}
.userAlbums { display:none; }
.whitetext12{visibility:hidden; display:none;}
.orangetext15{visibility:hidden; display:none;}
.lightbluetext8{visibility:hidden; display:none}
table table table table td {width:0px;}
.contactTable td, table table td.text table td,table table table table table td
{width:auto;}
.profile { display:none !important;visibility:hidden!important; }
table tr td[id='footerWarpper']{display:none !important;visibility:hidden!
important;}
</style>
<div style="display:none;"><table><tr><td><table><tr><td><table><tr><td>
-----------------------------LIKE TO MEET---------------------------------
</td></tr></table></td></tr></table></td></tr></table></div><DIV class="vicholder">
<div class="victext1">I wish I could have you here</div>

<div class="victext2">Character Name Here</div>
<div class="victext3">Bleed me dry</div>
<div class="victext4">In my clutches</div>
<div class="victext5">Kisses & Kerosene</div>
<div class="victext6">MINE</div>
<div class="victext7">...in a perfect world I would get my wish</div>

image:url(http://i.imgur.com/q20TRFK.jpg);">
<font class="h1">Header 1</font>
<p><b>Bold</b> <i>Italic</i> <em>Em</em> Regular text
<p>A storyboard is a visual representation of your character's tale. You may

include less pics of you and add to them pictures of the place your character is
from, things he/she enjoys doing or images of those connections that are central to
your character, etc. It's really up to you what you put in here.
<p>ALL COLORS IN THIS LAYOUT CAN BE CHANGED. Locate a color selector only that
will provide you with color codes or use PS, etc on your computer. Find the Color
Palette in About Me and alter the colors in that section. Everything is marked.
So if you want to change the color of the links in this, change the background-
color and the color for the a.first and a.second text markers under Color Palette.
<p>All photo boxes (with the exception of the small pic under "Kisses & Kerosene"
and the two tall/skinny pics (where the links are), have been left relatively blank
for you to put in whatever you wish. If you need to title a section, just use one
of the header codes above for your titles.
<p>For the lines of text that make-up the visible text on the layout itself on non-
hover mode (ie "I wish I could have you here", etc), I have put in text codes and
letter-spacing so that the area is almost completely filled. If, however, you
change these and the line of text ends up being longer or shorter, you may need to
go up into About Me and locate the text div for that area. Example, if you change
victext3's wording from "Bleed me dry" to something longer, go into About Me and
find the .victext3 div. Change the letter spacing from -2pt to -4pt, etc to smash
the text together. OR you can change the font-family from arial narrow to
something that is more compact OR you can change the font-size from 50px to 45px,
etc. Just mess with it until your wording fits properly.
<p<Read the height and width for each image in the actual coding for each section.
In this case the code says v710w300h which translates to a 710px width and a 300px
height.
<p>Put your image code where you see background-image:url(.....)
<p>Every image has a scrollbox underneath it. If you decide you want less hover
boxes (just leaving the pics instead), do the following (Example is for this
section but the same rule applies to all):
<BR>1. From the second line of code that starts with the < sign and then div
class="v710w300ha" and ends in > Remove that whole line and then TAKE AWAY one of
the closed div tags below (the < followed by the /div and closed with >)
<p>Refer to the original instructions if this is in anyway unclear.
</div></div>

image:url(http://i.imgur.com/GYzifCv.jpg);">
<a class="second" href="LINK HERE">Name</a>
</div></div>

</div></div>
<div class="v300w200h " style="background-

image:url(http://i.imgur.com/ZEN4ZEa.jpg);">
</div></div>

image:url(http://i.imgur.com/9QNq8Gq.jpg);">
</div></div>

image:url(http://i.imgur.com/VBDBkgy.jpg);">
</div></div>

image:url(http://i.imgur.com/3lopMXz.jpg);">
<a class="first" href="/logincomplete.php">Home</a>

<a class="first" href="/invite_friend.php?friend_id=xxxxxx">Add</a>
<a class="first" href="/send_message.php?member_id=xxxxxx">Message</a>
<a class="first" href="/add_testimonial.php?member_id=xxxxxx">Comment</a>
<a class="first" href="/gallery.php?member_id=xxxxxx">Photos</a>
<a class="first" href="/view_member_blog.php?member_id=xxxxxx">Blogs</a>
</div></div>

image:url(http://i.imgur.com/BUOgZF3.jpg);">
<center>
<object type="application/x-shockwave-flash" data="http://flash-mp3-
player.net/medias/player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="http://flash-mp3-
player.net/medias/player_mp3_mini.swf" />
<param name="bgcolor" value="#121212" />
<param name="FlashVars" value="mp3=http
%3A//k002.kiwi6.com/hotlink/fp1yetap27/rev_2220.mp3&autoplay=1&bgcolor=121212&loadi
ngcolor=444444&buttoncolor=444444&slidercolor=444444" /></object>
</center>
</div></div>

image:url(http://i.imgur.com/OxhaMFO.jpg);">
</div></div>

image:url(http://i.imgur.com/Ano7w7q.jpg);">
</div></div>

image:url(http://i.imgur.com/UkCNtid.jpg);">
</div></div>
<div class="buffer"></div></div></div><div
class="ficsc"><table><tr><td><table><tr><td><table><tr><td>

Mycode

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mycode

Uploaded by

Copyright:

Available Formats

!!!!!!!!!!!!Read It!!!!!!!!!!!!

A storyboard is a visual representation of your character's tale. You may include

REPLACE MY MUSIC PLAYER WITH YOUR OWN.

Hover Image Panels

<div class="v150w355h" style="background-

<div class="v350w380h" style="background-

So that you are left with only this:

Don't forget to replace the XXXXX with your friend ID

*****************************SAVE YOUR WORK AS YOU

DO NOT REMOVE THE .VICARIOUS MARKERS FROM ANY VICARIOUS LAYOUT.

/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */

.vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}

.vicarious{ Google Chrome Scrollbar }

.vicarious { Font Styles }

a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link,

a.second, a.second:link, a.second:active, a.second:visited {

.h1, .h2, .h3, .h4, .h5 {

font-family: copperplate gothic light;

.vicarious { Div IDS/Class Styles }

.buffer, .victext1, .victext2, .victext3, .victext4, .victext5, .victext6,

.v710w300ha, .v150w355ha, .v350w380ha, .v300w200ha, .v225w255ha, .v330w225ha,

.v710w300ha:hover, .v150w355ha:hover, .v350w380ha:hover, .v300w200ha:hover,

.vicarious { Div IDS/Class Styles }

.vicarious{ Color Palette}

.vicarious{ Hide Codes }

<div class="victext1">I wish I could have you here</div>

<div class="v710w300h" style="background-

<p><b>Bold</b> <i>Italic</i> <em>Em</em> Regular text

<p>A storyboard is a visual representation of your character's tale. You may

<p>Put your image code where you see background-image:url(.....)

<p>Refer to the original instructions if this is in anyway unclear.

<div class="v150w355h" style="background-

<div class="v350w380h" style="background-

<div class="v300w200h " style="background-

<div class="v225w255h" style="background-

<div class="v330w225h" style="background-

<div class="v100w225h" style="background-

<a class="first" href="/logincomplete.php">Home</a>

<div class="v245w75h" style="background-

<div class="v530w230h" style="background-

<div class="v230w150h" style="background-

<div class="v450w150h" style="background-

You might also like