View difference between Paste ID: b6qm1Pmj and PQtjNJEX
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
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
13
14
ELITEROLEPLAYERS.NET USERS:  PLEASE BE SURE TO READ THE SPECIAL INSTRUCTIONS BEFORE COMING TO ME WITH QUESTIONS REGARDING TABLE ALIGNMENT 
15
16
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
17
18
19
20
............................
21
MUSIC PLAYER
22
 
23
REPLACE MY MUSIC PLAYER WITH YOUR OWN.  
24
 
25
............................
26
27
............................
28
MASTHEAD BANNER
29
 
30
The banner is located at the END of ABOUT ME.  Replace my link with your link to your uploaded image.
31
 
32
............................
33
34
HOVER PICS
35
36
To Change the hover over pics/icons, locate div style classes like the below and replace the http address with a DIRECT link to your uploaded photo image:
37
38
<div class="hbox1" style="background-image:url(http://......);">
39
 
40
41
.......................................
42
43
CONNECTION ICON PICS
44
 
45
There is no magic to this set-up for image replacement.  You will see <img src="http//:..."> for each icon pic.  Just put your url to your uploaded pic in place of mine.
46
 
47
.......................................
48
 
49
PARAGRAPH - SPECIAL
50
 
51
Paragraph first letter and first line:
52
 
53
If you don't want the color to change for the first line of your paragraph, just delete this from the Color Palette near the end of About ME:
54-
p:first-line {color:898c92;}
54+
p:first-line {color:7c6b77;}
55
 
56
If you don't want any adjustments to the first line and letter of the paragraph, remove this from the Font Styles in About Me:
57
p:first-letter {font-size:15pt;}
58
p:first-line {font-size:10pt;}
59
 
60
.......................................
61
 
62
 FOR ROLEPLAYER.ME USERS:
63
 
64
For the below text font classes and all of the headers (1, 2, 3, etc) and lyrics, please note the following:  
65
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.  
66
 
67
<font class="h1">Header 1</font>
68
 
69
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:
70
<h1>Header</h1> <strike>Strike</strike> etc..
71
 
72
OR just leave them as they are.  They will work for you either way.  
73
 
74
 
75
76
!!!!!!!!!!!!!!!!!!!!SPECIAL INSTRUCTIONS!!!!!!!!!!!!!!!!!!!!!!!!!
77
!!!!!!!!!!!!!!!!!!FOR ELITERPERS.NET USERS ONLY!!!!!!!!!!!!!!!!!!
78
79
The tables will be a bit off on Elite.  You will need to adjust the following:
80
81
Find the below NEAR the TOP of About Me and change the top and left marker as notated below (MAKE SURE you have the right one for INTERESTS and NOT Like to Meet)
82
83
.vicarious{Interests Tables Placement (Up/Down/Left/Right) Codes}
84
object, embed, table table table { position:relative; top:-20px; left:10px;}
85
table table table table{border:0px; position:static;}
86
 
87
(CONTINUED FOR ELITERPERS.NET ONLY) If you use Google Chrome more so than FF, NOW adjust the LIKE TO MEET table placement for LEFT as such:
88
89
.vicarious{Like To Meet Tables Placement (Up/Down/Left/Right) Codes}
90
td.text table {position:relative; top:-20px; left:-4px;  }
91
td.text object, td.text embed, td.text table table {position:static;}
92
 
93
!!!!!!!!!!!!!!! END SPECIAL INSTRUCTIONS !!!!!!!!!!!!!!!
94
95
96
97
98
///////////////////////////////////////////////////
99
_______________________________________________
100
 
101
 
102
 
103
 
104
                        Don't forget to replace the XXXXX with your friend ID number.
105
 
106
                                                     (>‿◠)✌
107
 
108
 
109
                *****************************SAVE YOUR WORK AS YOU GO.*******************************
110
 
111
 
112
 
113
                               
114
 
115
DO NOT REMOVE THE .VICARIOUS MARKERS FROM ANY VICARIOUS LAYOUT.  
116
 
117
-----------------------------ABOUT ME---------------------------------
118
 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
119
120
 <style type="text/css">@import url("https://googledrive.com/host/0B79YHAkeE7SuSjRYNk1ucE5hUW8 ");@import url(http://fonts.googleapis.com/css?family=Special+Elite|Rancho|Qwigley|Dorsa|Mystery+Quest|Voltaire|Righteous&effect=decaying);
121
122
/* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */  
123-
.vicarious { LAYOUT 134a // Layouts available @ http://vicarious-hs.tumblr.com/ }
123+
.vicarious { LAYOUT 134c // Layouts available @ http://vicarious-hs.tumblr.com/ }
124
/* - -DO NOT REARRANGE MY CODING!! ORDER IS IMPORTANT! - - */
125
126
.vicarious{ Background Properties }
127
body {
128
width:100%;
129
height:100%;
130
background-image: url("");
131
background-attachment:fixed;
132
background-repeat:no-repeat;
133
background-position:center center;
134
}
135
 
136
.vicarious { Table Properties }
137
table, tr, td { background-color:transparent; border:0;}
138
table table {
139
background-color:transparent;
140
border-left:0px double #000000 ;
141
border-right:0px double #000000;
142
}
143
 
144
table table table  { background-color:transparent; display: inline-table; border:0px solid; }
145
 
146
147
.vic_table {
148
padding:5px;
149
margin-bottom:5px;
150
border:1px solid ; }
151
.vic_table tr { margin:0px; }
152
.vic_table td { margin:0px; width:100%; }   
153
154
.vicarious{Like To Meet Tables Placement (Up/Down/Left/Right) Codes}
155
td.text table {position:relative; top:-20px; left:-9px;  }
156
td.text object, td.text embed, td.text table table {position:static;}
157
 
158
.vicarious{Interests Tables Placement (Up/Down/Left/Right) Codes}
159
object, embed, table table table { position:relative; top:0px; left:0px;}
160
table table table table{border:0px; position:static;}
161
 
162
.vicarious{ Google Chrome Scrollbar }
163
::-webkit-scrollbar {width: 10px;}
164
::-webkit-scrollbar-track {border: 1px solid ;}
165
::-webkit-scrollbar-thumb {border: 1px solid ;} 
166
 
167
.vicarious { Font Styles }
168
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em  {
169
font-family: tahoma;
170
font-size: 8pt ;
171
line-height: 90% ;
172
text-decoration:none;
173
}
174
 
175
P { text-align:justify; }
176
p:first-letter {font-size:15pt;}
177
p:first-line {font-size:10pt;}
178
 
179
I {
180
font-size:12pt;
181
font-family: brushscript mt;
182
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
183
}
184
 
185
EM {
186
font-size:16pt;    
187
font-family: 'Qwigley', cursive;
188
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);  
189
}
190
 
191
.strike, strike {
192
text-decoration:line-through;
193
}
194
 
195
.u, u {
196
text-decoration:underline;
197
font-size:10pt;  
198
}
199
 
200
.strong, strong {
201
font-weight:bolder;
202
font-size:11pt;  
203
}
204
 
205
B, .B2, B2, .B3, B3, .B4, B4 {
206
font-family:copperplate gothic light;
207
font-size:7pt;
208
font-weight:bold;
209
text-transform:uppercase;
210
line-height:100%;
211
letter-spacing: 0pt;
212
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
213
}
214
 
215
B{
216
font-family:georgia;
217
}
218
 
219
.B2, B2  {  
220
letter-spacing:1pt;
221
} 
222
 
223
.B3, B3 {  
224
font-size:9pt;  
225
letter-spacing:1pt;
226
} 
227
228
.B4, B4 {  
229
font-size:13pt;  
230
letter-spacing:2pt;
231
} 
232
 
233
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited, a.cons, a.cons:link, a.cons:active, a.cons:visited {
234
font-family: 'Voltaire', sans-serif;
235
font-size:15pt;
236
text-align:center;
237
text-transform:uppercase;
238
display:block;
239
font-weight:bold;
240
text-decoration:none;
241
-webkit-transition: all 0.6s ease-out;
242
-moz-transition: all  0.6s ease-out;
243
-ms-transition: all  0.6s ease-out;
244
-o-transition: all  0.6s ease-out;
245
transition: all  0.6s ease-out;
246
margin-bottom:2px;
247
padding:0px;
248
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);  
249
}
250
251
a.first, a.first:link, a.first:active, a.first:visited{ width:46px; line-height:35px;height:35px;}
252
a.first:hover { font-size:25pt; text-decoration: line-through;  }
253
a.second, a.second:link, a.second:active, a.second:visited { line-height:50px;height:50px; width:50px; } 
254
a.cons, a.cons:link, a.cons:active, a.cons:visited {font-size:8pt;letter-spacing:2pt;line-height:100%; text-align:right; padding-right:5px;}
255
a.cons:hover {letter-spacing:1pt;}
256
257
.h1, .h2, .h3,  .h4, .h5, .h6, .h7, .h8, .h9, h1, h2, h3, h4, h5, h6, h7, h8, h9, small, big {
258
font-family: copperplate gothic light;
259
line-height:100%;
260
text-align:center;
261
display:block;
262
font-size: 11pt ;
263
padding:0px;
264
margin:0px;
265
text-decoration:none;
266
}
267
 
268
.h1, h1   {
269
font-family: 'Mystery Quest', cursive;
270
font-size: 12pt ;
271
margin:5px 0px ; 
272
border-bottom:2px solid;
273
font-weight:bold;
274
}
275
 
276
.h2, h2  {
277
font-family: 'Voltaire', sans-serif;
278
letter-spacing:1pt;
279
font-size:24pt; 
280
line-height:160%;
281
text-transform:uppercase;
282
}
283
 
284
.h3, h3 {
285
font-family: 'Rancho', cursive;
286
text-align:left;
287
padding-left:5px;
288
margin-top:10px;
289
font-size: 12pt ;
290
}
291
 
292
.h4, h4 {
293
font-family: 'Voltaire', sans-serif;
294
font-weight:bold;
295
text-align:left;
296
font-size: 10pt ;
297
border-bottom:2px solid;
298
margin-top:5px;
299
}
300
 
301
.h5, h5 {
302
font-family: 'Dorsa', sans-serif;
303
font-weight:bold;
304
font-size: 46pt ;  
305
letter-spacing:1pt; 
306
}
307
 
308
.h6, h6  {
309
letter-spacing:1pt;
310
font-size:20pt; 
311
}
312
 
313
.h7, h7  {
314
font-family: 'Mystery Quest', cursive;
315
text-transform:uppercase;
316
letter-spacing:-1pt;
317
font-size:20pt; 
318
}
319
 
320
.h8, h8 {
321
font-weight:bold;
322
font-family: 'Dorsa', sans-serif;
323
letter-spacing:2pt;
324
font-size:18pt; 
325
margin:5px 0px;
326
}
327
 
328
small {
329
font-family: 'Dorsa', sans-serif;
330
letter-spacing:0pt;
331
font-size:12pt; 
332
text-transform:uppercase;
333
}
334
 
335
big {
336
font-family: 'Righteous', cursive;
337
letter-spacing:0pt;
338
font-size:28pt; 
339
text-transform:uppercase;
340
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);  
341
}
342
 
343
.lyric, .lyric2, .lyric3, .lyric4, .lyric5, .lyric6, .lyric7, lyric, lyric2, lyric3, lyric4, lyric5, lyric6, lyric7  {
344
font-family: 'Special Elite', cursive;
345
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
346
text-decoration:none;
347
padding:0px;
348
margin:0px;
349
display:block;
350
text-align:center;
351
line-height:60%;
352
}
353
 
354
.lyric, lyric {Font-size:14pt; text-align:left; margin-left:5px;margin-top:5px;line-height:60%;}      
355
.lyric2, lyric2 {Font-size:12pt;line-height:35%;}  
356
.lyric3, lyric3 {Font-size:13pt;text-align:right; margin-right:5px;line-height:85%;}  
357
.lyric4, lyric4 {Font-size:13pt;text-align:left; margin-left:5px;} 
358
.lyric5, lyric5 {Font-size:12pt;letter-spacing:1.8pt;}  
359
.lyric6, lyric6 {Font-size:13pt;text-align:left; margin-left:5px;line-height:100%;}  
360
.lyric7, lyric7 {Font-size:15pt;letter-spacing:1pt;text-align:right; margin-right:5px; margin-bottom:5px;}     
361
362
.vicarious{ Img / Div  Style Classes}
363
 
364
.img1  {margin:5px 0px; width:82px; height:82px; overflow:hidden; }  
365
.img2  {width:100px; height:100px; overflow:hidden; }  
366
367
.VC   { 
368
width:265px; 
369
height:220px; 
370
overflow:auto; 
371
padding-left:10px;
372
padding-right:5px;
373
text-align:justify;
374
}
375
376
.vicframe   { 
377
width:500px; 
378
height:225px;
379
text-align:center;
380
background-position:top right; 
381
background-repeat:no-repeat;
382
}  
383
 
384
.viccontrol { margin-left:0px;overflow:hidden; width:215px;}
385
386
.leftside {
387
height:100%;
388
width:50px; 
389
position:fixed;  
390
overflow:none;
391
z-index:1000;  
392
-webkit-transition: all 0.5s linear 2s;
393
-moz-transition: all  0.5s linear 2s;
394
-ms-transition: all  0.5s linear 2s;
395
-o-transition: all  0.5s linear 2s;
396
transition: all  0.5s linear 2s;
397
top:0%; 
398
left:0%;
399
margin-top:10px;  
400
margin-left:-490px; 
401
}  
402
 
403
404
body:hover .leftside {
405
margin-left:0px;
406
-webkit-transition: all 0.5s linear 0s;
407
-moz-transition: all  0.5s linear 0s;
408
-ms-transition: all  0.5s linear 0s;
409
-o-transition: all  0.5s linear 0s;
410
transition: all  0.5s linear 0s;
411
}  
412
413
.about{
414
width:415px;
415
height:130px;
416
overflow:auto; 
417
padding:5px;
418
text-align:justify;
419
}
420
421
.statsL {
422
float:left; 
423
width:200px; 
424
height:220px; 
425
overflow:hidden;
426
}
427
428
.statsR {
429
float:right; 
430
width:215px; 
431
height:220px; 
432
overflow:auto;
433
text-align:left;
434
}
435
436
.pers {
437
width:210px; 
438
height:75px; 
439
overflow:auto; 
440
text-align:left;
441
margin-bottom:5px;
442
}
443
444
.music {
445
width:210px; 
446
height:20px; 
447
overflow:hidden; 
448
text-align:center; 
449
}
450
451
.hbox1 {
452
width:150px;
453
height:150px; 
454
overflow:hidden;
455
margin:10px 5px;
456
}
457
458
.hbox1a {
459
width:140px;
460
height:140px; 
461
padding:5px;
462
overflow:hidden;
463
text-align:justify;
464
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
465
filter: alpha(opacity=0);
466
opacity: 0;
467
-webkit-transition: all 1s ease-out 0s;
468
-moz-transition: all 1s ease-out 0s;
469
-ms-transition: all 1s ease-out 0s;
470
-o-transition: all 1s ease-out 0s;
471
transition: all 1s ease-out 0s;
472
}
473
474
475
.Hbox1a:hover   {
476
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
477
filter: alpha(opacity=100);
478
opacity: 1;
479
overflow:auto;
480
}
481
 
482
483
.vicariousmasthead {
484
position:absolute; 
485
width:950px; 
486
height:500px;  
487
padding:3px; 
488
border:1px solid ; 
489
top:0%; 
490
left:50%; 
491
margin-top:5px; 
492
margin-left:-475px; 
493
z-index:1 !important;
494
visibility:visible !important; 
495
display:block !important; 
496
}
497
498
.vicarious{ Masthead CSS }
499
 .v {display:none;}
500
body.bodyContent, body, v v v.x {margin-top:490px;margin-left:0px;}
501
div.profileWidth table div ul, div.clearfix v v.v {top:0px !important;}
502
 
503
.vicarious{ Color Palette}
504
 
505-
 body { background-color:34383a;  }
505+
 body { background-color:170c14;  }
506
507
::-webkit-scrollbar-track {background-color:000000 ; border-color:000000 ;}  
508-
::-webkit-scrollbar-thumb {background-color:4c4945;   border-color:000000 ;}
508+
::-webkit-scrollbar-thumb {background-color:523d4c;   border-color:000000 ;}
509
510-
.vic_table, table table table, .vicariousmasthead  {background-color:333333; border-color:666666; }
510+
.vic_table, table table table, .vicariousmasthead  {background-color:23131e; border-color:3d0132; }
511
512-
.about, .pers, .statsR, .vc, .hbox1a  {background-color:232323; }
512+
.about, .pers, .statsR, .vc, .hbox1a {background-color:231820; }
513-
.music  {background-color:333333;  }
513+
.music  {background-color:23131e;  }
514
.leftside, .vicframe  {background-color:transparent; }
515
516-
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p  { color:4f5959; }
516+
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p  { color:423b4b; }
517-
p:first-line {color:898c92;}
517+
p:first-line {color:7c6b77;}
518
I { color:ebebeb; }
519-
EM { color:ebe7e8; }
519+
EM { color:ac9698; }
520-
B {color:696e71;}
520+
B {color:5d4653;}
521-
.B2, B2, .B3, B3, .B4, B4  {color:948e87; }
521+
.B2, B2, .B3, B3, .B4, B4  {color:835d75; }
522-
.strong, strong {color:d3cbcf; }
522+
.strong, strong {color:e9e4d8; }
523
.strike, strike {color:efeae7; }
524
 
525-
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited {color:7f766d;background-color:transparent; }
525+
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited {color:7c6b77;background-color:transparent; }
526-
a.first:hover,  a.second:hover {color:717a7a; }
526+
a.first:hover,  a.second:hover {color:b1abaf; }
527-
a.cons, a.cons:link, a.cons:active, a.cons:visited {color:696e71 ; background-color:3b4141; }
527+
a.cons, a.cons:link, a.cons:active, a.cons:visited {color:d5cfc1 ; background-color:968b89 }
528-
a.cons:hover {color:726864; }
528+
a.cons:hover {color:836366; }
529
530-
.h1, h1   {color:505558;  border-color:34393d;}
530+
.h1, h1   {color:6d6171;  border-color:393132;}
531-
.h2, h2 {color:726864 ; background-color:3b4141; }
531+
.h2, h2 {color:b6b0a3; background-color:4a3d46; }
532
.h3, h3 { color:8c9492 ;  }
533-
.h5, h5 { color:b8bab9 ;  }
533+
.h5, h5 { color:c1bcc0 ;  }
534-
.h4, h4 {color:746865 ;background-color:1a1b1b; border-color:34393d;}
534+
.h4, h4 {color:968b89 ;background-color:45253c; border-color:1c0f2d;}
535-
.h6, h6 {color:000000;background-color:3b4141; }
535+
.h6, h6 {color:968b89;background-color:281021; }
536-
.h7, h7 {color:adb3b1; }
536+
.h7, h7 {color:968b89; }
537-
.h8, h8 {color:596162; }
537+
.h8, h8 {color:0e1f29; }
538-
small {color:0d0c0b;background-color:77706a; }
538+
small {color:5f515b;background-color:c7c2b8; }
539-
big {color:77706a;background-color:3b4547; }
539+
big {color:c7c2b8; background-color:5f515b; }
540-
.lyric, lyric { color:b3b8ba;}
540+
.lyric, lyric { color:d5cfc1;}
541-
.lyric2, lyric2  {color:574f4c;}
541+
.lyric2, lyric2  {color:968b89;}
542-
.lyric3, lyric3  {color:667176; }
542+
.lyric3, lyric3  {color:836366 }
543-
.lyric4, lyric4  {color:484240; }
543+
.lyric4, lyric4  {color:593c51; }
544-
.lyric5, lyric5 {color:7c8a8b }
544+
.lyric5, lyric5 {color:9d8789; }
545-
.lyric6, lyric6  {color:807570; }
545+
.lyric6, lyric6  {color:665956; }
546-
.lyric7, lyric7  {color:697175; } 
546+
.lyric7, lyric7  {color:afa99a; } 
547
 
548
.vicarious{ Hide Codes }
549
.profileInfo,  .userProfileURL,  .friendsComments, .blacktext12, .friendSpace, .blurbs, .contactTable, .extendedNetwork, .latestBlogEntry, .interestsAndDetails, .userprofiledetail, .userAlbums, .whitetext12, .orangetext15, .lightbluetext8, .navigationBar, .profile, table tr td[id='footerWarpper'] { display:none !important;visibility:hidden!important; }
550
table table table table td {width:0px;}
551
.contactTable td, table table td.text table td,table table table table table td {width:auto;}
552
div div select, div div form {display:none !important;}
553
select { visibility:hidden!important; WIDTH:0px!important;}
554
table div {display:none;}table table div {display:block;}
555
.navigationBar { display: none; }
556
div[id="googlebar"],div div select{opacity:0;filter:alpha(opacity=0);display:none !important;position:absolute !important; bottom:2000px !important;}
557
.vicarious{Misc Codes}
558
p.breakhere { page-break-after: always }
559
br{line-height:10px!important;} 
560
561
562
.vicarious {Layouts available @ http://vicarious-hs.tumblr.com/}
563
564
565
</style></td></tr></table></td></tr></table><div class="vicariousmasthead">
566
567
568
<img src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l10_zpsd1f05af4.jpg~original">
569
570
571
</div><table class=v><tr><td><table><tr><td></td></tr></table><table style="display:none"><tr><td>
572
 
573
 
574
-----------------------------LIKE TO MEET---------------------------------
575
 
576
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:500px; display:block; word-wrap:break-word">
577
578
<font class="h2">Your Name Here</font> 
579
 
580
581
<font class="h8">Verse 1 - Verse 2 - Verse 3 - Verse 4</font>
582
583
<img src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l_zps0b4afcd6.jpg~original">
584
585
<font class="h8">Multi-Para to Novella, Third Person POV</font>
586
587
 </td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:500px; display:block; word-wrap:break-word">
588
589
590
<table><tr>
591
592
593
<td><div class="hbox1" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l17_zpsfa5e427f.jpg~original);">
594
<div class="hbox1a">
595
596
This is box 1.  Text goes here. 
597
598
</div></div></td>
599
600
<td><div class="hbox1" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l17_zpsfa5e427f.jpg~original);">
601
<div class="hbox1a">
602
603
This is box 2.  Text goes here.
604
605
</div></div></td>
606
607
<td><div class="hbox1" style="background-image:url(http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l17_zpsfa5e427f.jpg~original);">
608
<div class="hbox1a">
609
610
This is box 3.  Text goes here.
611
612
</div></div></td></tr></table>
613
614
615
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:500px; display:block; word-wrap:break-word">
616
617
<font class="h5">Main Connections</font> 
618
619
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:500px; display:block; word-wrap:break-word">
620
621
<div class="vicframe" style="background-image:url(http://i40.tinypic.com/140xnw3.jpg);"><div class="viccontrol">
622
 
623
<table><tr>
624
<td><a class="second" href="#conn1"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
625
<td><a class="second" href="#conn2"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
626
<td><a class="second" href="#conn3"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
627
<td><a class="second" href="#conn4"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
628
</tr><tr>
629
<td><a class="second" href="#conn5"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
630
<td><a class="second" href="#conn6"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
631
<td><a class="second" href="#conn7"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
632
<td><a class="second" href="#conn8"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
633
</tr><tr>
634
<td><a class="second" href="#conn9"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
635
<td><a class="second" href="#conn10"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
636
<td><a class="second" href="#conn11"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
637
<td><a class="second" href="#conn12"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
638
</tr><tr>
639
<td><a class="second" href="#conn13"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
640
<td><a class="second" href="#conn14"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
641
<td><a class="second" href="#conn15"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
642
<td><a class="second" href="#conn16"><img src="http://i.imgur.com/wTA99l4.jpg"></a></td> 
643
</tr></table>
644
 
645
</div><div class="vicframeimg">
646
 
647
 
648
<a id="conn1" href="#"><table><tr><td><div class="VC">
649
<font class="h4">Connection 1 Here</font>
650
<a class="cons" href="/FRIENDID">View Profile</a>
651
652
<img align=left src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l22_zpsbf91791c.jpg~original"> 
653
I have included a pic (aligned to the left)in Connection 1's box to show you that you can put a larger pic in here before the text field, but if you just want text, remove the image.  BE HELLUVA CAREFUL NOT TO DROP ANY OF THESE CODE TAGS.
654
</div></td></tr></table></a>
655
656
<a id="conn2" href="#"><table><tr><td><div class="VC">
657
<font class="h4">Connection 2 Here</font>
658
<a class="cons" href="/FRIENDID">View Profile</a>
659
Text goes here
660
</div></td></tr></table></a>
661
662
<a id="conn3" href="#"><table><tr><td><div class="VC">
663
<font class="h4">Connection 3 Here</font>
664
<a class="cons" href="/FRIENDID">View Profile</a>
665
Text goes here
666
</div></td></tr></table></a>
667
668
<a id="conn4" href="#"><table><tr><td><div class="VC">
669
<font class="h4">Connection 4 Here</font>
670
<a class="cons" href="/FRIENDID">View Profile</a>
671
Text goes here
672
</div></td></tr></table></a>
673
674
<a id="conn5" href="#"><table><tr><td><div class="VC">
675
<font class="h4">Connection 5 Here</font>
676
<a class="cons" href="/FRIENDID">View Profile</a>
677
Text goes here
678
</div></td></tr></table></a>
679
680
<a id="conn6" href="#"><table><tr><td><div class="VC">
681
<font class="h4">Connection 6 Here</font>
682
<a class="cons" href="/FRIENDID">View Profile</a>
683
Text goes here
684
</div></td></tr></table></a>
685
686
<a id="conn7" href="#"><table><tr><td><div class="VC">
687
<font class="h4">Connection 7 Here</font>
688
<a class="cons" href="/FRIENDID">View Profile</a>
689
Text goes here
690
</div></td></tr></table></a>
691
692
<a id="conn8" href="#"><table><tr><td><div class="VC">
693
<font class="h4">Connection 8 Here</font>
694
<a class="cons" href="/FRIENDID">View Profile</a>
695
Text goes here
696
</div></td></tr></table></a>
697
698
<a id="conn9" href="#"><table><tr><td><div class="VC">
699
<font class="h4">Connection 9 Here</font>
700
<a class="cons" href="/FRIENDID">View Profile</a>
701
Text goes here
702
</div></td></tr></table></a>
703
704
<a id="conn10" href="#"><table><tr><td><div class="VC">
705
<font class="h4">Connection 10 Here</font>
706
<a class="cons" href="/FRIENDID">View Profile</a>
707
Text goes here
708
</div></td></tr></table></a>
709
710
<a id="conn11" href="#"><table><tr><td><div class="VC">
711
<font class="h4">Connection 11 Here</font>
712
<a class="cons" href="/FRIENDID">View Profile</a>
713
Text goes here
714
</div></td></tr></table></a>
715
716
<a id="conn12" href="#"><table><tr><td><div class="VC">
717
<font class="h4">Connection 12 Here</font>
718
<a class="cons" href="/FRIENDID">View Profile</a>
719
Text goes here
720
</div></td></tr></table></a>
721
722
<a id="conn13" href="#"><table><tr><td><div class="VC">
723
<font class="h4">Connection 13 Here</font>
724
<a class="cons" href="/FRIENDID">View Profile</a>
725
Text goes here
726
</div></td></tr></table></a>
727
728
<a id="conn14" href="#"><table><tr><td><div class="VC">
729
<font class="h4">Connection 14 Here</font>
730
<a class="cons" href="/FRIENDID">View Profile</a>
731
Text goes here
732
</div></td></tr></table></a>
733
734
<a id="conn15" href="#"><table><tr><td><div class="VC">
735
<font class="h4">Connection 15 Here</font>
736
<a class="cons" href="/FRIENDID">View Profile</a>
737
Text goes here
738
</div></td></tr></table></a>
739
740
<a id="conn16" href="#"><table><tr><td><div class="VC">
741
<font class="h4">Connection 16 Here</font>
742
<a class="cons" href="/FRIENDID">View Profile</a>
743
Text goes here
744
</div></td></tr></table></a>
745
  
746
</div></div>
747
748
749
<font class="h6">Friends - Fiends - Foes</font>  
750
751
 
752
-----------------------------INTERESTS---------------------------------
753
754
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:425px; display:block; word-wrap:break-word">
755
756
757
<font class="h5">The Devil Is In The Details</font> 
758
759
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:425px; display:block; word-wrap:break-word">
760
761
762
<div class="about">
763
764
<p>This is your About Me section.  Input your biographical information here.
765
766
<font class="h1">General Layout Info</font>
767
768
<p>Always replace the XXXXXX in the links with your friend ID number.  Links are located in the "Music" section of this layout.  For links to your mains, put the friend id number for your connections where you see FriendID.
769
770
<p>Banner:  To replace the image in the banner portion of this layout, go to About Me and scroll down to the bottom.  Put your http address for your uploaded image in place of the current one between the " and ".
771
772
<p>REMINDER:  For ALL images, always use the DIRECT LINK provided to you by your image hosting site.
773
774
<p>For images that are hover boxes, find the background-image:url("http://..."); area and replace my http address with yours.
775
776
<p>Replace the provided music player with one of your own.  Use the color codes in that object coding as a guide.
777
778
<p>The first letter of a paragraph will be enlarged and the first line of a paragraph will have a different color.  If you do not want this effect, you can remove the paragraph codes in About Me or you can simply use the page break code <BR> tag in front of your paragraphs instead of the p tag (as seen in the beginning of this paragraph of instructions).
779
 
780
781
<p>For your reference, these are the header codes, etc found in this layout.
782
783
784
<font class="h1">Header1</font>
785
<font class="h2">Header2</font>
786
<font class="h3">Header3</font>
787
<font class="h4">Header4</font>
788
<font class="h5">Header5</font>
789
<font class="h6">Header6</font>
790
<font class="h7">Header7</font>
791
<font class="h8">Header8</font>
792
 
793
<font class="lyric">Line 1 of lyrics</font>
794
<font class="lyric2">Line 2 of lyrics</font>
795
<font class="lyric3">Line 3 of lyrics</font>
796
<font class="lyric4">Line 4 of lyrics</font>
797
<font class="lyric5">Line 5 of lyrics</font>
798
<font class="lyric6">Line 6 of lyrics</font>
799
<font class="lyric7">Line 7 of lyrics</font>
800
 
801
<BR><B>Bold</b> <i> Italic</i> <em>Emphasized text</em>
802
 
803
<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.
804
<BR><BR>
805
<font class="b2">Bold2</font>
806
<font class="b3">Bold3</font>
807
<font class="b4">Bold4</font>
808
<font class="strong">Strong</font>
809
<font class="strike">Strike</font>
810
<font class="u">Underline</font>
811
 
812
<BR><BR>I have also included the below two special text classes that are fine as is and need no modification on any site.
813
 
814
<big>big</big>
815
<small>Small</small>
816
 
817
818
</div>
819
 
820
<font class="h6">Past - Present - Future</font>   
821
 
822
 
823
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:425px; display:block; word-wrap:break-word">
824
825
<font class="h7">Homicidal Tendencies</font> 
826
827
<table><tr><td>
828
829
<img class="img2" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l22_zpsbf91791c.jpg~original">
830
831
</td><td><div class="pers">
832
833
<b>Traits:</b> Input Info
834
<BR><b>Disorders:</b> Input Info
835
<BR><b>Addictions:</b> Input Info
836
<BR><b>Likes:</b> Input Info
837
<BR><b>Dislikes:</b> Input Info
838
<BR><b>Quirks:</b> Input Info
839
<BR>This is the section for your personality.  Add additional details as needed.
840
 
841
842
</div><div class="music">
843
844
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
845
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
846
    <param name="bgcolor" value="#23131e" />
847-
    <param name="bgcolor" value="#333333" />
847+
    <param name="FlashVars" value="mp3=http%3A//k002.kiwi6.com/hotlink/wsq2887c51/the_hunger_games_-_deep_shadows_soundtrack_www.mp3fiber.com_.mp3&autoplay=1&bgcolor=23131e&loadingcolor=5d4653&buttoncolor=5d4653&slidercolor=5d4653" />
848-
    <param name="FlashVars" value="mp3=http%3A//k002.kiwi6.com/hotlink/wsq2887c51/the_hunger_games_-_deep_shadows_soundtrack_www.mp3fiber.com_.mp3&autoplay=1&bgcolor=333333&loadingcolor=696e71&buttoncolor=696e71&slidercolor=696e71" />
848+
849
850
</div></td><td>
851
852
<img class="img2" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l22_zpsbf91791c.jpg~original">
853
854
</td></tr></table>
855
 
856
<font class="h8">I don't care if you're offended</font> 
857
858
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:425px; display:block; word-wrap:break-word">
859
860
<font class="h1">The Short and Sweet of It</font>
861
862
<div class="statsL">
863
<img src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l1_zps633210fd.jpg~original">
864
865
</div><div class="statsR">
866
867
<font class="h3">Legal</font>
868
 
869
<b>NAME:</b> Input info
870
<BR><b>NICKNAMES:</b> Input info
871
<BR><b>ALIASES:</b> Input info
872
<BR><b>DATE OF BIRTH:</b> Input info
873
<BR><b>PLACE OF BIRTH:</b> Input info
874
<BR><b>CURRENT RESIDENCE:</b> Input info 
875
876
<font class="h3">Physical</font>
877
 
878
<b>ETHNICITY:</b> Input info
879
<BR><b>HAIR COLOR:</b> Input info
880
<BR><b>EYE COLOR:</b> Input info
881
<BR><b>HEIGHT:</b> Input info
882
<BR><b>WEIGHT:</b> Input info
883
<BR><b>BIRTHMARKS/SCARS:</b> Input info
884
885
<font class="h3">Family</font>
886
 
887
<b>MOTHER:</b> Input info
888
<BR><b>FATHER:</b> Input info
889
<BR><b>SISTER(S):</b> Input info
890
<BR><b>BROTHER(S):</b> Input info
891
<BR><b>Other Family:</b> Input info
892
 
893
<font class="h3">Relationships</font>
894
 
895
<b>SEXUAL ORIENTATION:</b> Input info
896
<BR><b>RELATIONSHIP STATUS:</b> Input info
897
<BR><b>CURRENT RELATIONSHIP(S):</b> Input info
898
<BR><b>PAST RELATIONSHIP(S):</b> Input info 
899
 
900
<font class="h3">Education</font>
901
 
902
<b>High School</b> Input Info
903
<br><b>College</b> Input Info
904
<br><b>Major</b> Input Info
905
<br><b>Degree</b> Input Info 
906
 
907
<font class="h3">Employment</font>
908
 
909
<b>OCCUPATION:</b> Input info
910
<BR><b>JOB DESCRIPTION:</b> Input info
911
<BR><b>EMPLOYER:</b> Input info
912
<BR><b>SKILLSET:</b> Input info
913
 
914
</div>
915
916
917
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:425px; display:block; word-wrap:break-word">
918
 
919
920
<font class="lyric">Try to remember how it felt</font>
921
<font class="lyric2">To just make up your own steps</font>
922
<font class="lyric3">And let anklebiters</font>
923
<font class="lyric4">Chew up, spit out someone else</font>
924
<font class="lyric5">Fall in love with yourself</font>
925
<font class="lyric6">Because someday you’re gonna be</font>
926
<font class="lyric7">The only one you’ve got</font>
927
 
928
929
 
930
</td></tr></table></td></tr></table><table class="vic_table" cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:425px; display:block; word-wrap:break-word">
931
932
<img class="img1" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l25_zpsa9a1c828.jpg~original">
933
 
934
<img class="img1" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l25_zpsa9a1c828.jpg~original">
935
936
<img class="img1" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l25_zpsa9a1c828.jpg~original">
937
938
<img class="img1" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l25_zpsa9a1c828.jpg~original">
939
940
<img class="img1" src="http://i1080.photobucket.com/albums/j334/Vicarious_HS/layouts/l25_zpsa9a1c828.jpg~original">
941
942
943
-----------------------------MUSIC---------------------------------
944
945
 </td></tr></table></td></tr></table><table  cellspacing="0" cellpadding="0" border="0"><tr><td><table cellspacing="0" cellpadding="0" border="0"><tr><td valign="top" align="center" style="width:450px; display:block; word-wrap:break-word">
946
947
 
948
<div class="leftside">
949
<a class="first" href="/logincomplete.php" title="Home">H</a> 
950
<a class="first" href="/invite_friend.php?friend_id=xxxxxx" title="Add">A</a> 
951
<a class="first" href="/send_message.php?member_id=xxxxxx" title="Message">M</a> 
952
<a class="first" href="/add_testimonial.php?member_id=xxxxxx" title="Comment">C</a> 
953
<a class="first" href="/gallery.php?member_id=xxxxxx" title="Photos">P</a> 
954
<a class="first" href="/view_member_blog.php?member_id=xxxxxx" title="Blogs">B</a> 
955
</div>