Advertisement
VicariousHelpSite

CSS/DIV LAYOUT 132a

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