View difference between Paste ID: 6UW0mXyA and BHC0ufaj
SHOW: | | - or go back to the newest paste.
1
       					!!!!!!!!!!!!Read It!!!!!!!!!!!!
2
 
3
                                                (⊙.⊙(☉_☉)⊙.⊙)
4
 
5
 
6
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.
7
 
8
There are div ids/classes, tables (table, tr, td) and img classes in this layout.  Be VERY, VERY, VERY careful not to drop off any of the coding.    
9
 
10
 
11
............................
12
MUSIC PLAYER
13
 
14
REPLACE MY MUSIC PLAYER WITH YOUR OWN.  
15
 
16
............................
17
18-
To Change pics in the control buttons, locate the four images that look like this coding wise and put in your 150x150 image pic between the ()
18+
To Change the banner pic, find this at the top of Like to Meet
19
20
 
21-
<TD><a class="third" href="#stats" style="background-image:url(http://i.imgur.com/jyWMG2p.png);">
21+
<div class="backimg" style="background-image:url(http://i.imgur.com/5T4omv0.png);"></div>
22-
<div class="hbox1">Stats</div></a></TD>
22+
23
((((((FOR ALL PIC SIZES, SEE THE INSTRUCTIONS IN THE ACTUAL LAYOUT CODING.)))))))
24
25
**********************
26
PSD FOR IMAGES:
27
28
http://www.2shared.com/fadmin/54300350/d0a33df1/Vicarious_Layout_132_PSD.psd.html
29
30
*********************
31
............................
32
33
 
34
 FOR ROLEPLAYER.ME USERS:
35
 
36
For the below text font classes and all of the headers (1, 2, 3, etc) and lyrics, please note the following:  
37
I code for ALL sites.  Not every website will allow headers to be placed as <h1>Header 1</h1>.  For that reason, I turn them into font classes with a period in front (.h1) in About Me and script them in the tables as I have done below.  
38
 
39
<font class="h1">Header 1</font>
40
 
41
If you are on a website like RPer.me that allows regular header, underline, strong, etc coding, you can just use regular header coding for all of the header, lyric, special text labels like so:
42
<h1>Header</h1> <strike>Strike</strike> etc..
43
 
44
OR just leave them as they are.  They will work for you either way.  
45
 
46
 
47
///////////////////////////////////////////////////
48
_______________________________________________
49
 
50
 
51
 
52
 
53
                        Don't forget to replace the XXXXX with your friend ID number.
54
 
55
                                                     (>‿◠)✌
56
 
57
 
58
                *****************************SAVE YOUR WORK AS YOU GO.*******************************
59
 
60
 
61
 
62
                               
63-
</td></tr></table></td></tr></table></td></tr></table></div><style type="text/css">@import url("https://googledrive.com/host/0B79YHAkeE7SuTVFzeTc0blZXekE");@import url(http://fonts.googleapis.com/css?family=Special+Elite|Rancho|Qwigley|Dorsa|Mystery+Quest|Voltaire|Righteous);
63+
64-
/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */  
64+
65
 
66-
.vicarious { CSS/DIV Layout 131c // Layouts available @ http://vicarious-hs.tumblr.com/ }
66+
67
 
68
 </td></tr></table></td></tr></table></td></tr></table></div><style type="text/css">@import url("https://googledrive.com/host/0B79YHAkeE7SuTVFzeTc0blZXekE");@import url(http://fonts.googleapis.com/css?family=Special+Elite|Rancho|Qwigley|Dorsa|Mystery+Quest|Voltaire|Righteous);
69
/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */   
70
 
71
.vicarious { CSS/DIV Layout 132a // Layouts available @ http://vicarious-hs.tumblr.com/ }
72-
background-image:url(http://i.imgur.com/JVMqw13.jpg);
72+
73
/* - -DO NOT REARRANGE MY CODING.  ORDER IS IMPORTANT. - - */    
74
 
75
.vicarious{Background Properties // BODY COLOR IS IN THE COLOR PALETTE SECTION}
76
body {
77
background-image:url();
78
background-repeat:no-repeat;
79
background-position: bottom left;
80
background-attachment:fixed;
81
}
82
.vicarious{ Google Chrome Scrollbar }
83
::-webkit-scrollbar {width: 15px;}
84
::-webkit-scrollbar-track {border: 1px solid ;}
85
::-webkit-scrollbar-thumb {border: 1px solid ;}
86
 
87
.vicarious { Font Styles }
88
 
89
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em {
90
font-family: tahoma;
91
font-size: 8pt ;
92
line-height: 100% ;
93
text-decoration:none;
94
}
95
 
96
I {
97
font-size:12pt;
98
font-family: brushscript mt;
99
}
100
 
101
EM {
102
font-size:16pt;    
103
font-family: 'Qwigley', cursive;
104
}
105
 
106
.strike, strike {
107
text-decoration:line-through;
108
}
109
 
110
.u, u {
111
text-decoration:underline;
112
font-size:10pt;  
113
}
114
 
115
.strong, strong {
116
font-weight:bolder;
117
font-size:11pt;  
118
}
119
 
120
B, .B2, B2 {
121
font-weight:bold;
122
text-transform:uppercase;
123
line-height:100%;
124-
font-size:8pt;
124+
125
}
126
 
127
B {
128
font-family:georgia;
129
font-size:10pt;
130
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
131
}
132
 
133-
a.first, a.first:link, a.first:active, a.first:visited {
133+
134
font-family:copperplate gothic light;
135
font-size:7pt;
136
}
137
 
138
 
139
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited {
140-
width:100px;
140+
141
font-size:9pt;
142
text-align:left;
143
text-transform:uppercase;
144
line-height:35px;
145
height:35px;  
146
font-weight:bold;
147
text-decoration:none;
148
-webkit-transition: all 1s ease-out 0s;
149
-moz-transition: all 1s ease-out 0s;
150
-ms-transition: all 1s ease-out 0s;
151
-o-transition: all 1s ease-out 0s;
152-
margin-top:5px;
152+
153
margin:0px;
154
padding:0px;
155
display:block;
156-
a.first:hover   {
156+
157
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
158
width:93px;
159
padding-left:5px;
160
-moz-border-radius-topright: 90px;
161
-webkit-border-top-right-radius: 90px;
162
border-top-right-radius: 90px;
163
}
164
 
165-
 .h1, .h2, .h3,  .h4, .h5, .h6, .h7, .h8, .h9, h1, h2, h3, h4, h5, h6, h7, h8, h9, small, big {
165+
a.first:hover, a.second:hover    {
166-
font-family: copperplate gothic light;
166+
167
}
168
 
169
a.third, a.third:link, a.third:active, a.third:visited {
170
margin:20px 0px 0px 20px;
171
display:block;
172
}
173
 
174
 .h1, .h2, .h3,  .h4, .h5, .h6, .h7, .h8, .h9, h1, h2, h3, h4, h5, h6, h7, h8, h9, small, big, .one, one, .two, two {
175
font-family: georgia;
176
line-height:100%;
177
text-align:center;
178-
margin:5px 0px 0px;
178+
179
font-size: 11pt ;
180
padding:0px;
181
margin:0px;
182
text-decoration:none;
183
}
184
 
185-
font-family: 'Righteous', cursive;
185+
186
font-family: 'Voltaire', sans-serif;
187
font-size: 16pt ;
188
font-weight:bold;
189
text-transform:uppercase;
190-
margin:5px 0px;
190+
191
}
192-
border-left:20px solid;
192+
193-
border-right:20px solid;
193+
194
font-family:arial narrow;
195
font-weight:bold;
196
font-size:9pt;
197
text-align:left;  
198
margin-right:5px;
199
text-transform:uppercase;
200
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
201
}
202
 
203
.h3, h3 {
204
text-align:left;
205
padding:5px 0px 0px 5px;
206
line-height:120%;
207
font-size: 12pt ;
208
font-family: 'Mystery Quest', cursive;
209
border-bottom:6px solid;
210
}
211
 
212
.h4, h4 {
213
padding:5px 0px 0px 5px;
214
text-align:left;
215
font-size: 12pt ;
216
font-family: 'Voltaire', sans-serif;
217
border-bottom:2px solid;
218
}
219
 
220
.h5, h5 {
221
font-weight:bold;
222
font-size: 46pt ;  
223
letter-spacing:1pt;
224
text-align:center;
225
font-family: 'Dorsa', sans-serif;
226
}
227
 
228
.h6, h6  {
229
letter-spacing:1pt;
230
font-size:20pt;
231
text-align:center;  
232
}
233
 
234
.h7, h7  {
235
font-family: 'Rancho', cursive;
236
letter-spacing:-1pt;
237
font-size:20pt;
238
text-align:center;  
239
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
240
}
241
 
242
.h8, h8 {
243
font-family: 'Dorsa', sans-serif;
244
font-weight:bold;
245
letter-spacing:2pt;
246
font-size:18pt;
247
text-align:center;  
248
line-height:120%;
249
margin-bottom:5px;
250
}
251
 
252
small {
253
font-weight:bold;
254
font-family: 'Dorsa', sans-serif;
255
letter-spacing:3pt;
256
font-size:20pt;
257
text-align:center;  
258
text-transform:uppercase;
259
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
260
}
261
 
262
big {
263
font-family: 'Voltaire', sans-serif;
264
letter-spacing:0pt;
265
font-size:28pt;
266
text-align:center;  
267
text-transform:uppercase;
268
}
269
 
270
.one, one   {
271
font-family: 'Voltaire', sans-serif;
272
font-size: 30pt ;
273
margin-left:5px;
274
text-align:left;
275
font-weight:bold;
276
text-transform:uppercase;
277
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
278
}
279
 
280
.two, two  {
281-
.backimg, .conns, .connimg, a.first, a.third {
281+
font-family:arial narrow;
282
font-weight:bold;
283
font-size:9pt;
284
text-align:left;  
285
margin-left:275px;
286
line-height:35%;
287
text-transform:uppercase;
288
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
289-
.vicframe, .backimg, .buffer {
289+
290
 
291
 
292
.lyric, .lyric2, .lyric3, .lyric4, .lyric5, .lyric6, .lyric7, lyric, lyric2, lyric3, lyric4, lyric5, lyric6, lyric7  {
293
font-family: 'Special Elite', cursive;
294
text-decoration:none;
295
line-height:60%;
296
padding:0px;
297-
.vicframe {
297+
298
}
299
 
300
.lyric, lyric {Font-size:14pt;}  
301-
margin-top:100px;
301+
302
.lyric3, lyric3 {Font-size:13pt;}  
303
.lyric4, lyric4 {Font-size:10pt;}
304
.lyric5, lyric5 {Font-size:12pt;letter-spacing:1.8pt;}  
305
.lyric6, lyric6 {Font-size:13pt;}  
306
.lyric7, lyric7 {Font-size:15pt;letter-spacing:1pt;}    
307
 
308
.vicarious { Cross Commons }
309
 
310-
margin-left:-50px;
310+
.backimg, .conns, .connimg,  a.third, .line, .line2, .line3, .name  {
311-
margin-top:100px;
311+
312
-moz-box-shadow:    2px 2px 5px rgba(0, 0, 0, 0.75);
313
box-shadow:         2px 2px 5px rgba(0, 0, 0, 0.75);  
314
}
315
 a.first, a.second{
316-
margin-top:50px;
316+
317-
margin-left:20px;
317+
318
box-shadow:         2px 2px 5px rgba(0, 0, 0, 0.75);  
319
}
320
 
321-
.bottom, .top  {
321+
322-
position:fixed;  
322+
323
 
324-
z-index:10000;  
324+
.vicframe2, .backimg, .top, .name, .linkback1, .linkback2, .line, .middle, .topline, .line2, .line3, .bottom  {
325
left:50%;
326
top:0%;
327
position:absolute;  
328
overflow:hidden;
329-
right:0%;
329+
330-
bottom:0%;
330+
331-
height:40px;
331+
332-
width:50%;
332+
333-
margin-right:0px;
333+
height:30px;
334-
margin-bottom:0px;
334+
335-
-moz-border-radius-topleft: 90px;
335+
336-
-webkit-border-top-left-radius: 90px;
336+
margin-top:780px;
337-
 border-top-left-radius: 90px;
337+
padding-top:10px;
338
text-align:right;
339-
padding-top:15px;
339+
340-
border:2px solid;
340+
341
.vicframe2 {
342
height:700px;
343-
.top    {
343+
344-
left:0%;
344+
345
margin-top:135px;
346
text-align:left;
347-
width:95%;
347+
348
 
349-
margin-top:0px;
349+
.linkback1, .linkback2 {
350-
 -moz-border-radius-bottomright: 90px;
350+
height:35px;
351-
-webkit-border-bottom-right-radius: 90px;
351+
margin-top:135px;
352-
border-bottom-right-radius: 90px;
352+
353
margin-left:-500px;
354-
border:2px solid;
354+
-moz-border-radius-topright: 90px;
355
-webkit-border-top-right-radius: 90px;
356
border-top-right-radius: 90px;
357-
.hbox1 {
357+
358
 
359
.linkback1 {
360-
line-height:150px;
360+
width:585px;  
361
}
362
 
363-
font-size:25px;
363+
.linkback2 {
364
width:1000px;
365
}
366
 
367-
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
367+
.line {
368-
filter: alpha(opacity=0);
368+
height:10px;
369-
opacity: 0;
369+
370
margin-left:-500px;
371
margin-top:170px;
372
border-bottom:20px solid;
373
}
374
 
375
.backimg {
376
background-position:top right;
377-
.Hbox1:hover  {
377+
378-
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
378+
379-
filter: alpha(opacity=100);
379+
380-
opacity: 1;
380+
381
margin-top:200px;
382
}
383
  
384
.viccontrol {
385
margin-left:0px;
386-
width:210px;
386+
387
}
388
 
389
.top, .middle    {
390
background-position:top right;
391
background-repeat:repeat;
392
width:1000px;
393
margin-left:-500px;
394
text-align:left;
395
}
396
 
397
.top     {
398-
.innerbox {
398+
height:100px;
399
margin-top:75px;
400
}
401
 
402
.line2, .line3 {
403-
margin:25px;  
403+
404
margin-left:-500px;
405
height:20px;
406-
.buffer{
406+
407-
background-color:transparent;
407+
408-
height:60px;
408+
.line2 {
409
margin-top:700px;
410
}
411-
margin-top:610px;
411+
412
.line3 {
413
margin-top:755px;
414
}
415
 
416
.middle    {
417
height:35px;
418
margin-top:720px;
419
}
420-
.innerbox { background-color:191919;}
420+
421-
.conns { background-color:121212;}
421+
.name   {
422-
.hbox1 { color: a0a0a0; background-color:121212;}
422+
padding-top:20px;
423-
.bottom, .top  {background-color:730001; border-color:000000;}
423+
424-
.vicframeimg a {background-color:730001;}
424+
425
margin-left:-500px;
426-
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em  { color:333333; }
426+
text-align:left;  
427
} 
428-
EM { color:9d0001; }
428+
429-
B { color:5e5e5e; }
429+
.ALeft{
430-
.B2, B2 { color:6f0001; }
430+
float:left;
431-
.strong, strong { color:e6e6e6; }
431+
432-
.u, u { color:383b3e; }
432+
margin:25px;
433
padding:25px;
434-
a.first, a.first:link, a.first:active, a.first:visited  { color:ffffff; }
434+
435-
a.first:hover  { color:2a0000;  }
435+
436
}
437-
.h1, h1  { color:6d0001; border-color:222222;  }
437+
438-
.h2, h2  { color:ffffff; background-color:222222;  border-color:730001;  }
438+
.ARight{
439
float:right;
440
width:500px;
441
height:500px;
442
overflow:hidden;
443-
.h7, h7  { color:dadada; background-color:730001;   }
443+
} 
444
 
445
.conns {
446
text-align:justify;
447-
small { color:c3c3c3; background-color:730001;   }
447+
width:235px;
448
height:150px;
449
padding:0px 5px;
450-
.lyric2, lyric2 { color:720302;   }
450+
451
}
452
 
453
.connimg {
454-
.lyric6, lyric6 { color:730001;   }
454+
455
height:150px;
456
overflow:hidden;
457
}
458
 
459
 
460
.vicarious{ Color Palette}
461
 
462
body { background-color:161616; }
463
 
464
::-webkit-scrollbar-track {background-color:000000 ; border-color:222222;}  
465
::-webkit-scrollbar-thumb {background-color:303030; border-color:222222 ;}
466
 
467
.conns, .middle, .top, .topline {background-color:121212; }
468
.vicframe2img a {background-color:222222;}
469
.linkback1 {background-color:333333; }
470
.linkback2 {background-color:404040; border-color:404040;}
471
.line {  background-color:262626; border-color:444444; }
472
.line2, .line3  {  background-color:333333;  }
473
.name,  .bottom {  background-color:333333;  }
474
.ALeft, .ARight {background-color:121212;}
475
 
476
 
477
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em  { color:383838; }
478
I { color:979797; }
479
EM { color:dedede; }
480
B { color:6a6a6a; }
481
.B2, B2 { color:555555; }
482
.strong, strong { color:cdcdcd; }
483
.u, u { color:444444; }
484
 
485
 
486
a.first, a.first:link, a.first:active, a.first:visited { color:cbcbcb; background-color:333333; }
487
a.second, a.second:link, a.second:active, a.second:visited { color:cbcbcb; background-color:404040; }
488
a.first:hover, a.second:hover    { color:0a0a0a;  }
489
.h1, h1 { color:d2d2d2;background-color:222222; }
490
.one, one  { color:d2d2d2;background-color:transparent; }
491
.h2, h2, .two, two  { color:868686; background-color:transparent;  }
492
.h3, h3  { color:666666; background-color:222222; border-color:444444; }
493
.h4, h4  { color:8e8e8e; background-color:161616; border-color:333333;  }
494
.h5, h5  { color:7a7a7a; background-color:222222;   }
495
.h6, h6 { color:888888;   }
496
.h7, h7  { color:d2d2d2; background-color:424242;   }
497
.h8, h8  { color:555555; background-color:121212;   }
498
 
499
big { color:454545;   }
500
small { color:c3c3c3; background-color:424242;   }
501
 
502
.lyric, lyric { color:444444;   }
503
.lyric2, lyric2 { color:7a7a7a;   }
504
.lyric3, lyric3 { color:cecece;   }
505
.lyric4, lyric4 { color:333333;   }
506
.lyric5, lyric5 { color:666666;   }
507
.lyric6, lyric6 { color:7a7a7a;   }
508
.lyric7, lyric7 { color:c4c4c4;   }
509
 
510
/* - - CSS!! NO TOUCHY!!! - - */  
511-
</td></tr></table></td></tr></table></td></tr></table></div><DIV class="vicholder"><div class="top"><TABLE><TR>
511+
512
img {border:0px;}
513-
<TD><a CLASS="FIRST" href="/logincomplete.php">Home</a></TD>
513+
514-
<TD><a class="first" href="/invite_friend.php?friend_id=xxxxxx">Add</a></TD>
514+
515-
<TD><a class="first" href="/send_message.php?member_id=xxxxxx">Message</a></TD>
515+
516-
<TD><a class="first" href="/add_testimonial.php?member_id=xxxxxx">Comment</a></TD>
516+
517-
<TD><a class="first" href="/gallery.php?member_id=xxxxxx">Photos</a></TD>
517+
518-
<TD><a class="first" href="/view_member_blog.php?member_id=xxxxxx">Blogs</a></TD>
518+
519
 div.profileWidth {margin-top: -30px !important;}
520
 div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}
521
 div.profileWidth div.clearfix, hidenav hidenav hidenav,
522-
</TR></TABLE></div>  
522+
523
 div.profileWidth div.clearfix {position:relative; top:30px}
524-
<div class="backimg" style="background-image:url(http://i.imgur.com/KhaNsPW.png);"></div>
524+
525
table table table embed,  .vicholder div embed {position:static !important; width:auto; height:auto; }
526-
<div class="vicframe"><div class="viccontrol"><TABLE><TR>
526+
527
.vicsc { display:none; }
528-
<TD><a class="third" href="#stats" style="background-image:url(http://i.imgur.com/mQE9knu.png);">
528+
529-
<div class="hbox1">Stats</div></a></TD>
529+
530-
<TD><a class="third" href="#about" style="background-image:url(http://i.imgur.com/3AvjEEJ.png);">
530+
531-
<div class="hbox1">About</div></a></TD>
531+
532-
</tr><tr>
532+
533-
<TD><a class="third" href="#mains" style="background-image:url(http://i.imgur.com/ZkOqEHp.png);">
533+
534-
<div class="hbox1">Mains</div></a></TD>
534+
535-
<TD><a class="third" href="#info" style="background-image:url(http://i.imgur.com/oKITUdh.gif);">
535+
536-
<div class="hbox1">Info</div></a></TD>
536+
537-
</TR></TABLE></div>  
537+
538-
       
538+
539-
<div class="vicframeimg"><a id="stats" href="#">
539+
540
.friendsComments { display:none; }
541-
<div class="innerbox">
541+
542
.blurbs {display: none;}
543
.contactTable {display: none;}
544
.latestBlogEntry {display: none;}
545
.extendedNetwork {display: none;}
546
.interestsAndDetails {display: none;}
547
.userprofiledetail {display: none;}
548
.userAlbums { display:none; }
549
.whitetext12{visibility:hidden; display:none;}
550
.orangetext15{visibility:hidden; display:none;}
551
.lightbluetext8{visibility:hidden; display:none}
552
table table table table td {width:0px;}
553
.contactTable td, table table td.text table td,table table table table table td {width:auto;}
554
.profile { display:none !important;visibility:hidden!important; }
555
table tr td[id='footerWarpper']{display:none !important;visibility:hidden!important;}
556
 
557
 
558
</style>
559
 
560
<div style="display:none;"><table><tr><td><table><tr><td><table><tr><td>
561
-----------------------------LIKE TO MEET---------------------------------
562
563
  
564
565
</td></tr></table></td></tr></table></td></tr></table></div><DIV class="vicholder"> 
566
<div class="top" style="background-image:url(http://i41.tinypic.com/2j3jswz.jpg);"></div> 
567
 
568
<div class="backimg" style="background-image:url(http://i.imgur.com/5T4omv0.png);"></div>
569
570
<div class="Name">
571
<font class="one">Character Name Here</font>
572
<font class="two">Character tagline here</font>
573
</div>
574
 
575
<div class="linkback2"></div><div class="linkback1"></div><div class="line"></div><div class="vicframe2"><div class="viccontrol">
576
577
<TABLE><TR>
578
<TD><a CLASS="FIRST" href="/logincomplete.php"><b>⇛</b> Home</a></TD>
579
<TD><a CLASS="FIRST" href="/invite_friend.php?friend_id=xxxxxx"><b>⇛</b> Add</a></TD>
580
<TD><a CLASS="FIRST" href="/send_message.php?member_id=xxxxxx"><b>⇛</b> Message</a></TD>
581
<TD><a CLASS="FIRST" href="/add_testimonial.php?member_id=xxxxxx"><b>⇛</b> Comment</a></TD>
582
<TD><a CLASS="FIRST" href="/gallery.php?member_id=xxxxxx"><b>⇛</b> Photos</a></TD>
583
<TD><a CLASS="FIRST" href="/view_member_blog.php?member_id=xxxxxx"><b>⇛</b> Blogs</a></TD>
584
<TD><a class="second" href="#stats"><b>⇛</b> Stats</a></td>
585
<TD><a class="second" href="#about"><b>⇛</b> About</a></td>
586
<TD><a class="second" href="#mains"><b>⇛</b> Mains</a></td>
587
<TD><a class="second" href="#info"><b>⇛</b> Info</a></td>
588
</TR></TABLE>
589
590
</div><div class="vicframe2img"><a id="stats" href="#"><div class="ALeft">
591
592-
</div></a><a id="about" href="#"><div class="innerbox">
592+
593
<BR><b>NAME:</b> Input info
594
<BR><b>NICKNAMES:</b> Input info
595-
<p><small>The background images</small>
595+
596
<BR><b>DATE OF BIRTH:</b> Input info
597-
<p>The TRUE 'background' image of this layout is the AHS logo on the lower lefthand side.  You can replace it, but as to size, just make it something small if you want it to be in the corner as it is here.  No larger than 250px height by 500px width should be good, but every monitor will be different.
597+
598
<BR><b>CURRENT RESIDENCE:</b> Input info
599-
<p>The secondary background image is the image of Tate.  Scroll back up in Like to Meet and you will see backimg div class with the background-img:url() style.  The image in this section is 500px width by 500px height.  
599+
600
<p><font class="h3">Physical</font>
601
<BR><b>ETHNICITY:</b> Input info
602-
<p><small>Control Panel images & Connection Images</small>
602+
603-
<p>All of these images are 150px height by 150px width
603+
604
<BR><b>HEIGHT:</b> Input info
605
<BR><b>WEIGHT:</b> Input info
606
<BR><b>BIRTHMARKS/SCARS:</b> Input info
607
 
608
<p><font class="h3">Personality</font>
609
<BR><b>Traits:</b> Input Info
610
<BR><b>Disorders:</b> Input Info
611
<BR><b>Addictions:</b> Input Info
612
<BR><b>Likes:</b> Input Info
613
<BR><b>Dislikes:</b> Input Info
614
<BR><b>Quirks:</b> Input Info
615
 
616
<p><font class="h3">Education</font>
617
<BR><b>High School</b> Input Info
618
<br><b>College</b> Input Info
619
<br><b>Major</b> Input Info
620
<br><b>Degree</b> Input Info
621
 
622
<p><font class="h3">Employment</font>
623
<BR><b>OCCUPATION:</b> Input info
624
<BR><b>JOB DESCRIPTION:</b> Input info
625
<BR><b>EMPLOYER:</b> Input info
626
<BR><b>SKILLSET:</b> Input info
627
 
628
<p><font class="h3">Family</font>
629
<BR><b>MOTHER:</b> Input info
630
<BR><b>FATHER:</b> Input info
631
<BR><b>SISTER(S):</b> Input info
632
<BR><b>BROTHER(S):</b> Input info
633
<BR><b>Other Family:</b> Input info
634-
<small>Small</small> 
634+
635
<p><font class="h3">Relationships</font>
636
<BR><b>SEXUAL ORIENTATION:</b> Input info
637
<BR><b>RELATIONSHIP STATUS:</b> Input info
638
<BR><b>CURRENT RELATIONSHIP(S):</b> Input info
639
<BR><b>PAST RELATIONSHIP(S):</b> Input info
640
641
642-
</div></a><a id="mains" href="#"><div class="innerbox"> 
642+
</div><div class="ARight">
643
644
<img src="http://i.imgur.com/2wZf135.png">
645
646
</div></a><a id="about" href="#"><div class="ALeft">
647
648
649
<p><small>Images</small>
650
 
651
<p>The banner image is 1000px width by 500px height.
652
<p>The side images of Jax are 500px with by 500px height.
653-
<img class="connimg" src="http://i.imgur.com/0YABRWA.png">
653+
<p>The connection images are 150px width by 150px height.
654
<P>The repeating 'dot' images in div IDs TOP and MIDDLE do not need to be altered unless you want a different background image there.
655
<BR><BR>
656
657
<font class="h1">Header1</font>
658
<font class="h2">Header2</font>
659
<font class="h3">Header3</font>
660-
<img class="connimg" src="http://i.imgur.com/HzGXrvR.png">
660+
661
<font class="h5">Header5</font>
662
<font class="h6">Header6</font>
663
<font class="h7">Header7</font>
664
<font class="h8">Header8</font>
665
 
666
<font class="lyric">Line 1 of lyrics</font>
667
<font class="lyric2">Line 2 of lyrics</font>
668
<font class="lyric3">Line 3 of lyrics</font>
669
<font class="lyric4">Line 4 of lyrics</font>
670
<font class="lyric5">Line 5 of lyrics</font>
671
<font class="lyric6">Line 6 of lyrics</font>
672-
<img class="connimg" src="http://i.imgur.com/qJJMtNf.png">
672+
673
 
674
<BR><B>Bold</b> <i> Italic</i> <em>Emphasized text</em>
675
 
676
<BR>For the below text font classes and all of the headers (1, 2, 3, etc) and lyrics, please note the following:  I code for ALL sites.  Not every website will allow headers to be placed as h1 etc between < these > brackets.  For that reason, I turn them into font classes with a period in front and script them as I have done below.  If you are on a website that allows regular header, underline, strong, etc coding, you can just use regular header coding for all of the header, lyric, special text labels OR just leave them as they are.  They will work for you either way.  SEE THE INSTRUCTIONS FOR THIS LAYOUT FOR SPECIFIC DETAILS AND EXAMPLES.
677
<BR><BR>
678-
<img class="connimg" src="http://i.imgur.com/tIeBizf.png">
678+
679
<font class="strong">Strong</font>
680
<font class="strike">Strike</font>
681
<font class="u">Underline</font>
682
 
683
<BR><BR>I have also included the below two special text classes that are fine as is and need no modification on any site.
684
 
685
<big>big</big>
686
<small>Small</small>
687
 
688
 
689
</div><div class="ARight">
690-
<img class="connimg" src="http://i.imgur.com/e1ZFzoI.png">
690+
691
<img src="http://i.imgur.com/J8JpY5p.png">
692
693
</div></a><a id="mains" href="#"><div class="ALeft">
694
 
695-
<img class="connimg" src="http://i.imgur.com/HKavyw8.png">
695+
696
<font class="h4">Connection Name Here</font>
697
<p>Pics are linked to the user's profile.  Make sure to put in their friend ID number.
698
<p>Each connection table starts with a Table tag(Table with < and > around it) and ends with a page break (BR with < and > around it).  
699
<p>I have separated these full tables with spaces so you can see where one starts and the next begins.  If you need more connections, just copy the full table and past it below the last connection table in this section.  
700
<P>This first table has the image on the right side.  The second table will have the image on the left side.  When you add a table for another connection, be sure to pick what type of table will come next (left or right image).
701
</div></td><td>
702
<a href="/FriendID">
703
<img class="connimg" src="http://i.imgur.com/tbyMOxW.jpg">
704
</a></td></tr></table><BR> 
705
 
706-
<img class="connimg" src="http://i.imgur.com/tjM8QJY.png">
706+
707
<a href="/FriendID">
708
<img class="connimg" src="http://i.imgur.com/qS6zU4G.jpg">
709
</a></td><td><div class="conns">
710
<font class="h4">Connection Name Here</font>
711-
</div></a><a id="info" href="#"><div class="innerbox">
711+
712
</div></td></tr></table><BR> 
713
 
714
<table><tr><td><div class="conns">
715
<font class="h4">Connection Name Here</font>
716
<p>Text.
717
</div></td><td>
718
<a href="/FriendID">
719
<img class="connimg" src="http://i.imgur.com/W91P7N3.jpg">
720
</a></td></tr></table><BR> 
721
 
722
<table><tr><td>
723
<a href="/FriendID">
724
<img class="connimg" src="http://i.imgur.com/mK2zDiu.jpg">
725
</a></td><td><div class="conns">
726
<font class="h4">Connection Name Here</font>
727
<p>Text.
728
</div></td></tr></table><BR>
729
 
730
<table><tr><td><div class="conns">
731
<font class="h4">Connection Name Here</font>
732
<p>Text.
733
</div></td><td>
734
<a href="/FriendID">
735
<img class="connimg" src="http://i.imgur.com/w2u3L6E.jpg">
736
</a></td></tr></table><BR>
737
  
738-
</div></a></div></div><div class="bottom">
738+
739
<a href="/FriendID">
740
<img class="connimg" src="http://i.imgur.com/eNfTeMy.jpg">
741
</a></td><td><div class="conns">
742-
    <param name="bgcolor" value="#730001" />
742+
743-
    <param name="FlashVars" value="mp3=http%3A//k004.kiwi6.com/hotlink/iu2l8vxzp6/type_0_negative_-_wolf_moon_www.mp3fiber.com_.mp3&amp;autoplay=1&amp;bgcolor=730001&amp;loadingcolor=ffffff&amp;slidercolor=ffffff" />
743+
744
</div></td></tr></table><BR>
745
 
746-
</div><div class="buffer"></div></div><div class="ficsc"><table><tr><td><table><tr><td><table><tr><td>
746+
747
<font class="h4">Connection Name Here</font>
748
<p>Text.
749
</div></td><td>
750
<a href="/FriendID">
751
<img class="connimg" src="http://i.imgur.com/T5lqgOc.jpg">
752
</a></td></tr></table><BR>
753
  
754
<table><tr><td>
755
<a href="/FriendID">
756
<img class="connimg" src="http://i.imgur.com/wFOKoqm.jpg">
757
</a></td><td><div class="conns">
758
<font class="h4">Connection Name Here</font>
759
<p>Text.
760
</div></td></tr></table><BR>
761
  
762
<table><tr><td><div class="conns">
763
<font class="h4">Connection Name Here</font>
764
<p>Text.
765
</div></td><td>
766
<a href="/FriendID">
767
<img class="connimg" src="http://i.imgur.com/AYbgvNv.jpg">
768
</a></td></tr></table><BR>
769
 
770
 
771
 
772
</div><div class="ARight">
773
774
<img src="http://i.imgur.com/cZOQSJT.png">
775
776
777
</div></a><a id="info" href="#">  <div class="ALeft">
778
 
779
<p><font class="h1">Verses</font>
780
<BR>Verse 1, Verse 2, Verse 3, Verse 4
781
 
782
 
783
<p><font class="h1">Notations</font>
784
<br>Multi-para to novella only?
785
<br>Third person POV format?
786
<BR>Role play in comments only?
787
<Br>Put a couple of notations here.
788
 
789
 
790
<p><font class="h1">Obligations</font>
791
<br>Owe _________ a starter
792
<br>Owe _________ a comment
793
 
794
 
795
<p><font class="h1">Contact Info</font>
796
<br>AIM: ___________
797
<BR>YAHOO: ____________
798
799
800
</div><div class="ARight">
801
802
<img src="http://i.imgur.com/8XWW4SC.png">
803
804
805
</div></a></div></div><div class="middle" style="background-image:url(http://i41.tinypic.com/2j3jswz.jpg);"></div><div class="line2"></div><div class="line3"></div><div class="bottom">
806
807
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
808
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
809
    <param name="bgcolor" value="#333333" />
810
    <param name="FlashVars" value="mp3=http%3A//k002.kiwi6.com/hotlink/g0h2z6gnfn/this_life_sons_of_anarchy_theme_song_full_www.mp3fiber.com_.mp3&amp;autoplay=1&amp;bgcolor=333333&amp;loadingcolor=000000&amp;buttoncolor=000000&amp;slidercolor=000000" />
811
</object>
812
813
814
</div> </div><div class="ficsc"><table><tr><td><table><tr><td><table><tr><td>