API tools faq
paste
Advertisement
teruteru

The Big Bubble -【 THEME 43 by Anomaly ☽】

teruteru
Feb 23rd, 2017
353
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.20 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. THEME #43 by Anomaly ☾ tumblr user xollyx ☽ : THE BIG BUBBLE !!
  8.  
  9. - base code by neonbikethemes
  10. - faq layout by htmltutor-blog
  11. - links layout from easy-html-tutorials
  12. - please abide by all the rules
  13.  
  14. 【 All themes and pages can be found here : http://xollyx.tumblr.com/thm 】
  15.  
  16. Thank you for using! Or just looking at the code. Whatever you're here for. Either way, it's appreciated!
  17. Feel free to message me if you need any help, my ask box is always open!
  18.  
  19. -->
  20.  
  21.  
  22. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  23.  
  24. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  25.  
  26. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  27.  
  28. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  29.  
  30. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  31.  
  32. <script>
  33. (function($){
  34. $(document).ready(function(){
  35. $("a[title]").style_my_tooltips({
  36. tip_follows_cursor:true,
  37. tip_delay_time:90,
  38. tip_fade_speed:600,
  39. attribute:"title"
  40. });
  41. });
  42. })(jQuery);
  43. </script>
  44.  
  45. <script>
  46. $(document).ready(function(){
  47. $(".title1").click(function(){
  48. $(".table1").slideToggle("fast");});});
  49. $(document).ready(function(){
  50. $(".title2").click(function(){
  51. $(".table2").slideToggle("fast");});});
  52. $(document).ready(function(){
  53. $(".title3").click(function(){
  54. $(".table3").slideToggle("fast");});});
  55. </script>
  56.  
  57. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  58. <script type="text/javascript">
  59. $(document).ready(function(){
  60. $(".dd").hide();
  61. $(".cthrough").click(function(){
  62. $(this).next(".dd").slideToggle('600');
  63. }); });
  64. </script>
  65.  
  66. {block:Description}
  67. <meta name="description" content="{MetaDescription}" />
  68. {/block:Description}
  69. <meta charset="utf-8">
  70. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  71. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  72. <link rel="shortcut icon" href="{image:Favicon}">
  73. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  74.  
  75. <meta name="image:favicon" content="">
  76. <meta name="image:background" content="">
  77. <meta name="image:cursor" content="">
  78. <meta name="image:sidebar" content="">
  79. <meta name="image:permalink" content="">
  80. <meta name="image:lists" content="">
  81. <meta name="image:home" content="">
  82. <meta name="image:ask" content="">
  83. <meta name="image:link 1" content="">
  84. <meta name="image:navigation" content="">
  85. <meta name="image:link 2" content="">
  86. <meta name="image:bow" content="">
  87. <meta name="image:back" content="">
  88. <meta name="image:next" content="">
  89.  
  90. <meta name="color:background" content="">
  91. <meta name="color:container" content="">
  92. <meta name="color:container border" content="">
  93. <meta name="color:eclipse" content="">
  94. <meta name="color:posts" content="">
  95. <meta name="color:border" content="">
  96. <meta name="color:text" content="">
  97. <meta name="color:links" content="">
  98. <meta name="color:hover" content="">
  99. <meta name="color:ask" content="">
  100. <meta name="color:blockquote" content="">
  101. <meta name="color:text shadow" content="">
  102. <meta name="color:gradient 1" content="">
  103. <meta name="color:gradient 2" content="">
  104. <meta name="color:navi link" content="">
  105. <meta name="color:navi link hover" content="">
  106. <meta name="color:tooltip" content="">
  107. <meta name="color:tooltip text" content="">
  108. <meta name="color:selection" content="">
  109. <meta name="color:selection text" content="">
  110. <meta name="color:scrollbar" content="">
  111.  
  112. <meta name="text:link 1" content="/">
  113. <meta name="text:link 1 title" content="link 1">
  114. <meta name="text:link 2" content="">
  115. <meta name="text:link 2 title" content="">
  116. <meta name="text:navi link 1" content="/">
  117. <meta name="text:navi link 1 title" content="navi link 1">
  118. <meta name="text:navi link 2" content="/">
  119. <meta name="text:navi link 2 title" content="navi link 2">
  120. <meta name="text:navi link 3" content="/">
  121. <meta name="text:navi link 3 title" content="navi link 3">
  122. <meta name="text:navi link 4" content="/">
  123. <meta name="text:navi link 4 title" content="navi link 4">
  124. <meta name="text:navi link 5" content="/">
  125. <meta name="text:navi link 5 title" content="navi link 5">
  126. <meta name="text:navi link 6" content="/">
  127. <meta name="text:navi link 6 title" content="navi link 6">
  128. <meta name="text:navi link 7" content="/">
  129. <meta name="text:navi link 7 title" content="navi link 7">
  130. <meta name="text:navi link 8" content="/">
  131. <meta name="text:navi link 8 title" content="navi link 8">
  132. <meta name="text:navi link 9" content="/">
  133. <meta name="text:navi link 9 title" content="navi link 9">
  134. <meta name="text:ask text" content="asked">
  135. <meta name="text:notes text" content="notes">
  136. <meta name="text:reblog text" content="reblog?">
  137. <meta name="text:back title" content="back">
  138. <meta name="text:next title" content="next">
  139. <meta name="text:redirect tag" content="">
  140.  
  141. <meta name="if:bg cover" content="">
  142. <meta name="if:cursor" content="">
  143. <meta name="if:render" content="">
  144. <meta name="if:hide captions" content="0">
  145. <meta name="if:redirect tag" content="">
  146. <meta name="if:link row 2" content="">
  147. <meta name="if:link row 3" content="">
  148.  
  149. <meta name="text:render left" content="">
  150. <meta name="text:render bottom" content="">
  151. <meta name="text:render width" content="">
  152.  
  153. <style type="text/css">
  154.  
  155. @font-face { font-family: "silkscreen"; src: url('https://dl.dropboxusercontent.com/s/4bj79wi75v77m0r/slkscr.ttf?dl=1'); format(“truetype”);}
  156.  
  157. ::-webkit-scrollbar-thumb:vertical {
  158. width:9px; /*width of the slider*/
  159. opacity:1;
  160. background-color:{color:scrollbar}; /*color of main scrollbar*/
  161. border-radius:15px;
  162. }
  163. ::-webkit-scrollbar {
  164. background-color:{color:scrollbar};
  165. border:4px solid {color:container};
  166. width:9px;
  167. opacity:1;
  168. border-radius:10px;
  169. }
  170.  
  171. ::-moz-selection {
  172. background: {color:selection};
  173. color: {color:selection text};
  174. }
  175.  
  176. ::selection {
  177. background: {color:selection};
  178. color: {color:selection text};
  179. }
  180.  
  181. #s-m-t-tooltip {
  182. max-width:300px;
  183. margin:10px 0px 0px 10px;
  184. background-color:{color:Tooltip};
  185. padding:4px;
  186. font-size:8px;
  187. font-family:silkscreen;
  188. color:{color:Tooltip Text};
  189. z-index:999999999999999999999999999999999999;
  190. }
  191.  
  192. #s-m-t-tooltip:after {
  193. position: absolute;
  194. display: block; content: "";
  195. border-color: transparent {color:Tooltip} transparent transparent ;
  196. border-style: solid;
  197. border-width: 5px;
  198. height:0;
  199. width:0;
  200. position:absolute;
  201. top:3px;
  202. left:-10px;
  203. }
  204.  
  205. {block:ifcursor}body, a, a:hover {cursor: url('{image:cursor}'), progress;}{/block:ifcursor}
  206.  
  207. /* ------------------------------ BASICS ------------------------------ */
  208.  
  209. body {
  210. background:{color:Background};
  211. background-color:{color:background};
  212. background-image:url('{image:background}');
  213. background-position:fixed;
  214. {block:ifbgcover}
  215. background-repeat:no-repeat;
  216. background-size:cover;
  217. {/block:ifbgcover}
  218. color: {color:text};
  219. font-family: consolas;
  220. font-size: 11px;
  221. word-wrap: break-word;
  222. }
  223.  
  224. a {
  225. color: {color:links};
  226. text-decoration: none;
  227. -webkit-transition: all .3s;
  228. -moz-transition: all .3s;
  229. -o-transition: all .3s;
  230. -ms-transition: all .3s;
  231. transition: all .3s;
  232. }
  233.  
  234. a:hover{
  235. color:{color:hover};
  236. -webkit-transition: all .3s;
  237. -moz-transition: all .3s;
  238. -o-transition: all .3s;
  239. -ms-transition: all .3s;
  240. transition: all .3s;
  241. }
  242.  
  243. blockquote {
  244. margin:0px;
  245. text-align:left;
  246. padding-left:20px;
  247. border-left:1px dotted {color:blockquote};
  248. font-family:consolas;
  249. }
  250.  
  251. blockquote img {
  252. width:100%;
  253. height:auto;
  254. }
  255.  
  256. iframe, img, embed, object, video {
  257. }
  258.  
  259. p{
  260. margin-bottom:10px;
  261. }
  262.  
  263. img {
  264. height: auto;
  265. width:auto;
  266. max-width:100%;
  267. }
  268.  
  269. h1{
  270. text-transform:uppercase;
  271. font-size:1em;
  272. }
  273.  
  274. .title {
  275. font-size:16px;
  276. text-align:center;
  277. font-weight:bold;
  278. }
  279.  
  280. ul, ol, li {
  281. font-family: consolas;
  282. list-style-type:bullet;
  283. list-style-image: url({image:lists});
  284. text-align:left;
  285. }
  286.  
  287. #bigcon{
  288. position:fixed;
  289. width:560px;
  290. left:30%;
  291. top:5%;
  292. background-color:{color:container};
  293. border:15px solid {color:container border};
  294. height:85%;
  295. overflow-y:scroll;
  296. overflow-x:none;
  297. padding:10px;
  298. margin-top:-10px;
  299. }
  300.  
  301. .tabcontent {
  302. position:static;
  303. margin-left:auto;
  304. margin-right:auto;
  305. width: 500px;
  306. margin-top:15px;
  307. background:{color:posts};
  308. border:5px solid {color:border};
  309. padding: 10px;
  310. text-align:center;
  311. margin-bottom:200px;
  312. }
  313.  
  314. #postcontainer {
  315. position:static;
  316. margin-left:auto;
  317. margin-right:auto;
  318. width: 550px;
  319. overflow:hidden;
  320. text-align:center;
  321. margin-bottom:25px;
  322. }
  323.  
  324. /* ------------------------------ BORDER ------------------------------ */
  325.  
  326. #b1 {
  327. position:fixed;
  328. top:0px;
  329. left:0px;
  330. width:100%;
  331. height:15px;
  332. background:{color:gradient 1};
  333. z-index:1;
  334. }
  335.  
  336. #b2 {
  337. position:fixed;
  338. bottom:0px;
  339. left:0px;
  340. width:100%;
  341. height:15px;
  342. background:{color:gradient 2};
  343. z-index:1;
  344. }
  345.  
  346. #b3 {
  347. position:fixed;
  348. top:0px;
  349. left:0px;
  350. width:15px;
  351. height:100%;
  352. background:linear-gradient(bottom, {color:gradient 2} 0%, {color:gradient 1} 100%); background-image: -o-linear-gradient(bottom, {color:gradient 2} 0%, {color:gradient 1} 100%); background-image: -moz-linear-gradient(bottom, {color:gradient 2} 0%, {color:gradient 1} 100%); background-image: -webkit-linear-gradient(bottom, {color:gradient 2} 0%, {color:gradient 1} 100%);
  353. z-index:1;
  354. }
  355.  
  356. #b4 {
  357. position:fixed;
  358. top:0px;
  359. right:0px;
  360. width:15px;
  361. height:100%;
  362. background:linear-gradient(bottom, {color:gradient 2} 0%, {color:gradient 1} 100%); background-image: -o-linear-gradient(bottom, {color:gradient 2} 0%, {color:gradient 1} 100%); background-image: -moz-linear-gradient(bottom, {color:gradient 2} 0%, {color:gradient 1} 100%); background-image: -webkit-linear-gradient(bottom, {color:gradient 2} 0%, {color:gradient 1} 100%);
  363. z-index:1;
  364. }
  365.  
  366. #b5 {
  367. position:fixed;
  368. top:0px;
  369. margin-left:6%;
  370. width:30px;
  371. height:100%;
  372. background:linear-gradient(bottom, {color:gradient 2} 0%, {color:gradient 1} 100%); background-image: -o-linear-gradient(bottom, {color:gradient 2} 0%, {color:gradient 1} 100%); background-image: -moz-linear-gradient(bottom, {color:gradient 2} 0%, {color:gradient 1} 100%); background-image: -webkit-linear-gradient(bottom, {color:gradient 2} 0%, {color:gradient 1} 100%);
  373. z-index:-1;
  374. }
  375.  
  376.  
  377. /* ------------------------------ SIDEBAR ------------------------------ */
  378.  
  379. #sidebar {
  380. position:fixed;
  381. margin-left:7%;
  382. margin-top:10%;
  383. width:250px;
  384. padding:5px;
  385. }
  386.  
  387. .eclipse {
  388. position:fixed;
  389. margin-top:50px;
  390. margin-left:5px;
  391. border:10px solid {color:eclipse};
  392. background:{color:eclipse};
  393. width:150px;
  394. height:150px;
  395. border-radius:100%;
  396. }
  397.  
  398. .img {
  399. position:fixed;
  400. margin-top:50px;
  401. margin-left:30px;
  402. border:10px solid {color:container};
  403. background:{color:container};
  404. width:150px;
  405. height:150px;
  406. border-radius:100%;
  407. }
  408.  
  409. div#desc {
  410. position:fixed!important;
  411. opacity:0;
  412. width:150px;
  413. height:150px;
  414. padding:5px;
  415. border-radius:100%;
  416. margin-top:-160px;
  417. margin-left:-6px;
  418. text-align:center;
  419. background-color:rgba({RGBcolor:container},.9);
  420. }
  421.  
  422. .img:hover #desc {
  423. opacity:1;
  424. -webkit-transition: all .5s;
  425. -moz-transition: all .5s;
  426. -o-transition: all .5s;
  427. -ms-transition: all .5s;
  428. transition: all .5s;
  429. }
  430.  
  431. .pagination {
  432. position:fixed;
  433. margin-top:275px;
  434. margin-left:80px;
  435. }
  436.  
  437. #bow {
  438. position:fixed;
  439. left:calc(30% - 25px);
  440. top:calc(5% - 25px);
  441. z-index:1;
  442. }
  443.  
  444. #star1 {
  445. position:fixed;
  446. margin-top:10%;
  447. background:{color:container};
  448. border-radius:100%;
  449. padding:5px;
  450. width:25px;
  451. height:25px;
  452. line-height:0px;
  453. text-align:center;
  454. font-size:8px;
  455. left:calc(9% - 5px);
  456. font-size:50px;
  457. }
  458.  
  459. #star1:hover {
  460. background:{color:container border};
  461. -webkit-transform: rotate(360deg);
  462. -moz-transform: rotate(360deg);
  463. -o-transform: rotate(360deg);
  464. -ms-transform: rotate(360deg);
  465. transform: rotate(360deg);
  466. -webkit-transition: all .3s;
  467. -moz-transition: all .3s;
  468. -o-transition: all .3s;
  469. -ms-transition: all .3s;
  470. transition: all .3s;
  471. }
  472.  
  473. #star2 {
  474. position:fixed;
  475. background:{color:container};
  476. border-radius:100%;
  477. padding:5px;
  478. width:25px;
  479. height:25px;
  480. line-height:0px;
  481. text-align:center;
  482. font-size:8px;
  483. margin-top:calc(9% + 55px);
  484. left:calc(9% - 55px);
  485. font-size:50px;
  486. }
  487.  
  488. #star2:hover {
  489. background:{color:container border};
  490. -webkit-transform: rotate(360deg);
  491. -moz-transform: rotate(360deg);
  492. -o-transform: rotate(360deg);
  493. -ms-transform: rotate(360deg);
  494. transform: rotate(360deg);
  495. -webkit-transition: all .3s;
  496. -moz-transition: all .3s;
  497. -o-transition: all .3s;
  498. -ms-transition: all .3s;
  499. transition: all .3s;
  500. }
  501.  
  502. #star3 {
  503. position:fixed;
  504. background:{color:container};
  505. border-radius:100%;
  506. padding:5px;
  507. width:25px;
  508. height:25px;
  509. line-height:0px;
  510. text-align:center;
  511. font-size:8px;
  512. margin-top:calc(9% + 180px);
  513. left:calc(9% - 60px);
  514. font-size:50px;
  515. }
  516.  
  517. #star3:hover {
  518. background:{color:container border};
  519. -webkit-transform: rotate(360deg);
  520. -moz-transform: rotate(360deg);
  521. -o-transform: rotate(360deg);
  522. -ms-transform: rotate(360deg);
  523. transform: rotate(360deg);
  524. -webkit-transition: all .3s;
  525. -moz-transition: all .3s;
  526. -o-transition: all .3s;
  527. -ms-transition: all .3s;
  528. transition: all .3s;
  529. }
  530.  
  531. #star4 {
  532. position:fixed;
  533. background:{color:container};
  534. border-radius:100%;
  535. padding:5px;
  536. width:25px;
  537. height:25px;
  538. line-height:0px;
  539. text-align:center;
  540. font-size:8px;
  541. margin-top:calc(9% + 115px);
  542. left:calc(9% - 80px);
  543. font-size:50px;
  544. }
  545.  
  546. #star4:hover {
  547. background:{color:container border};
  548. -webkit-transform: rotate(360deg);
  549. -moz-transform: rotate(360deg);
  550. -o-transform: rotate(360deg);
  551. -ms-transform: rotate(360deg);
  552. transform: rotate(360deg);
  553. -webkit-transition: all .3s;
  554. -moz-transition: all .3s;
  555. -o-transition: all .3s;
  556. -ms-transition: all .3s;
  557. transition: all .3s;
  558. }
  559.  
  560. #star5 {
  561. position:fixed;
  562. background:{color:container};
  563. border-radius:100%;
  564. padding:5px;
  565. width:25px;
  566. height:25px;
  567. line-height:0px;
  568. text-align:center;
  569. font-size:8px;
  570. margin-top:calc(9% + 230px);
  571. left:calc(9% - 5px);
  572. font-size:50px;
  573. }
  574.  
  575. #star5:hover {
  576. background:{color:container border};
  577. -webkit-transform: rotate(360deg);
  578. -moz-transform: rotate(360deg);
  579. -o-transform: rotate(360deg);
  580. -ms-transform: rotate(360deg);
  581. transform: rotate(360deg);
  582. -webkit-transition: all .3s;
  583. -moz-transition: all .3s;
  584. -o-transition: all .3s;
  585. -ms-transition: all .3s;
  586. transition: all .3s;
  587. }
  588.  
  589. /* ------------------------------ TABS ------------------------------ */
  590.  
  591. .tabs {
  592. width:100%;
  593. margin-left:0px;
  594. display:inline-block;
  595. }
  596.  
  597. /*----- Tab Links -----*/
  598.  
  599. /* Clearfix */
  600. .tab-links:after {
  601. display:block;
  602. clear:both;
  603. content:'';
  604. }
  605.  
  606. .tab-links li {
  607. display:inline-block;
  608. list-style:none;
  609. text-transform:uppercase;
  610. }
  611.  
  612. .tab-links a {
  613. transition:all linear 0.15s;
  614. border-bottom:1px solid transparent;
  615. }
  616.  
  617. .tab-links a:hover {
  618. text-decoration:none;
  619. }
  620.  
  621. li.active a, li.active a:hover {
  622. background:transparent;
  623. -webkit-transition: all .3s;
  624. -moz-transition: all .3s;
  625. -o-transition: all .3s;
  626. -ms-transition: all .3s;
  627. transition: all .3s;
  628. }
  629.  
  630. /*----- Content of Tabs -----*/
  631. .tab-content {
  632.  
  633. }
  634. .tab {
  635. display:none;
  636. }
  637.  
  638. .tab.active {
  639. display:block;
  640. }
  641.  
  642. /* --------------------------- TABS CONTENT --------------------- */
  643.  
  644. /*FAQ LAYOUT by htmltutor*/
  645.  
  646. #ab{
  647. width: 500px;
  648. }
  649.  
  650. .a1{
  651. width: 215px;
  652. height: auto;
  653. padding: 10px;
  654. margin: auto;
  655. float: left;
  656. }
  657.  
  658. .a2{
  659. width: 450px;
  660. height: auto;
  661. padding: 10px;
  662. margin: auto;
  663. float: left;
  664. }
  665.  
  666. /*FAQ LAYOUT by htmltutor*/
  667.  
  668. .linksett a {
  669. text-decoration:none;
  670. background:{color:navi link};
  671. border:0px solid transparent;
  672. padding:4px;
  673. width:125px;
  674. margin-top:3px;
  675. margin-left:0px;
  676. display:inline-block;
  677. text-align:center;
  678. line-height:15px;
  679. }
  680.  
  681. .linksett a:hover {
  682. background:{color:navi link hover};
  683. -webkit-transition: all 0.3s ease-in-out;
  684. -moz-transition: all 0.3s ease-in-out;
  685. -o-transition: all 0.3s ease-in-out;
  686. -ms-transition: all 0.3s ease-in-out;
  687. transition: all 0.3s ease-in-out;
  688. }
  689.  
  690.  
  691. /* --------------------------- POSTS (articles) --------------------- */
  692.  
  693. article {
  694. float:left;
  695. background:{color:posts};
  696. border:5px solid {color:border};
  697. padding: 10px;
  698. margin-left:15px;
  699. margin-top:20px;
  700. width: 500px;
  701. text-align:left;
  702. margin-bottom:60px;
  703. }
  704.  
  705. /* ---------------------------- POST INFO -----------------------------*/
  706.  
  707. article .permalinkie {
  708. margin-top:-15px;
  709. width:100%;
  710. opacity:1;
  711. text-transform: none;
  712. font-size:8px;
  713. font-family:silkscreen;
  714. text-shadow: -1px 0 {color:text shadow}, 0 1px {color:text shadow}, 1px 0 {color:text shadow}, 0 -1px {color:text shadow};
  715. padding-bottom:3px;
  716. display: block;
  717. text-align: center;
  718. text-decoration: none;
  719. margin-top:0px;
  720. text-align:center;
  721. transition: all 0.3s ease-out;
  722. -o-transition-transition: all 0.3s ease-out;
  723. -webkit-transition: all 0.3s ease-out;
  724. -moz-transition: all 0.3s ease-out;
  725. }
  726. article .permalinkie a {
  727. color:{color:links};
  728. }
  729.  
  730. article .permalinkie a:hover{
  731. letter-spacing:1px;
  732. transition: all 0.3s ease-out;
  733. -o-transition-transition: all 0.3s ease-out;
  734. -webkit-transition: all 0.3s ease-out;
  735. -moz-transition: all 0.3s ease-out;
  736. }
  737.  
  738. /* ---------------------------- POST NOTES ------------------------- */
  739.  
  740. article .tags{
  741. text-decoration:none;
  742. margin-top:-0px;
  743. opacity:1;
  744. z-index:9999;
  745. font-size:8px;
  746. font-family:silkscreen;
  747. text-shadow: -1px 0 {color:text shadow}, 0 1px {color:text shadow}, 1px 0 {color:text shadow}, 0 -1px {color:text shadow};
  748. padding-bottom:3px;
  749. }
  750.  
  751. article .tags a:hover {
  752. letter-spacing:2px;
  753. transition:all 0.5s ease;
  754. -webkit-transition: all 0.5s ease;
  755. -moz-transition: all 0.5s ease;
  756. -o-transition: all 0.5s ease;
  757. }
  758.  
  759. ol.notes {
  760. display:block;
  761. text-align:left;
  762. list-style-type:none;
  763. margin-left:-40px;
  764. }
  765.  
  766. ol.notes li.note{
  767. margin-bottom:5px;
  768. }
  769.  
  770. .pagenotes {
  771. text-align:left;
  772. margin-top:15px;
  773. }
  774.  
  775. .pagenotes img{
  776. padding-right:5px;
  777. padding-top:5px;
  778. margin-bottom:-5px;
  779. }
  780.  
  781.  
  782.  
  783. /* -------------------------- POST TYPES -------------------------- */
  784. /* CHAT */
  785.  
  786. ul.chat{
  787. list-style:none;
  788. margin-left:-40px;
  789. }
  790.  
  791. .chat span {
  792. float: left;
  793. }
  794.  
  795. /* QUOTES */
  796.  
  797. .quote{
  798. font-size:1.2em;
  799. text-align:center;
  800. }
  801.  
  802. .quotesource{
  803. text-align:right;
  804. margin-bottom:10px;
  805. }
  806.  
  807. /* QUESTIONS */
  808.  
  809. .question {
  810. background: {color:ask};
  811. margin:7px 0px 5px 66px;
  812. padding:10px;
  813. position: relative;
  814. -moz-border-radius:5px;
  815. -webkit-border-radius:5px;
  816. border-radius:5px;
  817. }
  818.  
  819. .question p {
  820. margin:1px 0px;
  821. }
  822.  
  823. .question span {
  824. display:block;
  825. position:absolute;
  826. width:1px;
  827. height:1px;
  828. font-size: 0;
  829. left:-9px;
  830. top:15px;
  831. border-top:7px solid transparent;
  832. border-bottom:7px solid transparent;
  833. border-right:10px solid {color:ask};
  834. }
  835.  
  836. .askerimg{
  837. position:relative;
  838. display:inline-block;
  839. margin-right:10px;
  840. }
  841.  
  842. /* AUDIO */
  843.  
  844. .songart{
  845. float:left;
  846. margin-right:10px;
  847. }
  848.  
  849. .songart img{
  850. width:80px;
  851. height:80px;
  852. }
  853.  
  854. .songtitle{
  855. margin-bottom:10px;
  856. margin-left:90px;
  857. }
  858.  
  859. .songauthor{
  860. margin-bottom:10px;
  861. font-size:8px;
  862. margin-left:90px;
  863. }
  864.  
  865. .tumblr_audio_player {
  866. height: 25px;
  867. }
  868.  
  869.  
  870. /* ------------------------- PAGINATION ------------------------- */
  871.  
  872. .credit {
  873. position:fixed;
  874. bottom:4px;
  875. left:8px;
  876. font: 9px consolas;
  877. text-transform:uppercase;
  878. letter-spacing: 0px;
  879. padding: 2px;
  880. z-index:1;
  881. }
  882.  
  883.  
  884. /* --------------------------- Custom CSS -------------------------- */
  885. {CustomCSS}
  886. </style>
  887. </head>
  888. {block:ifredirecttag}
  889. <script>if(window.location.pathname == '/') location.replace('tagged/{text:Redirect Tag}');
  890. </script>
  891. {/block:ifredirecttag}
  892. <body>
  893.  
  894. <div id="b1"></div><div id="b2"></div><div id="b3"></div><div id="b4"></div>
  895.  
  896. <!--TOPBAR-->
  897.  
  898.  
  899. <div id="sidebar">
  900. <div id="b5"></div>
  901. <div class="eclipse"></div>
  902. <div class="img"><img style="width:150px; height:auto; border-radius:100%;" src="{image:sidebar}">
  903. <div id="desc"><br><br><br>{Description}</div>
  904. </div>
  905.  
  906.  
  907. <div class="pagination">
  908. <center>
  909. {block:Pagination}
  910. {block:PreviousPage}<a href="{PreviousPage}"><a title="{text:back title}" href="{PreviousPage}"><img src="{image:back}"></a>{/block:PreviousPage}
  911. {block:NextPage}<a href="{NextPage}"><a title="{text:next title}" href="{NextPage}"><img src="{image:next}"></a>{/block:NextPage}
  912. {/block:Pagination}
  913. </center>
  914. </div>
  915.  
  916. </div>
  917.  
  918.  
  919. <div style="margin-left:-5px">
  920. <div class="tabs">
  921. <ul class="tab-links">
  922.  
  923. <div id="star1"><li class="active"><a title="posts" href="#tab1"><img src="{image:home}"></a></li></div>
  924. <div id="star2"><li><a title="message" href="#tab2"><img src="{image:ask}"></a></li></div>
  925. <div id="star4"><li><a title="{text:link 1 title}" href="{text:link 1}"><img src="{image:link 1}"></a></li></div>
  926. <div id="star3"><li><a title="navigation" href="#tab3"><img src="{image:navigation}"></a></li></div>
  927. <div id="star5"><li><a title="{text:link 2 title}" href="{text:link 2 title}"><img src="{image:link 2}"></a></li></div>
  928.  
  929. </ul>
  930. </div>
  931. </div>
  932.  
  933. <div id="bow"><img src="{image:bow}"></div>
  934.  
  935. <div id="bigcon">
  936.  
  937. <!-- --------------------------- TABS -------------------------- -->
  938.  
  939.  
  940. <div class="tabs">
  941.  
  942.  
  943. <!-- --------------------------- TAB 1 -------------------------- -->
  944.  
  945. <div class="tab-content">
  946. <div id="tab1" class="tab active">
  947.  
  948. <div id="postcontainer">
  949.  
  950. {block:Posts}
  951. <article>
  952.  
  953. <!--TEXT POST-->
  954. {block:Text}
  955. {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  956. {Body}
  957. {/block:Text}
  958.  
  959.  
  960. <!--PHOTO POST-->
  961. {block:Photo}
  962. {LinkOpenTag}
  963. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  964. {LinkCloseTag}
  965. {block:Caption}{Caption}{/block:Caption}
  966. {/block:Photo}
  967.  
  968.  
  969. <!--PHOTOSET POST-->
  970. {block:Photoset}
  971. {Photoset-500}
  972. {block:Caption}{Caption}{/block:Caption}
  973. {/block:Photoset}
  974.  
  975.  
  976. <!--QUOTE POST-->
  977. {block:Quote}
  978. <div class="quote">{Quote}</div>
  979. {block:Source}
  980. <div class="quotesource">{Source}</div>
  981. {/block:Source}
  982. {/block:Quote}
  983.  
  984.  
  985. <!--LINK POST-->
  986. {block:Link}
  987. <div class="title"><a href="{URL}">{Name}</a></div>
  988. {block:Description}{Description}{/block:Description}
  989.  
  990. {/block:Link}
  991.  
  992.  
  993. <!--CHAT POST-->
  994. {block:Chat}
  995. {block:Title}<div class="title">{Title}</div>{/block:Title}
  996. <ul class="chat">
  997. {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  998. </ul>
  999. {/block:Chat}
  1000.  
  1001.  
  1002. <!--AUDIO POST-->
  1003. {block:Audio}
  1004. {block:AlbumArt}<div class="songart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  1005. <div class="songtitle">{block:TrackName}{TrackName}{/block:TrackName}</div>
  1006. <div class="songauthor">By {block:Artist}{Artist}{/block:Artist}</div>
  1007. {AudioPlayerWhite}
  1008. {/block:Audio}
  1009.  
  1010.  
  1011. <!--VIDEO POST-->
  1012. {block:Video}
  1013. <div class="video"><div class="video-player">{Video-500}</div>
  1014. {block:ifcaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifcaptions}
  1015. {/block:Video}
  1016.  
  1017.  
  1018. <!--ANSWER POST-->
  1019. {block:Answer}
  1020. <a href="{AskerURL}"><img src="{AskerPortraitURL-40}" align="left" style="border-radius:0px;border:2px solid {color:asks} padding:3px;"></a><div class="askie"><div class="question"><span class="asker">{Asker} {text:ask text}:</span> {Question}</div></div>
  1021. {Answer}
  1022. {/block:Answer}
  1023.  
  1024. {block:IndexPage}
  1025. <br><div class="permalinkie"> <a href="{Permalink}">{NoteCount} {text:notes text}</a> <img src="{image:Permalink}"> <a href="{ReblogURL}">{text:reblog text}</a>
  1026. {block:HasTags}<br>{block:Tags} <a href="{TagUrl}">#{Tag}</a>{/block:Tags}{/block:HasTags}</div>{/block:IndexPage}
  1027.  
  1028. <!--POST NOTES-->
  1029.  
  1030. {block:PermalinkPage}
  1031. <p>
  1032. <center>
  1033. {block:Date}Posted on {DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix} at {12HourWithZero}:{Minutes}{CapitalAmPm}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}
  1034. {block:RebloggedFrom}<br><a title="{ReblogParentName}" href="{ReblogParentURL}">via</a>{/block:RebloggedFrom} •
  1035. {block:RebloggedFrom}<a title="{ReblogRootName}" href="{ReblogRootURL}">source</a>{/block:RebloggedFrom}
  1036. {block:HasTags}<br> tagged as: {block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags} {/block:HasTags}
  1037. </center>
  1038. {PostNotes}
  1039. </div>
  1040. {/block:PermalinkPage}
  1041. </article>
  1042. {/block:Posts}
  1043. <!--Close of article-->
  1044.  
  1045. </div>
  1046.  
  1047. </div>
  1048.  
  1049. <!-- -------------------------- TAB 2 -------------------------- -->
  1050.  
  1051. <div id="tab2" class="tab">
  1052. <div class="tabcontent">
  1053. <p>
  1054. <div style="font-family: arial; font-weight:bold; font-style:italic; text-transform:uppercase; width:500px; font-size:24px; text-shadow: 1px 0 0 {color:text shadow}, -1px 0 0 {color:text shadow}, 0 1px 0 {color:text shadow}, 0 -1px 0 {color:text shadow}, 1px 1px {color:text shadow}, -1px -1px 0 {color:text shadow}, 1px -1px 0 {color:text shadow}, -1px 1px 0 {color:text shadow};
  1055. ">Message Me</div>
  1056. <p>
  1057.  
  1058.  
  1059. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--><br><br>
  1060. <iframe frameborder="0" scrolling="no" width="100%" height="300" src="http://www.tumblr.com/submit_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="submit_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  1061. </center>
  1062. </div>
  1063. </div>
  1064.  
  1065.  
  1066. <!-- -------------------------- TAB 3 -------------------------- -->
  1067.  
  1068. <div id="tab3" class="tab">
  1069. <div class="tabcontent">
  1070. <div style="font-family: arial; font-weight:bold; font-style:italic; text-transform:uppercase; width:500px; font-size:24px; text-shadow: 1px 0 0 {color:text shadow}, -1px 0 0 {color:text shadow}, 0 1px 0 {color:text shadow}, 0 -1px 0 {color:text shadow}, 1px 1px {color:text shadow}, -1px -1px 0 {color:text shadow}, 1px -1px 0 {color:text shadow}, -1px 1px 0 {color:text shadow};
  1071. ">Links</div>
  1072.  
  1073. <center>
  1074. <table>
  1075. <tr>
  1076.  
  1077. <td>
  1078. <div class="linksett">
  1079. <a href="{text:navi link 1}">{text:navi link 1 title}</a><br>
  1080. <a href="{text:navi link 4}">{text:navi link 4 title}</a><br>
  1081. <a href="{text:navi link 7}">{text:navi link 7 title}</a><br>
  1082. </div>
  1083. </td>
  1084.  
  1085. {block:iflinkrow2}
  1086. <td>
  1087. <div class="linksett">
  1088. <a href="{text:navi link 2}">{text:navi link 2 title}</a><br>
  1089. <a href="{text:navi link 5}">{text:navi link 5 title}</a><br>
  1090. <a href="{text:navi link 8}">{text:navi link 8 title}</a><br>
  1091. </div>
  1092. </td>
  1093. {/block:iflinkrow2}
  1094.  
  1095. {block:iflinkrow3}
  1096. <td>
  1097. <div class="linksett">
  1098. <a href="{text:navi link 3}">{text:navi link 3 title}</a><br>
  1099. <a href="{text:navi link 6}">{text:navi link 6 title}</a><br>
  1100. <a href="{text:navi link 9}">{text:navi link 9 title}</a><br>
  1101. </div>
  1102. </td>
  1103. {/block:iflinkrow3}
  1104. </tr>
  1105. </table>
  1106. </center>
  1107. </div>
  1108. </div>
  1109.  
  1110.  
  1111. <!-- -------------------------- TAB 4 -------------------------- -->
  1112.  
  1113. <div id="tab4" class="tab">
  1114. <div class="tabcontent">
  1115.  
  1116. </div>
  1117. </div>
  1118.  
  1119.  
  1120. <!-- -------------------------- TAB 5 -------------------------- -->
  1121.  
  1122. <div id="tab5" class="tab">
  1123. <div class="tabcontent">
  1124.  
  1125. </div>
  1126. </div>
  1127.  
  1128.  
  1129.  
  1130. <!-- END OF TABS -->
  1131.  
  1132. </div>
  1133. </div>
  1134. </div>
  1135. </div>
  1136. </div>
  1137.  
  1138.  
  1139. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  1140.  
  1141. <script>
  1142. $(document).ready(function() {
  1143. $('.tabs .tab-links a').on('click', function(e) {
  1144. var currentAttrValue = $(this).attr('href');
  1145.  
  1146. // Show/Hide Tabs
  1147. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  1148.  
  1149. // Change/remove current tab to active
  1150. $(this).parent('li').addClass('active').siblings().removeClass('active');
  1151.  
  1152. e.preventDefault();
  1153. });
  1154. });
  1155. </script>
  1156.  
  1157. <script>
  1158. $(document).ready(function() {
  1159. $('#filterOptions li a').click(function() {
  1160. // fetch the class of the clicked item
  1161. var ourClass = $(this).attr('class');
  1162.  
  1163. // reset the active class on all the buttons
  1164. $('#filterOptions li').removeClass('active');
  1165. // update the active state on our clicked button
  1166. $(this).parent().addClass('active');
  1167.  
  1168. if(ourClass == 'all') {
  1169. // show all our items
  1170. $('#ourHolder').children('div.item').show();
  1171. }
  1172. else {
  1173. // hide all elements that don't share ourClass
  1174. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  1175. // show all elements that do share ourClass
  1176. $('#ourHolder').children('div.' + ourClass).show();
  1177. }
  1178. return false;
  1179. });
  1180. });
  1181. </script>
  1182.  
  1183.  
  1184. {block:ifrender}<div style="position:fixed; left:{text:render left}px; bottom:{text:render bottom}px; z-index:1;"><img src="{image:render}" width="{text:render width}"></div>{/block:ifrender}
  1185.  
  1186. <div class="credit"><a href="http://xollyx.tumblr.com/" title="theme"><img src="http://orig04.deviantart.net/151c/f/2015/334/6/e/tumblr_inline_mij52fv1gc1qz4rgp_by_kittystuff-d9il7w5.gif" /></a></div>
  1187.  
  1188.  
  1189. </div>
  1190.  
  1191. </body>
  1192. </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!