API tools faq
paste
Advertisement
shuntuationatseirin

Theme Two: King

shuntuationatseirin
May 27th, 2015
4,896
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 43.79 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. ┏━━━┓
  4. ┃┏━━┛
  5. ┃┗━━┳━┳━━┳━━┓
  6. ┃┏━━┫┏┫┏┓┃━━┫
  7. ┃┗━━┫┃┃┗┛┣━━┃
  8. ┗━━━┻┛┗━━┻━━┛
  9.  
  10. -Theme 2 [Revamp]: King by ixathemes/sunlitfuruta @ tumblr
  11. -Please do not remove credit
  12. -Please do not redistribute or claim as your own
  13. -Please don't use as base code
  14. -Enjoy
  15.  
  16. CREDITS
  17.  
  18. > PixelUnion/Extended-Tumblr-Photoset: https://github.com/PixelUnion/Extended-Tumblr-Photoset | Tutorial by shythemes @ tumblr
  19.  
  20. > Video resize script: http://shythemes.tumblr.com/post/134536748863/tutorial-resizing-videos
  21.  
  22. > Style-my-Tootips: http://manos.malihu.gr/style-my-tooltips-jquery-plugin/
  23.  
  24. > Lazy Load Script: http://starious.tumblr.com/post/27991109274/tutorial-lazy-load
  25.  
  26. > Custom Tumblr lightbox: http://shythemes.tumblr.com/post/140444996328/tutorial-lightboxes
  27.  
  28. !-->
  29.  
  30. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  31. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  32.  
  33. <head>
  34.  
  35.     <title>{Title}</title>
  36.     <link rel="shortcut icon" href="{Favicon}">
  37.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  38.     <meta name="description" content="" />
  39.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  40.     <meta name="viewport" content="width=1366, initial-scale=1.0">
  41.  
  42. <!--Custom Options-->
  43. <meta name="color:background" content="#ffffff" />
  44. <meta name="color:Text" content="#888888" />  
  45. <meta name="color:bold" content="#666666"/>
  46. <meta name="color:italic" content="#666666"/>
  47. <meta name="color:underline" content="#666666"/>
  48. <meta name="color:pre" content="#888888" />
  49. <meta name="color:pre background" content="#eeeeee" />
  50. <meta name="color:Links" content="#888888" />
  51. <meta name="color:Link Hover" content="#666666" />
  52.  
  53. <meta name="color:text selection" content="#ffffff" />
  54. <meta name="color:text selection background" content="#888888" />
  55. <meta name="color:tooltip text" content="#666666" />
  56. <meta name="color:tooltip background" content="#ffffff" />
  57. <meta name="color:leftbar" content="#eeeeee" />
  58. <meta name="color:sidebar" content="#ffffff" />
  59. <meta name="color:blogtitle" content="#888888" />
  60. <meta name="color:blogtitle border" content="#eeeeee" />
  61. <meta name="color:homelink" content="#888888" />
  62. <meta name="color:homelink background" content="#eeeeee" />
  63. <meta name="color:homelink hover" content="#f6f6f6" />
  64. <meta name="color:navi" content="#444444" />
  65. <meta name="color:navi background" content="#eeeeee" />
  66. <meta name="color:navi hover" content="#f6f6f6" />
  67. <meta name="color:description" content="#888888" />
  68. <meta name="color:desc bold" content="#888888"/>
  69. <meta name="color:desc italic" content="#444444"/>
  70. <meta name="color:desc underline" content="#666666"/>
  71. <meta name="color:desc links" content="#888888" />
  72. <meta name="color:pagination" content="#888888" />
  73. <meta name="color:pagination background" content="#eeeeee" />
  74. <meta name="color:pagination hover" content="#666666" />
  75.  
  76. <meta name="color:Posts" content="#ffffff" />
  77. <meta name="color:Post Title" content="#888888" />
  78. <meta name="color:Post Title Border" content="#cccccc" />
  79. <meta name="color:Post Title Background" content="#eeeeee" />
  80. <meta name="color:quote box" content="#888888" />
  81. <meta name="color:quote box background" content="#ffffff" />
  82. <meta name="color:quote border" content="#eeeeee" />
  83. <meta name="color:Blockquote" content="#888888" />
  84. <meta name="color:Scrollbar" content="#888888" />
  85. <meta name="color:Scrollbar Background" content="#cccccc" />
  86.  
  87. <meta name="color:Chat" content="#ffffff" />
  88. <meta name="color:Chat Odd" content="#eeeeee" />
  89. <meta name="color:Chat label" content="#888888" />
  90. <meta name="color:audio track" content="#888888" />
  91. <meta name="color:audio track bold" content="#666666" />
  92. <meta name="color:audio track background" content="#eeeeee" />
  93. <meta name="color:Asker" content="#888888" />
  94. <meta name="color:Asker background" content="#eeeeee" />
  95. <meta name="color:Asker bold" content="#444444" />
  96. <meta name="color:Asker portrait border" content="#eeeeee" />
  97. <meta name="color:question" content="#888888" />
  98. <meta name="color:question background" content="#eeeeee" />
  99.  
  100. <meta name="color:permalink" content="#888888" />
  101. <meta name="color:permalink background" content="#ffffff" />
  102. <meta name="color:permalink hover" content="#eeeeee" />
  103. <meta name="color:permalink border" content="#444444" />
  104. <meta name="color:photo permalink" content="#888888" />
  105. <meta name="color:photo permalink background" content="#ffffff" />
  106. <meta name="color:photo permalink hover" content="#eeeeee" />
  107. <meta name="color:tagbar" content="#eeeeee" />
  108.  
  109. <meta name="select:Background Attachment" content="fixed" title="fixed">
  110. <meta name="select:Background Attachment" content="scroll" title="scroll">
  111. <meta name="select:Background Repeat" content="repeat" title="repeat">
  112. <meta name="select:Background Repeat" content="no-repeat" title="no repeat">
  113.  
  114. <meta name="select:Post Size" content="400" title="400px">
  115. <meta name="select:Post Size" content="500" title="500px">
  116. <meta name="select:Post Size" content="540" title="540px">
  117.  
  118. <meta name="text:body font" content="10" />
  119. <meta name="text:title font" content="18" />
  120.  
  121. <meta name="if:Link1" content="1" />
  122. <meta name="if:Link2" content="1" />
  123. <meta name="if:Link3" content="1" />
  124. <meta name="if:Link4" content="1" />
  125. <meta name="if:Link5" content="1" />
  126. <meta name="if:Link6" content="1" />
  127.  
  128. <meta name="text:CustomLink1URL" content="Link 1 URL" />
  129. <meta name="text:CustomLink1Name" content="Link 1" />
  130. <meta name="text:CustomLink2URL" content="Link 2 URL" />
  131. <meta name="text:CustomLink2Name" content="Link 2" />
  132. <meta name="text:CustomLink3URL" content="Link 3 URL" />
  133. <meta name="text:CustomLink3Name" content="Link 3" />
  134. <meta name="text:CustomLink4URL" content="Link 4 URL" />
  135. <meta name="text:CustomLink4Name" content="Link 4" />
  136. <meta name="text:CustomLink5URL" content="Link 5 URL" />
  137. <meta name="text:CustomLink5Name" content="Link 5" />
  138. <meta name="text:CustomLink6URL" content="Link 6 URL" />
  139. <meta name="text:CustomLink6Name" content="Link 6" />
  140.  
  141. <meta name="image:background" content=""/>
  142. <meta name="image:sidebarone" content="" />
  143. <meta name="image:sidebartwo" content="" />
  144.  
  145. <meta name="if:inverted tumblr controls" content="1" />
  146. <meta name="if:Small Cursor" content="1" />
  147. <meta name="if:Custom Text Selection" content="1"/>
  148. <meta name="if:Faded Images" content="0"/>
  149. <meta name="if:Grayscale Images" content="0"/>
  150. <meta name="if:Cover Permalinks" content="0"/>
  151. <meta name="if:Show Captions" content="1"/>
  152. <meta name="if:Show Tags" content="1"/>
  153.  
  154. <!--Custom Options-->
  155.  
  156. <!--Custom Fonts-->
  157. <link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
  158. <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
  159. <link href='https://fonts.googleapis.com/css?family=Raleway:400,500,900,600,800' rel='stylesheet' type='text/css'>
  160. <link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>
  161. <link href='https://fonts.googleapis.com/css?family=Karla|Lato|Muli|Roboto|Inconsolata|Hind|Vollkorn|Lato|Playfair+Display|Cardo' rel='stylesheet' type='text/css'>
  162. <!--Custom Fonts-->
  163.  
  164. <!--Homelinks Icons-->
  165. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  166. <!--Homelinks Icons-->
  167.  
  168. <style type="text/css">
  169.  
  170. /* Follow/Dashboard */
  171. iframe#tumblr_controls, .iframe-controls--desktop {
  172.     right: 3px !important;
  173.     top: 2px !important;
  174.     position: fixed !important;
  175.     z-index:999999999!important;
  176.     opacity: 0.3;
  177.     {block:ifinvertedtumblrcontrols}
  178.     -webkit-filter: invert(100%);
  179.     {/block:ifinvertedtumblrcontrols}
  180.     -moz-transition-duration: 0.5s;
  181.     -o-transition-duration: 0.5s;
  182.     -webkit-transition-duration: 0.5s;
  183.     transition-duration: 0.5s;
  184. }
  185.  
  186. iframe#tumblr_controls, .iframe-controls--desktop:hover {
  187.     opacity:0.5 !important;
  188.     -moz-transition-duration: 0.5s;
  189.     -o-transition-duration: 0.5s;
  190.     -webkit-transition-duration: 0.5s;
  191.     transition-duration: 0.5s;
  192. }
  193.  
  194. /* Custom Tumblr Lightbox */
  195.  
  196. .vignette, #vignette {
  197.     opacity:0;
  198. }
  199. .lightbox-image, #tumblr_lightbox img {
  200.     box-shadow:none !important;
  201.     border-radius:0 !important;
  202.     max-width:none;
  203. }
  204.  
  205. .tmblr-lightbox, #tumblr_lightbox {
  206.     background-color:rgba({RGBcolor:Background}, 0.4) !important;
  207. }
  208.  
  209. .lightbox-image, #tumblr_lightbox img {
  210.     background-color: {color:posts} !important;
  211.     padding: 10px !important;
  212.     -moz-box-sizing:border-box;
  213.     box-sizing:border-box;
  214. }
  215.  
  216. /* Scrollbar */
  217.  
  218. ::-webkit-scrollbar {
  219.   width: 6px;
  220.   height: 6px;
  221. }
  222. ::-webkit-scrollbar-button {
  223.   width: 0px;
  224.   height: 0px;
  225. }
  226. ::-webkit-scrollbar-thumb {
  227.   background: {color:Scrollbar};
  228. }
  229.  
  230. ::-webkit-scrollbar-track {
  231.   background: {color:Scrollbar Background};
  232. }
  233.  
  234. /*tooltip*/
  235. #s-m-t-tooltip {
  236.     max-width:300px;
  237.     border-radius: 0px;
  238.     padding:3px 5px;
  239.     margin:20px 7px -2px 20px;
  240.     background-color:{color:tooltip background};
  241.     font-size:9px;
  242.     text-transform:capitalize;
  243.     color:{color:tooltip text};
  244.     z-index:999999999999999999999999999999999999;
  245. }
  246.  
  247. /* text selection */
  248. {block:ifCustomTextSelection}
  249. ::selection {
  250.     background: {color:text selection background};
  251.     color: {color:text selection};
  252. }
  253.  
  254. ::-moz-selection {
  255.     background: {color:text selection background};
  256.     color: {color:text selection};
  257. }
  258.  
  259. ::-webkit-selection {
  260.     background: {color:text selection background};
  261.     color: {color:text selection};
  262. }
  263. {/block:ifCustomTextSelection}
  264.  
  265. /* Body and stuff */  
  266. body {
  267.       background-color: {color:Background};
  268.       font-size: {text:body font}px;
  269.       font-family: 'Raleway', sans-serif;
  270.       font-weight: 500;
  271.       line-height: 150%;
  272.       color: {color:Text};
  273.       margin: 0;
  274.       background-attachment: {select:Background Attachment};
  275.       background-repeat: {select:Background Repeat};
  276.       background-image: url({image:Background});  
  277. }
  278.        
  279. a {
  280.         color: {color:Links};
  281.         text-decoration: none;
  282.         -moz-transition-duration: 0.5s;
  283.         -o-transition-duration: 0.5s;
  284.         -webkit-transition-duration: 0.5s;
  285.         transition-duration: 0.5s;
  286. }
  287.  
  288. a:hover {
  289.         color: {color:Link Hover};
  290.         -moz-transition-duration: 0.5s;
  291.         -o-transition-duration: 0.5s;
  292.         -webkit-transition-duration: 0.5s;
  293.         transition-duration: 0.5s;
  294. }
  295.  
  296.        
  297. b,strong {
  298.     color:{color:bold};
  299. }
  300.  
  301. i,em {
  302.     color:{color:italic};
  303. }
  304.  
  305. u {
  306.     color:{color:underline};
  307. }
  308.  
  309. pre {
  310.     white-space: pre-wrap;
  311.     white-space: -moz-pre-wrap;
  312.     white-space: -pre-wrap;
  313.     white-space: -o-pre-wrap;
  314.     padding: 5px;
  315.     background-color: {color:pre background};
  316.     color: {color:pre};
  317.     font-family: 'Raleway', sans-serif;
  318.     font-weight: 500;
  319.     line-height: 150%;
  320. }
  321.  
  322. h1, h2, h3 {
  323.     font-weight: bold;
  324.     font-size: 14px;
  325. }
  326.  
  327. hr {
  328.     width: 30%;
  329.     height: 1px;
  330.     background-color: {color:links};
  331.     color: {color:links};
  332.     border: 0px solid transparent;
  333. }
  334.  
  335. small,sub,sup {
  336.     font-size: 9px;
  337. }
  338.  
  339. blockquote {
  340.       border-left: solid 2px;
  341.       border-color: {color:Blockquote};
  342.       margin: 5px;
  343.       padding-left: 5px;
  344. }
  345.  
  346. blockquote img {
  347.     width: auto;
  348.     height: auto;
  349. }
  350.  
  351. /* small cursor */
  352. {block:ifSmallCursor}
  353. html, body, a { cursor:url("http://i.imgur.com/2qleX.jpg"), auto !important; }
  354.  
  355. a:hover{cursor:url("http://i.imgur.com/IepP2.jpg"), auto !important; }
  356. {/block:ifSmallCursor}
  357.  
  358. /*container*/
  359. #content {
  360.     margin: 20px 0px 30px 460px;
  361.     padding-top: 10px;
  362.     width:calc({select:Post Size}px + 40px);
  363. }
  364.  
  365. /* Posts */
  366. .posts {
  367.     position: relative;
  368.     width: {select:Post Size}px;
  369.     padding: 15px;
  370.     margin-bottom: 50px;
  371.     background-color:{color:posts};
  372. }
  373.  
  374. .posts li {
  375.     list-style: square;
  376. }
  377.  
  378. .posts iframe {
  379.     max-width:100%;
  380.     display: block;
  381.     padding: 0;
  382.     margin: 0
  383. }
  384.  
  385. .posts img {
  386.     max-width: 100%;
  387.     display: block;
  388.     border: 0;
  389. }
  390.  
  391. .tumblr_video_container {
  392.     width: auto;
  393.     height: auto;
  394. }
  395.  
  396. .posts .photo img {
  397.       {block:ifFadedImages}
  398.       {block:IndexPage}
  399.       opacity: 0.6;
  400.       -moz-transition: all 0.8s ease-in;
  401.       -o-transition: all 0.8s ease-in;
  402.       -webkit-transition: all 0.8s ease-in;
  403.       transition: all 0.8s ease-in;
  404. }
  405.  
  406. .posts:hover .photo img {
  407.       opacity: 1.0;
  408.       -moz-transition: all 0.8s ease-in;
  409.       -o-transition: all 0.8s ease-in;
  410.       -webkit-transition: all 0.8s ease-in;
  411.       transition: all 0.8s ease-in;
  412.       {/block:IndexPage}
  413.       {/block:ifFadedImages}
  414. }
  415.  
  416. {block:ifGrayscaleImages}
  417. {block:IndexPage}
  418. .posts, .photo img {
  419.   z-index: -9999999999999999999999999px;
  420.   -webkit-filter: grayscale(100%);
  421.   filter: grayscale(100%);
  422.   filter: gray;
  423.   /* IE 6-9 */
  424.   -moz-transition: all 0.8s ease-in;
  425.   -o-transition: all 0.8s ease-in;
  426.   -webkit-transition: all 0.8s ease-in;
  427.   transition: all 0.8s ease-in;
  428. }
  429.  
  430. .posts:hover, .photo img {
  431.   -webkit-filter: none;
  432.    filter: none;
  433.   -moz-transition: all 0.8s ease-in;
  434.   -o-transition: all 0.8s ease-in;
  435.   -webkit-transition: all 0.8s ease-in;
  436.   transition: all 0.8s ease-in;
  437. }
  438. {/block:IndexPage}
  439. {/block:ifGrayscaleImages}
  440.  
  441. .caption {
  442.     padding: 0;
  443.     margin: 0;
  444. }
  445.  
  446. .posts .title {
  447.       color: {color:Post Title};
  448.       font-size: 18px;
  449.       font-family: 'PT Sans Narrow', sans-serif;
  450.       padding: 10px;
  451.       background-color: {color:Post Title Background};
  452.       text-align: center;
  453.       text-transform: uppercase;
  454. }
  455.  
  456. /* link posts */  
  457. .posts .link {
  458.       font-size: 18px;
  459.       font-family: 'PT Sans Narrow', sans-serif;
  460.       padding: 10px;
  461.       text-align: center;
  462.       text-transform: uppercase;
  463.       background-color: {color:Post Title Background};
  464.       border-left:  0px solid transparent;
  465.       -webkit-transition: all 0.6s ease-in-out;
  466.       -moz-transition: all 0.6s ease-in-out;
  467.       -o-transition: all 0.6s ease-in-out;
  468. }
  469.  
  470. .posts .link:hover {
  471.      border-left:  10px solid {color:Post Title Border};
  472.       -webkit-transition: all 0.6s ease-in-out;
  473.       -moz-transition: all 0.6s ease-in-out;
  474.       -o-transition: all 0.6s ease-in-out;
  475. }
  476.  
  477. .posts .link a {
  478.     color: {color:Post Title};
  479. }
  480.  
  481. .posts .link a:hover {
  482.     color: {color:link hover};
  483. }
  484.  
  485. /* quote posts */  
  486. .posts .quote {
  487.       color: {color:quote};
  488.       font-size: 18px;
  489.       font-family: 'PT Sans Narrow', sans-serif;
  490.       line-height: 25px;
  491.       margin-top: 0px;
  492.       border-top: 1px solid {color:quote border};
  493.       border-bottom: 1px solid {color:quote border};
  494.       padding: 5px;
  495.       text-align: center;
  496. }
  497.  
  498. .qtsource {
  499.     margin-top: -10px;
  500. }
  501.  
  502. .quote-box {
  503.     padding: 7px;
  504.     width: 5px;
  505.     height: 5px;
  506.     background-color: {color:quote box background};
  507.     font-size: 20px;
  508.     margin-bottom: 5px;
  509.     border: 4px double {color:quote border};
  510.     color: {color:quote box};
  511. }
  512.  
  513. /* audio posts */
  514. .playbutton {
  515.     width: 30px;
  516.     height: 30px;
  517.     overflow: hidden;
  518.     position: absolute;
  519.     margin-top: 20px;
  520.     margin-left: 20px;
  521.     z-index: 999999;
  522. }
  523.  
  524. .playbox {
  525.     background-color: white;
  526.     width: 70px;
  527.     height: 70px;
  528.     z-index: 1;
  529.     position:absolute;
  530.     margin-top: 45px;
  531.     margin-left: 43px;
  532.     opacity: 0.6;
  533.     -webkit-transition: all 0.6s ease-in-out;
  534.     -moz-transition: all 0.6s ease-in-out;
  535.     -o-transition: all 0.6s ease-in-out;
  536. }
  537.  
  538. .playbox:hover {
  539.     opacity: 0.9;
  540.     -webkit-transition: all 0.6s ease-in-out;
  541.     -moz-transition: all 0.6s ease-in-out;
  542.     -o-transition: all 0.6s ease-in-out;
  543. }  
  544.  
  545. .audiowrapper {
  546.                position: relative;
  547.                display:inline-block;
  548. }      
  549.            
  550. .audioimgwrapper {
  551.                
  552.                 left: 0px;
  553.                 margin-top: 0px;
  554.                 overflow: hidden;
  555.                 width: 160px;
  556.                 height: 160px;
  557.             }
  558.            
  559. .audioimgwrapper img {
  560.                 width: 100%;
  561.                 height: auto;
  562. }
  563.            
  564. .trackdetails {
  565.       min-height: 72px;
  566.       color: {color:audio track};
  567.       text-transform: capitalize;
  568.       line-height: 150%;
  569.       padding-right:10px;
  570.       padding-left: 2px;
  571.       width: calc({select:Post Size}px - 170px);
  572.       margin-top: 0px;
  573.      
  574.                
  575. }
  576.  
  577. .trackdetails b {
  578.     color: {color:audio track bold};
  579.     font-weight: 900;
  580. }              
  581.  
  582. .track {
  583.     padding: 10px;
  584.     height: 20px;
  585.     margin-bottom: 1px;
  586.     overflow: hidden;
  587.     background-color: {color:audio track background};
  588. }
  589.  
  590. .artist {
  591.     padding: 10px;
  592.     height: 20px;
  593.     margin-bottom: 1px;
  594.     overflow: hidden;
  595.     background-color: {color:audio track background};
  596. }
  597.  
  598. .album {
  599.     padding:  10px;
  600.     height: 20px;
  601.     margin-bottom: 1px;
  602.     overflow: hidden;
  603.     background-color: {color:audio track background};
  604. }
  605.  
  606. .play {
  607.     padding: 10px;
  608.     height: 20px;
  609.     margin-bottom: 1px;
  610.     overflow: hidden;
  611.     background-color: {color:audio track background};
  612. }
  613.  
  614. /* question/answer */
  615. #asker {
  616.     color:{color:asker};
  617.     padding: 2px;
  618.     text-align: center;
  619.     margin-bottom: 7px;
  620.     font-size: 10px;
  621.     background-color: {color:asker background};
  622.     font-family: 'PT Sans Narrow', sans-serif;
  623. }
  624.  
  625. #asker a {
  626.     color:{color:asker};
  627.     text-transform: lowercase;
  628. }
  629.  
  630. #asker b {
  631.     font-size: 12px;
  632.     color: {color:asker bold};
  633.     font-family: 'PT Sans Narrow', sans-serif;
  634.     font-weight: 700;
  635. }
  636.  
  637. .question {
  638.     width:calc({select:Post Size}px - 105px);
  639.     min-height: 63px;
  640.     margin-left: 85px;
  641.     margin-bottom:4px;
  642.     padding: 5px 10px;
  643.     text-align:left;
  644.     color: {color:question};
  645.     background-color: {color:question background};
  646. }
  647.  
  648. .answer {
  649.     margin-top: 10px;
  650.     text-align: justify;
  651. }
  652.  
  653. /* chat posts */
  654. .chat .line {
  655.     padding: 15px 8px;
  656.     margin-bottom: 0px;
  657.     color: {color:chat};
  658. }
  659.  
  660. .chat .line:nth-child(odd)  {
  661.     background-color: {color:chat odd};
  662. }
  663.  
  664. .chat .line:nth-child(even) {
  665.     background-color: {color:posts};
  666. }
  667.  
  668. .chat .label {
  669.     text-transform: capitalize;
  670. }
  671.  
  672. .line .label b {
  673.     color: {color:chat label};
  674. }
  675.  
  676. /* post info and permalinks */
  677. #info {
  678.     margin-top: -30px;
  679.     margin-left: calc({select:Post Size}px + 35px);
  680.     position: absolute;
  681.     opacity: 0;
  682.        -o-transition:0.6s ease;
  683.     -moz-transition:0.6s ease;
  684.     -webkit-transition:0.6s ease;
  685. }
  686.  
  687. .posts:hover #info {
  688.     margin-top: -20px;
  689.     opacity: 1.0;
  690.      margin-left: calc({select:Post Size}px + 25px);
  691.     -o-transition:0.6s ease;
  692.     -moz-transition:0.6s ease;
  693.     -webkit-transition:0.6s ease;
  694. }
  695.  
  696. #date {
  697.     margin-top: 15px;
  698. }
  699.  
  700. #date a {
  701.     width: 16px;
  702.     height: 16px;
  703.     padding: 2px;
  704.     border-radius: 25px;
  705.     color: {color:permalink};
  706.     background-color: {color:permalink background};
  707.     margin-top: 1px;
  708.     display: block;
  709.     text-align: center;
  710.     border: 2px solid {color:permalink border};
  711.     overflow: hidden;
  712.     -o-transition:0.6s ease;
  713.     -moz-transition:0.6s ease;
  714.     -webkit-transition:0.6s ease;
  715. }
  716.  
  717. #date a:hover {
  718.     background-color: {color:permalink hover};
  719.     -webkit-transform: rotate(360deg);
  720.     transform: rotate(360deg);
  721.     -o-transition:0.6s ease;
  722.     -moz-transition:0.6s ease;
  723.     -webkit-transition:0.6s ease;
  724. }
  725.  
  726. .info_hold {
  727.     position:absolute;
  728.     width:100%;
  729.     height:100%;
  730.     top:0;
  731.     left:0;
  732.     opacity:0;
  733.     z-index:9999;
  734.     background:rgba({RGBcolor:photo permalink background},0.7);
  735.     transition:0.6s ease;
  736.     -o-transition:0.6s ease;
  737.     -moz-transition:0.6s ease;
  738.     -webkit-transition:0.6s ease;
  739. }
  740. .posts:hover .info_hold {opacity:1.0}
  741.  
  742. .infocover {
  743.     top:calc(50% - 15px);
  744.     line-height:0;
  745.     position:relative;
  746.     text-align:center;
  747.     font-family: 'PT Sans Narrow', sans-serif;
  748.     font-size:18px;
  749.     padding:0;
  750.     color: {color:photo permalink};
  751. }
  752.  
  753. .infocover a {  
  754.     font-family: 'PT Sans Narrow', sans-serif;
  755.     font-size:18px;
  756.     text-transform:capitalize;
  757.     display: block;
  758.     margin-top: 20px;
  759.     color: {color:photo permalink};
  760. }
  761.  
  762. .infocover a:hover {
  763.     color: {color:photo permalink hover};
  764. }
  765.  
  766. .reblogged a {margin:10px 0px;font-size:10px; display:inline-block;}
  767. .reblogged {margin:10px 0 12px; letter-spacing:0.5px;}
  768.  
  769. .post_tags {
  770.     width: calc({select:Post Size}px + 20px);
  771.     margin: -50px 0px 30px 0px;
  772.     background-color: {color:tagbar};
  773.     padding: 5px;
  774.     height: 15px;
  775.     overflow: hidden;
  776.     white-space: nowrap;
  777.     position: relative;
  778. }
  779.  
  780. .post_tags.draggable .post_tags_inner {
  781.   cursor: col-resize;
  782.   -webkit-touch-callout: none;
  783.   -webkit-user-select: none;
  784.   -khtml-user-select: none;
  785.   -moz-user-select: none;
  786.   -ms-user-select: none;
  787.   user-select: none;
  788. }
  789.  
  790. .post_tags_inner {
  791.   float: left;
  792.   position: relative;
  793.   padding: 0px 20px 0px 0;
  794. }
  795.  
  796. .post_tags a,
  797. .post_tags .post_tag {
  798.     display: inline-block;
  799.     margin-left: 3px;
  800.     color: {color:permalink};
  801.     font-family: 'Archivo Narrow', sans-serif;
  802.     font-size: 9px;
  803. }
  804.  
  805. .post_tags:after {
  806.   content: '';
  807.   position: absolute;
  808.   top: 0;
  809.   right: 0;
  810.   bottom: 0;
  811.   width: 20px;
  812.   background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, {color:tagbar} 100%);
  813. }
  814.  
  815. .post_tags a:hover,
  816. .post_tags .post_tag:hover,
  817. .post_tags a:focus,
  818. .post_tags .post_tag:focus,
  819. .post_tags a:active,
  820. .post_tags .post_tag:active { color:{color:permalink hover};
  821. }
  822.  
  823. /* Permalink page */
  824. #perma {
  825.     width: {select:Post Size}px;
  826.     padding: 15px;
  827.     margin-top: -30px;
  828.     margin-left: calc(auto - 10px);
  829.     margin-left: calc(auto + 10px);
  830.     background-color: {color:Posts};
  831.     text-align: center;
  832. }
  833.  
  834.  
  835. #notecontainer {
  836.       margin-top: 20px;
  837.       margin-left: calc(auto - 10px);
  838.       margin-left: calc(auto + 10px);
  839.       width: {select:Post Size}px;
  840.       padding: 15px;
  841.       font-size: 10px;
  842.       color: {color:Text};
  843.       background-color: {color:Posts};
  844. }
  845.  
  846. #notecontainer ol.notes {
  847.       list-style-type: none;
  848.       padding: 0;
  849.       margin: 0;
  850. }
  851.  
  852. #notecontainer img.avatar {
  853.       margin-right: 10px;
  854.       width: 16px;
  855.       height: 16px;
  856. }
  857.  
  858. /* sidebar */
  859. #imgcont {
  860.     width: 150px;
  861.     height: 100%;
  862.     background-color: {color:leftbar};
  863.     position: fixed;
  864.     top: 0;
  865.     left: 0;
  866.     background-attachment: fixed;
  867.     background-repeat: repeat;
  868.     background-image: url({image:sidebarone});
  869. }
  870.  
  871. .sidebar {
  872.     width: 230px;
  873.     height: 100%;
  874.     background-color: {color:sidebar};
  875.     position: fixed;
  876.     top: 0;
  877.     left: 150px;
  878. }
  879.  
  880. #title {
  881.     width 180px;
  882.     font-family: 'PT Sans Narrow', sans-serif;
  883.     font-size: 18px;
  884.     text-align: center;
  885.     text-transform: uppercase;
  886.     color: {color:blogtitle};
  887.     border-bottom: 1px solid {color:blogtitle border};
  888.     padding-bottom: 5px;
  889.     margin-top: 50px;
  890. }
  891.  
  892. .sidebar img {
  893.     width: 206px;
  894.     height: 100px;
  895.     background-color: #eee;
  896.     margin-top: 10px;
  897.     margin-left: 12px;
  898. }
  899.  
  900. /*homelinks*/
  901. .homelinks {
  902.     margin-top: 0px;
  903.     margin-left: 5px;
  904. }
  905.  
  906. .homelinks a {
  907.     display: block;
  908.     float: left;
  909.     margin: 7px;
  910.     color: {color:homelink};
  911.     background-color: {color:homelink background};
  912.     padding: 10px;
  913.     width: 10px;
  914.     height: 10px;
  915.     font-size: 15px;
  916.     -webkit-transition: all 0.6s ease-in-out;
  917.     -moz-transition: all 0.6s ease-in-out;
  918.     -o-transition: all 0.6s ease-in-out;
  919. }
  920.  
  921. .homelinks a:hover {
  922.     background-color: {color:homelink hover};
  923.     border-radius: 30px;
  924.     -webkit-transition: all 0.6s ease-in-out;
  925.     -moz-transition: all 0.6s ease-in-out;
  926.     -o-transition: all 0.6s ease-in-out;
  927. }
  928.  
  929. .description {
  930.     width: 208px;
  931.     color: {color:description};
  932.     text-align: justify;
  933.     margin-top: 15px;
  934.     margin-left: 7px;
  935.     padding: 5px;
  936. }
  937.  
  938. .description a {
  939.         color:{color:desc links};
  940. }
  941.  
  942. .description b,strong {
  943.         color:{color:desc bold};
  944. }
  945.  
  946. .description i,em {
  947.         color:{color:desc italic};
  948. }
  949.  
  950. .description u {
  951.         color:{color:desc underline};
  952. }
  953.  
  954.  
  955. /* navigation links */
  956. .morelinks {
  957.     margin-top: 5px;
  958.     margin-left: 10px;
  959. }
  960.  
  961. .morelinks a {
  962.     display: block;
  963.     margin-top: 5px;
  964.     width: 190px;
  965.     padding: 5px 10px;
  966.     background-color: {color:navi background};
  967.     color: {color:navi};
  968.     font-family: 'PT Sans Narrow', sans-serif;
  969.     font-size: 11px;
  970.     box-shadow: inset 0px 0px 0px {color:navi hover};
  971.     -webkit-transition: opacity 0.9s linear;
  972.     -webkit-transition: all 0.9s ease-in-out;
  973.     -moz-transition: all 0.9s ease-in-out;
  974. }
  975.  
  976. .morelinks a:hover {
  977.     box-shadow: inset 300px 0px 0px {color:navi hover};
  978.     -webkit-transition: opacity 0.9s linear;
  979.     -webkit-transition: all 0.9s ease-in-out;
  980.     -moz-transition: all 0.9s ease-in-out;
  981. }
  982.  
  983. /* pagination */
  984. .pagination {
  985.     margin-top: 10px;
  986. }
  987. .pagination a {
  988.     display: inline-block;
  989.     margin-left: 5px;
  990.     color: {color:pagination};
  991.     background-color: {color:pagination background};
  992.     padding: 5px;
  993.     font-size: 12px;
  994. }
  995.  
  996. .pagination a:hover {
  997.     background-color: {color:pagination hover};
  998. }
  999.  
  1000. {CustomCSS}
  1001. </style>
  1002.  
  1003. <!--Tooltips Script-->
  1004. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1005.  
  1006. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1007.  
  1008. <script>
  1009.  
  1010. (function($){
  1011.  
  1012. $(document).ready(function(){
  1013.  
  1014. $("a[title]").style_my_tooltips({
  1015.  
  1016. tip_follows_cursor:true,
  1017.  
  1018. tip_delay_time:10,
  1019.  
  1020. tip_fade_speed:200,
  1021.  
  1022. attribute:"title"
  1023.  
  1024. });
  1025.  
  1026. });
  1027.  
  1028. })(jQuery);
  1029.  
  1030. </script>
  1031. <!--Tooltips Script-->
  1032.  
  1033. <!--Lazy Load Script-->
  1034. {block:IndexPage}
  1035. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  1036. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  1037. <script type="text/javascript" charset="utf-8">
  1038. var $j = jQuery.noConflict();
  1039. $j(function() {
  1040. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  1041. $j(".photo img").lazyload({
  1042. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  1043. effect: "fadeIn",
  1044. });
  1045. });
  1046. </script>
  1047. {/block:IndexPage}
  1048. <!--Lazy Load Script-->
  1049.  
  1050. </head>
  1051. <body>
  1052.  
  1053.     <div id="imgcont"></div> <!--Sidebar-->
  1054.     <div class="sidebar">
  1055.         <div id="title">{title}</div>
  1056.          <img src="{image:sidebartwo}">
  1057.          
  1058.          <div class="homelinks"> <!--homelinks-->
  1059. <a href="/" title="home"><i style="color:{color:homelink}; margin:-2px;" class="fa fa-home"></i></a>
  1060. <a href="/ask" title="ask"><i style="color:{color:homelink}; margin:-2px;" class="fa fa-envelope-o" ></i></a>
  1061. <a href="/archive" title="archive"><i style="color:{color:homelink}; margin:-2px;" class="fa fa-calendar" ></i></a>
  1062. <a href="/submit" title="submit"><i style="color:{color:homelink}; margin:-2px;" class="fa fa-gift"  ></i></a>
  1063. <!--you better not remove the credit-->
  1064. <a href="http://ixathemes.tumblr.com" title="theme by ixathemes"><i style="color:{color:homelink}; margin:-2px;" class="fa fa-file-code-o"></i></a>
  1065. <!--...I'm watching you. Don't you dare touch the credit-->
  1066. </div> <!--homelinks-->
  1067.  
  1068. <div class="description">{Description}</div>
  1069.  
  1070.        <div class="morelinks"> <!--navigation links-->
  1071.     {block:ifLink1}<a href="{text:CustomLink1URL}">{text:CustomLink1Name}</a>{/block:ifLink1}
  1072.     {block:ifLink2}<a href="{text:CustomLink2URL}">{text:CustomLink2Name}</a>{/block:ifLink2}
  1073.     {block:ifLink3}<a href="{text:CustomLink3URL}">{text:CustomLink3Name}</a>{/block:ifLink3}
  1074.     {block:ifLink4}<a href="{text:CustomLink4URL}">{text:CustomLink4Name}</a>{/block:ifLink4}
  1075.     {block:ifLink5}<a href="{text:CustomLink5URL}">{text:CustomLink5Name}</a>{/block:ifLink5}
  1076.     {block:ifLink6}<a href="{text:CustomLink6URL}">{text:CustomLink6Name}</a>{/block:ifLink6}
  1077. </div> <!--navigation links-->
  1078.  
  1079. <!--pagination-->
  1080. <center>
  1081. <div class="pagination">
  1082. {block:PreviousPage}<a href="{PreviousPage}" title="previous page">« </a>{/block:PreviousPage}
  1083. {block:NextPage}<a href="{NextPage}" title="next page"> »</a>{/block:NextPage}
  1084. </div>
  1085. </center>
  1086. </div>
  1087. <!--pagination-->
  1088.     </div> <!--Sidebar-->
  1089.  
  1090. <div id="content"> <!--content-->
  1091. {block:Posts}
  1092. <div class="posts"> <!--posts-->
  1093.  
  1094. {block:ContentSource}
  1095. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1096. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1097. {/block:SourceLogo}
  1098. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1099. {/block:ContentSource}
  1100.  
  1101. <!-- {block:NoRebloggedFrom}
  1102. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1103. {/block:NoRebloggedFrom} -->
  1104.  
  1105. {block:Text}
  1106. {block:IndexPage}
  1107. <div id="info"> <!--Permalink post info-->
  1108. {block:Date}
  1109. <div id="date">
  1110. <a href="{Permalink}" title="{ShortMonth} {DayOfMonthWithZero}, {Year}"><i style="color:{color:permalink};" class="fa fa-clock-o"></i></a>
  1111. {block:NoteCount}
  1112. <a href="{Permalink}" title="{NoteCountWithLabel}"><i style="color:{color:permalink};" class="fa fa-book"></i></a>{/block:NoteCount}
  1113. {block:RebloggedFrom}
  1114. <a href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a>
  1115. <a href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a></a>
  1116. {/block:RebloggedFrom}
  1117. <a href="{ReblogURL}" title="Reblog this post"><i style="color:{color:permalink};" class="fa fa-retweet"></i></a>
  1118. </div>
  1119. {/block:Date}
  1120. </div>
  1121. {/block:IndexPage}
  1122. {block:Title}<div class="title">{Title}</div>{/block:Title}
  1123. <div class="text">{Body}</div>
  1124. {/block:Text}
  1125.  
  1126. {block:Photo}
  1127. {block:IndexPage}
  1128. {block:ifCoverPermalinks}
  1129. <div class="info_hold">
  1130. <div class="infocover">
  1131. <a href="{Permalink}">{NoteCountWithLabel}</a>
  1132. <br><br>
  1133. <a href="{Permalink}" title="{TimeAgo}" style="font-size:13px;">Posted {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</a>
  1134.     <div class="reblogged">
  1135.         {block:RebloggedFrom}
  1136.         <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  1137.         <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
  1138.         {/block:RebloggedFrom}
  1139.         <a href="{ReblogURL}" title="Reblog this post">reblog</a>
  1140.     </div>
  1141. </div>
  1142. </div>
  1143. {/block:ifCoverPermalinks}
  1144. {block:ifnotCoverPermalinks}
  1145. <div id="info">
  1146. {block:Date}
  1147. <div id="date">
  1148. <a href="{Permalink}" title="{ShortMonth} {DayOfMonthWithZero}, {Year}"><i style="color:{color:permalink};" class="fa fa-clock-o"></i></a>
  1149. {block:NoteCount}
  1150. <a href="{Permalink}" title="{NoteCountWithLabel}"><i style="color:{color:permalink};" class="fa fa-book"></i></a>{/block:NoteCount}
  1151. {block:RebloggedFrom}
  1152. <a href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a>
  1153. <a href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a></a>
  1154. {/block:RebloggedFrom}
  1155. <a href="{ReblogURL}" title="Reblog this post"><i style="color:{color:permalink};" class="fa fa-retweet"></i></a>
  1156. </div>
  1157. {/block:Date}
  1158. </div> <!--Permalink post info-->
  1159. {/block:ifnotCoverPermalinks}
  1160. {/block:IndexPage}
  1161. <div class="photo">
  1162. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
  1163.    <center><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></center>
  1164. </a>{LinkCloseTag}
  1165. </div>
  1166. {/block:Photo}
  1167.  
  1168. {block:Photoset}
  1169. {block:IndexPage}
  1170. {block:ifCoverPermalinks}
  1171. <div class="info_hold"> <!--Permalink post info-->
  1172. <div class="infocover">
  1173. <a href="{Permalink}">{NoteCountWithLabel}</a>
  1174. <br><br>
  1175. <a href="{Permalink}" title="{TimeAgo}" style="font-size:13px;">Posted {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</a>
  1176.     <div class="reblogged">
  1177.         {block:RebloggedFrom}
  1178.         <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  1179.         <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
  1180.         {/block:RebloggedFrom}
  1181.         <a href="{ReblogURL}" title="Reblog this post">reblog</a>
  1182.     </div>
  1183. </div>
  1184. </div>
  1185. {/block:ifCoverPermalinks}
  1186. {block:ifnotCoverPermalinks}
  1187. <div id="info">
  1188. {block:Date}
  1189. <div id="date">
  1190. <a href="{Permalink}" title="{ShortMonth} {DayOfMonthWithZero}, {Year}"><i style="color:{color:permalink};" class="fa fa-clock-o"></i></a>
  1191. {block:NoteCount}
  1192. <a href="{Permalink}" title="{NoteCountWithLabel}"><i style="color:{color:permalink};" class="fa fa-book"></i></a>{/block:NoteCount}
  1193. {block:RebloggedFrom}
  1194. <a href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a>
  1195. <a href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a></a>
  1196. {/block:RebloggedFrom}
  1197. <a href="{ReblogURL}" title="Reblog this post"><i style="color:{color:permalink};" class="fa fa-retweet"></i></a>
  1198. </div>
  1199. {/block:Date}
  1200. </div> <!--Permalink post info-->
  1201. {/block:ifnotCoverPermalinks}
  1202. {/block:IndexPage}
  1203. <div class="photo">
  1204. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1205. </div>
  1206. {/block:Photoset}
  1207.  
  1208. {block:Quote}
  1209. {block:IndexPage}
  1210. <div id="info"> <!--Permalink post info-->
  1211. {block:Date}
  1212. <div id="date">
  1213. <a href="{Permalink}" title="{ShortMonth} {DayOfMonthWithZero}, {Year}"><i style="color:{color:permalink};" class="fa fa-clock-o"></i></a>
  1214. {block:NoteCount}
  1215. <a href="{Permalink}" title="{NoteCountWithLabel}"><i style="color:{color:permalink};" class="fa fa-book"></i></a>{/block:NoteCount}
  1216. {block:RebloggedFrom}
  1217. <a href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a>
  1218. <a href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a></a>
  1219. {/block:RebloggedFrom}
  1220. <a href="{ReblogURL}" title="Reblog this post"><i style="color:{color:permalink};" class="fa fa-retweet"></i></a>
  1221. </div>
  1222. {/block:Date}
  1223. </div> <!--Permalink post info-->
  1224. {/block:IndexPage}
  1225. <center>
  1226. <div class="quote-box">"</div>
  1227. </center>
  1228. <div class="qtline"></div>
  1229. <div class="quote">{Quote}</div>
  1230. {block:Source}<div class="qtsource"><br><center>- {Source} -</center></div>{/block:Source}
  1231. {/block:Quote}
  1232.  
  1233. {block:Link}
  1234. {block:IndexPage}
  1235. <div id="info"> <!--Permalink post info-->
  1236. {block:Date}
  1237. <div id="date">
  1238. <a href="{Permalink}" title="{ShortMonth} {DayOfMonthWithZero}, {Year}"><i style="color:{color:permalink};" class="fa fa-clock-o"></i></a>
  1239. {block:NoteCount}
  1240. <a href="{Permalink}" title="{NoteCountWithLabel}"><i style="color:{color:permalink};" class="fa fa-book"></i></a>{/block:NoteCount}
  1241. {block:RebloggedFrom}
  1242. <a href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a>
  1243. <a href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a></a>
  1244. {/block:RebloggedFrom}
  1245. <a href="{ReblogURL}" title="Reblog this post"><i style="color:{color:permalink};" class="fa fa-retweet"></i></a>
  1246. </div>
  1247. {/block:Date}
  1248. </div> <!--Permalink post info-->
  1249. {/block:IndexPage}
  1250. <div class="link"><a href="{URL}">{Name} »</a></div>
  1251. {block:Description}
  1252. <div class="text">{Description}</div>
  1253. {/block:Description}
  1254. {/block:Link}
  1255.  
  1256. {block:Audio}
  1257. {block:IndexPage}
  1258. <div id="info"> <!--Permalink post info-->
  1259. {block:Date}
  1260. <div id="date">
  1261. <a href="{Permalink}" title="{ShortMonth} {DayOfMonthWithZero}, {Year}"><i style="color:{color:permalink};" class="fa fa-clock-o"></i></a>
  1262. {block:NoteCount}
  1263. <a href="{Permalink}" title="{NoteCountWithLabel}"><i style="color:{color:permalink};" class="fa fa-book"></i></a>{/block:NoteCount}
  1264. {block:RebloggedFrom}
  1265. <a href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a>
  1266. <a href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a></a>
  1267. {/block:RebloggedFrom}
  1268. <a href="{ReblogURL}" title="Reblog this post"><i style="color:{color:permalink};" class="fa fa-retweet"></i></a>
  1269. </div>
  1270. {/block:Date}
  1271. </div> <!--Permalink post info-->
  1272. {/block:IndexPage}
  1273. <table style="width:100%">
  1274. <td>
  1275. <div class="audiowrapper">
  1276. <div class="playbox">
  1277. <div class="playbutton">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div></div>
  1278. {block:AlbumArt}
  1279. <div class="audioimgwrapper"><img src="{AlbumArtURL}">
  1280. {/block:AlbumArt}
  1281. </td>
  1282. </div>
  1283.  
  1284. <td>
  1285. <div class="trackdetails">
  1286. <div class="track">{block:TrackName}<b>Track:</b> {TrackName}{/block:TrackName}</div>
  1287. <div class="artist">{block:Artist}<b>Artist:</b> {Artist}{/block:Artist}</div>
  1288. <div class="album">{block:Album}<b>Album:</b> {Album}{/block:Album}</div>
  1289. <div class="play">{block:PlayCount}<b>Played:</b> {PlayCountWithLabel}{/block:PlayCount}</div>
  1290. </div>
  1291. {/block:AudioPlayer}
  1292. </div>
  1293. </td>
  1294. </table>
  1295. {/block:Audio}
  1296.  
  1297. {block:Video}
  1298. {block:IndexPage}
  1299. <div id="info"> <!--Permalink post info-->
  1300. {block:Date}
  1301. <div id="date">
  1302. <a href="{Permalink}" title="{ShortMonth} {DayOfMonthWithZero}, {Year}"><i style="color:{color:permalink};" class="fa fa-clock-o"></i></a>
  1303. {block:NoteCount}
  1304. <a href="{Permalink}" title="{NoteCountWithLabel}"><i style="color:{color:permalink};" class="fa fa-book"></i></a>{/block:NoteCount}
  1305. {block:RebloggedFrom}
  1306. <a href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a>
  1307. <a href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a></a>
  1308. {/block:RebloggedFrom}
  1309. <a href="{ReblogURL}" title="Reblog this post"><i style="color:{color:permalink};" class="fa fa-retweet"></i></a>
  1310. </div>
  1311. {/block:Date}
  1312. </div> <!--Permalink post info-->
  1313. {/block:IndexPage}
  1314. {block:Video}
  1315. <div class="video">{Video-500}</div>
  1316. {/block:Video}
  1317.  
  1318. {block:Chat}
  1319. {block:IndexPage}
  1320. <div id="info"> <!--Permalink post info-->
  1321. {block:Date}
  1322. <div id="date">
  1323. <a href="{Permalink}" title="{ShortMonth} {DayOfMonthWithZero}, {Year}"><i style="color:{color:permalink};" class="fa fa-clock-o"></i></a>
  1324. {block:NoteCount}
  1325. <a href="{Permalink}" title="{NoteCountWithLabel}"><i style="color:{color:permalink};" class="fa fa-book"></i></a>{/block:NoteCount}
  1326. {block:RebloggedFrom}
  1327. <a href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a>
  1328. <a href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a></a>
  1329. {/block:RebloggedFrom}
  1330. <a href="{ReblogURL}" title="Reblog this post"><i style="color:{color:permalink};" class="fa fa-retweet"></i></a>
  1331. </div>
  1332. {/block:Date}
  1333. </div> <!--Permalink post info-->
  1334. {/block:IndexPage}
  1335. {block:Title}<div class="title">{Title}</div>{/block:Title}
  1336. <div class="chat">{block:Lines}<div class="line">{block:Label}<span class="label"><b>{Label}</b></span>{/block:Label}
  1337. {Line}</div>{/block:Lines}</div>
  1338. {/block:Chat}
  1339.  
  1340. {block:Answer}
  1341. {block:IndexPage}
  1342. <div id="info"> <!--Permalink post info-->
  1343. {block:Date}
  1344. <div id="date">
  1345. <a href="{Permalink}" title="{ShortMonth} {DayOfMonthWithZero}, {Year}"><i style="color:{color:permalink};" class="fa fa-clock-o"></i></a>
  1346. {block:NoteCount}
  1347. <a href="{Permalink}" title="{NoteCountWithLabel}"><i style="color:{color:permalink};" class="fa fa-book"></i></a>{/block:NoteCount}
  1348. {block:RebloggedFrom}
  1349. <a href="{ReblogParentURL}" title="{ReblogParentName}"><img src="{ReblogParentPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a>
  1350. <a href="{ReblogRootURL}" title="{ReblogRootName}"><img src="{ReblogRootPortraitURL-16}" style="width:26px; height:16px; border-radius:16px;"></a></a>
  1351. {/block:RebloggedFrom}
  1352. <a href="{ReblogURL}" title="Reblog this post"><i style="color:{color:permalink};" class="fa fa-retweet"></i></a>
  1353. </div>
  1354. {/block:Date}
  1355. </div> <!--Permalink post info-->
  1356. {/block:IndexPage}
  1357. <div id="asker"><b>{Asker} asked:</b></div>
  1358. <img src="{AskerPortraitURL-64}"align="left" style="border:5px solid {color:asker portrait border}">
  1359. <div class="question">
  1360. {Question}&nbsp;</div>
  1361. <div class="answer">{Answer}</div>
  1362. {/block:Answer}
  1363.  
  1364. {block:IfShowCaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:IfShowCaptions}
  1365. {block:IfnotShowCaptions}
  1366. {block:PermalinkPage}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:PermalinkPage}{/block:IfnotShowCaptions}
  1367.  
  1368. </div>  <!--posts-->
  1369.  
  1370. {block:IndexPage} <!--Post Tags-->
  1371. {block:ifShowTags}
  1372.  {block:HasTags}
  1373. <div class="post_tags draggable">
  1374.   <div class="post_tags_inner">{block:Tags}
  1375.  <a href="{TagURL}">#{Tag}</a>
  1376.  {/block:Tags}
  1377.   </div>
  1378. </div>
  1379. {/block:HasTags}
  1380. {/block:ifShowTags}
  1381. {/block:IndexPage} <!--Post Tags-->
  1382.  
  1383. {block:PermalinkPage} <!--Permalink Page-->
  1384. {block:Date}
  1385. <div id="perma">
  1386. Posted {ShortMonth} {DayOfMonthWithZero}, {Year} @ {12Hour} {AmPm}
  1387. {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}{block:RebloggedFrom}
  1388. <br>
  1389. <a href="{ReblogParentURL}">via: {ReblogParentName}</a> +
  1390. <a href="{ReblogRootURL}">source: {ReblogRootName}</a>
  1391. {/block:RebloggedFrom}
  1392. <br>
  1393. {block:HasTags}{block:Tags}<a href="{TagURL}" title="Tagged as">#{Tag}</a> {/block:Tags}{/block:HasTags}
  1394. </div>
  1395.         {block:PostNotes}
  1396.                 <div id="notecontainer">{PostNotes}</div>
  1397.         {/block:PostNotes}
  1398. {/block:Date}
  1399. {/block:PermalinkPage} <!--Permalink Page-->
  1400.  
  1401. {/block:Posts}
  1402.  
  1403. </div> <!--content-->
  1404.  
  1405. <!--Pixel Union photosets script-->
  1406. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1407. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1408. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1409. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  1410.  
  1411. <script>
  1412. $(document).ready(function(){
  1413.    $('.photo-slideshow').pxuPhotoset({
  1414.        lightbox: true,
  1415.        rounded: false,
  1416.        gutter: '7px',
  1417.        borderRadius: '0px',
  1418.        photoset: '.photo-slideshow',
  1419.        photoWrap: '.photo-data',
  1420.        photo: '.pxu-photo'
  1421.    });
  1422. });
  1423. </script>
  1424. <!--Pixel Union photosets script-->
  1425.  
  1426.  
  1427. <!--Draggable Tags Script-->
  1428. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  1429. <script>
  1430. $(document).ready(function(){
  1431. $(".post_tags_inner").draggable({
  1432.   axis : "x",
  1433.   scroll: false,
  1434.   stop: function() {
  1435.     var __left = $(this).css("left").replace(/[^-\d\.]/g, '');
  1436.     if(__left > 0){
  1437.     $(this).animate({left: 0}, 400, 'easeOutExpo');
  1438.     }
  1439.     var __width = $(this).outerWidth();
  1440.     var __parentWidth = $(".post_tags.draggable").outerWidth();
  1441.     if(__width > __parentWidth) {
  1442.     if(__left < __parentWidth-__width){
  1443.     $(this).animate({left: __parentWidth-__width}, 400, 'easeOutExpo');
  1444.   }
  1445.   } else {
  1446.   $(this).animate({left: 0}, 400, 'easeOutExpo');
  1447.   }
  1448. }
  1449. });
  1450. });
  1451. </script>
  1452. <!--Draggable Tags Script-->
  1453.  
  1454. </body>
  1455. </html> <!--end-->
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!