API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jan 18th, 2018
124
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 45.03 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. This code has been written by http://ddkinzart.tumblr.com
  3. Do not sell, repost, remove credit or claim as your own.
  4.  
  5. __ ____ _ __
  6. ____/ /___/ / /__(_)___ ____ ____ ______/ /_
  7. / __ / __ / //_/ / __ \/_ / / __ `/ ___/ __/
  8. / /_/ / /_/ / ,< / / / / / / /_/ /_/ / / / /_
  9. \__,_/\__,_/_/|_/_/_/ /_/ /___/\__,_/_/ \__/
  10. __ __ __
  11. / /_/ /_ ___ ____ ___ ___ _________ ____/ /__
  12. / __/ __ \/ _ \/ __ `__ \/ _ \ / ___/ __ \/ __ / _ \
  13. / /_/ / / / __/ / / / / / __/ / /__/ /_/ / /_/ / __/
  14. \__/_/ /_/\___/_/ /_/ /_/\___/ \___/\____/\__,_/\___/
  15.  
  16. -->
  17.  
  18. <html>
  19. <head>
  20. <title>{Title}</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. {block:Description}
  24. <meta name="description" content="{MetaDescription}" />
  25. {/block:Description}
  26. </head>
  27. <script type="text/javascript">
  28. // <![CDATA[
  29. var colour="#323b32"; // what colour are the blobs
  30. var speed=45; // speed of animation, lower is faster
  31. var blobs=15; // how many blobs are in the jar
  32. var charc=String.fromCharCode(9679); // a blob - can be changed to charc='hello' or charc='*' for a different effect
  33.  
  34. /***************************\
  35. * Blobs in a Jar Effect *
  36. * (c)2012 mf2fm web-design *
  37. * http://www.mf2fm.com/rv *
  38. * DON'T EDIT BELOW THIS BOX *
  39. \***************************/
  40.  
  41. window.onload=fill_the_jar;
  42. var div;
  43. var xpos=new Array();
  44. var ypos=new Array();
  45. var zpos=new Array();
  46. var dx=new Array();
  47. var dy=new Array();
  48. var dz=new Array();
  49. var blob=new Array();
  50. var swide=800;
  51. var shigh=600;
  52. function fill_the_jar() {
  53. var i, dvs;
  54. div=document.createElement('div');
  55. dvs=div.style;
  56. dvs.position='fixed';
  57. dvs.left='0px';
  58. dvs.top='0px';
  59. dvs.width='1px';
  60. dvs.height='1px';
  61. document.body.appendChild(div);
  62. set_width();
  63. for (i=0; i<blobs; i++) {
  64. add_blob(i);
  65. jamjar(i);
  66. }
  67. }
  68.  
  69. function add_blob(ref) {
  70. var dv, sy;
  71. dv=document.createElement('div');
  72. dv.appendChild(document.createTextNode(charc));
  73. sy=dv.style;
  74. sy.position='absolute';
  75. sy.textAlign="center";
  76. if (navigator.appName=="Microsoft Internet Explorer") {
  77. sy.fontSize="10px";
  78. sy.width="100px";
  79. sy.height="100px";
  80. sy.paddingTop="40px";
  81. sy.color=colour;
  82. }
  83. else sy.color='rgba(0,0,0,0)';
  84. ypos[ref]=Math.floor(shigh*Math.random());
  85. dy[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
  86. xpos[ref]=Math.floor(swide*Math.random());
  87. dx[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
  88. zpos[ref]=Math.random()*20;
  89. dz[ref]=(0.5+Math.random())*(Math.random()>.5?.5:-.5);
  90. blob[ref]=dv;
  91. div.appendChild(blob[ref]);
  92. set_blob(ref);
  93. }
  94. function rejig(ref, xy) {
  95. if (xy=='y') {
  96. dx[ref]=(0.5+Math.random())*sign(dx[ref]);
  97. dy[ref]=(0.5+Math.random())*-sign(dy[ref]);
  98. }
  99. else {
  100. dx[ref]=(0.5+Math.random())*-sign(dx[ref]);
  101. dy[ref]=(0.5+Math.random())*sign(dy[ref]);
  102. }
  103. }
  104. function sign(a) {
  105. if (a<0) return (-2);
  106. else if (a>0) return (2);
  107. else return (0);
  108. }
  109. function set_blob(ref) {
  110. var sy;
  111. sy=blob[ref].style;
  112. sy.top=ypos[ref]+'px';
  113. sy.left=xpos[ref]+'px';
  114. if (navigator.appName=="Microsoft Internet Explorer") {
  115. sy.filter="glow(color="+colour+",strength="+zpos[ref]+")";
  116. sy.fontSize=30-zpos[ref]+"px";
  117. }
  118. else {
  119. sy.textShadow=colour+' 0px 0px '+zpos[ref]+'px';
  120. sy.fontSize=40+zpos[ref]+'px';
  121. }
  122. }
  123. function jamjar(ref) {
  124. if (ypos[ref]+dy[ref]<-50 || ypos[ref]+dy[ref]>shigh) rejig(ref, 'y');
  125. ypos[ref]+=dy[ref];
  126. if (xpos[ref]+dx[ref]<-50 || xpos[ref]+dx[ref]>swide) rejig(ref, 'x');
  127. xpos[ref]+=dx[ref];
  128. if (zpos[ref]+dz[ref]<0 || zpos[ref]+dz[ref]>20) dz[ref]=-dz[ref];
  129. zpos[ref]+=dz[ref];
  130. set_blob(ref);
  131. setTimeout("jamjar("+ref+")", speed);
  132. }
  133.  
  134. window.onresize=set_width;
  135. function set_width() {
  136. var sw_min=999999;
  137. var sh_min=999999;
  138. if (document.documentElement && document.documentElement.clientWidth) {
  139. if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
  140. if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  141. }
  142. if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
  143. if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
  144. if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  145. }
  146. if (document.body.clientWidth) {
  147. if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
  148. if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  149. }
  150. if (sw_min==999999 || sh_min==999999) {
  151. sw_min=800;
  152. sh_min=600;
  153. }
  154. swide=sw_min;
  155. shigh=sh_min;
  156. }
  157. // ]]>
  158. </script>
  159.  
  160.  
  161. <!--tooltip script (it's to edit the way the title of your links look when you hover over them -->
  162. <style>figure{margin:0}.tmblr-iframe{position:absolute}.tmblr-iframe.hide{display:none}</style><link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  163. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  164. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  165. <script>
  166. (function($){
  167. $(document).ready(function(){
  168. $("[title]").style_my_tooltips({
  169. tip_follows_cursor:true,
  170. tip_delay_time:200,
  171. tip_fade_speed:500
  172. });
  173. });
  174. })(jQuery);
  175. </script>
  176.  
  177. <!--pop up tabs script-->
  178. <script>
  179. $(document).ready(function(){
  180. $("ul#tabs li").click(function(e){
  181. if (!$(this).hasClass("active")) {
  182. var tabNum = $(this).index();
  183. var nthChild = tabNum+1;
  184. $("ul#tabs li.active").removeClass("active");
  185. $(this).addClass("active");
  186. $("ul#tab li.active").removeClass("active");
  187. $("ul#tab li:nth-child("+nthChild+")").addClass("active");
  188. }
  189. });
  190. });
  191. </script>
  192. <!--script end-->
  193.  
  194. <!--tooltip script end-->
  195. <!--pop up script-->
  196. <script type="text/javascript"
  197. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  198. <script>
  199. $(document).ready(function() {
  200. //
  201. $('a.poplight[href^=#]').click(function() {
  202. var popID = $(this).attr('rel'); //Get Popup Name
  203. var popURL = $(this).attr('href'); //Get Popup href to define size
  204. var query= popURL.split('?');
  205. var dim= query[1].split('&');
  206. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  207. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://upload.wikimedia.org/wikipedia/commons/f/f8/Tooltip-CloseButton.png" class="btn_close" title="escape" alt="escape" /></a>');
  208. var popMargTop = ($('#' + popID).height() + 80) / 2;
  209. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  210. //Apply Margin to Popup
  211. $('#' + popID).css({
  212. 'margin-top' : -popMargTop,
  213. 'margin-left' : -popMargLeft
  214. });
  215. $('body').append('<div id="fade"></div>');
  216. $('#fade').css({'filter' : 'alpha(opacity=100)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  217. return false;
  218. });
  219. $('a.close, #fade').live('click', function() {
  220. $('#fade , .popup_block').fadeOut(function() {
  221. $('#fade, a.close').remove(); //fade them both out
  222. });
  223. return false;
  224. });
  225. });
  226. </script>
  227. <!--ask pop script end-->
  228. <link href="https://fonts.googleapis.com/css?family=Overpass" rel="stylesheet">
  229.  
  230. <style type="text/css">
  231. =
  232.  
  233.  
  234. /*cursor code, change image to change cursor*/
  235. /*find more at http://pixel-soup.tumblr.com/tagged/cursors */
  236.  
  237. *, body, a { cursor:url("http://i.imgur.com/2qleX.jpg"), auto }
  238. a:hover { cursor:url("http://68.media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif"), auto } /*this defines the pointer cursor*/
  239.  
  240. /*these are the custom fonts, you can install more just by pasting the code here*/
  241.  
  242.  
  243.  
  244. @font-face{font-family:"bebas neue";src:url('http://static.tumblr.com/zx3ibzm/JgJovyuzq/bebasneue.otf');}
  245. @font-face{font-family:"nightingale";src:url('http://static.tumblr.com/zx3ibzm/mLdovzrvz/nightingale_sample.ttf');}
  246. @font-face {font-family: "black jack";src: url('https://dl.dropboxusercontent.com/s/ryf3a4mag4hudp6/blackjar.ttf?dl=1'); format("truetype");}
  247.  
  248.  
  249.  
  250.  
  251. /*selection color*/
  252.  
  253. ::-moz-selection { /* Code for Firefox */
  254. color: #fff; /*text color of selected text*/
  255. background: #a4a4a4; /*color of selection bg*/
  256. }
  257.  
  258. ::selection {
  259. color: #fff; /*text color of selected text*/
  260. background: #a4a4a4; /*color of selection bg*/
  261. }
  262.  
  263. /*selection color end*/
  264.  
  265. ::-webkit-scrollbar-thumb {
  266. background-color:#7c7c7c; /*scrollbar's slider color*/
  267. background-image:url('URL HERE'); /*optional background image*/
  268. height:0px;
  269. }
  270.  
  271. ::-webkit-scrollbar {
  272. height:0px;
  273. width:3px; /*width of slider*/
  274. background-color:transparent; /*scrollbar's main color*/
  275. background-image:url(); /*optional background image*/
  276. }
  277.  
  278. /*the code here is to reduce the opacity of an image and make it more visible on hover, you can remove it if you want your image to always be at 100%*/
  279.  
  280. img, iframe {
  281.  
  282. opacity:1; /*this determines opacity of images*/
  283. -moz-transition-duration: 0.5s;
  284. -o-transition-duration: 0.5s;
  285. -webkit-transition-duration: 0.5s;
  286. transition-duration: 0.5s;
  287. padding:5px;
  288. }
  289.  
  290.  
  291.  
  292. img:hover,iframe:hover {
  293.  
  294. opacity:1;
  295. -webkit-filter:none;
  296. -moz-transition-duration: 0.5s;
  297. -o-transition-duration: 0.5s;
  298. -webkit-transition-duration: 0.5s;
  299. transition-duration: 0.5s;}
  300.  
  301. /*HOVER IMAGE CODE END*/
  302.  
  303.  
  304. body {
  305. background-color:#070707; /*set this the same color as your background image to avoid black areas on different resolutions*/
  306. background-image:url('https://78.media.tumblr.com/0506ee74fbea409f600be1c1358853d9/tumblr_p2qufxOEnu1wm6ep3o1_1280.png'); /*bg image goes here*/
  307. background-repeat: no-repeat;
  308. color:#7c7c7c; /*body font color*/
  309. text-shadow: 0px 0px 2px #341c18; /*shadow of body text*/
  310. font-weight:bold;
  311. font-family: 'overpass';
  312. text-align:justify;
  313. font-size: 6px;
  314. letter-spacing:2px;
  315.  
  316. }
  317.  
  318.  
  319.  
  320. .pagi {
  321. font-size:35px;
  322. font-family:'overpass';
  323. margin-top:580px; /*change to decide position of pagination*/
  324. margin-left:665px;
  325. color: #a2a2a2;
  326. position:fixed;
  327. -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s;
  328. transition-duration: 0.8s; -o-transition-duration: 0.8s;}
  329.  
  330. .pagi a {
  331. color: #7c7c7c; /*color of pagination*/
  332. text-shadow: 0px 0px 5px #a4a4a4; /*shadow | glow of pagination*/
  333. -webkit-filter: blur(1px);
  334. -moz-filter: blur(1px);
  335. -o-filter: blur(1px);
  336. -ms-filter: blur(1px);
  337. filter: blur(1px);
  338. }
  339.  
  340. .pagi a:hover {
  341. color: #520000; /*color of pagination on hover*/
  342. }
  343.  
  344. /*the tooltip is the text that appears when you hover on a link / tag / etc.
  345. this script stylizes it*/
  346.  
  347. #s-m-t-tooltip{
  348. max-width:400px;
  349. margin:15px;
  350. padding:2px 8px;
  351. background-image: url(""); /*include image if you want a background for the tooltip text*/
  352. background: transparent;
  353. background-repeat:repeat;
  354. background-attachment:fixed;
  355. color:#520000; /*color of tooltip text*/
  356. /*the text shadow determines the outline of the text because there's no easy way to add an outline to it, you can change all the code to another color*/
  357. text-shadow:1px 1px #7c7c7c,
  358. 1px -1px #7c7c7c,
  359. 1px 0px #7c7c7c,
  360. 0px 1px #7c7c7c,
  361. 0px -1px #7c7c7c,
  362. -1px 1px #7c7c7c,
  363. -1px 0px #7c7c7c,
  364. -1px -1px #7c7c7c;
  365. z-index:99999999999999999999;
  366. font-size:12px;
  367. letter-spacing:2px;
  368. font-style:bold;
  369. letter-spacing:2px;
  370. font-family: 'nightingale';
  371. text-transform:lowercase;
  372. box-shadow:0px 0px 0px;}
  373.  
  374.  
  375. #s-m-tooltip:hover {
  376. -webkit-transition: all 0.6s ease-out;
  377. -moz-transition: all 0.6s ease-out;
  378. transition: all 0.6s ease-out;
  379. -o-transition:all 0.6s ease;
  380. -ms-transition: all 0.6s ease-in-out;}
  381.  
  382. /* TOOLTIP END */
  383.  
  384.  
  385. small,sub,sup {
  386. font-size:8px;
  387. }
  388.  
  389. b, bold, strong {
  390. font-size:10px;
  391. letter-spacing:1px;
  392. font-weight:normal;
  393. line-height: 120%;
  394. font-family: 'bebas neue';
  395. color: #6d6d6d; /*color of bold text*/
  396. text-shadow:0 0 3px #7c7c7c; /*shadow of bold text*/
  397. }
  398.  
  399.  
  400.  
  401. i, italic, em {
  402. font-size:10px;
  403. color: #520000;
  404. font-family: 'black jack';
  405. line-height:120%;
  406. text-shadow:0 0 3px #380101;
  407. font-weight:normal;
  408. letter-spacing:1px;
  409. text-transform:lowercase;
  410. }
  411.  
  412.  
  413. /* This styles the headers of the sidebar as well as the headers inside the popups */
  414. h3, h4 {
  415. background-image: url('http://24.media.tumblr.com/tumblr_ma6ppm6RAz1r4sghvo1_500.gif');
  416. background-repeat:repeat;
  417. background-attachment:fixed;
  418. padding:2px;
  419. color:#fff; /*text color of sidebar titles*/
  420. text-shadow:1px 1px #191919,
  421. 1px -1px #191919,
  422. 1px 0px #191919,
  423. 0px 1px #191919,
  424. 0px -1px #191919,
  425. -1px 1px #191919,
  426. -1px 0px #191919,
  427. -1px -1px #191919;
  428. /*change all the hex of the text shadow to the same code
  429. to change the outline of the text*/
  430. font-size:8px;
  431. line-height:120%;
  432. font-family:'arial';
  433. text-transform:uppercase;
  434. border: double 3px #7c7c7c;
  435. text-align:center;}
  436.  
  437.  
  438. a,a:visited,a:active {
  439. color: #380101; /*color of links*/
  440. text-decoration:none;
  441. text-shadow: 0px 0px 0px #000;
  442. -moz-transition-duration: 0.6s;
  443. -o-transition-duration: 0.6s;
  444. -webkit-transition-duration: 0.6s;
  445. transition-duration: 0.6s;
  446. -webkit-filter: blur(.5px);
  447. -moz-filter: blur(.5px);
  448. -o-filter: blur(.5px);
  449. -ms-filter: blur(.5px);
  450. filter: blur(.5px);
  451.  
  452. }
  453.  
  454. a:hover {
  455. color: #7c7c7c; /*color of links on hover*/
  456. text-shadow: 0px 0px 3px #7c7c7c;
  457. -webkit-transition: all 0.6s ease-out;
  458. -moz-transition: all 0.6s ease-out;
  459. transition: all 0.6s ease-out;
  460. -o-transition:all 0.6s ease;
  461. -ms-transition: all 0.6s ease-in-out;}
  462.  
  463. /*POST TITLE SETTINGS*/
  464.  
  465. .titulo {
  466.  
  467. font-family: 'bebas neue';
  468. font-weight:normal;
  469. font-size: 23px; /*size of title*/
  470. text-align: center;
  471. color: #7c7c7c; /*color of title*/
  472. text-shadow: 0px 0px 2px #7c7c7c;
  473.  
  474. }
  475.  
  476.  
  477. /*TITLE SETTINGS END*/
  478.  
  479. #container {
  480. position:absolute;
  481. left:240px; /*position of container from the left*/
  482. top:140px; /*position of container from top*/
  483. height:350px; /*determines height of container*/
  484. overflow-y:scroll;
  485. -webkit-mask-image: -webkit-gradient(
  486. linear, center 75%, center bottom,
  487. from(rgba(0,0,0,10)),
  488. to(rgba(10,0,0,0)));
  489. border:1px solid transparent;
  490. }
  491.  
  492. #entries {
  493. background-color:transparent;
  494.  
  495. }
  496.  
  497. #content {
  498. width:250px; /*determines size of posts*/
  499. margin-bottom:20px;
  500. padding:10px 7px 10px 10px;
  501. }
  502.  
  503.  
  504. #entries img {
  505. max-width: 100%;
  506. height: auto;
  507. opacity:0.7; /*change this to change visibility of post images, set it to 1 if you want it completely visible*/
  508. -moz-transition-duration: 0.5s;
  509. -o-transition-duration: 0.5s;
  510. -webkit-transition-duration: 0.5s;
  511. transition-duration: 0.5s;
  512. padding:5px;
  513.  
  514.  
  515. }
  516.  
  517. #entries img:hover {
  518. opacity: 1; /*image opacity of posts on hover*/
  519. -moz-transition-duration: 0.5s;
  520. -o-transition-duration: 0.5s;
  521. -webkit-transition-duration: 0.5s;
  522. transition-duration: 0.5s;
  523. padding:5px;
  524.  
  525. }
  526.  
  527.  
  528. blockquote {
  529. border-left: 5px solid #7c7c7c; /*color of blockquote*/
  530. border-radius:15px;
  531. padding: 2px 0px 2px 8px;
  532. margin: 3px 0 3px 8px;
  533. }
  534.  
  535. blockquote img {
  536. max-width:100%;
  537. height:auto;
  538. }
  539.  
  540. /*ASK*/
  541.  
  542. #asker {
  543. font-size:12px;
  544. letter-spacing:1px;
  545. margin-bottom:-13px;
  546. color: #7c7c7c; /*color of asker url / anonymous but if a user then it is also determined by 'a' as it will be a link*/
  547. font-family: 'nightingale';
  548. text-shadow:0px 0px 5px #a4a4a4;
  549. text-align:center;
  550. text-decoration:none;
  551. -webkit-transition: all 0.6s ease-out;
  552. -moz-transition: all 0.6s ease-out;
  553. transition: all 0.6s ease-out;
  554. -o-transition:all 0.6s ease;
  555. -ms-transition: all 0.6s ease-in-out;
  556.  
  557. }
  558.  
  559. /*to change the part that says whispered, scroll down to the html*/
  560.  
  561. #asker a {
  562. color: #380101;
  563. }
  564.  
  565. #asker a:hover {
  566. -webkit-filter: blur(1px);
  567. -moz-filter: blur(1px);
  568. -o-filter: blur(1px);
  569. -ms-filter: blur(1px);
  570. filter: blur(1px);
  571. color: #7c7c7c;
  572. transition: all 0.6s ease-out;
  573. }
  574.  
  575. #ask {
  576. background: url("https://media.giphy.com/media/LvEkOiUF04BI4/giphy.gif");/*image behind the question*/
  577. background-color:#7c7c7c; /*background color of question if no background image is selected*/
  578. background-repeat:repeat;
  579. font-size:8px;
  580. font-family:arial;
  581. line-height:120%;
  582. text-align:center;
  583. text-transform:uppercase;
  584. color: #ccc; /*color of question text*/
  585. border-top:double 3px #7c7c7c; /*border color of question*/
  586. border-bottom:double 3px #7c7c7c; /*border color of question*/
  587. border-right:solid 1px #7c7c7c;
  588. border-left:solid 1px #7c7c7c;
  589. border-radius:15px;
  590. padding: 10px 20px 10px 20px;
  591. text-shadow: 1px 1px #191919,
  592. 1px -1px #191919,
  593. 1px 0px #191919,
  594. 0px 1px #191919,
  595. 0px -1px #191919,
  596. -1px 1px #191919,
  597. -1px 0px #191919,
  598. -1px -1px #191919;
  599. /*change all the hex of the text shadow to the same code
  600. to change the outline of the text*/
  601. }
  602.  
  603.  
  604. #answer {
  605. padding-top:0px;
  606. }
  607. /*ASK ENDS HERE*/
  608.  
  609. /*CHAT POST BEGINS HERE*/
  610.  
  611. .convo {
  612. font-size: 8px;
  613. line-height:120%;
  614. text-align:left;
  615. padding:0px;
  616.  
  617. }
  618.  
  619. .convo li {
  620. list-style:none;
  621. }
  622.  
  623. .convo .label {
  624. text-transform: uppercase;
  625. font-weight:bold;
  626.  
  627. }
  628.  
  629. .line_odd .label {
  630. color: #380101; /* Color of odd person in the chat */
  631. background: none;
  632. }
  633.  
  634. .line_even .label {
  635. color: #7c7c7c; /* Color of even person in the chat */
  636. }
  637.  
  638. .line_even {
  639. margin:0px 10px;
  640. padding: 5px;
  641. text-align:left;
  642. font-weight:bold;
  643. color: #7c7c7c; /*color of even text*/
  644. text-shadow:none;
  645. padding: 10px 20px 10px 20px;
  646. border-bottom:solid 1px #7c7c7c; /*line seperating chats*/
  647. }
  648.  
  649. .line_odd {
  650. margin:0px 10px;
  651. padding: 5px;
  652. background-color:#a4a4a4; /*background color of odd text*/
  653. text-align:left; /*color of odd text*/
  654. color: #ccc; /*color of odd text*/
  655. text-shadow:none;
  656. border-bottom:solid 1px #7c7c7c; /*line seperating chats*/
  657. padding: 10px 20px 10px 20px;
  658. }
  659.  
  660.  
  661.  
  662.  
  663. /*CHAT POST ENDS HERE*/
  664.  
  665. /*QUOTE BEGINS HERE*/
  666.  
  667.  
  668. .quote {
  669. font-family: "black jack";
  670. font-size: 25px;
  671. font-weight:normal;
  672. line-height:100%;
  673. padding-bottom:30px;
  674. text-align: center;
  675. color: #380101; /*color of quote*/
  676. text-shadow: 0px 0px 2px #4a0101,
  677.  
  678. }
  679.  
  680. /*QUOTE ENDS HERE*/
  681.  
  682.  
  683. /*LINK POST BEGIN*/
  684.  
  685. #linku {
  686. text-transform:uppercase;
  687. text-align:center;
  688. letter-spacing:0px;
  689. font-weight:normal;
  690. font-family: 'bebas neue';
  691. font-size:14px;
  692. }
  693.  
  694. /*LINK POST END*/
  695.  
  696. /*SIDE BAR / DESCRIPTION BEGINS HERE*/
  697.  
  698. #boxy {
  699. position:fixed;
  700. top:100px; /*position of the box*/
  701. margin-left:190px;
  702. overflow:hidden; /*this keeps the text hidden without hover, change to scroll bar if you want it to scroll and show*/
  703. height:40px; /*determines height of the box - increase it if you have too much text and want to avoid scrollbar*/
  704. width:400px; /*determines width of description*/
  705. opacity:1;
  706. -webkit-transition: all 0.7s ease;
  707. -moz-transition: all 0.7s ease;
  708. -o-transition: all 0.7s ease;}
  709.  
  710. #boxy:hover {
  711. opacity:1;
  712. height:120px; /*height of box on hover*/
  713. top:45px; /*position of box on hover*/
  714. -webkit-transition: all 0.7s ease;
  715. -moz-transition: all 0.7s ease;
  716. -o-transition: all 0.7s ease;
  717. }
  718.  
  719. .anchor {
  720. font-family:'nightingale';
  721. font-size:13px;
  722. letter-spacing:0px;
  723. padding-top:-15px;
  724. line-height:100%;
  725. color:#324332; /*color of top bar title, the one reading not all treasure.. */
  726. text-shadow:0px 0px 10px #323b32,
  727. 0px 0px 3px #323b32;
  728. z-index:99999999999;
  729. -webkit-transition: all 0.7s ease;
  730. -moz-transition: all 0.7s ease;
  731. -o-transition: all 0.7s ease;
  732. }
  733.  
  734. #boxy:hover .anchor {
  735. color: #7c7c7c; /*color of title on hover*/
  736. z-index:9999999999;
  737. -webkit-transition: all 0.7s ease;
  738. -moz-transition: all 0.7s ease;
  739. -o-transition: all 0.7s ease;
  740. }
  741.  
  742. .sail {
  743. width:345px; /*determines width of description — can't be more than width of the box*/
  744. margin-left:20px;
  745. margin-top:5px;
  746. background-color:#000; /*background color of description*/
  747. border:2px solid #413636; /*border color of description*/
  748. box-shadow:1px 1px #4a0101,
  749. 1px -1px #4a0101,
  750. 1px 0px #4a0101,
  751. 0px 1px #4a0101,
  752. 0px -1px #4a0101,
  753. -1px 1px #4a0101,
  754. -1px 0px #4a0101,
  755. -1px -1px #4a0101;
  756. border-radius:15px;
  757. padding:5px;
  758. opacity:0; /*keeps description hidden before hover*/
  759. -webkit-transition: all 0.7s ease;
  760. -moz-transition: all 0.7s ease;
  761. -o-transition: all 0.7s ease;
  762. }
  763.  
  764. #boxy:hover .sail {
  765. opacity:1;/*shows description hidden before hover*/
  766. -webkit-transition: all 0.7s ease;
  767. -moz-transition: all 0.7s ease;
  768. -o-transition: all 0.7s ease;
  769. }
  770.  
  771. #despacito {
  772. margin-top:10px;
  773. text-align:center;
  774.  
  775.  
  776. }
  777.  
  778. /*SIDE BAR / DESCRIPTION END*/
  779.  
  780. /*TAGS AND INFO BEGINS HERE*/
  781. .permalinks {
  782. background-image: url('https://media.giphy.com/media/PkqViSaMm5vQQ/giphy.gif'); /*you can insert image here for the permalinks bg*/
  783. background-color:transparent; /*color of post links' background*/
  784. color: #ccc; /*color of peramalinks' text*/
  785. border-bottom:solid 1px #a2a2a2; /*border of permalinks*/
  786. padding: 1px 5px 5px 1px;
  787. letter-spacing:5px;
  788. text-align:center;
  789. font-size:9px;
  790. text-transform:uppercase;
  791. margin-top:15px;
  792. -moz-transition-duration:.6s;
  793. -webkit-transition-duration:.6s;
  794. -o-transition-duration:.6s;
  795. -webkit-filter: blur(0px);
  796.  
  797.  
  798. }
  799.  
  800. .permalinks a {
  801. font-family:calibri;
  802. color:#7c7c7c; /*color of permalinks actual links*/
  803. font-weight:bold;
  804. text-shadow: 0px 0px 2px #7c7c7c;
  805. text-decoration:none;
  806. }
  807.  
  808.  
  809. .permalinks a:hover {
  810. color:#413636; /*color of links on hover*/
  811. text-shadow: 0px 0px 2px #000;
  812. -webkit-transition: all 0.5s ease-in-out;
  813. -moz-transition: all 0.5s ease-in-out;
  814. -o-transition: all 0.5s ease-in-out;
  815. -ms-transition: all 0.5s ease-in-out;
  816. transition: all 0.5s ease-in-out;
  817. }
  818.  
  819. .tags {
  820.  
  821. text-align:justify;
  822. padding-left:5px;
  823. padding-right:15px;
  824. margin-bottom:15px;
  825. color: #a4a4a4; /*this determines the color of the small symbol (by default a ' ; ' but you can change it) next to the tags*/
  826. font-size:10px;
  827. text-shadow:0px 0px 3px #413636
  828. }
  829.  
  830. .tags a {
  831. color:#a4a4a4; /*change this for the actual color of the tags*/
  832. font-size:8px;
  833. font-weight:bold;
  834. font-family:calibri;
  835. text-transform:uppercase;
  836. text-shadow:0px 0px 3px #576d8c
  837. letter-spacing:0px;
  838.  
  839. }
  840.  
  841.  
  842. .tags a:hover {
  843. color: #413636; /*tag color on hover*/
  844. -webkit-transition: all 0.5s ease-in-out;
  845. -moz-transition: all 0.5s ease-in-out;
  846. -o-transition: all 0.5s ease-in-out;
  847. -ms-transition: all 0.5s ease-in-out;
  848. transition: all 0.5s ease-in-out;
  849.  
  850. }
  851.  
  852.  
  853. /*POP UP CODES AND LINKS BEGIN*/
  854.  
  855.  
  856. #pops {
  857. position:fixed;
  858.  
  859. }
  860.  
  861.  
  862. #linku1 {
  863. position:fixed;
  864. font-size:18px;
  865. text-decoration:none;
  866. margin-left:250px;
  867. margin-top:484px;
  868. z-index:99999999999999999999;
  869. }
  870.  
  871.  
  872. #linku1 a {
  873. color: #413636; /*color of custom links*/
  874. text-shadow: 0px 0px 5px #a4a4a4; /*shadow | glow of custom links*/
  875. -webkit-filter: blur(1px);
  876. -moz-filter: blur(1px);
  877. -o-filter: blur(1px);
  878. -ms-filter: blur(1px);
  879. filter: blur(1px);
  880. }
  881.  
  882. #linku1 a:hover {
  883. color: #413636;
  884. }
  885.  
  886. #linku1:hover {
  887. -webkit-filter: blur(2px);
  888. -moz-filter: blur(2px);
  889. -o-filter: blur(2px);
  890. -ms-filter: blur(2px);
  891. filter: blur(2px);
  892. -webkit-transition: all 0.5s ease-in-out;
  893. -moz-transition: all 0.5s ease-in-out;
  894. -o-transition: all 0.5s ease-in-out;
  895. -ms-transition: all 0.5s ease-in-out;
  896. transition: all 0.5s ease-in-out;
  897. }
  898.  
  899. #linku2 {
  900. position:fixed;
  901. font-size:18px;
  902. text-decoration:none;
  903. margin-left:270px;
  904. margin-top:484px;
  905. }
  906.  
  907. #linku2:hover {
  908. -webkit-filter: blur(2px);
  909. -moz-filter: blur(2px);
  910. -o-filter: blur(2px);
  911. -ms-filter: blur(2px);
  912. filter: blur(2px);
  913. -webkit-transition: all 0.5s ease-in-out;
  914. -moz-transition: all 0.5s ease-in-out;
  915. -o-transition: all 0.5s ease-in-out;
  916. -ms-transition: all 0.5s ease-in-out;
  917. transition: all 0.5s ease-in-out;
  918. }
  919.  
  920.  
  921. #linku2 a {
  922. color: #413636; /*color of custom links*/
  923. text-shadow: 0px 0px 5px #a4a4a4; /*shadow | glow of custom links*/
  924. -webkit-filter: blur(1px);
  925. -moz-filter: blur(1px);
  926. -o-filter: blur(1px);
  927. -ms-filter: blur(1px);
  928. filter: blur(1px);
  929. }
  930.  
  931. #linku2 a:hover {
  932. color: #413636;
  933. }
  934.  
  935. #linku3 {
  936. position:fixed;
  937. font-size:18px;
  938. text-decoration:none;
  939. margin-left:290px;
  940. margin-top:484px;
  941. }
  942.  
  943. #linku3:hover {
  944. -webkit-filter: blur(2px);
  945. -moz-filter: blur(2px);
  946. -o-filter: blur(2px);
  947. -ms-filter: blur(2px);
  948. filter: blur(2px);
  949. -webkit-transition: all 0.5s ease-in-out;
  950. -moz-transition: all 0.5s ease-in-out;
  951. -o-transition: all 0.5s ease-in-out;
  952. -ms-transition: all 0.5s ease-in-out;
  953. transition: all 0.5s ease-in-out;
  954. }
  955.  
  956.  
  957. #linku3 a {
  958. color: #413636; /*color of custom links*/
  959. text-shadow: 0px 0px 5px #a4a4a4; /*shadow | glow of custom links*/
  960. -webkit-filter: blur(1px);
  961. -moz-filter: blur(1px);
  962. -o-filter: blur(1px);
  963. -ms-filter: blur(1px);
  964. filter: blur(1px);
  965. }
  966.  
  967. #linku3 a:hover {
  968. color: #413636;
  969. }
  970.  
  971. #linku4 {
  972. position:fixed;
  973. font-size:16px;
  974. text-decoration:none;
  975. margin-left:328px;
  976. margin-top:488px;
  977. }
  978. }
  979.  
  980. #linku4:hover {
  981. -webkit-filter: blur(2px);
  982. -moz-filter: blur(2px);
  983. -o-filter: blur(2px);
  984. -ms-filter: blur(2px);
  985. filter: blur(2px);
  986. -webkit-transition: all 0.5s ease-in-out;
  987. -moz-transition: all 0.5s ease-in-out;
  988. -o-transition: all 0.5s ease-in-out;
  989. -ms-transition: all 0.5s ease-in-out;
  990. transition: all 0.5s ease-in-out;
  991. }
  992.  
  993. #linku5 {
  994. position:fixed;
  995. font-size:13px;
  996. text-decoration:none;
  997. width:70px;
  998. height:auto;
  999. margin-left:390px;
  1000. margin-top:488px;
  1001. }
  1002.  
  1003. #linku5:hover {
  1004. -webkit-filter: blur(2px);
  1005. -moz-filter: blur(2px);
  1006. -o-filter: blur(2px);
  1007. -ms-filter: blur(2px);
  1008. filter: blur(2px);
  1009. -webkit-transition: all 0.5s ease-in-out;
  1010. -moz-transition: all 0.5s ease-in-out;
  1011. -o-transition: all 0.5s ease-in-out;
  1012. -ms-transition: all 0.5s ease-in-out;
  1013. transition: all 0.5s ease-in-out;
  1014. }
  1015.  
  1016. #linku6 {
  1017. position:fixed;
  1018. font-size:13px;
  1019. width:70px;
  1020. height:auto;
  1021. text-decoration:none;
  1022. margin-left:452px;
  1023. margin-top:488px;
  1024.  
  1025. }
  1026.  
  1027. #linku6:hover {
  1028. -webkit-filter: blur(2px);
  1029. -moz-filter: blur(2px);
  1030. -o-filter: blur(2px);
  1031. -ms-filter: blur(2px);
  1032. filter: blur(2px);
  1033. -webkit-transition: all 0.5s ease-in-out;
  1034. -moz-transition: all 0.5s ease-in-out;
  1035. -o-transition: all 0.5s ease-in-out;
  1036. -ms-transition: all 0.5s ease-in-out;
  1037. transition: all 0.5s ease-in-out;
  1038. }
  1039.  
  1040.  
  1041. #fade { /*--Transparent background layer--*/
  1042. display: none; /*--hidden by default--*/
  1043. background: #a4a4a4; /*color of pop up fade */
  1044. background-image: url(''); /*if you want to add a background image to go behind your popup */
  1045. position: fixed; left: 0; top: 0;
  1046. width: 100%;
  1047. height: 100%;
  1048. opacity: 0.7;/* you can make it 0 if you don't want a surrounding color to the popup or set it to 1 to have the background posts and theme invisible and only the pop up showing */
  1049. z-index: 9999;
  1050. }
  1051.  
  1052. .popup_block {
  1053. display:none;
  1054. HEIGHT:auto;
  1055. width:auto;
  1056. background:transparent;
  1057. padding:0px;
  1058. float:left;
  1059. position:fixed;
  1060. margin:auto;
  1061. z-index: 99999;
  1062. }
  1063.  
  1064. .popup_boxy {
  1065. background:#dadada; /*color of popup background*/
  1066. background-image:url("http://static.tumblr.com/zx3ibzm/gG8orgx5z/the-pearl_pop.png"); /*main image of popup*/
  1067. border:solid 1px #7c7c7c; /*border color of main popup*/
  1068. position:absolute;
  1069. box-shadow: 0px 0px 2px #7c7c7c; /*shadow color of popup*/
  1070. text-align:center;
  1071. font-size: 10px; /*font size of the words inside the box */
  1072. padding:20px;
  1073. margin:auto;
  1074. width: 575px; /*width of main pop up*/
  1075. height:350px; /*height of main pop up*/
  1076. overflow-y:none;
  1077. top:235px; /*position of pop up*/
  1078. left:450px;
  1079. z-index: 99999; /*if the box is hiding behind other things in your theme, add more 9′s */
  1080. }
  1081.  
  1082. .popup_content {
  1083. height:321px;
  1084. width: 327px;
  1085. padding: 10px;
  1086. margin:5px;
  1087. border: solid 1px #7c7c7c; /*border color of square that includes popup content*/
  1088. overflow-y:scroll;
  1089. background:#ccc; /*background color of pop up content, the square that has your text*/
  1090. float:right;
  1091. }
  1092.  
  1093. .tabheader {
  1094. position:absolute;
  1095. top:210px; /*make sure to keep this less than position of box so it floats above it always*/
  1096. left:812px;
  1097. text-align:center;
  1098. width:300px;
  1099. background:transparent;
  1100. color:#e6e6e6; /* color of hanging pop up header */
  1101. text-shadow:0px 0px 10px #7c7c7c,
  1102. 0px 0px 3px #7c7c7c;
  1103. overflow-y:scroll;
  1104. font-family: 'nightingale';
  1105. font-size:15px;
  1106. font-weight:normal;
  1107. letter-spacing:1px;
  1108. text-transform:lowercase;
  1109. z-index: 999999; /*if the box is hiding behind other things in your theme, add more 9′s */
  1110. }
  1111.  
  1112. /*tabbed popups begins*/
  1113.  
  1114. ul#tabs {
  1115. list-style-type: none;
  1116. padding: 0;
  1117. text-align: center;
  1118. }
  1119.  
  1120. ul#tabs li:hover { /*appearance when you hover on titles*/
  1121. }
  1122.  
  1123. ul#tabs li.active { /*your active tab title*/
  1124.  
  1125. text-align:justify;
  1126. width: 100px; /*width of your title*/
  1127. box-shadow: 0px 0px 5px #a4a4a4;
  1128. background-image: url('http://24.media.tumblr.com/tumblr_ma6ppm6RAz1r4sghvo1_500.gif');
  1129. background-repeat:repeat;
  1130. background-attachment:fixed;
  1131. border: double 3px #7c7c7c; /*color of border of the titles of the sidebar*/
  1132. padding:5px;
  1133. margin:10px;
  1134. color:#fff; /*text color of tab titles*/
  1135. text-shadow:1px 1px #191919,
  1136. 1px -1px #191919,
  1137. 1px 0px #191919,
  1138. 0px 1px #191919,
  1139. 0px -1px #191919,
  1140. -1px 1px #191919,
  1141. -1px 0px #191919,
  1142. -1px -1px #191919;
  1143. /*change all the hex of the text shadow to the same code
  1144. to change the outline of the text*/
  1145. font-size:11px;
  1146. font-family:calibri;
  1147. text-transform:uppercase;
  1148. letter-spacing:1px;
  1149. text-align:center;
  1150. -webkit-transition:
  1151. all 0.5s ease-out;
  1152. -moz-transition: all 0.5s ease-out;
  1153. transition: all 0.5s ease-out;
  1154. }
  1155.  
  1156.  
  1157. ul#tabs li { /*the rest of the titles / inactive one*/
  1158. display:block;
  1159. width: 100px;
  1160. padding: 5px;
  1161. margin:10px;
  1162. font-size:11px;
  1163. background-image: url('');
  1164. background:#ccc;
  1165. background-repeat:repeat;
  1166. background-attachment:fixed;
  1167. border: double 3px #7c7c7c;
  1168. box-shadow: 0px 0px 5px #a4a4a4;
  1169. color:#7c7c7c;
  1170. font-family:calibri;
  1171. text-transform:uppercase;
  1172. cursor:pointer;
  1173. }
  1174.  
  1175.  
  1176. ul#tab {
  1177. list-style-type: none;
  1178. margin: 0;
  1179. padding: 0;
  1180. }
  1181. ul#tab li {
  1182. display: none;
  1183. }
  1184. ul#tab li.active {
  1185. display: block;
  1186. }
  1187.  
  1188. #tabid { /*this is the navigation of your tabbed pop ups*/
  1189. position:absolute;
  1190. top: 355px; /*position of tab navigation*/
  1191. left: 1065px; /*position of tab navigation*/
  1192. text-align:center;
  1193. border:none;
  1194. width:auto;
  1195. background:transparent; /*background color of pop up side navigation*/
  1196. height:auto;
  1197. overflow:scroll;
  1198. text-align:justify;
  1199. padding:5px;
  1200. font-size:9px;
  1201. font-family:calibri;
  1202. text-transform:uppercase;
  1203. letter-spacing:1px;
  1204. text-align:center;
  1205. z-index: 999999;
  1206. }
  1207.  
  1208. /*end*/
  1209.  
  1210. img.btn_close {
  1211. float: right;
  1212. margin: -5px -5px 0 0;
  1213. }
  1214. /*--Making IE6 Understand Fixed Positioning--*/
  1215. *html #fade {
  1216. position: absolute;
  1217. }
  1218. *html .popup_block {
  1219. position: absolute;
  1220. }
  1221.  
  1222.  
  1223. /*The header of each part of the navigation*/
  1224. .navi_linksu h3 {
  1225. font-size:22px;
  1226. margin-bottom:-5px;
  1227. border:none;
  1228. color: #a4a4a4; /*color of header*/
  1229. font-family: 'selima';
  1230. font-weight:normal;
  1231. letter-spacing:1px;
  1232. text-transform:lowercase;
  1233. background:transparent;
  1234. }
  1235.  
  1236. .navi_linksu {
  1237. text-align:center;
  1238. }
  1239.  
  1240. .navi_linksu a {
  1241. display: inline-block;
  1242. width: 120px;
  1243. padding: 5px;
  1244. margin:5px;
  1245. font-size:11px;
  1246. background-image: url('');
  1247. background:#ccc; /*color of navigation links background*/
  1248. background-repeat:repeat;
  1249. background-attachment:fixed;
  1250. border: solid 1px #7c7c7c;
  1251. color:#7c7c7c;
  1252. font-family:calibri;
  1253. text-transform:uppercase;
  1254.  
  1255.  
  1256. }
  1257.  
  1258. .navi_linksu a:hover {
  1259. -webkit-transition: all .5s ease-in-out;
  1260. -moz-transition: all .5s ease-in-out;
  1261. -ms-transition: all .5s ease-in-out;
  1262. -o-transition: all .5s ease-in-out;
  1263. transition: all .5s ease-in-out;
  1264. background:#7c7c7c; /*background color of navi links on hover*/
  1265. border: solid 1px #ccc;
  1266. color:#ccc; /*color of links on hover*/
  1267. }
  1268.  
  1269. .versu {
  1270. width:80px;
  1271. height:auto;
  1272. float:left;
  1273. padding:20px;
  1274. }
  1275.  
  1276.  
  1277. .vee {
  1278. text-align:center;
  1279. padding:10px;
  1280. margin-bottom:20px;
  1281. }
  1282.  
  1283. /*POP UP END*/
  1284.  
  1285.  
  1286. /* DO NOT REMOVE THIS PART OR MAKE A COLOR THAT IS NOT VISIBLE */
  1287. .credit {
  1288. font-weight:bold;
  1289. border-top:dashed 1px #7c7c7c;
  1290. border-right:dashed 1px #7c7c7c;
  1291. border-left:dashed 1px #7c7c7c;
  1292. background:#ccc;
  1293. color:#7c7c7c;
  1294. padding:10px;
  1295. font-size:4px;
  1296. bottom:0px;
  1297. right:20px;
  1298. position:fixed;
  1299. font-family:'sail';
  1300. -webkit-filter: blur(.5px);
  1301. -moz-filter: blur(.5px);
  1302. -o-filter: blur(.5px);
  1303. -ms-filter: blur(.5px);
  1304. filter: blur(.5px);
  1305.  
  1306. }
  1307.  
  1308. .credit a {
  1309. color:#7c7c7c;
  1310. }
  1311.  
  1312. .credit a:hover {
  1313. color: #fff;
  1314. }
  1315. /*CREDIT END*/
  1316.  
  1317. </style>
  1318.  
  1319. <body>
  1320.  
  1321.  
  1322.  
  1323.  
  1324.  
  1325.  
  1326.  
  1327. <!--sidebar begins here-->
  1328. <div id="boxy">
  1329. <div id="despacito">
  1330. <div class="anchor">Algae not war</div>
  1331. <div class="sail"></div>
  1332. </div>
  1333. </div>
  1334.  
  1335. <!--sidebar end-->
  1336. <!--this is where you edit the size and titles of the scattered links, you can edit their content way below though. The #?w= determines the width of the pop up, make sure to give your popups different box numbers-->
  1337. <div id="pops">
  1338. <div id="linku1"> <a href="/" title="HOME.">✖</a></div>
  1339. <div id="linku2"> <a href="/ask" rel="box1" class="poplight" title="ASK.">✖</a></div>
  1340. <div id="linku3"> <a href="/navi" rel="box2" class="poplight" title="NAVIGATION.">✖</a></div>
  1341. <div id="linku4"> <a href="/rules" rel="box3" class="poplight" title="RULES."><img src="https://78.media.tumblr.com/208fd21676c62e5596de275dd8af252a/tumblr_inline_p2s5et5m251vun1rs_540.png"></a></div> <!--change image source to change the squares labelled icon-->
  1342. <div id="linku5"> <a href="/verses" rel="verses" class="poplight" title="VERSES."><img src="https://78.media.tumblr.com/37976b77c767e3238dff1ef7a3727610/tumblr_inline_p2s5et9gLD1vun1rs_540.png"></a></div> <!--change image source to change the squares labelled icon-->
  1343. <div id="linku6"> <a href="/about" rel="box5" class="poplight" title="ABOUT."><img src="https://78.media.tumblr.com/14209e2cffb8a743821c53bb675ecc2f/tumblr_inline_p2s5euc9Qk1vun1rs_540.png"></a></div> <!--change image source to change the squares labelled icon-->
  1344. </div>
  1345.  
  1346. </div>
  1347.  
  1348. <!--/* DO /NOT/ REMOVE THIS PART OR MAKE A COLOR THAT IS NOT VISIBLE */-->
  1349. <div class="credit"><a href="http://ddkinzart.tumblr.com" title="code by ddkinzart">D.</a></div>
  1350.  
  1351. <!--below is where the post structure begins, don't edit below this point if you're not familiar with coding or tumblr theme attritibutes-->
  1352.  
  1353. {block:Pagination}
  1354. <div class="pagi">
  1355. {block:PreviousPage}<a href="{PreviousPage}">«</a>{/block:PreviousPage}
  1356. {block:NextPage}<a href="{NextPage}">»</a>{/block:NextPage}
  1357. </div>
  1358. {/block:Pagination}
  1359. <div id="container">
  1360. <div id="entries">
  1361.  
  1362. {block:Posts}
  1363.  
  1364. <div id="content">
  1365. {block:Text}{block:Title}<div class="titulo">{Title}</div>{/block:Title}{Body}{/block:Text}
  1366. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  1367. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  1368.  
  1369. {block:Photoset}{Photoset}{block:Caption}{Caption}{/block:Caption}
  1370. {/block:Photoset}
  1371.  
  1372. {block:Quote}<div class="quote">❝{Quote}❞</div>{block:Source}{Source}{/block:Source}{/block:Quote}
  1373. {block:Link}
  1374. {block:Thumbnail}
  1375. <img src="{Thumbnail}" alt="{Name}" style="width:95%;border-radius:25px">
  1376. {/block:Thumbnail}
  1377. <div id="linku">
  1378. <span style="font-size:20px">❝ </span> <a href="{URL}" class="link" {Target}>{Name}</a><span style="font-size:20px"> ❞</span>
  1379. </div>
  1380. {/block:Link}
  1381.  
  1382. {block:Chat}
  1383. {block:Title}
  1384. <div class="titulo">{Title}</div>{/block:Title}<br>
  1385. <ul class="convo">{block:Lines}<li class="line_{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}
  1386. {Line}</li>{/block:Lines}</ul>
  1387. {/block:Chat}
  1388.  
  1389. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  1390. {block:Audio}{AudioEmbed}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  1391. {block:Answer}
  1392. <div id="asker">{Asker}<span style="font-size:13px; font-family:bebas neue;"> whispered: </span></div><div id="ask">{Question}</div>
  1393. <div id="answer">
  1394. {Answer}</div>
  1395. {/block:Answer}
  1396. <div class="permalinks">
  1397. {block:RebloggedFrom}
  1398. <a href="{ReblogParentURL}" title="via: {ReblogParentName}" >✖</a>
  1399. {/block:RebloggedFrom}
  1400. <a href="{Permalink}" title="{timeago}">✖</a>{block:NoteCount}
  1401. <a href="{Permalink}" title="{NoteCount} hits.">✖</a>{/block:NoteCount}
  1402. {block:ContentSource}
  1403. <a href="{SourceURL}" title="source: {SourceTitle}">✖</a>
  1404. {/block:ContentSource}
  1405. <a href="{ReblogURL}" title="reblog" target="_blank">✖</a>
  1406. {/block:RebloggedFrom}
  1407. </div>
  1408. <div class="tags">
  1409. {block:HasTags}
  1410. {block:Tags}
  1411. <!--you can change symbol before tags to something else-->; <a href="{TagURL}" title="{Tag}">{Tag}</a>
  1412. {/block:Tags}
  1413. {/block:HasTags}
  1414. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1415.  
  1416. </div></div>
  1417. {/block:Posts}
  1418. </div>
  1419. </div>
  1420. </body>
  1421.  
  1422.  
  1423. <!--This is where the pop up begins, you can edit beyond this point-->
  1424.  
  1425. <div id="box1" class="popup_block" style="top:50%;left:50%">
  1426. <i style="text-align:center;">{AskLabel}</i>
  1427. <br>
  1428. <div class="queque">
  1429. {block:ShowHeaderImage}<img src="{HeaderImage}" width="100%">{/block:ShowHeaderImage} <!-- this will automatically display your mobile header image, but you can substitute with the url of another image, try to choose image which's width matches your pop up-->
  1430. <iframe frameborder="0" height="200" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%"></iframe>
  1431. </div></div>
  1432. </div>
  1433. <div id="box2" class="popup_block">
  1434. <div class="tabheader">Navigation.</div><div class="popup_boxy">
  1435. <div class="popup_content">
  1436. <h3>navigation</h3>
  1437. <div class="navi_linksu">
  1438. <h3>Main</h3>
  1439.  
  1440. <a href="/tagged/">TAG</a>
  1441. <a href="/tagged/">TAG</a>
  1442. <a href="/tagged/">TAG</a>
  1443. <a href="/tagged/">TAG</a>
  1444. <a href="/tagged/">TAG</a>
  1445. <a href="/tagged/">TAG</a>
  1446. <a href="/tagged/">TAG</a>
  1447. <a href="/tagged/">TAG</a>
  1448. <a href="/tagged/">TAG</a>
  1449. <h3>other</h3>
  1450. <a href="/tagged/">TAG</a>
  1451. <a href="/tagged/">TAG</a>
  1452. <a href="/tagged/">TAG</a>
  1453. <a href="/tagged/">TAG</a>
  1454. <a href="/tagged/">TAG</a>
  1455. <a href="/tagged/">TAG</a>
  1456. <a href="/tagged/">TAG</a>
  1457. <a href="/tagged/">TAG</a>
  1458. <a href="/tagged/">TAG</a>
  1459. </div>
  1460. </div>
  1461. </div>
  1462. </div>
  1463.  
  1464. <div id="box3" class="popup_block"><div class="tabheader">Rules.</div><div class="popup_boxy">
  1465. <div class="popup_content">
  1466.  
  1467.  
  1468. Your rules go here.
  1469. Add as much as you'd like.
  1470. Can be stylized like a normal text post.
  1471. For example <b>this is bold text.</b>
  1472. and this is for <i>italics.</i>
  1473.  
  1474. <h3>fancy title goes here~</h3>
  1475.  
  1476. Have fun :D
  1477. </div></div></div></div>
  1478.  
  1479. <div id="verses" class="popup_block"><div class="tabheader">Verses.</div>
  1480. <div id="tabid">
  1481. <ul id="tabs">
  1482. <li class="active">main.</li>
  1483. <li>AU.</li>
  1484. <li>OTHER.</li>
  1485. </ul></div>
  1486.  
  1487. <div class="popup_boxy"><div class="popup_content">
  1488.  
  1489. <ul id="tab">
  1490.  
  1491. <li class="active">
  1492.  
  1493. <h3>MAIN</h3>
  1494.  
  1495. <!--start copying from here if you want more verse blocks-->
  1496.  
  1497. <div class="vee">
  1498.  
  1499. <img class="versu" src="https://68.media.tumblr.com/e5a7b405bb8eb4247da059136f2ba03f/tumblr_inline_op0qh858td1uhvvxb_540.png"> <!--REPLACE WITH IMAGE URL-->
  1500.  
  1501. <p><a href="VERSE TAG"><b>VERSE NAME</b></a>
  1502. <br><br><b>AGE</b>
  1503. <br><b>TIMELINE</b>
  1504. <br><b>POSITION</b>
  1505.  
  1506. <br><br><br><br>VERSE DESCRIPTION GOES HERE.
  1507.  
  1508. </div>
  1509.  
  1510. <!--paste here-->
  1511. <!--start copying from here if you want more verse blocks-->
  1512.  
  1513. <div class="vee">
  1514.  
  1515. <img class="versu" src="https://68.media.tumblr.com/e5a7b405bb8eb4247da059136f2ba03f/tumblr_inline_op0qh858td1uhvvxb_540.png"> <!--REPLACE WITH IMAGE URL-->
  1516.  
  1517. <p><a href="VERSE TAG"><b>VERSE NAME</b></a>
  1518. <br><br><b>AGE</b>
  1519. <br><b>TIMELINE</b>
  1520. <br><b>POSITION</b>
  1521.  
  1522. <br><br><br><br>VERSE DESCRIPTION GOES HERE.
  1523.  
  1524. </div>
  1525.  
  1526. <!--paste here-->
  1527.  
  1528.  
  1529.  
  1530. </li>
  1531.  
  1532. <li>
  1533.  
  1534. <h3>AU</h3>
  1535.  
  1536. <!--start copying from here if you want more verse blocks-->
  1537.  
  1538. <div class="vee">
  1539.  
  1540. <img class="versu" src="https://68.media.tumblr.com/e5a7b405bb8eb4247da059136f2ba03f/tumblr_inline_op0qh858td1uhvvxb_540.png"> <!--REPLACE WITH IMAGE URL-->
  1541.  
  1542. <p><a href="VERSE TAG"><b>VERSE NAME</b></a>
  1543. <br><br><b>AGE</b>
  1544. <br><b>TIMELINE</b>
  1545. <br><b>POSITION</b>
  1546.  
  1547. <br><br><br><br>VERSE DESCRIPTION GOES HERE.
  1548.  
  1549. </div>
  1550.  
  1551. <!--paste here-->
  1552. <!--start copying from here if you want more verse blocks-->
  1553.  
  1554. <div class="vee">
  1555.  
  1556. <img class="versu" src="https://68.media.tumblr.com/e5a7b405bb8eb4247da059136f2ba03f/tumblr_inline_op0qh858td1uhvvxb_540.png"> <!--REPLACE WITH IMAGE URL-->
  1557.  
  1558. <p><a href="VERSE TAG"><b>VERSE NAME</b></a>
  1559. <br><br><b>AGE</b>
  1560. <br><b>TIMELINE</b>
  1561. <br><b>POSITION</b>
  1562.  
  1563. <br><br><br><br>VERSE DESCRIPTION GOES HERE.
  1564.  
  1565. </div>
  1566.  
  1567. <!--paste here-->
  1568.  
  1569. </li>
  1570.  
  1571. <li>
  1572.  
  1573. <h3>OTHER</h3>
  1574.  
  1575. <!--start copying from here if you want more verse blocks-->
  1576.  
  1577. <div class="vee">
  1578.  
  1579. <img class="versu" src="https://68.media.tumblr.com/e5a7b405bb8eb4247da059136f2ba03f/tumblr_inline_op0qh858td1uhvvxb_540.png"> <!--REPLACE WITH IMAGE URL-->
  1580.  
  1581. <p><a href="VERSE TAG"><b>VERSE NAME</b></a>
  1582. <br><br><b>AGE</b>
  1583. <br><b>TIMELINE</b>
  1584. <br><b>POSITION</b>
  1585.  
  1586. <br><br><br><br>VERSE DESCRIPTION GOES HERE.
  1587.  
  1588. </div>
  1589.  
  1590. <!--paste here-->
  1591.  
  1592. <!--start copying from here if you want more verse blocks-->
  1593.  
  1594. <div class="vee">
  1595.  
  1596. <img class="versu" src="https://68.media.tumblr.com/e5a7b405bb8eb4247da059136f2ba03f/tumblr_inline_op0qh858td1uhvvxb_540.png"> <!--REPLACE WITH IMAGE URL-->
  1597.  
  1598. <p><a href="VERSE TAG"><b>VERSE NAME</b></a>
  1599. <br><br><b>AGE</b>
  1600. <br><b>TIMELINE</b>
  1601. <br><b>POSITION</b>
  1602.  
  1603. <br><br><br><br>VERSE DESCRIPTION GOES HERE.
  1604.  
  1605. </div>
  1606.  
  1607. <!--paste here-->
  1608.  
  1609.  
  1610. </li>
  1611.  
  1612. </ul> <!--important don't delete-->
  1613. </div></div></div></div></div></div></div></div></div></div></div></div></div>
  1614.  
  1615. </div>
  1616. </div></div>
  1617.  
  1618. <div id="box5" class="popup_block"><div class="tabheader">About.</div>
  1619. <div id="tabid">
  1620. <ul id="tabs">
  1621. <li class="active">main.</li>
  1622. <li>appearance.</li>
  1623. <li>interests.</li>
  1624. <li>personality</li>
  1625. <li>abilities.</li>
  1626. <li>biography.</li>
  1627. </ul></div>
  1628. <div class="popup_boxy">
  1629. <div class="popup_content">
  1630. ❝ you can put a <b>Quote</b> here
  1631. or <i>anything</i> else you like or just remove it, whatever really❞
  1632.  
  1633. <ul id="tab">
  1634. <li class="active">
  1635.  
  1636. <h3>General Information</h3>
  1637.  
  1638. </li>
  1639.  
  1640. <li>
  1641.  
  1642. <h3>Appearance</h3>
  1643.  
  1644. </li>
  1645.  
  1646. <li>
  1647.  
  1648. <h3>Interests</h3>
  1649.  
  1650. </li>
  1651.  
  1652. <li>
  1653.  
  1654. <h3>Personality</h3>
  1655.  
  1656. </li>
  1657.  
  1658. <li>
  1659.  
  1660. <h3>Abilities</h3>
  1661.  
  1662. </li>
  1663.  
  1664. <li>
  1665.  
  1666. <h3>Biography</h3>
  1667.  
  1668. </li>
  1669.  
  1670. </ul> <!--important don't delete-->
  1671. </div></div></div></div></div></div></div></div></div></div></div></div>
  1672. </div>
  1673.  
  1674. </div></div>
  1675.  
  1676. </div></div></div></div></div></div></div></div></div></div></div>
  1677.  
  1678. </html>
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!