API tools faq
paste
View difference between Paste ID: zYuJAmA4 and 6UW0mXyA
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 the banner pic, find this at the top of Like to Meet

18+
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:

19
20
<div class="v390w390h" style="background-image:url(http://i.imgur.com/890oFow.png);">

21-
<div class="backimg" style="background-image:url(http://i.imgur.com/5T4omv0.png);"></div>

21+
22
((((((FOR ALL PIC SIZES, SEE THE INSTRUCTIONS IN THE ACTUAL LAYOUT CODING.)))))))

23
24
**********************

25
PSD FOR ICON & STATS (RED/BLACK) IMAGES:

26-
PSD FOR IMAGES:

26+
http://www.2shared.com/photo/xWp0c84_/layout133a.html 

27
28-
http://www.2shared.com/fadmin/54300350/d0a33df1/Vicarious_Layout_132_PSD.psd.html

28+
29
............................

30
31
 

32
 FOR ROLEPLAYER.ME USERS:

33
 

34
For the below text font classes and all of the headers (1, 2, 3, etc) and lyrics, please note the following:  

35
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.  

36
 

37
<font class="h1">Header 1</font>

38
 

39
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:

40
<h1>Header</h1> <strike>Strike</strike> etc..

41
 

42
OR just leave them as they are.  They will work for you either way.  

43
 

44
 

45
///////////////////////////////////////////////////

46
_______________________________________________

47
 

48
 

49
 

50
 

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

52
 

53
                                                     (>‿◠)✌

54
 

55
 

56
                *****************************SAVE YOUR WORK AS YOU GO.*******************************

57
 

58
 

59
 

60
                               

61
 

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

63
 

64
-----------------------------ABOUT ME---------------------------------

65
 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false"> 

66
67
</td></tr></table></td></tr></table></td></tr></table></div><style type="text/css">@import url("https://googledrive.com/host/0B79YHAkeE7SuWWthZl94VUJJcHc");@import url(http://fonts.googleapis.com/css?family=Special+Elite|Rancho|Qwigley|Dorsa|Mystery+Quest|Voltaire|Righteous);

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);

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

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

69+
70
.vicarious { CSS/DIV Layout 133a // Layouts available @ http://vicarious-hs.tumblr.com/ }

71-
.vicarious { CSS/DIV Layout 132a // Layouts available @ http://vicarious-hs.tumblr.com/ }

71+
72
/* - -DO NOT REARRANGE MY CODING.  ORDER IS IMPORTANT. - - */    

73
74
.vicarious{Background Properties // BODY COLOR IS IN THE COLOR PALETTE SECTION}

75
body {

76
background-image:url();

77
background-repeat:no-repeat;

78
background-position: bottom left;

79
background-attachment:fixed;

80
}

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
letter-spacing: 0pt;

125
}

126
 

127
B {

128
font-family:georgia;

129-
font-size:10pt;

129+
font-size:8pt;

130
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);

131
}

132
 

133
.B2, B2  {

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 {

139+
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited, a.third, a.third:link, a.third:active, a.third:visited, a.cons, a.cons:link, a.cons:active, a.cons:visited   {

140
font-family: arial narrow;

141
font-size:9pt;

142
text-align:center;

143
text-transform:uppercase;

144-
line-height:35px;

144+
145-
height:35px;  

145+
146
-webkit-transition: all 1s ease-out 0s;

147
-moz-transition: all 1s ease-out 0s;

148
-ms-transition: all 1s ease-out 0s;

149
-o-transition: all 1s ease-out 0s;

150
transition: all 1s ease-out 0s; 

151
margin:0px;

152
padding:0px;

153
display:block;

154
letter-spacing:0pt;

155
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);

156
}

157
158-
width:93px;

158+
a.first, a.first:link, a.first:active, a.first:visited {

159-
padding-left:5px;

159+
width:159px;

160-
-moz-border-radius-topright: 90px;

160+
margin:15px 2px;

161-
-webkit-border-top-right-radius: 90px;

161+
line-height:50px;

162-
border-top-right-radius: 90px;

162+
height:50px;  

163
}

164
165-
a.first:hover, a.second:hover    {

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

166-
text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);

166+
167
width:100px;

168
line-height:100px;

169-
a.third, a.third:link, a.third:active, a.third:visited {

169+
height:100px;  

170-
margin:20px 0px 0px 20px;

170+
171
172
173
a.third, a.third:link, a.third:active, a.third:visited  {

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 {

174+
width:58.25px;

175
line-height:46px;

176
height:46px;

177
margin:2px;  

178
}

179
180
181
a.cons, a.cons:link, a.cons:active, a.cons:visited {

182
width:100%;

183
line-height:100%;  

184
}

185
186
187
.h1, .h2, .h3,  .h4, .h5, .h6, .h7, .h8, .h9, h1, h2, h3, h4, h5, h6, h7, h8, h9, small, big, .one, one, .two, two {

188
font-family: georgia;

189
line-height:100%;

190
text-align:center;

191
display:block;

192
font-size: 11pt ;

193
padding:0px;

194
margin:0px;

195
text-decoration:none;

196
}

197
 

198-
margin-right:5px;

198+
199
font-family: 'Voltaire', sans-serif;

200
font-size: 16pt ;

201
font-weight:bold;

202
text-transform:uppercase;

203
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);

204
}

205
 

206
.h2, h2  {

207
font-family:arial narrow;

208
font-weight:bold;

209
font-size:9pt;

210
text-align:left;  

211
margin-left:5px;

212
text-transform:uppercase;

213
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);

214
}

215
 

216
.h3, h3 {

217
text-align:left;

218
padding:5px 0px 0px 5px;

219
line-height:120%;

220
font-size: 12pt ;

221
font-family: 'Mystery Quest', cursive;

222
border-bottom:6px solid;

223
}

224
 

225
.h4, h4 {

226
padding:5px 0px 0px 5px;

227
font-size: 14pt ;

228
font-family: 'Voltaire', sans-serif;

229
border-bottom:2px solid;

230
}

231
 

232
.h5, h5 {

233
font-weight:bold;

234
font-size: 46pt ;  

235
letter-spacing:1pt;

236
text-align:center;

237
font-family: 'Dorsa', sans-serif;

238
}

239
 

240
.h6, h6  {

241
letter-spacing:1pt;

242
font-size:20pt;

243
text-align:center;  

244
}

245
 

246
.h7, h7  {

247
font-family: 'Rancho', cursive;

248
letter-spacing:-1pt;

249
font-size:20pt;

250
text-align:center;  

251
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);

252
}

253
 

254
.h8, h8 {

255
font-family: 'Dorsa', sans-serif;

256
font-weight:bold;

257
letter-spacing:2pt;

258
font-size:18pt;

259
text-align:center;  

260
line-height:120%;

261
margin-bottom:5px;

262
}

263
 

264
small {

265
font-weight:bold;

266
font-family: 'Dorsa', sans-serif;

267
letter-spacing:3pt;

268
font-size:20pt;

269
text-align:center;  

270
text-transform:uppercase;

271
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);

272
}

273
 

274
big {

275
font-family: 'Voltaire', sans-serif;

276
letter-spacing:0pt;

277
font-size:28pt;

278
text-align:center;  

279
text-transform:uppercase;

280
}

281
 

282
.one, one   {

283
font-family: 'Voltaire', sans-serif;

284
font-size: 30pt ;

285
margin-left:5px;

286
text-align:left;

287
font-weight:bold;

288
text-transform:uppercase;

289
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);

290
}

291
 

292
.two, two  {

293
font-family:arial narrow;

294
font-weight:bold;

295
font-size:9pt;

296
text-align:left;  

297
margin-left:275px;

298
line-height:35%;

299
text-transform:uppercase;

300
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);

301
}

302
 

303
 

304
.lyric, .lyric2, .lyric3, .lyric4, .lyric5, .lyric6, .lyric7, lyric, lyric2, lyric3, lyric4, lyric5, lyric6, lyric7  {

305
font-family: 'Special Elite', cursive;

306
text-decoration:none;

307
line-height:60%;

308
padding:0px;

309
margin:0px;

310-
.backimg, .conns, .connimg,  a.third, .line, .line2, .line3, .name  {

310+
311
 

312
.lyric, lyric {Font-size:14pt;}  

313
.lyric2, lyric2 {Font-size:12pt;}  

314
.lyric3, lyric3 {Font-size:13pt;}  

315-
 a.first, a.second{

315+
316
.lyric5, lyric5 {Font-size:12pt;letter-spacing:1.8pt;}  

317
.lyric6, lyric6 {Font-size:13pt;}  

318
.lyric7, lyric7 {Font-size:15pt;letter-spacing:1pt;}    

319
 

320
.vicarious { Cross Commons }

321
 

322
.bottom,  a.first, a.second, a.third, a.cons  {

323
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75);

324-
.vicframe2, .backimg, .top, .name, .linkback1, .linkback2, .line, .middle, .topline, .line2, .line3, .bottom  {

324+
325
box-shadow:         2px 2px 5px rgba(0, 0, 0, 0.75);  

326
}

327
 

328
 

329
.vicarious { Div IDS/Class Styles }

330
 

331
.vicframe, .vicframe2, .vicframe3, .v1000w500h,   .v500w835h, .v390w390h, .music, .v390w415h, .v390w360h, .line1, .line2, .line1b, .line1a, .line2a, .line2b, .buffer   {

332-
.bottom {

332+
333-
height:30px;

333+
334
position:absolute;  

335
overflow:hidden;

336-
margin-top:780px;

336+
337-
padding-top:10px;

337+
338-
text-align:right;

338+
339
.vicframe, .vicframe2, .vicframe3 {height:415px;text-align:center;background-color:transparent;}  

340
.vicframe, .vicframe2 {width:605px; margin-left:-500px;}  

341-
.vicframe2 {

341+
.vicframe { margin-top:505px;}  

342-
height:700px;

342+
.vicframe2, .vicframe3 {margin-top:925px;}  

343
.vicframe3 { width:390px;margin-left:110px;}  

344
.viccontrol, .viccontrol2, .viccontrol3 {margin-left:0px;overflow:hidden;} 

345-
margin-top:135px;

345+
346
347
.buffer {

348
height:85px;

349-
.linkback1, .linkback2 {

349+
350-
height:35px;

350+
351-
margin-top:135px;

351+
margin-top:1345px;

352
background-color:transparent;

353
}  

354-
-moz-border-radius-topright: 90px;

354+
355-
-webkit-border-top-right-radius: 90px;

355+
.bottom  {

356-
border-top-right-radius: 90px;

356+
357
height:80px;

358
left:50%;

359-
.linkback1 {

359+
bottom:0%;

360-
width:585px;  

360+
361
margin-bottom:0px;

362
position:fixed;  

363-
.linkback2 {

363+
364
z-index:1;  

365
text-align:center;

366
}  

367-
.line {

367+
368-
height:10px;

368+
.v390w360h, .v390w390h, .music  {width:390px;margin-left:110px;}   

369
370
.v390w360h  {height:360px;margin-top:980px;}   

371-
margin-top:170px;

371+
.v390w390h  {height:390px;margin-top:505px;}  

372-
border-bottom:20px solid;

372+
.music {height:20px;margin-top:900px;} 

373
374
.v390w415h  {

375-
.backimg {

375+
height:415px;

376-
background-position:top right;

376+
width:390px;

377
margin-left:110px;

378-
height:500px;

378+
margin-top:925px; 

379
}  

380
381-
margin-top:200px;

381+
.v500w835h  {

382
width:500px;

383-
  

383+
height: 835px;

384-
.viccontrol {

384+
margin-left:-395px;

385-
margin-left:0px;

385+
margin-top:505px; 

386
}  

387
388
.v1000w500h {

389-
.top, .middle    {

389+
390-
background-position:top right;

390+
height: 500px;

391-
background-repeat:repeat;

391+
392
margin-top:0px; 

393
}  

394
 

395
.line1, .line1b, .line1a, .line2, .line2a, .line2b {height: 100%;  margin-top:0px; position:fixed; }   

396
.line1,  .line2 {width:20px;}   

397-
.top     {

397+
.line1 {margin-left:-525px;}  

398
.line2 {margin-left:505px;}  

399-
margin-top:75px;

399+
.line1b, .line1a, .line2a, .line2b {width:15px; }  

400
.line1b {margin-left:-545px;}  

401
.line1a {margin-left:-565px;}  

402-
.line2, .line3 {

402+
.line2b {margin-left:530px;}  

403
.line2a {margin-left:550px;}  

404
 

405-
height:20px;

405+
406
.conns, .connstext { text-align:justify; overflow:auto;}  

407
.conns {width:490px; height:400px; margin:5px;}   

408-
.line2 {

408+
.connsimg {width:100px; height:100px; overflow:hidden;}  

409-
margin-top:700px;

409+
.connstext {width:365px; height:96px;border:1px solid;  }  

410
411
 

412-
.line3 {

412+
413-
margin-top:755px;

413+
.hbox1, .v390w390h_A { 

414
overflow:hidden; 

415
display:block;

416-
.middle    {

416+
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

417-
height:35px;

417+
filter: alpha(opacity=0);

418-
margin-top:720px;

418+
opacity: 0;

419
-webkit-transition: all 1s ease-out 0s;

420
-moz-transition: all 1s ease-out 0s;

421-
.name   {

421+
422-
padding-top:20px;

422+
423-
height:55px;

423+
424
}

425
426
.hbox1 {

427
width:100px;

428
height:100px;

429-
.ALeft{

429+
line-height:100px; 

430-
float:left;

430+
font-size:8pt;

431-
width:400px;

431+
432-
margin:25px;

432+
433-
padding:25px;

433+
434-
height:400px;

434+
435
.v390w390h  {

436
height:390px;

437
width:390px;

438-
.ARight{

438+
margin-left:110px;

439-
float:right;

439+
margin-top:505px;  

440
}  

441-
height:500px;

441+
442
.v390w390h_A {

443
height:380px;

444
width:380px;

445-
.conns {

445+
padding:5px; 

446-
text-align:justify;

446+
text-align:justify; 

447-
width:235px;

447+
448-
height:150px;

448+
449
.Hbox1:hover, .v390w390h_A:hover   {

450-
overflow:auto;  

450+
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

451
filter: alpha(opacity=100);

452
opacity: 1;

453-
.connimg {

453+
454-
width:150px;

454+
455-
height:150px;

455+
456
 

457
.stats {

458
width:375px; 

459
height:200px; 

460-
.vicarious{ Color Palette}

460+
overflow:auto; 

461
margin-top:5px;

462-
body { background-color:161616; }

462+
463
text-align:left;

464
}

465
466
.vicarious{ Color Palette ---- IF YOU CHANGE THE BACKGROUND COLOR, READ THE INFO ABOUT THE LINES }

467-
.conns, .middle, .top, .topline {background-color:121212; }

467+
468-
.vicframe2img a {background-color:222222;}

468+
body, .bottom { background-color:740007; }

469-
.linkback1 {background-color:333333; }

469+
470-
.linkback2 {background-color:404040; border-color:404040;}

470+
471-
.line {  background-color:262626; border-color:444444; }

471+
472-
.line2, .line3  {  background-color:333333;  }

472+
473-
.name,  .bottom {  background-color:333333;  }

473+
.viccontrol, .viccontrol2 {background-color:transparent;}

474-
.ALeft, .ARight {background-color:121212;}

474+
475
 .v1000w500h, .v500w835h, .v390w390h, .music, .v390w415h, .v390w360h, .line1, .line2, .viccontrol3 {background-color:000000;}

476
.vicframeimg a, .vicframe2img a, .vicframe3img a {background-color:121212;} 

477
.conns, .stats, .v390w390h_A {background-color:191919;}

478
.connstext {border-color:000000; background-color:141414;} 

479
 

480
a, a:link, a:active, a:visited, a:hover, td, .text, table, tr, td, li, div, input, p, i, b, em  { color:383838; }

481
I { color:979797; }

482
EM { color:dedede; }

483
B { color:6a6a6a; }

484
.B2, B2 { color:555555; }

485
.strong, strong { color:cdcdcd; }

486-
a.first, a.first:link, a.first:active, a.first:visited { color:cbcbcb; background-color:333333; }

486+
487-
a.second, a.second:link, a.second:active, a.second:visited { color:cbcbcb; background-color:404040; }

487+
.strike, strike { color:b3000b ; }

488-
a.first:hover, a.second:hover    { color:0a0a0a;  }

488+
489
a.first, a.first:link, a.first:active, a.first:visited, a.second, a.second:link, a.second:active, a.second:visited, .hbox1 { color:cbcbcb; background-color:1c1c1c; }

490
a.third, a.third:link, a.third:active, a.third:visited   { color:cbcbcb; background-color:740007; }

491
a.cons, a.cons:link, a.cons:active, a.cons:visited   { color:740007; background-color:222222; } 

492-
.h3, h3  { color:666666; background-color:222222; border-color:444444; }

492+
a.first:hover, a.second:hover, a.third:hover, a.cons:hover  { color:555555; background-color:000000; } 

493
494
.h1, h1 { color:d2d2d2;background-color:222222; }

495-
.h6, h6 { color:888888;   }

495+
496
.h2, h2, .two, two  { color:868686; background-color:transparent;  }

497-
.h8, h8  { color:555555; background-color:121212;   }

497+
.h3, h3  { color:d2d2d2; background-color:740007; border-color:262626; }

498
.h4, h4  { color:8e8e8e; background-color:161616; border-color:333333;  }

499
.h5, h5  { color:7a7a7a; background-color:222222;   }

500-
small { color:c3c3c3; background-color:424242;   }

500+
.h6, h6 { color:000000; background-color:540005;   }

501
.h7, h7  { color:d2d2d2; background-color:424242;   }

502
.h8, h8  { color:aa000a; background-color:0a0a0a;   }

503-
.lyric2, lyric2 { color:7a7a7a;   }

503+
504
big { color:454545;   }

505
small { color:c3c3c3; background-color:b3000b;   }

506
 

507-
.lyric6, lyric6 { color:7a7a7a;   }

507+
508
.lyric2, lyric2 { color:930009;   }

509
.lyric3, lyric3 { color:cecece;   }

510
.lyric4, lyric4 { color:333333;   }

511
.lyric5, lyric5 { color:666666;   }

512
.lyric6, lyric6 { color:930009;   }

513
.lyric7, lyric7 { color:c4c4c4;   }

514
 

515
/* - -The short lines with a tapered edge are actually dual colored.  The 'invisible' portion is simply the same color as the background so that it blends in and cannot be seen.  If you change the background color, you will need to change the line color code (the one that is the same color as the current background color).  If you go into photobucket and grab the paint tool and put in the color code 740007, you will see the rgb numbers as 116 0 7.  In the four lines below, you can see that color on there as well, notated out with the rgb color codes.  If you change the color code of the body background to 003f3e, for example, you would find the rgp in photoshop (or on the web).  The rgb for that hex color is 0 63 62; so you would put (0, 63, 62) in every place below where you currently see (116, 0, 7)  Alternatively, you can just remove the <div class="line1a">, etc in Like to Meet if you don't want the tapered lines in the layout at all.- - */    

516
517
518
 .line1a { 

519
background: rgb(116, 0, 7);

520
background: -moz-linear-gradient(45deg, rgb(116, 0, 7) 67%, rgb(0, 0, 0) 0%);

521
background: -webkit-linear-gradient(45deg, rgb(116, 0, 7) 67%, rgb(0, 0, 0) 0%);

522
background: -o-linear-gradient(45deg, rgb(116, 0, 7) 67%, rgb(0, 0, 0) 0%);

523
background: -ms-linear-gradient(45deg, rgb(116, 0, 7) 67%, rgb(0, 0, 0) 0%);

524
background: linear-gradient(135deg, rgb(116, 0, 7) 67%, rgb(0, 0, 0) 0%);

525
}

526
527
.line1b { 

528
background: rgb(116, 0, 7);

529
background: -moz-linear-gradient(45deg, rgb(116, 0, 7) 57%, rgb(0, 0, 0) 0%);

530
background: -webkit-linear-gradient(45deg, rgb(116, 0, 7) 57%, rgb(0, 0, 0) 0%);

531
background: -o-linear-gradient(45deg, rgb(116, 0, 7) 57%, rgb(0, 0, 0) 0%);

532
background: -ms-linear-gradient(45deg, rgb(116, 0, 7) 57%, rgb(0, 0, 0) 0%);

533
background: linear-gradient(135deg, rgb(116, 0, 7) 57%, rgb(0, 0, 0) 0%);

534
}

535
536
.line2a { 

537
background: rgb(0, 0, 0);

538
background: -moz-linear-gradient(315deg, rgb(0, 0, 0) 33%, rgb(116, 0, 7) 0%);

539
background: -webkit-linear-gradient(315deg, rgb(0, 0, 0) 33%, rgb(116, 0, 7) 0%);

540
background: -o-linear-gradient(315deg, rgb(0, 0, 0) 33%, rgb(116, 0, 7) 0%);

541
background: -ms-linear-gradient(315deg, rgb(0, 0, 0) 33%, rgb(116, 0, 7) 0%);

542
background: linear-gradient(45deg, rgb(0, 0, 0) 33%, rgb(116, 0, 7) 0%);

543
}

544
545
.line2b { 

546
background: rgb(0, 0, 0);

547
background: -moz-linear-gradient(315deg, rgb(0, 0, 0) 43%, rgb(116, 0, 7) 0%);

548
background: -webkit-linear-gradient(315deg, rgb(0, 0, 0) 43%, rgb(116, 0, 7) 0%);

549
background: -o-linear-gradient(315deg, rgb(0, 0, 0) 43%, rgb(116, 0, 7) 0%);

550
background: -ms-linear-gradient(315deg, rgb(0, 0, 0) 43%, rgb(116, 0, 7) 0%);

551
background: linear-gradient(45deg, rgb(0, 0, 0) 43%, rgb(116, 0, 7) 0%);

552
}

553
554
555
556
 

557
/* - - CSS!! NO TOUCHY!!! - - */  

558
 

559
img {border:0px;}

560
table, tr, td {background:transparent; border:0px;}

561
img, .contactTable { display:none; }

562
.vicholder img, .comt img { display:inline; }

563-
  

563+
564
font, a, .vicsc a { visibility:hidden; }

565-
</td></tr></table></td></tr></table></td></tr></table></div><DIV class="vicholder"> 

565+
566-
<div class="top" style="background-image:url(http://i41.tinypic.com/2j3jswz.jpg);"></div> 

566+
567
 div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}

568-
<div class="backimg" style="background-image:url(http://i.imgur.com/5T4omv0.png);"></div>

568+
569
 div.profileWidth div div {filter:none; opacity:0.9999}

570-
<div class="Name">

570+
571-
<font class="one">Character Name Here</font>

571+
572-
<font class="two">Character tagline here</font>

572+
573
.text, table table table table a,table table table table div,table table table table div a {visibility:visible;}

574
.vicsc { display:none; }

575-
<div class="linkback2"></div><div class="linkback1"></div><div class="line"></div><div class="vicframe2"><div class="viccontrol">

575+
576
table table, table table td {padding:0px; height:0px;}

577
marquee { z-index:8; }

578-
<TD><a CLASS="FIRST" href="/logincomplete.php"><b>⇛</b> Home</a></TD>

578+
579-
<TD><a CLASS="FIRST" href="/invite_friend.php?friend_id=xxxxxx"><b>⇛</b> Add</a></TD>

579+
580-
<TD><a CLASS="FIRST" href="/send_message.php?member_id=xxxxxx"><b>⇛</b> Message</a></TD>

580+
581-
<TD><a CLASS="FIRST" href="/add_testimonial.php?member_id=xxxxxx"><b>⇛</b> Comment</a></TD>

581+
582-
<TD><a CLASS="FIRST" href="/gallery.php?member_id=xxxxxx"><b>⇛</b> Photos</a></TD>

582+
583-
<TD><a CLASS="FIRST" href="/view_member_blog.php?member_id=xxxxxx"><b>⇛</b> Blogs</a></TD>

583+
584-
<TD><a class="second" href="#stats"><b>⇛</b> Stats</a></td>

584+
585-
<TD><a class="second" href="#about"><b>⇛</b> About</a></td>

585+
586-
<TD><a class="second" href="#mains"><b>⇛</b> Mains</a></td>

586+
587-
<TD><a class="second" href="#info"><b>⇛</b> Info</a></td>

587+
588
.friendSpace { display:none; }

589
.blurbs {display: none;}

590-
</div><div class="vicframe2img"><a id="stats" href="#"><div class="ALeft">

590+
591
.latestBlogEntry {display: none;}

592
.extendedNetwork {display: none;}

593
.interestsAndDetails {display: none;}

594
.userprofiledetail {display: none;}

595
.userAlbums { display:none; }

596
.whitetext12{visibility:hidden; display:none;}

597
.orangetext15{visibility:hidden; display:none;}

598
.lightbluetext8{visibility:hidden; display:none}

599
table table table table td {width:0px;}

600
.contactTable td, table table td.text table td,table table table table table td {width:auto;}

601
.profile { display:none !important;visibility:hidden!important; }

602
table tr td[id='footerWarpper']{display:none !important;visibility:hidden!important;}

603
 

604
 

605
</style>

606
 

607
<div style="display:none;"><table><tr><td><table><tr><td><table><tr><td>

608
 

609
-----------------------------LIKE TO MEET---------------------------------

610
611
</td></tr></table></td></tr></table></td></tr></table></div><DIV class="vicholder"><div class="line2"></div><div class="line2b"></div><div class="line2a"></div><div class="line1"></div><div class="line1b"></div><div class="line1a"></div>

612
 

613
<div class="v1000w500h"><img src="http://i.imgur.com/eby0N9s.png"></div>

614
615
<div class="v500w835h"><img src="http://i.imgur.com/mvbXpET.png"></div>

616-
<p><font class="h3">Education</font>

616+
617
<div class="vicframe"><div class="viccontrol">

618
619
<a class="second" href="#conn1" style="background-image:url(http://i.imgur.com/9N1gptq.png);">

620
<div class="hbox1">Damon</div></a>  

621
622-
<p><font class="h3">Employment</font>

622+
<a class="second" href="#conn2" style="background-image:url(http://i.imgur.com/ReWJTDW.png);">

623
<div class="hbox1">Stefan</div></a> 

624
625
<a class="second" href="#conn3" style="background-image:url(http://i.imgur.com/e1S1aKH.png);">

626
<div class="hbox1">Katherine</div></a> 

627
628
<a class="second" href="#conn4" style="background-image:url(http://i.imgur.com/F6HFzJH.png);">

629
<div class="hbox1">Caroline</div></a>  

630
631
632
</div><div class="vicframeimg">

633
634
635
<a id="conn1" href="#"><table><tr><td><div class="conns">

636
<font class="h4">Connection Name Here</font>

637
<a class="cons" href="/FRIENDID">View Profile</a>

638
<p>Text goes here 

639
</div></td></tr></table></a> 

640
641
<a id="conn2" href="#"><table><tr><td><div class="conns">

642-
</div><div class="ARight">

642+
643
<a class="cons" href="/FRIENDID">View Profile</a>

644-
<img src="http://i.imgur.com/2wZf135.png">

644+
<p>Text goes here 

645
</div></td></tr></table></a> 

646-
</div></a><a id="about" href="#"><div class="ALeft">

646+
647
<a id="conn3" href="#"><table><tr><td><div class="conns">

648
<font class="h4">Connection Name Here</font>

649-
<p><small>Images</small>

649+
<a class="cons" href="/FRIENDID">View Profile</a>

650
<p>Text goes here 

651-
<p>The banner image is 1000px width by 500px height.

651+
</div></td></tr></table></a> 

652-
<p>The side images of Jax are 500px with by 500px height.

652+
653-
<p>The connection images are 150px width by 150px height.

653+
<a id="conn4" href="#"><table><tr><td><div class="conns">

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.

654+
655
<a class="cons" href="/FRIENDID">View Profile</a>

656
<p>Text goes here 

657
</div></td></tr></table></a> 

658
659
660
661
662
</div></div><div class="vicframe2"><div class="viccontrol2">

663
664
<a class="second" href="#conn5" style="background-image:url(http://i.imgur.com/mPtnhRx.jpg);">

665
<div class="hbox1">Jeremy</div></a>  

666
667
<a class="second" href="#conn6" style="background-image:url(http://i.imgur.com/h7BaxqG.png);">

668
<div class="hbox1">Bonnie</div></a> 

669
670
<a class="second" href="#conn7" style="background-image:url(http://i.imgur.com/5B7L3Ix.jpg);">

671
<div class="hbox1">Alaric</div></a> 

672
673
<a class="second" href="#conn8" style="background-image:url(http://i.imgur.com/rjTrKj0.png);">

674
<div class="hbox1">More</div></a> 

675
676
</div><div class="vicframe2img">

677
678
679
<a id="conn5" href="#"><table><tr><td><div class="conns">

680
<font class="h4">Connection Name Here</font>

681
<a class="cons" href="/FRIENDID">View Profile</a>

682
<p>Text goes here 

683
</div></td></tr></table></a>

684
685
<a id="conn6" href="#"><table><tr><td><div class="conns">

686
<font class="h4">Connection Name Here</font>

687
<a class="cons" href="/FRIENDID">View Profile</a>

688
<p>Text goes here 

689-
</div><div class="ARight">

689+
</div></td></tr></table></a>

690
691-
<img src="http://i.imgur.com/J8JpY5p.png">

691+
<a id="conn7" href="#"><table><tr><td><div class="conns">

692
<font class="h4">Connection Name Here</font>

693-
</div></a><a id="mains" href="#"><div class="ALeft">

693+
<a class="cons" href="/FRIENDID">View Profile</a>

694
<p>Text goes here 

695-
<table><tr><td><div class="conns">

695+
</div></td></tr></table></a>

696
697-
<p>Pics are linked to the user's profile.  Make sure to put in their friend ID number.

697+
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).  

698+
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.  

699+
<a id="conn8" href="#"><table><tr><td><div class="conns">

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).

700+
701-
</div></td><td>

701+
<p>Instructions for this section.  REMOVE THE INSTRUCTIONS ONCE YOU ARE DONE READING THROUGH THEM.

702-
<a href="/FriendID">

702+
<BR>In the event that you have more than 8 connections, I have made the 8th button a 'more' connections field.  Each of the below from the table tag ( < table > ) to the page break ( < br > ) is one small inner table with a pic on the side and text.  Look at the section.  You can clearly see where each one begins and ends.

703-
<img class="connimg" src="http://i.imgur.com/tbyMOxW.jpg">

703+
<BR>If you need more inner connections, copy the entire table (< table > to < br >) and paste it at the end of all the inner connections.  The pic on the first table is set to the right.  The pic on the second table is set to the left.  When you add a table, make sure to copy the type of table (pic left or right) that would go next.

704-
</a></td></tr></table><BR> 

704+
<BR>If you ONLY have eight connections, you can delete this entire area below (again from the FIRST< table > to the LAST< br >)and just put the font class h4 and text like the other sections in buttons 1-7.  If you need help, contact me.

705
 

706-
<table><tr><td>

706+
707-
<a href="/FriendID">

707+
<table><tr><td><div class="connsimg" style="float:right">

708-
<img class="connimg" src="http://i.imgur.com/qS6zU4G.jpg">

708+
<img src="http://i.imgur.com/UWn8wBY.png">

709-
</a></td><td><div class="conns">

709+
</div><div class="connstext" style="float:left;">

710
<font class="h4">Connection Name Here</font>

711-
<p>Text.

711+
<a class="cons" href="/FRIENDID">View Profile</a>

712
<p>This entire area is an inner connection table. Text about connection goes here.

713
</div></td></tr></table><BR>

714-
<table><tr><td><div class="conns">

714+
715
<table><tr><td><div class="connsimg" style="float:left">

716-
<p>Text.

716+
<img src="http://i.imgur.com/EJTqZYo.jpg">

717-
</div></td><td>

717+
</div><div class="connstext" style="float:right;">

718-
<a href="/FriendID">

718+
719-
<img class="connimg" src="http://i.imgur.com/W91P7N3.jpg">

719+
<a class="cons" href="/FRIENDID">View Profile</a>

720-
</a></td></tr></table><BR> 

720+
<p>This entire area is an inner connection table. Text about connection goes here.

721
</div></td></tr></table><BR> 

722-
<table><tr><td>

722+
723-
<a href="/FriendID">

723+
<table><tr><td><div class="connsimg" style="float:right">

724-
<img class="connimg" src="http://i.imgur.com/mK2zDiu.jpg">

724+
<img src="http://i.imgur.com/ny62sbr.jpg">

725-
</a></td><td><div class="conns">

725+
</div><div class="connstext" style="float:left;">

726
<font class="h4">Connection Name Here</font>

727-
<p>Text.

727+
<a class="cons" href="/FRIENDID">View Profile</a>

728
<p>This entire area is an inner connection table. Text about connection goes here.

729
</div></td></tr></table><BR>

730-
<table><tr><td><div class="conns">

730+
731
<table><tr><td><div class="connsimg" style="float:left">

732-
<p>Text.

732+
<img src="http://i.imgur.com/erI860m.jpg">

733-
</div></td><td>

733+
</div><div class="connstext" style="float:right;">

734-
<a href="/FriendID">

734+
735-
<img class="connimg" src="http://i.imgur.com/w2u3L6E.jpg">

735+
<a class="cons" href="/FRIENDID">View Profile</a>

736-
</a></td></tr></table><BR>

736+
<p>This entire area is an inner connection table. Text about connection goes here.

737-
  

737+
738-
<table><tr><td>

738+
739-
<a href="/FriendID">

739+
<table><tr><td><div class="connsimg" style="float:right">

740-
<img class="connimg" src="http://i.imgur.com/eNfTeMy.jpg">

740+
<img src="http://i.imgur.com/H4mKla6.jpg">

741-
</a></td><td><div class="conns">

741+
</div><div class="connstext" style="float:left;">

742
<font class="h4">Connection Name Here</font>

743-
<p>Text.

743+
<a class="cons" href="/FRIENDID">View Profile</a>

744
<p>This entire area is an inner connection table. Text about connection goes here.

745
</div></td></tr></table><BR>

746-
<table><tr><td><div class="conns">

746+
747
 

748-
<p>Text.

748+
</div></td></tr></table></a></div></div>

749-
</div></td><td>

749+
750-
<a href="/FriendID">

750+
<div class="v390w390h" style="background-image:url(http://i.imgur.com/890oFow.png);">

751-
<img class="connimg" src="http://i.imgur.com/T5lqgOc.jpg">

751+
752-
</a></td></tr></table><BR>

752+
<div class="v390w390h_A"> 

753-
  

753+
754-
<table><tr><td>

754+
<font class="h1">About Me</font>

755-
<a href="/FriendID">

755+
<P>This is your about me section.  Included below are text styles and instructions.

756-
<img class="connimg" src="http://i.imgur.com/wFOKoqm.jpg">

756+
757-
</a></td><td><div class="conns">

757+
758
<font class="h1">Picture Sizes</font>

759-
<p>Text.

759+
<p><B>Many sections will show a height and width for the pic in the div class code, but here is the break-up of sizes:</b>

760
<BR>Banner (Group photo) = 1000px width by 500px height. 

761-
  

761+
<BR>Elena pic (tall pic on left) = 500px width by 835px height.

762-
<table><tr><td><div class="conns">

762+
<BR>Icon pics (All Connection pics) = 100px width by 100px height.

763
<BR><BR>If you use this layout for TVD but NOT for the Elena character itself and need a connection pic for her, here is an extra icon pic: http://i.imgur.com/FlaH5qb.png

764-
<p>Text.

764+
<BR><BR>Elena/Stefan/Damon pic (top right pic) = 390px width by 390px height.

765-
</div></td><td>

765+
<BR>Elena pic2 (bottom right pic) = 390px width by 360px height.

766-
<a href="/FriendID">

766+
<BR>Statistical pics (All pics in stats) = 385px width by 150px height.

767-
<img class="connimg" src="http://i.imgur.com/AYbgvNv.jpg">

767+
768-
</a></td></tr></table><BR>

768+
769
<font class="h2">Header2</font>

770
<font class="h3">Header3</font>

771
<font class="h4">Header4</font>

772-
</div><div class="ARight">

772+
773
<font class="h6">Header6</font>

774-
<img src="http://i.imgur.com/cZOQSJT.png">

774+
775
<font class="h8">Header8</font>

776
 

777-
</div></a><a id="info" href="#">  <div class="ALeft">

777+
778
<font class="lyric2">Line 2 of lyrics</font>

779-
<p><font class="h1">Verses</font>

779+
780-
<BR>Verse 1, Verse 2, Verse 3, Verse 4

780+
781
<font class="lyric5">Line 5 of lyrics</font>

782
<font class="lyric6">Line 6 of lyrics</font>

783-
<p><font class="h1">Notations</font>

783+
784-
<br>Multi-para to novella only?

784+
785-
<br>Third person POV format?

785+
786-
<BR>Role play in comments only?

786+
787-
<Br>Put a couple of notations here.

787+
788
<BR><BR>

789
<font class="b2">Bold2</font>

790-
<p><font class="h1">Obligations</font>

790+
791-
<br>Owe _________ a starter

791+
792-
<br>Owe _________ a comment

792+
793
 

794
<BR><BR>I have also included the below two special text classes that are fine as is and need no modification on any site.

795-
<p><font class="h1">Contact Info</font>

795+
796-
<br>AIM: ___________

796+
797-
<BR>YAHOO: ____________

797+
798
 

799
800-
</div><div class="ARight">

800+
</div></div><div class="music">

801
802-
<img src="http://i.imgur.com/8XWW4SC.png">

802+
803
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />

804
    <param name="bgcolor" value="#000000" />

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">

805+
    <param name="FlashVars" value="mp3=http%3A//k006.kiwi6.com/hotlink/2g01d45p0k/fever_ray_-_the_wolf_from_red_riding_hood_hq_www.mp3fiber.com_.mp3&autoplay=1&bgcolor=000000&loadingcolor=740007&buttoncolor=740007&slidercolor=740007" /></object>

806
807
</div><div class="v390w360h"><img src="http://i.imgur.com/qTuITw1.png"></div>

808
809-
    <param name="bgcolor" value="#333333" />

809+
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" />

810+
<div class="vicframe3"><div class="viccontrol3"><table><tr>

811-
</object>

811+
812
<td><a class="third" href="#s1">I</a></td>

813
<td><a class="third" href="#s2">II</a></td>

814-
</div> </div><div class="ficsc"><table><tr><td><table><tr><td><table><tr><td>
814+
<td><a class="third" href="#s3">III</a></td> 

815
<td><a class="third" href="#s4">IV</a></td>

816
<td><a class="third" href="#s5">V</a></td>

817
<td><a class="third" href="#s6">VI</a></td> 

818
819
820
</tr></table></div><div class="vicframe3img"><a id="s1" href="#"><table><tr><td>

821
822
<img src="http://i.imgur.com/mHWIvx6.png"> 

823
824
<div class="stats"> 

825
826
<p><font class="h3">Personality</font>

827
<BR><b>Traits:</b> Input Info

828
<BR><b>Disorders:</b> Input Info

829
<BR><b>Addictions:</b> Input Info

830
<BR><b>Likes:</b> Input Info

831
<BR><b>Dislikes:</b> Input Info

832
<BR><b>Quirks:</b> Input Info

833
834
835
</div></td></tr></table></a><a id="s2" href="#"><table><tr><td>

836
837
<img src="http://i.imgur.com/MwoOhxT.png"> 

838
839
<div class="stats"> 

840
841
<p><font class="h3">Legal</font>

842
<BR><b>NAME:</b> Input info

843
<BR><b>NICKNAMES:</b> Input info

844
<BR><b>ALIASES:</b> Input info

845
<BR><b>DATE OF BIRTH:</b> Input info

846
<BR><b>PLACE OF BIRTH:</b> Input info

847
<BR><b>CURRENT RESIDENCE:</b> Input info

848
 

849
</div></td></tr></table></a><a id="s3" href="#"><table><tr><td>

850
851
<img src="http://i.imgur.com/V7Dpy8j.png"> 

852
853
<div class="stats"> 

854
855
<p><font class="h3">Physical</font>

856
<BR><b>ETHNICITY:</b> Input info

857
<BR><b>HAIR COLOR:</b> Input info

858
<BR><b>EYE COLOR:</b> Input info

859
<BR><b>HEIGHT:</b> Input info

860
<BR><b>WEIGHT:</b> Input info

861
<BR><b>BIRTHMARKS/SCARS:</b> Input info

862
 

863
</div></td></tr></table></a><a id="s4" href="#"><table><tr><td>

864
865
<img src="http://i.imgur.com/IYXc6KN.png"> 

866
867
<div class="stats"> 

868
869
<p><font class="h3">Education/Employment</font>

870
<BR><b>High School</b> Input Info

871
<br><b>College</b> Input Info

872
<br><b>Major</b> Input Info

873
<br><b>Degree</b> Input Info

874
<BR><b>OCCUPATION:</b> Input info

875
<BR><b>JOB DESCRIPTION:</b> Input info

876
<BR><b>EMPLOYER:</b> Input info

877
<BR><b>SKILLSET:</b> Input info

878
879
</div></td></tr></table></a>

880
881
<a id="s5" href="#"><table><tr><td>

882
<img src="http://i.imgur.com/BfqA7PW.png"> 

883
<div class="stats"> 

884
<p><font class="h3">Family</font>

885
<BR><b>MOTHER:</b> Input info

886
<BR><b>FATHER:</b> Input info

887
<BR><b>SISTER(S):</b> Input info

888
<BR><b>BROTHER(S):</b> Input info

889
<BR><b>Other Family:</b> Input info

890
891
</div></td></tr></table></a><a id="s6" href="#"><table><tr><td>

892
893
<img src="http://i.imgur.com/kPoKEbL.png"> 

894
895
<div class="stats"> 

896
897
<p><font class="h3">Relationships</font>

898
<BR><b>SEXUAL ORIENTATION:</b> Input info

899
<BR><b>RELATIONSHIP STATUS:</b> Input info

900
<BR><b>CURRENT RELATIONSHIP(S):</b> Input info

901
<BR><b>PAST RELATIONSHIP(S):</b> Input info

902
903
</div></td></tr></table></a></div></div> 

904
905
906
<div class="buffer"></div><div class="bottom">

907
908
<TABLE><TR>

909
<TD><a CLASS="FIRST" href="/logincomplete.php">Home</a></TD>

910
<TD><a CLASS="FIRST" href="/invite_friend.php?friend_id=xxxxxx">Add</a></TD>

911
<TD><a CLASS="FIRST" href="/send_message.php?member_id=xxxxxx">Message</a></TD>

912
<TD><a CLASS="FIRST" href="/add_testimonial.php?member_id=xxxxxx">Comment</a></TD>

913
<TD><a CLASS="FIRST" href="/gallery.php?member_id=xxxxxx">Photos</a></TD>

914
<TD><a CLASS="FIRST" href="/view_member_blog.php?member_id=xxxxxx">Blogs</a></TD>

915
</TR></TABLE>

916
</div>

917
918
919
920
921
</div><div class="ficsc"><table><tr><td><table><tr><td><table><tr><td>
        

    


            


                                


        

            



                
    

        Public Pastes
    

    
            

    

                    

        

    





    


    
    
    
    
    
    
    
    




    


    



                

            We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.             OK, I Understand
        

    
                

            

                
                    
                
            

            

                Not a member of Pastebin yet?

                Sign Up, it unlocks many cool features!