Advertisement
pausodontic

~Theme 25~Fuck Me Pumps~Character Page/Masterlist

Aug 2nd, 2013
1,057
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.71 KB | None | 0 0
  1. <!--
  2. ~       
  3. ~ ~ ~ ~ ~
  4. ~ ~ ~ ~ ~ ~ ~ ~ ~
  5. ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
  6. ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~
  7. /THEME #25 ~ FUCK ME PUMPS ~ PAUSODONTIC\
  8. ----------------------------------------------
  9.  
  10. -->
  11. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  12. <script type="text/javascript" src="http://static.tumblr.com/tgxbn8z/OASmilwkz/stepcarousel.js">
  13.  
  14.  
  15. /* DO NOT FUCK WITH ANY OF THIS */
  16.  
  17.  
  18. /***********************************************
  19. * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
  20. * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
  21. * This notice must stay intact for legal use
  22. ***********************************************/
  23. </script>
  24.  
  25. <link href='http://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>
  26.  
  27. <link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic' rel='stylesheet' type='text/css'>
  28.  
  29. <link rel="shortcut icon" href="{favicon}" />
  30.  
  31. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  32.  
  33. <script src="http://code.jquery.com/jquery-1.10.0.min.js">
  34. </script>
  35. <script>
  36. $(document).ready(function(){
  37.  
  38.  
  39.  
  40.  
  41. $(".one").click(function(){
  42. $(".1").toggle();
  43. $(".2,.3,.4").hide();
  44. });
  45.  
  46.  
  47. $(".two").click(function(){
  48. $(".2").toggle();
  49. $(".1,.3,.4").hide();
  50. });
  51. $(".three").click(function(){
  52. $(".3").toggle();
  53. $(".2,.1,.4").hide();
  54. });
  55. $(".four").click(function(){
  56. $(".4").toggle();
  57. $(".1,.2,.3").hide();
  58. });
  59.  
  60.  
  61. });
  62. </script>
  63.  
  64. <script type="text/javascript">
  65. function unhide(divID) {
  66. var item = document.getElementById(divID);
  67. if (item) {
  68. item.className=(item.className=='hidden')?'unhidden':'hidden';
  69. }
  70. }
  71. </script>
  72.  
  73. <style type="text/css">
  74.  
  75.  
  76. /* YOU CAN FUCK WITH EVERYTHING UNLESS I SAY U CANT -->
  77.  
  78.  
  79. /* Scrollbar Controls */
  80. ::-webkit-scrollbar-thumb {
  81. background-color: #000;
  82. height:auto;
  83. }
  84.  
  85. ::-webkit-scrollbar {
  86. height:7px;
  87. width: 5px;
  88.  
  89.  
  90. }
  91.  
  92. /* DONT FUCK WITH THIS */
  93. .1, .2, .3, .4 {
  94. display: none;
  95. }
  96. /* DONT FUCK WITH THIS */
  97.  
  98.  
  99.  
  100. body {
  101. background-color: #f9f9f9;
  102. }
  103.  
  104. a {
  105. text-decoration: none;
  106. color: #000;
  107. }
  108.  
  109.  
  110. /* DONT FUCK WITH THIS */
  111. .stepcarousel{
  112. position: fixed;;
  113. top: 50%;
  114. left: 50%;
  115. margin-top: -250px;
  116. margin-left: -350px;
  117. margin-left:
  118. border: 0px;
  119. overflow: scroll;
  120. width: 700px;
  121. height: 500px;
  122. }
  123.  
  124. .stepcarousel .belt{
  125. position: absolute;
  126. left:0;
  127. top: 0;
  128. }
  129.  
  130. .stepcarousel .panel{
  131. float: left;
  132. overflow: hidden;
  133. margin: 0px;
  134. width: 700px;
  135. height: 500px;
  136. }
  137.  
  138. .dimensions {
  139. width: 700px;
  140. height: 500px;
  141. }
  142. /* DONT FUCK WITH THIS */
  143.  
  144. .name {
  145. font-family: arial;
  146. font-weight: bold;
  147. text-transform: uppercase;
  148. position: absolute;
  149. background-color: #f2f2f2;
  150. padding: 25px;
  151. color: #000;
  152. font-size: 15px;
  153. margin-left: 35px;
  154. margin-top: 35px;
  155. padding-bottom: 35px;
  156. }
  157.  
  158. /* DONT FUCK WITH THIS */
  159. .panel {
  160. background-color: #fff;
  161. }
  162. /* DONT FUCK WITH THIS */
  163.  
  164. /* DONT FUCK WITH THIS */
  165. .dots {
  166. position: absolute;
  167. left: 50%;
  168. margin-left: -31px;
  169. }
  170. /* DONT FUCK WITH THIS */
  171.  
  172. .summary {
  173. background-color: #f2f2f2;
  174. overflow: auto;
  175. width: 580px;
  176. position: absolute;
  177. height: 265px;
  178. margin-top: 145px;
  179. margin-left: 35px;
  180. padding: 25px;
  181. }
  182.  
  183. .summarytitle {
  184. font-family: arial;
  185. font-weight: bold;
  186. text-transform: uppercase;
  187. color: #000;
  188. font-size: 15px;
  189. text-align: left;
  190. }
  191.  
  192. .summarytext {
  193. font-size: 10px;
  194. font-family: 'Roboto', sans-serif;
  195. font-weight: 400;
  196. text-transform: none;
  197. }
  198.  
  199. .quote {
  200. background-color: #f2f2f2;
  201. overflow: auto;
  202. width: 450px;
  203. position: absolute;
  204. height: auto;
  205. margin-top: 170px;
  206. margin-left: 100px;
  207. padding: 25px;
  208. text-transform: lowercase;
  209. font-family:'Libre Baskerville', serif;
  210. font-style: italic;
  211. font-size: 20px;
  212. }
  213.  
  214.  
  215.  
  216. .links {
  217. position: absolute;
  218. margin-left: 85px;
  219. margin-top: 190px;
  220. }
  221.  
  222. .links a {
  223. text-align: left;
  224. background-color: #f2f2f2;
  225. padding-bottom: 25px;
  226. padding-left: 25px;
  227. font-family: arial;
  228. font-weight: bold;
  229. font-size: 15px;
  230. color: #000;
  231. height: 45px;
  232. text-decoration: none;
  233. line-height: 85px;
  234. margin: 2px 2px;
  235. display:inline-block;
  236. }
  237.  
  238. .links a:hover {
  239. opacity: 0.9;
  240. }
  241.  
  242. #linkwidth a {
  243. width: 145px;
  244. }
  245.  
  246. .info {
  247. background-color: #f2f2f2;
  248. overflow: auto;
  249. width: 580px;
  250. position: absolute;
  251. height: 265px;
  252. margin-top: 145px;
  253. margin-left: 35px;
  254. padding: 25px;
  255. font-size: 10px;
  256. font-family: 'Roboto', sans-serif;
  257. font-weight: 400;
  258. text-transform: none;
  259. text-align: left;
  260. }
  261.  
  262. .infotext {
  263. font-size: 10px;
  264. font-family: 'Roboto', sans-serif;
  265. font-weight: 400;
  266. text-transform: none;
  267. text-align: left;
  268. }
  269.  
  270. .detail {
  271. font-family: arial;
  272. font-weight: bold;
  273. text-transform: uppercase;
  274. color: #000;
  275. font-size: 15px;
  276. text-align: left;
  277. text-decoration: none;
  278. }
  279.  
  280. .detail a{
  281. font-family: arial;
  282. font-weight: bold;
  283. text-transform: uppercase;
  284. color: #000;
  285. font-size: 15px;
  286. text-align: left;
  287. text-decoration: none;
  288. }
  289.  
  290.  
  291.  
  292. .cred {
  293. font-family: arial;
  294. font-weight: bold;
  295. text-transform: uppercase;
  296. position: fixed;
  297. color: #000;
  298. font-size: 14px;
  299. right: 5px;
  300. bottom: 5px;
  301. text-decoration: none;
  302. }
  303.  
  304.  
  305. /* Tooltip Controls */
  306. #s-m-t-tooltip {
  307. max-width:300px;
  308. line-height: 90%;
  309. margin-top: 5px;
  310. margin-left: -30px;
  311. padding: 12px;
  312. border-left: 4px solid #000;
  313. background-color: #f2f2f2;
  314. color: #000;
  315. font-family: arial;
  316. text-transform: uppercase;
  317. font-weight: bold;
  318. font-size: 10px;
  319. line-height: 14px;
  320. margin-left: 5px;
  321. margin-top: 5px;
  322. z-index:999999999999999999999999999999999999;
  323. }
  324.  
  325.  
  326. </style>
  327.  
  328. <!-- DONT FUCK WITH THIS -->
  329.  
  330. <script type="text/javascript">
  331.  
  332.  
  333. stepcarousel.setup({
  334. galleryid: 'mygallery', //id of carousel DIV
  335. beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
  336. panelclass: 'panel', //class of panel DIVs each holding content
  337. autostep: {enable:false, moveby:1, pause:3000},
  338. panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
  339. defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://i.imgur.com/Y9zTNAv.png', -25, 250], rightnav: ['http://i.imgur.com/ZfD7Zav.png', 15, 250]},
  340. statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
  341. contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
  342. })
  343.  
  344. </script>
  345.  
  346. <!-- Tooltip Controls -->
  347. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  348. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  349. <script>
  350. (function($){
  351. $(document).ready(function(){
  352. $("a[title]").style_my_tooltips({
  353. tip_follows_cursor:true,
  354. tip_delay_time:90,
  355. tip_fade_speed:600,
  356. attribute:"title"
  357. });
  358. });
  359. })(jQuery);
  360. </script>
  361.  
  362. <div class="cred"><a href="http://pausodontic.tumblr.com">cred.</a></div>
  363.  
  364. <!-- DONT FUCK WITH THIS -->
  365.  
  366.  
  367.  
  368. <center>
  369.  
  370.  
  371.  
  372.  
  373.  
  374. <div class="dimensions">
  375.  
  376. <div id="mygallery" class="stepcarousel">
  377. <div class="belt">
  378.  
  379. <!-- FIRST PANEL -->
  380.  
  381. <!-- INPUT YOUR CHARACTER'S FACE OR WHATEVER BACKGROUND IMAGE YOU WANT WHERE THE CURRENT IMAGE LINK IS. YOU CAN USE TUMBLR AS A PLACE TO UPLOAD YOUR IMAGE OR ANOTHER IMAGE SHARING SITE, I SUGGEST IMGUR. PLEASE LINK TO THE /SPECIFIC/ IMAGE AND NOT THE WEBPAGE WHERE IT'S LOCATED. IT'LL FIT BEST WHEN IT'S 700X500PX -->
  382. <div class="panel" style="background-image: url('http://i.imgur.com/w3Qrtam.png');">
  383.  
  384.  
  385. <!-- HERE IS WHERE YOU INPUT YOUR CHARACTER'S NAME -->
  386. <div class="name">
  387.  
  388. character name 1
  389.  
  390. <div class="dots">
  391. <a class="one" href="#" title="intro"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  392. <a class="two" href="#" title="quote"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  393. <a class="three" href="#" title="links"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  394. <a class="four" href="#" title="more"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  395. </div>
  396. </div>
  397.  
  398. <!-- BEGINNING OF YOUR 1ST BOX -->
  399. <div class="1" style="display:none;">
  400. <div class="summary">
  401.  
  402. <!-- HERE IS WHERE YOU INPUT THE HEADING OF YOUR FIRST BOX -->
  403. <div class="summarytitle">
  404. life story
  405. <div class="summarytext">
  406. <!-- HERE IS WHERE YOU INPUT ALL OF THE INFORMATION OF YOUR FIRST BOX. ADD < P > EVERYTIME YOU BEGIN A PARAGRAPH AND ADD < / P > EVERYTIME YOU END ONE -->
  407. <p>Here is where you can give all the information about your character you want. It doesn't matter if you run out of room in the box because it has scrolling! The background image can be different for each character, it should be at least 700px wide by 500px tall, if it goes over that's fine (it'll be cropped). You don't want anything smaller than that as the background won't look right. To change anything in this box (font, color, etc.) you can find <i>.summarytitle</i> in the html to change the main header of this box and you can find <i>.summarytext</i> in the html to change the formatting of this text.</p>
  408. <p>
  409. To change the box that contains your character's name find <i>.name</i> in the html to change that. Note that any changes you make do have a possibilty of messing with how this works, please do not come to me after you have changed it drastically and it no longer works. To change the quote formatting find <i>.quote</i> in the html and change that. <i>Under no cicumstances should you add "position fixed" anywhere in the html as that will mess up the sliding of the slider.</i> To change the links specific fomratting find <i>.links a</i> in the html, to change their width find <i>.linkwidth a </i> in the html.</p>
  410. <p>
  411. To change the font of the normal text of the extra box find <i>.infotext</i> in the html. To change the bolded headings in the extra box find <i>.detail</i> in the html and change that. If you have any other questions you can message me on my blog and ask me there. To add another sliding panel just re-copy all of the codes from the codes i have located at the very bottom, they will be grey unlike the rest of the coding which is white. </p>
  412.  
  413.  
  414. </div>
  415. </div>
  416. </div>
  417. </div>
  418.  
  419. <!-- BEGINNING OF YOUR 2ND BOX -->
  420. <div class="2" style="display:none;">
  421. <!-- THIS IS WHERE YOU INPUT YOUR CHARACTER'S QUOTE OR WHATEVER -->
  422. <div class="quote">
  423. "You don't like players, that's what you say, but you really wouldn't mind a millionaire."
  424. </div>
  425. </div>
  426.  
  427.  
  428. <!-- BEGINNING OF YOUR 3RD BOX -->
  429. <div class="3" style="display:none;">
  430. <div id="linkwidth">
  431. <div class="links">
  432.  
  433. <!-- INPUT YOUR LINKS HERE -->
  434.  
  435. <a href="">fhdfh</a>
  436. <a href="">fhdfh</a>
  437. <a href="">asyeutujy</a><br>
  438.  
  439. <a href="">hrhryjnyumyum</a>
  440. <a href="">fhdfh</a>
  441. <a href="">fd</a><br>
  442.  
  443. <a href="">ewtaevrk</a>
  444. <a href="">fhdfh</a>
  445. <a href="">revsyrt</a>
  446.  
  447. </div>
  448. </div>
  449. </div>
  450.  
  451. <!-- BEGINNING OF YOUR 4TH BOX -->
  452. <div class="4" style="display:none;">
  453. <div class="info">
  454. <div class="infotext">
  455.  
  456. <!-- THIS IS YOUR EXTRA BOX. TO ADD A HEADER COPY THE PART THAT SAYS "DETAIL" AND ITS SURROUNDING CODES. -->
  457. <div class="detail">
  458. detail</div>
  459. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere ac leo ut dignissim. Donec suscipit, ipsum eu vehicula condimentum, felis lectus fermentum eros, eget laoreet nisl sem eu tellus. Fusce imperdiet metus in tellus condimentum, eu tristique magna ultrices. Aenean sed mauris luctus, eleifend velit pharetra, lacinia odio. Etiam varius, ante at interdum suscipit, dui arcu lobortis diam, in malesuada felis dolor quis nulla. Nunc fermentum diam sapien, a commodo leo commodo at. Etiam tristique suscipit ipsum. Curabitur placerat euismod mauris id elementum. Donec id dolor ligula. Nullam tincidunt iaculis purus, in gravida lacus. Nunc congue cursus lectus eu tempus.
  460.  
  461. <br> <br>
  462.  
  463. <div class="detail">
  464. detail
  465. </div>
  466. Integer tortor metus, consequat in venenatis in, rhoncus ac ipsum. Curabitur imperdiet erat fermentum suscipit vulputate. Suspendisse orci est, luctus id libero quis, iaculis aliquet ante. Cras rhoncus urna lorem, sit amet laoreet libero pharetra at. Cras eu felis scelerisque, porttitor felis vel, adipiscing libero. Fusce in molestie nisl, non commodo libero. Curabitur pellentesque quis eros et egestas. Integer non rutrum ipsum. Nullam dapibus mauris in pharetra condimentum. Sed pellentesque ut ligula vitae dapibus. Donec sollicitudin ultricies laoreet. Cras eget accumsan nunc. Nullam diam arcu, ultrices vel diam non, cursus euismod lorem. Proin pharetra orci rhoncus mauris mollis blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  467.  
  468. <br><br>
  469.  
  470. <div class="detail">
  471. detail
  472. </div>
  473. Maecenas varius ligula augue, a cursus nunc porta et. Nulla tempus tincidunt luctus. Nulla augue mauris, pharetra non felis ut, sollicitudin mattis magna. Vestibulum eleifend dolor in metus dignissim hendrerit. Curabitur at turpis suscipit risus laoreet adipiscing sed id risus. Sed facilisis tellus eget magna viverra, tempus eleifend risus auctor. Nunc non egestas urna. Etiam non tortor eu sem bibendum commodo nec sit amet nulla. Donec malesuada mi non odio vehicula, id euismod est consectetur. Sed eget nibh vel metus pretium dignissim ut ac augue.
  474.  
  475. <br><br>
  476.  
  477. <div class="detail">
  478. detail
  479. </div>
  480. Praesent auctor vulputate turpis, tincidunt viverra massa ultricies sit amet. Vestibulum et molestie justo, vitae blandit lacus. Phasellus lacus turpis, auctor id erat ac, accumsan mollis nulla. Aenean non lacinia lacus. Etiam eu vestibulum risus, a tempor quam. Quisque malesuada nulla at felis ornare feugiat. Vivamus iaculis tempus fringilla.
  481.  
  482. <br><br>
  483.  
  484. <div class="detail">
  485. detail
  486. </div>
  487.  
  488. Duis ultricies felis mollis, mattis dolor eu, tincidunt risus. Aenean interdum ante nec diam facilisis egestas. Vivamus dignissim orci sed tristique condimentum. Maecenas viverra, purus et mattis mollis, tortor felis posuere velit, vitae ultrices augue nulla sed lectus. Fusce accumsan adipiscing semper. Etiam facilisis tempor varius. Aliquam erat volutpat.
  489.  
  490.  
  491.  
  492.  
  493.  
  494.  
  495.  
  496. </div>
  497. </div>
  498. </div>
  499. </div>
  500.  
  501.  
  502.  
  503.  
  504. <!-- SECOND PANEL -->
  505.  
  506. <!-- INPUT YOUR CHARACTER'S FACE OR WHATEVER BACKGROUND IMAGE YOU WANT WHERE THE CURRENT IMAGE LINK IS. YOU CAN USE TUMBLR AS A PLACE TO UPLOAD YOUR IMAGE OR ANOTHER IMAGE SHARING SITE, I SUGGEST IMGUR. PLEASE LINK TO THE /SPECIFIC/ IMAGE AND NOT THE WEBPAGE WHERE IT'S LOCATED. IT'LL FIT BEST WHEN IT'S 700X500PX -->
  507.  
  508.  
  509. <div class="panel" style="background-image: url('http://i.imgur.com/ajNuK20.png');">
  510.  
  511.  
  512.  
  513.  
  514.  
  515. <!-- HERE IS WHERE YOU INPUT YOUR CHARACTER'S NAME -->
  516. <div class="name">
  517.  
  518. character name 2
  519.  
  520. <div class="dots">
  521. <a class="one" href="#" title="intro"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  522. <a class="two" href="#" title="quote"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  523. <a class="three" href="#" title="links"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  524. <a class="four" href="#" title="more"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  525. </div>
  526. </div>
  527.  
  528. <!-- BEGINNING OF YOUR 1ST BOX -->
  529. <div class="1" style="display:none;">
  530. <div class="summary">
  531.  
  532. <!-- HERE IS WHERE YOU INPUT THE HEADING OF YOUR FIRST BOX -->
  533. <div class="summarytitle">
  534. life story
  535. <div class="summarytext">
  536. <!-- HERE IS WHERE YOU INPUT ALL OF THE INFORMATION OF YOUR FIRST BOX. ADD < P > EVERYTIME YOU BEGIN A PARAGRAPH AND ADD < / P > EVERYTIME YOU END ONE -->
  537. <p>Here is where you can give all the information about your character you want. It doesn't matter if you run out of room in the box because it has scrolling! The background image can be different for each character, it should be at least 700px wide by 500px tall, if it goes over that's fine (it'll be cropped). You don't want anything smaller than that as the background won't look right. To change anything in this box (font, color, etc.) you can find <i>.summarytitle</i> in the html to change the main header of this box and you can find <i>.summarytext</i> in the html to change the formatting of this text.</p>
  538. <p>
  539. To change the box that contains your character's name find <i>.name</i> in the html to change that. Note that any changes you make do have a possibilty of messing with how this works, please do not come to me after you have changed it drastically and it no longer works. To change the quote formatting find <i>.quote</i> in the html and change that. <i>Under no cicumstances should you add "position fixed" anywhere in the html as that will mess up the sliding of the slider.</i> To change the links specific fomratting find <i>.links a</i> in the html, to change their width find <i>.linkwidth a </i> in the html.</p>
  540. <p>
  541. To change the font of the normal text of the extra box find <i>.infotext</i> in the html. To change the bolded headings in the extra box find <i>.detail</i> in the html and change that. If you have any other questions you can message me on my blog and ask me there. To add another sliding panel just re-copy all of the codes from the codes i have located at the very bottom, they will be grey unlike the rest of the coding which is white. </p>
  542.  
  543.  
  544. </div>
  545. </div>
  546. </div>
  547. </div>
  548.  
  549. <!-- BEGINNING OF YOUR 2ND BOX -->
  550. <div class="2" style="display:none;">
  551. <!-- THIS IS WHERE YOU INPUT YOUR CHARACTER'S QUOTE OR WHATEVER -->
  552. <div class="quote">
  553. "You don't like players, that's what you say, but you really wouldn't mind a millionaire."
  554. </div>
  555. </div>
  556.  
  557.  
  558. <!-- BEGINNING OF YOUR 3RD BOX -->
  559. <div class="3" style="display:none;">
  560. <div id="linkwidth">
  561. <div class="links">
  562.  
  563. <!-- INPUT YOUR LINKS HERE -->
  564.  
  565. <a href="">fhdfh</a>
  566. <a href="">fhdfh</a>
  567. <a href="">asyeutujy</a><br>
  568.  
  569. <a href="">hrhryjnyumyum</a>
  570. <a href="">fhdfh</a>
  571. <a href="">fd</a><br>
  572.  
  573. <a href="">ewtaevrk</a>
  574. <a href="">fhdfh</a>
  575. <a href="">revsyrt</a>
  576.  
  577. </div>
  578. </div>
  579. </div>
  580.  
  581. <!-- BEGINNING OF YOUR 4TH BOX -->
  582. <div class="4" style="display:none;">
  583. <div class="info">
  584. <div class="infotext">
  585.  
  586. <!-- THIS IS YOUR EXTRA BOX. TO ADD A HEADER COPY THE PART THAT SAYS "DETAIL" AND ITS SURROUNDING CODES. -->
  587. <div class="detail">
  588. detail</div>
  589. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere ac leo ut dignissim. Donec suscipit, ipsum eu vehicula condimentum, felis lectus fermentum eros, eget laoreet nisl sem eu tellus. Fusce imperdiet metus in tellus condimentum, eu tristique magna ultrices. Aenean sed mauris luctus, eleifend velit pharetra, lacinia odio. Etiam varius, ante at interdum suscipit, dui arcu lobortis diam, in malesuada felis dolor quis nulla. Nunc fermentum diam sapien, a commodo leo commodo at. Etiam tristique suscipit ipsum. Curabitur placerat euismod mauris id elementum. Donec id dolor ligula. Nullam tincidunt iaculis purus, in gravida lacus. Nunc congue cursus lectus eu tempus.
  590.  
  591. <br> <br>
  592.  
  593. <div class="detail">
  594. detail
  595. </div>
  596. Integer tortor metus, consequat in venenatis in, rhoncus ac ipsum. Curabitur imperdiet erat fermentum suscipit vulputate. Suspendisse orci est, luctus id libero quis, iaculis aliquet ante. Cras rhoncus urna lorem, sit amet laoreet libero pharetra at. Cras eu felis scelerisque, porttitor felis vel, adipiscing libero. Fusce in molestie nisl, non commodo libero. Curabitur pellentesque quis eros et egestas. Integer non rutrum ipsum. Nullam dapibus mauris in pharetra condimentum. Sed pellentesque ut ligula vitae dapibus. Donec sollicitudin ultricies laoreet. Cras eget accumsan nunc. Nullam diam arcu, ultrices vel diam non, cursus euismod lorem. Proin pharetra orci rhoncus mauris mollis blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  597.  
  598. <br><br>
  599.  
  600. <div class="detail">
  601. detail
  602. </div>
  603. Maecenas varius ligula augue, a cursus nunc porta et. Nulla tempus tincidunt luctus. Nulla augue mauris, pharetra non felis ut, sollicitudin mattis magna. Vestibulum eleifend dolor in metus dignissim hendrerit. Curabitur at turpis suscipit risus laoreet adipiscing sed id risus. Sed facilisis tellus eget magna viverra, tempus eleifend risus auctor. Nunc non egestas urna. Etiam non tortor eu sem bibendum commodo nec sit amet nulla. Donec malesuada mi non odio vehicula, id euismod est consectetur. Sed eget nibh vel metus pretium dignissim ut ac augue.
  604.  
  605. <br><br>
  606.  
  607. <div class="detail">
  608. detail
  609. </div>
  610. Praesent auctor vulputate turpis, tincidunt viverra massa ultricies sit amet. Vestibulum et molestie justo, vitae blandit lacus. Phasellus lacus turpis, auctor id erat ac, accumsan mollis nulla. Aenean non lacinia lacus. Etiam eu vestibulum risus, a tempor quam. Quisque malesuada nulla at felis ornare feugiat. Vivamus iaculis tempus fringilla.
  611.  
  612. <br><br>
  613.  
  614. <div class="detail">
  615. detail
  616. </div>
  617.  
  618. Duis ultricies felis mollis, mattis dolor eu, tincidunt risus. Aenean interdum ante nec diam facilisis egestas. Vivamus dignissim orci sed tristique condimentum. Maecenas viverra, purus et mattis mollis, tortor felis posuere velit, vitae ultrices augue nulla sed lectus. Fusce accumsan adipiscing semper. Etiam facilisis tempor varius. Aliquam erat volutpat.
  619.  
  620.  
  621.  
  622.  
  623.  
  624.  
  625.  
  626. </div>
  627. </div>
  628. </div>
  629. </div>
  630.  
  631.  
  632.  
  633.  
  634.  
  635. <!-- THIRD PANEL -->
  636.  
  637. <!-- INPUT YOUR CHARACTER'S FACE OR WHATEVER BACKGROUND IMAGE YOU WANT WHERE THE CURRENT IMAGE LINK IS. YOU CAN USE TUMBLR AS A PLACE TO UPLOAD YOUR IMAGE OR ANOTHER IMAGE SHARING SITE, I SUGGEST IMGUR. PLEASE LINK TO THE /SPECIFIC/ IMAGE AND NOT THE WEBPAGE WHERE IT'S LOCATED. IT'LL FIT BEST WHEN IT'S 700X500PX -->
  638.  
  639. <div class="panel" style="background-image: url('http://i.imgur.com/SjUZ8rV.png');">
  640.  
  641.  
  642. <!-- HERE IS WHERE YOU INPUT YOUR CHARACTER'S NAME -->
  643. <div class="name">
  644.  
  645. character name 2
  646.  
  647. <div class="dots">
  648. <a class="one" href="#" title="intro"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  649. <a class="two" href="#" title="quote"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  650. <a class="three" href="#" title="links"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  651. <a class="four" href="#" title="more"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  652. </div>
  653. </div>
  654.  
  655. <!-- BEGINNING OF YOUR 1ST BOX -->
  656. <div class="1" style="display:none;">
  657. <div class="summary">
  658.  
  659. <!-- HERE IS WHERE YOU INPUT THE HEADING OF YOUR FIRST BOX -->
  660. <div class="summarytitle">
  661. life story
  662. <div class="summarytext">
  663. <!-- HERE IS WHERE YOU INPUT ALL OF THE INFORMATION OF YOUR FIRST BOX. ADD < P > EVERYTIME YOU BEGIN A PARAGRAPH AND ADD < / P > EVERYTIME YOU END ONE -->
  664. <p>Here is where you can give all the information about your character you want. It doesn't matter if you run out of room in the box because it has scrolling! The background image can be different for each character, it should be at least 700px wide by 500px tall, if it goes over that's fine (it'll be cropped). You don't want anything smaller than that as the background won't look right. To change anything in this box (font, color, etc.) you can find <i>.summarytitle</i> in the html to change the main header of this box and you can find <i>.summarytext</i> in the html to change the formatting of this text.</p>
  665. <p>
  666. To change the box that contains your character's name find <i>.name</i> in the html to change that. Note that any changes you make do have a possibilty of messing with how this works, please do not come to me after you have changed it drastically and it no longer works. To change the quote formatting find <i>.quote</i> in the html and change that. <i>Under no cicumstances should you add "position fixed" anywhere in the html as that will mess up the sliding of the slider.</i> To change the links specific fomratting find <i>.links a</i> in the html, to change their width find <i>.linkwidth a </i> in the html.</p>
  667. <p>
  668. To change the font of the normal text of the extra box find <i>.infotext</i> in the html. To change the bolded headings in the extra box find <i>.detail</i> in the html and change that. If you have any other questions you can message me on my blog and ask me there. To add another sliding panel just re-copy all of the codes from the codes i have located at the very bottom, they will be grey unlike the rest of the coding which is white. </p>
  669.  
  670.  
  671. </div>
  672. </div>
  673. </div>
  674. </div>
  675.  
  676. <!-- BEGINNING OF YOUR 2ND BOX -->
  677. <div class="2" style="display:none;">
  678. <!-- THIS IS WHERE YOU INPUT YOUR CHARACTER'S QUOTE OR WHATEVER -->
  679. <div class="quote">
  680. "You don't like players, that's what you say, but you really wouldn't mind a millionaire."
  681. </div>
  682. </div>
  683.  
  684.  
  685. <!-- BEGINNING OF YOUR 3RD BOX -->
  686. <div class="3" style="display:none;">
  687. <div id="linkwidth">
  688. <div class="links">
  689.  
  690. <!-- INPUT YOUR LINKS HERE -->
  691.  
  692. <a href="">fhdfh</a>
  693. <a href="">fhdfh</a>
  694. <a href="">asyeutujy</a><br>
  695.  
  696. <a href="">hrhryjnyumyum</a>
  697. <a href="">fhdfh</a>
  698. <a href="">fd</a><br>
  699.  
  700. <a href="">ewtaevrk</a>
  701. <a href="">fhdfh</a>
  702. <a href="">revsyrt</a>
  703.  
  704. </div>
  705. </div>
  706. </div>
  707.  
  708. <!-- BEGINNING OF YOUR 4TH BOX -->
  709. <div class="4" style="display:none;">
  710. <div class="info">
  711. <div class="infotext">
  712.  
  713. <!-- THIS IS YOUR EXTRA BOX. TO ADD A HEADER COPY THE PART THAT SAYS "DETAIL" AND ITS SURROUNDING CODES. -->
  714. <div class="detail">
  715. detail</div>
  716. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere ac leo ut dignissim. Donec suscipit, ipsum eu vehicula condimentum, felis lectus fermentum eros, eget laoreet nisl sem eu tellus. Fusce imperdiet metus in tellus condimentum, eu tristique magna ultrices. Aenean sed mauris luctus, eleifend velit pharetra, lacinia odio. Etiam varius, ante at interdum suscipit, dui arcu lobortis diam, in malesuada felis dolor quis nulla. Nunc fermentum diam sapien, a commodo leo commodo at. Etiam tristique suscipit ipsum. Curabitur placerat euismod mauris id elementum. Donec id dolor ligula. Nullam tincidunt iaculis purus, in gravida lacus. Nunc congue cursus lectus eu tempus.
  717.  
  718. <br> <br>
  719.  
  720. <div class="detail">
  721. detail
  722. </div>
  723. Integer tortor metus, consequat in venenatis in, rhoncus ac ipsum. Curabitur imperdiet erat fermentum suscipit vulputate. Suspendisse orci est, luctus id libero quis, iaculis aliquet ante. Cras rhoncus urna lorem, sit amet laoreet libero pharetra at. Cras eu felis scelerisque, porttitor felis vel, adipiscing libero. Fusce in molestie nisl, non commodo libero. Curabitur pellentesque quis eros et egestas. Integer non rutrum ipsum. Nullam dapibus mauris in pharetra condimentum. Sed pellentesque ut ligula vitae dapibus. Donec sollicitudin ultricies laoreet. Cras eget accumsan nunc. Nullam diam arcu, ultrices vel diam non, cursus euismod lorem. Proin pharetra orci rhoncus mauris mollis blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  724.  
  725. <br><br>
  726.  
  727. <div class="detail">
  728. detail
  729. </div>
  730. Maecenas varius ligula augue, a cursus nunc porta et. Nulla tempus tincidunt luctus. Nulla augue mauris, pharetra non felis ut, sollicitudin mattis magna. Vestibulum eleifend dolor in metus dignissim hendrerit. Curabitur at turpis suscipit risus laoreet adipiscing sed id risus. Sed facilisis tellus eget magna viverra, tempus eleifend risus auctor. Nunc non egestas urna. Etiam non tortor eu sem bibendum commodo nec sit amet nulla. Donec malesuada mi non odio vehicula, id euismod est consectetur. Sed eget nibh vel metus pretium dignissim ut ac augue.
  731.  
  732. <br><br>
  733.  
  734. <div class="detail">
  735. detail
  736. </div>
  737. Praesent auctor vulputate turpis, tincidunt viverra massa ultricies sit amet. Vestibulum et molestie justo, vitae blandit lacus. Phasellus lacus turpis, auctor id erat ac, accumsan mollis nulla. Aenean non lacinia lacus. Etiam eu vestibulum risus, a tempor quam. Quisque malesuada nulla at felis ornare feugiat. Vivamus iaculis tempus fringilla.
  738.  
  739. <br><br>
  740.  
  741. <div class="detail">
  742. detail
  743. </div>
  744.  
  745. Duis ultricies felis mollis, mattis dolor eu, tincidunt risus. Aenean interdum ante nec diam facilisis egestas. Vivamus dignissim orci sed tristique condimentum. Maecenas viverra, purus et mattis mollis, tortor felis posuere velit, vitae ultrices augue nulla sed lectus. Fusce accumsan adipiscing semper. Etiam facilisis tempor varius. Aliquam erat volutpat.
  746.  
  747.  
  748.  
  749.  
  750.  
  751.  
  752.  
  753. </div>
  754. </div>
  755. </div>
  756. </div>
  757.  
  758.  
  759.  
  760.  
  761.  
  762.  
  763.  
  764. <!-- PANEL CODING. TO ADD ANOTHER PANEL PLEASE COPY THE CODE LOCATED BELOW.
  765.  
  766.  
  767. <div class="panel" style="background-image: url('http://i.imgur.com/SjUZ8rV.png');">
  768.  
  769.  
  770.  
  771. <div class="name">
  772.  
  773. character name 2
  774.  
  775. <div class="dots">
  776. <a class="one" href="#" title="intro"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  777. <a class="two" href="#" title="quote"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  778. <a class="three" href="#" title="links"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  779. <a class="four" href="#" title="more"><img src="http://i.imgur.com/t0WgWwR.png"></a>
  780. </div>
  781. </div>
  782.  
  783.  
  784. <div class="1" style="display:none;">
  785. <div class="summary">
  786.  
  787.  
  788. <div class="summarytitle">
  789. life story
  790. <div class="summarytext">
  791.  
  792.  
  793. <p>Here is where you can give all the information about your character you want. It doesn't matter if you run out of room in the box because it has scrolling! The background image can be different for each character, it should be at least 700px wide by 500px tall, if it goes over that's fine (it'll be cropped). You don't want anything smaller than that as the background won't look right. To change anything in this box (font, color, etc.) you can find <i>.summarytitle</i> in the html to change the main header of this box and you can find <i>.summarytext</i> in the html to change the formatting of this text.</p>
  794. <p>
  795. To change the box that contains your character's name find <i>.name</i> in the html to change that. Note that any changes you make do have a possibilty of messing with how this works, please do not come to me after you have changed it drastically and it no longer works. To change the quote formatting find <i>.quote</i> in the html and change that. <i>Under no cicumstances should you add "position fixed" anywhere in the html as that will mess up the sliding of the slider.</i> To change the links specific fomratting find <i>.links a</i> in the html, to change their width find <i>.linkwidth a </i> in the html.</p>
  796. <p>
  797. To change the font of the normal text of the extra box find <i>.infotext</i> in the html. To change the bolded headings in the extra box find <i>.detail</i> in the html and change that. If you have any other questions you can message me on my blog and ask me there. To add another sliding panel just re-copy all of the codes from the codes i have located at the very bottom, they will be grey unlike the rest of the coding which is white. </p>
  798.  
  799.  
  800. </div>
  801. </div>
  802. </div>
  803. </div>
  804.  
  805.  
  806.  
  807. <div class="2" style="display:none;">
  808.  
  809.  
  810. <div class="quote">
  811. "You don't like players, that's what you say, but you really wouldn't mind a millionaire."
  812. </div>
  813. </div>
  814.  
  815.  
  816.  
  817.  
  818. <div class="3" style="display:none;">
  819. <div id="linkwidth">
  820. <div class="links">
  821.  
  822.  
  823.  
  824.  
  825. <a href="">fhdfh</a>
  826. <a href="">fhdfh</a>
  827. <a href="">asyeutujy</a><br>
  828.  
  829. <a href="">hrhryjnyumyum</a>
  830. <a href="">fhdfh</a>
  831. <a href="">fd</a><br>
  832.  
  833. <a href="">ewtaevrk</a>
  834. <a href="">fhdfh</a>
  835. <a href="">revsyrt</a>
  836.  
  837. </div>
  838. </div>
  839. </div>
  840.  
  841.  
  842.  
  843. <div class="4" style="display:none;">
  844. <div class="info">
  845. <div class="infotext">
  846.  
  847.  
  848.  
  849. <div class="detail">
  850. detail</div>
  851. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere ac leo ut dignissim. Donec suscipit, ipsum eu vehicula condimentum, felis lectus fermentum eros, eget laoreet nisl sem eu tellus. Fusce imperdiet metus in tellus condimentum, eu tristique magna ultrices. Aenean sed mauris luctus, eleifend velit pharetra, lacinia odio. Etiam varius, ante at interdum suscipit, dui arcu lobortis diam, in malesuada felis dolor quis nulla. Nunc fermentum diam sapien, a commodo leo commodo at. Etiam tristique suscipit ipsum. Curabitur placerat euismod mauris id elementum. Donec id dolor ligula. Nullam tincidunt iaculis purus, in gravida lacus. Nunc congue cursus lectus eu tempus.
  852.  
  853. <br> <br>
  854.  
  855. <div class="detail">
  856. detail
  857. </div>
  858. Integer tortor metus, consequat in venenatis in, rhoncus ac ipsum. Curabitur imperdiet erat fermentum suscipit vulputate. Suspendisse orci est, luctus id libero quis, iaculis aliquet ante. Cras rhoncus urna lorem, sit amet laoreet libero pharetra at. Cras eu felis scelerisque, porttitor felis vel, adipiscing libero. Fusce in molestie nisl, non commodo libero. Curabitur pellentesque quis eros et egestas. Integer non rutrum ipsum. Nullam dapibus mauris in pharetra condimentum. Sed pellentesque ut ligula vitae dapibus. Donec sollicitudin ultricies laoreet. Cras eget accumsan nunc. Nullam diam arcu, ultrices vel diam non, cursus euismod lorem. Proin pharetra orci rhoncus mauris mollis blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
  859.  
  860. <br><br>
  861.  
  862. <div class="detail">
  863. detail
  864. </div>
  865. Maecenas varius ligula augue, a cursus nunc porta et. Nulla tempus tincidunt luctus. Nulla augue mauris, pharetra non felis ut, sollicitudin mattis magna. Vestibulum eleifend dolor in metus dignissim hendrerit. Curabitur at turpis suscipit risus laoreet adipiscing sed id risus. Sed facilisis tellus eget magna viverra, tempus eleifend risus auctor. Nunc non egestas urna. Etiam non tortor eu sem bibendum commodo nec sit amet nulla. Donec malesuada mi non odio vehicula, id euismod est consectetur. Sed eget nibh vel metus pretium dignissim ut ac augue.
  866.  
  867. <br><br>
  868.  
  869. <div class="detail">
  870. detail
  871. </div>
  872. Praesent auctor vulputate turpis, tincidunt viverra massa ultricies sit amet. Vestibulum et molestie justo, vitae blandit lacus. Phasellus lacus turpis, auctor id erat ac, accumsan mollis nulla. Aenean non lacinia lacus. Etiam eu vestibulum risus, a tempor quam. Quisque malesuada nulla at felis ornare feugiat. Vivamus iaculis tempus fringilla.
  873.  
  874. <br><br>
  875.  
  876. <div class="detail">
  877. detail
  878. </div>
  879.  
  880. Duis ultricies felis mollis, mattis dolor eu, tincidunt risus. Aenean interdum ante nec diam facilisis egestas. Vivamus dignissim orci sed tristique condimentum. Maecenas viverra, purus et mattis mollis, tortor felis posuere velit, vitae ultrices augue nulla sed lectus. Fusce accumsan adipiscing semper. Etiam facilisis tempor varius. Aliquam erat volutpat.
  881.  
  882.  
  883.  
  884.  
  885.  
  886.  
  887.  
  888. </div>
  889. </div>
  890. </div>
  891. </div>
  892.  
  893. -->
  894.  
  895.  
  896.  
  897.  
  898.  
  899.  
  900.  
  901. </div>
  902. </div>
  903. </div>
  904. </div>
  905. </center>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement