API tools faq
paste
Advertisement
VicariousHelpSite

CSS/DIV LAYOUT 133a

VicariousHelpSite
Nov 10th, 2013
3,104
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.10 KB | None | 0 0
raw download clone embed print report diff
  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 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.  
  22. ((((((FOR ALL PIC SIZES, SEE THE INSTRUCTIONS IN THE ACTUAL LAYOUT CODING.)))))))
  23.  
  24. **********************
  25. PSD FOR ICON & STATS (RED/BLACK) IMAGES:
  26. http://www.2shared.com/photo/xWp0c84_/layout133a.html
  27.  
  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. /* - -DO NOT PUT ANYTHING ABOVE THE @import LINE ABOVE - - */
  69.  
  70. .vicarious { CSS/DIV Layout 133a // 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: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, 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. font-weight:bold;
  145. text-decoration:none;
  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. a.first, a.first:link, a.first:active, a.first:visited {
  159. width:159px;
  160. margin:15px 2px;
  161. line-height:50px;
  162. height:50px;
  163. }
  164.  
  165. a.second, a.second:link, a.second:active, a.second:visited {
  166. margin-bottom:5px;
  167. width:100px;
  168. line-height:100px;
  169. height:100px;
  170. }
  171.  
  172.  
  173. a.third, a.third:link, a.third:active, a.third:visited {
  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. .h1, h1 {
  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. }
  311.  
  312. .lyric, lyric {Font-size:14pt;}
  313. .lyric2, lyric2 {Font-size:12pt;}
  314. .lyric3, lyric3 {Font-size:13pt;}
  315. .lyric4, lyric4 {Font-size:10pt;}
  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. -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.75);
  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. left:50%;
  333. top:0%;
  334. position:absolute;
  335. overflow:hidden;
  336. z-index:1;
  337. }
  338.  
  339. .vicframe, .vicframe2, .vicframe3 {height:415px;text-align:center;background-color:transparent;}
  340. .vicframe, .vicframe2 {width:605px; margin-left:-500px;}
  341. .vicframe { margin-top:505px;}
  342. .vicframe2, .vicframe3 {margin-top:925px;}
  343. .vicframe3 { width:390px;margin-left:110px;}
  344. .viccontrol, .viccontrol2, .viccontrol3 {margin-left:0px;overflow:hidden;}
  345.  
  346.  
  347. .buffer {
  348. height:85px;
  349. width:1000px;
  350. margin-left:-500px;
  351. margin-top:1345px;
  352. background-color:transparent;
  353. }
  354.  
  355. .bottom {
  356. width:1000px;
  357. height:80px;
  358. left:50%;
  359. bottom:0%;
  360. margin-left:-500px;
  361. margin-bottom:0px;
  362. position:fixed;
  363. overflow:hidden;
  364. z-index:1;
  365. text-align:center;
  366. }
  367.  
  368. .v390w360h, .v390w390h, .music {width:390px;margin-left:110px;}
  369.  
  370. .v390w360h {height:360px;margin-top:980px;}
  371. .v390w390h {height:390px;margin-top:505px;}
  372. .music {height:20px;margin-top:900px;}
  373.  
  374. .v390w415h {
  375. height:415px;
  376. width:390px;
  377. margin-left:110px;
  378. margin-top:925px;
  379. }
  380.  
  381. .v500w835h {
  382. width:500px;
  383. height: 835px;
  384. margin-left:-395px;
  385. margin-top:505px;
  386. }
  387.  
  388. .v1000w500h {
  389. width:1000px;
  390. height: 500px;
  391. margin-left:-500px;
  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. .line1 {margin-left:-525px;}
  398. .line2 {margin-left:505px;}
  399. .line1b, .line1a, .line2a, .line2b {width:15px; }
  400. .line1b {margin-left:-545px;}
  401. .line1a {margin-left:-565px;}
  402. .line2b {margin-left:530px;}
  403. .line2a {margin-left:550px;}
  404.  
  405.  
  406. .conns, .connstext { text-align:justify; overflow:auto;}
  407. .conns {width:490px; height:400px; margin:5px;}
  408. .connsimg {width:100px; height:100px; overflow:hidden;}
  409. .connstext {width:365px; height:96px;border:1px solid; }
  410.  
  411.  
  412.  
  413. .hbox1, .v390w390h_A {
  414. overflow:hidden;
  415. display:block;
  416. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  417. filter: alpha(opacity=0);
  418. opacity: 0;
  419. -webkit-transition: all 1s ease-out 0s;
  420. -moz-transition: all 1s ease-out 0s;
  421. -ms-transition: all 1s ease-out 0s;
  422. -o-transition: all 1s ease-out 0s;
  423. transition: all 1s ease-out 0s;
  424. }
  425.  
  426. .hbox1 {
  427. width:100px;
  428. height:100px;
  429. line-height:100px;
  430. font-size:8pt;
  431. text-align:center;
  432. text-transform:uppercase;
  433. }
  434.  
  435. .v390w390h {
  436. height:390px;
  437. width:390px;
  438. margin-left:110px;
  439. margin-top:505px;
  440. }
  441.  
  442. .v390w390h_A {
  443. height:380px;
  444. width:380px;
  445. padding:5px;
  446. text-align:justify;
  447. }
  448.  
  449. .Hbox1:hover, .v390w390h_A:hover {
  450. -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
  451. filter: alpha(opacity=100);
  452. opacity: 1;
  453. overflow:auto;
  454. }
  455.  
  456.  
  457. .stats {
  458. width:375px;
  459. height:200px;
  460. overflow:auto;
  461. margin-top:5px;
  462. padding:0px 5px;
  463. text-align:left;
  464. }
  465.  
  466. .vicarious{ Color Palette ---- IF YOU CHANGE THE BACKGROUND COLOR, READ THE INFO ABOUT THE LINES }
  467.  
  468. body, .bottom { background-color:740007; }
  469.  
  470. ::-webkit-scrollbar-track {background-color:000000 ; border-color:222222;}
  471. ::-webkit-scrollbar-thumb {background-color:303030; border-color:222222 ;}
  472.  
  473. .viccontrol, .viccontrol2 {background-color:transparent;}
  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. .u, u { color:444444; }
  487. .strike, strike { color:b3000b ; }
  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. 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. .one, one { color:d2d2d2;background-color:transparent; }
  496. .h2, h2, .two, two { color:868686; background-color:transparent; }
  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. .h6, h6 { color:000000; background-color:540005; }
  501. .h7, h7 { color:d2d2d2; background-color:424242; }
  502. .h8, h8 { color:aa000a; background-color:0a0a0a; }
  503.  
  504. big { color:454545; }
  505. small { color:c3c3c3; background-color:b3000b; }
  506.  
  507. .lyric, lyric { color:444444; }
  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. table div, td td td, table div div { visibility:hidden; }
  564. font, a, .vicsc a { visibility:hidden; }
  565. .hidenav {display:none}
  566. div.profileWidth {margin-top: -30px !important;}
  567. div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}
  568. div.profileWidth div.clearfix, hidenav hidenav hidenav,
  569. div.profileWidth div div {filter:none; opacity:0.9999}
  570. div.profileWidth div.clearfix {position:relative; top:30px}
  571. table table embed {display:block; width:202px; height:35px; position:absolute; top:0px; left:0px; visibility:visible;}
  572. table table table embed, .vicholder div embed {position:static !important; width:auto; height:auto; }
  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. .text, td.text td.text table, .contactTable, .lightbluetext8 {display:none;}
  576. table table, table table td {padding:0px; height:0px;}
  577. marquee { z-index:8; }
  578. table div, span, td td td, table div div { visibility:hidden !important; }
  579. .vicholder div, .vicholder div font, .vicholder div a, .vicholder div div, .vicholder font a, .vicholder span, .vicholder div table a, .vicholder div table img, .vicholder div table font, .vicholder div table, .vicholder div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;}
  580. .vicDiv {content:"Layouts available @ http://vicarious-hs.tumblr.com";}
  581. /* - - - - - - - */
  582.  
  583.  
  584. .vicarious{ Hide Codes }
  585. .userProfileURL { display:none; }
  586. .profileInfo { display:none; }
  587. .friendsComments { display:none; }
  588. .friendSpace { display:none; }
  589. .blurbs {display: none;}
  590. .contactTable {display: none;}
  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.  
  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. <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. <font class="h4">Connection Name Here</font>
  643. <a class="cons" href="/FRIENDID">View Profile</a>
  644. <p>Text goes here
  645. </div></td></tr></table></a>
  646.  
  647. <a id="conn3" href="#"><table><tr><td><div class="conns">
  648. <font class="h4">Connection Name Here</font>
  649. <a class="cons" href="/FRIENDID">View Profile</a>
  650. <p>Text goes here
  651. </div></td></tr></table></a>
  652.  
  653. <a id="conn4" href="#"><table><tr><td><div class="conns">
  654. <font class="h4">Connection Name Here</font>
  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></td></tr></table></a>
  690.  
  691. <a id="conn7" href="#"><table><tr><td><div class="conns">
  692. <font class="h4">Connection Name Here</font>
  693. <a class="cons" href="/FRIENDID">View Profile</a>
  694. <p>Text goes here
  695. </div></td></tr></table></a>
  696.  
  697.  
  698.  
  699. <a id="conn8" href="#"><table><tr><td><div class="conns">
  700.  
  701. <p>Instructions for this section. REMOVE THE INSTRUCTIONS ONCE YOU ARE DONE READING THROUGH THEM.
  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. <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. <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.  
  707. <table><tr><td><div class="connsimg" style="float:right">
  708. <img src="http://i.imgur.com/UWn8wBY.png">
  709. </div><div class="connstext" style="float:left;">
  710. <font class="h4">Connection Name Here</font>
  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.  
  715. <table><tr><td><div class="connsimg" style="float:left">
  716. <img src="http://i.imgur.com/EJTqZYo.jpg">
  717. </div><div class="connstext" style="float:right;">
  718. <font class="h4">Connection Name Here</font>
  719. <a class="cons" href="/FRIENDID">View Profile</a>
  720. <p>This entire area is an inner connection table. Text about connection goes here.
  721. </div></td></tr></table><BR>
  722.  
  723. <table><tr><td><div class="connsimg" style="float:right">
  724. <img src="http://i.imgur.com/ny62sbr.jpg">
  725. </div><div class="connstext" style="float:left;">
  726. <font class="h4">Connection Name Here</font>
  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.  
  731. <table><tr><td><div class="connsimg" style="float:left">
  732. <img src="http://i.imgur.com/erI860m.jpg">
  733. </div><div class="connstext" style="float:right;">
  734. <font class="h4">Connection Name Here</font>
  735. <a class="cons" href="/FRIENDID">View Profile</a>
  736. <p>This entire area is an inner connection table. Text about connection goes here.
  737. </div></td></tr></table><BR>
  738.  
  739. <table><tr><td><div class="connsimg" style="float:right">
  740. <img src="http://i.imgur.com/H4mKla6.jpg">
  741. </div><div class="connstext" style="float:left;">
  742. <font class="h4">Connection Name Here</font>
  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.  
  747.  
  748. </div></td></tr></table></a></div></div>
  749.  
  750. <div class="v390w390h" style="background-image:url(http://i.imgur.com/890oFow.png);">
  751.  
  752. <div class="v390w390h_A">
  753.  
  754. <font class="h1">About Me</font>
  755. <P>This is your about me section. Included below are text styles and instructions.
  756.  
  757.  
  758. <font class="h1">Picture Sizes</font>
  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. <BR>Elena pic (tall pic on left) = 500px width by 835px height.
  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. <BR><BR>Elena/Stefan/Damon pic (top right pic) = 390px width by 390px height.
  765. <BR>Elena pic2 (bottom right pic) = 390px width by 360px height.
  766. <BR>Statistical pics (All pics in stats) = 385px width by 150px height.
  767.  
  768. <font class="h1">Header1</font>
  769. <font class="h2">Header2</font>
  770. <font class="h3">Header3</font>
  771. <font class="h4">Header4</font>
  772. <font class="h5">Header5</font>
  773. <font class="h6">Header6</font>
  774. <font class="h7">Header7</font>
  775. <font class="h8">Header8</font>
  776.  
  777. <font class="lyric">Line 1 of lyrics</font>
  778. <font class="lyric2">Line 2 of lyrics</font>
  779. <font class="lyric3">Line 3 of lyrics</font>
  780. <font class="lyric4">Line 4 of lyrics</font>
  781. <font class="lyric5">Line 5 of lyrics</font>
  782. <font class="lyric6">Line 6 of lyrics</font>
  783. <font class="lyric7">Line 7 of lyrics</font>
  784.  
  785. <BR><B>Bold</b> <i> Italic</i> <em>Emphasized text</em>
  786.  
  787. <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.
  788. <BR><BR>
  789. <font class="b2">Bold2</font>
  790. <font class="strong">Strong</font>
  791. <font class="strike">Strike</font>
  792. <font class="u">Underline</font>
  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.  
  796. <big>big</big>
  797. <small>Small</small>
  798.  
  799.  
  800. </div></div><div class="music">
  801.  
  802. <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
  803. <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
  804. <param name="bgcolor" value="#000000" />
  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.  
  810. <div class="vicframe3"><div class="viccontrol3"><table><tr>
  811.  
  812. <td><a class="third" href="#s1">I</a></td>
  813. <td><a class="third" href="#s2">II</a></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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!