API tools faq
paste
Advertisement
celestyl

june theme

celestyl
Jun 1st, 2015 (edited)
12,068
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.64 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5. //// JUNE THEME BY EMI //// originally created 31/07/15
  6. • DO NOT repost or redistribute
  7. • DO NOT use as a base code
  8. • DO NOT remove or alter credit
  9.  
  10. *** ~~ REVAMP December 19, 2022
  11. + PXU photoset gutter resizing script
  12. + post and sidebar custom sizing, position and text alignment/size
  13. + google fonts added
  14. + optional sidebar title
  15. + windows 98 scrollbar option
  16. + overall better styling and small fixes
  17.  
  18. PXU PHOTOSET SCRIPT by Pixel Union / tutorial by ShyThemes
  19. -->
  20.  
  21. <head>
  22.  
  23. <title>{Title}</title>
  24. <link rel="shortcut icon" href="{Favicon}"/>
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  27.  
  28. <meta name="image:BgImg" content=""/>
  29. <meta name="image:SidebarImg" content=""/>
  30.  
  31. <meta name="color:Bg" content="#ffffff">
  32. <meta name="color:AnimatedBg1" content="">
  33. <meta name="color:AnimatedBg2" content="">
  34. <meta name="color:AnimatedBg3" content="">
  35. <meta name="color:Text" content="#4f4f4f">
  36. <meta name="color:Title" content="">
  37. <meta name="color:Link" content="#767676">
  38. <meta name="color:LinkHover" content="#000000">
  39. <meta name="color:Blockquote" content="">
  40. <meta name="color:Scrollbar" content="#ffffff">
  41. <meta name="color:ScrollbarTrack" content="#ffffff">
  42. <meta name="color:SelectionBg" content="">
  43. <meta name="color:SelectionText" content="">
  44. <meta name="color:TooltipBg" content="#000000">
  45. <meta name="color:TooltipText" content="#ffffff">
  46.  
  47. <meta name="if:PlainScrollbar" content="">
  48. <meta name="if:Windows98Scrollbar" content="">
  49. <meta name="if:AnimatedBg" content="">
  50. <meta name="if:Rounded" content="">
  51. <meta name="if:UnderlinedLinks" content="1">
  52. <meta name="if:BoldNavlinks" content="">
  53. <meta name="if:BgCover" content="">
  54. <meta name="if:HideCaptions" content="">
  55. <meta name="if:HideTags" content="">
  56. <meta name="if:RainbowLinkHover" content="">
  57. <meta name="if:WhiteAudioPlayer" content="">
  58. <meta name="if:BlackAudioPlayer" content="">
  59. <meta name="if:Link1" content="">
  60. <meta name="if:Link2" content="">
  61. <meta name="if:Link3" content="">
  62. <meta name="if:Link4" content="">
  63.  
  64. <meta name="text:PostSize" content="540">
  65. <meta name="text:SidebarTitle" content="title here">
  66. <meta name="text:SidebarWidth" content="200">
  67. <meta name="text:SidebarTop" content="100">
  68. <meta name="text:SidebarLeft" content="-330">
  69. <meta name="text:SidebarImgHover" content="">
  70. <meta name="text:TitleFontSize" content="14">
  71. <meta name="text:FontSize" content="11">
  72. <meta name="text:Link1Name" content="">
  73. <meta name="text:Link1URL" content="/">
  74. <meta name="text:Link2Name" content="">
  75. <meta name="text:Link2URL" content="/">
  76. <meta name="text:Link3Name" content="">
  77. <meta name="text:Link3URL" content="/">
  78. <meta name="text:Link4Name" content="">
  79. <meta name="text:Link4URL" content="/">
  80.  
  81. <meta name="select:FooterAlign" content="center" title="Center">
  82. <meta name="select:FooterAlign" content="left" title="Left">
  83. <meta name="select:FooterAlign" content="right" title="Right">
  84. <meta name="select:TitleAlign" content="center" title="Center">
  85. <meta name="select:TitleAlign" content="left" title="Left">
  86. <meta name="select:TitleAlign" content="right" title="Right">
  87. <meta name="select:SidebarTextAlign" content="center" title="Center">
  88. <meta name="select:SidebarTextAlign" content="left" title="Left">
  89. <meta name="select:SidebarTextAlign" content="right" title="Right">
  90.  
  91. <meta name="select:TitleFont" content="Shrikhand" title="Shrikhand">
  92. <meta name="select:TitleFont" content="Lilita One" title="Lilita One">
  93. <meta name="select:TitleFont" content="Fugaz One" title="Fugaz One">
  94. <meta name="select:TitleFont" content="Fredoka One" title="Fredoka One">
  95. <meta name="select:TitleFont" content="Black Ops One" title="Black Ops One">
  96. <meta name="select:TitleFont" content="Abril Fatface" title="Abril Fatface">
  97. <meta name="select:TitleFont" content="Gravitas One" title="Gravitas One">
  98. <meta name="select:TitleFont" content="Bebas Neue" title="Bebas Neue">
  99. <meta name="select:TitleFont" content="Karla" title="Karla">
  100. <meta name="select:TitleFont" content="Roboto" title="Roboto">
  101. <meta name="select:TitleFont" content="Fira sans" title="Fira Sans">
  102. <meta name="select:TitleFont" content="Martel" title="Martel">
  103. <meta name="select:TitleFont" content="Averia Serif Libre" title="Averia Serif Libre">
  104. <meta name="select:TitleFont" content="Solway" title="Solway">
  105. <meta name="select:TitleFont" content="Sniglet" title="Sniglet">
  106. <meta name="select:TitleFont" content="Bellota" title="Bellota">
  107. <meta name="select:TitleFont" content="ms gothic" title="Ms Gothic">
  108. <meta name="select:TitleFont" content="ms pgothic" title="Ms PGothic">
  109. <meta name="select:TitleFont" content="arial" title="Arial">
  110. <meta name="select:TitleFont" content="tahoma" title="Tahoma">
  111. <meta name="select:TitleFont" content="verdana" title="Verdana">
  112. <meta name="select:TitleFont" content="consolas" title="Consolas">
  113. <meta name="select:TitleFont" content="courier" title="Courier">
  114.  
  115. <meta name="select:Font" content="Karla" title="Karla">
  116. <meta name="select:Font" content="Open Sans" title="Open Sans">
  117. <meta name="select:Font" content="Roboto" title="Roboto">
  118. <meta name="select:Font" content="Fira sans" title="Fira Sans">
  119. <meta name="select:Font" content="Martel" title="Martel">
  120. <meta name="select:Font" content="Averia Serif Libre" title="Averia Serif Libre">
  121. <meta name="select:Font" content="Solway" title="Solway">
  122. <meta name="select:Font" content="Sniglet" title="Sniglet">
  123. <meta name="select:Font" content="Bellota" title="Bellota">
  124. <meta name="select:Font" content="ms gothic" title="Ms Gothic">
  125. <meta name="select:Font" content="ms pgothic" title="Ms PGothic">
  126. <meta name="select:Font" content="arial" title="Arial">
  127. <meta name="select:Font" content="tahoma" title="Tahoma">
  128. <meta name="select:Font" content="verdana" title="Verdana">
  129. <meta name="select:Font" content="consolas" title="Consolas">
  130. <meta name="select:Font" content="courier" title="Courier">
  131.  
  132.  
  133. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  134. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  135. <script>
  136. (function($){
  137. $(document).ready(function(){
  138. $("a[title]").style_my_tooltips({
  139. tip_follows_cursor:true,
  140. tip_delay_time:90,
  141. tip_fade_speed:600,
  142. attribute:"title"
  143. });
  144. });
  145. })(jQuery);
  146. </script>
  147.  
  148. {block:ifRainbowLinkHover}
  149. <script type='text/javascript'>
  150. //<![CDATA[
  151. var rate = 30;
  152. if (document.getElementById)
  153. window.onerror=new Function("return true")
  154.  
  155. var objActive; // The object which event occured in
  156. var act = 0; // Flag during the action
  157. var elmH = 0; // Hue
  158. var elmS = 128; // Saturation
  159. var elmV = 255; // Value
  160. var clrOrg; // A color before the change
  161. var TimerID; // Timer ID
  162. if (document.all) {
  163. document.onmouseover = doRainbowAnchor;
  164. document.onmouseout = stopRainbowAnchor;
  165. }
  166. else if (document.getElementById) {
  167. document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
  168. document.onmouseover = Mozilla_doRainbowAnchor;
  169. document.onmouseout = Mozilla_stopRainbowAnchor;
  170. }
  171. function doRainbow(obj)
  172. {
  173. if (act == 0) {
  174. act = 1;
  175. if (obj)
  176. objActive = obj;
  177. else
  178. objActive = event.srcElement;
  179. clrOrg = objActive.style.color;
  180. TimerID = setInterval("ChangeColor()",100);
  181. }
  182. }
  183. function stopRainbow()
  184. {
  185. if (act) {
  186. objActive.style.color = clrOrg;
  187. clearInterval(TimerID);
  188. act = 0;
  189. }
  190. }
  191. function doRainbowAnchor()
  192. {
  193. if (act == 0) {
  194. var obj = event.srcElement;
  195. while (obj.tagName != 'A' && obj.tagName != 'BODY') {
  196. obj = obj.parentElement;
  197. if (obj.tagName == 'A' || obj.tagName == 'BODY')
  198. break;
  199. }
  200. if (obj.tagName == 'A' && obj.href != '') {
  201. objActive = obj;
  202. act = 1;
  203. clrOrg = objActive.style.color;
  204. TimerID = setInterval("ChangeColor()",100);
  205. }
  206. }
  207. }
  208. function stopRainbowAnchor()
  209. {
  210. if (act) {
  211. if (objActive.tagName == 'A') {
  212. objActive.style.color = clrOrg;
  213. clearInterval(TimerID);
  214. act = 0;
  215. }
  216. }
  217. }
  218. function Mozilla_doRainbowAnchor(e)
  219. {
  220. if (act == 0) {
  221. obj = e.target;
  222. while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
  223. obj = obj.parentNode;
  224. if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
  225. break;
  226. }
  227. if (obj.nodeName == 'A' && obj.href != '') {
  228. objActive = obj;
  229. act = 1;
  230. clrOrg = obj.style.color;
  231. TimerID = setInterval("ChangeColor()",100);
  232. }
  233. }
  234. }
  235. function Mozilla_stopRainbowAnchor(e)
  236. {
  237. if (act) {
  238. if (objActive.nodeName == 'A') {
  239. objActive.style.color = clrOrg;
  240. clearInterval(TimerID);
  241. act = 0;
  242. }
  243. }
  244. }
  245. function ChangeColor()
  246. {
  247. objActive.style.color = makeColor();
  248. }
  249. function makeColor()
  250. {
  251. // Don't you think Color Gamut to look like Rainbow?
  252. // HSVtoRGB
  253. if (elmS == 0) {
  254. elmR = elmV; elmG = elmV; elmB = elmV;
  255. }
  256. else {
  257. t1 = elmV;
  258. t2 = (255 - elmS) * elmV / 255;
  259. t3 = elmH % 60;
  260. t3 = (t1 - t2) * t3 / 60;
  261. if (elmH < 60) {
  262. elmR = t1; elmB = t2; elmG = t2 + t3;
  263. }
  264. else if (elmH < 120) {
  265. elmG = t1; elmB = t2; elmR = t1 - t3;
  266. }
  267. else if (elmH < 180) {
  268. elmG = t1; elmR = t2; elmB = t2 + t3;
  269. }
  270. else if (elmH < 240) {
  271. elmB = t1; elmR = t2; elmG = t1 - t3;
  272. }
  273. else if (elmH < 300) {
  274. elmB = t1; elmG = t2; elmR = t2 + t3;
  275. }
  276. else if (elmH < 360) {
  277. elmR = t1; elmG = t2; elmB = t1 - t3;
  278. }
  279. else {
  280. elmR = 0; elmG = 0; elmB = 0;
  281. }
  282. }
  283. elmR = Math.floor(elmR).toString(16);
  284. elmG = Math.floor(elmG).toString(16);
  285. elmB = Math.floor(elmB).toString(16);
  286. if (elmR.length == 1) elmR = "0" + elmR;
  287. if (elmG.length == 1) elmG = "0" + elmG;
  288. if (elmB.length == 1) elmB = "0" + elmB
  289. elmH = elmH + rate;
  290. if (elmH >= 360)
  291. elmH = 0;
  292. return '#' + elmR + elmG + elmB;
  293. }
  294. //]]>
  295. </script>
  296. {/block:ifRainbowLinkHover}
  297.  
  298. <!-- GOOGLE FONTS -->
  299. <link rel="preconnect" href="https://fonts.googleapis.com">
  300. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  301. <link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
  302. <style>
  303. @import url('https://fonts.googleapis.com/css2?family=Karla&display=swap');
  304. </style>
  305. <link rel="preconnect" href="https://fonts.googleapis.com">
  306. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  307. <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  308. <style>
  309. @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
  310. </style>
  311. <link rel="preconnect" href="https://fonts.googleapis.com">
  312. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  313. <link href="https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap" rel="stylesheet">
  314. <style>
  315. @import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
  316. </style>
  317. <link rel="preconnect" href="https://fonts.googleapis.com">
  318. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  319. <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
  320. <style>
  321. @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
  322. </style>
  323. <link rel="preconnect" href="https://fonts.googleapis.com">
  324. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  325. <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
  326. <style>
  327. @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
  328. </style>
  329. <link rel="preconnect" href="https://fonts.googleapis.com">
  330. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  331. <link href="https://fonts.googleapis.com/css2?family=Lilita+One&display=swap" rel="stylesheet">
  332. <style>
  333. @import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
  334. </style>
  335. <link rel="preconnect" href="https://fonts.googleapis.com">
  336. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  337. <link href="https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap" rel="stylesheet">
  338. <style>
  339. @import url('https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap');
  340. </style>
  341. <link rel="preconnect" href="https://fonts.googleapis.com">
  342. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  343. <link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap" rel="stylesheet">
  344. <style>
  345. @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
  346. </style>
  347. <link rel="preconnect" href="https://fonts.googleapis.com">
  348. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  349. <link href="https://fonts.googleapis.com/css2?family=Martel&display=swap" rel="stylesheet">
  350. <style>
  351. @import url('https://fonts.googleapis.com/css2?family=Martel&display=swap');
  352. </style>
  353. <link rel="preconnect" href="https://fonts.googleapis.com">
  354. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  355. <link href="https://fonts.googleapis.com/css2?family=Solway&display=swap" rel="stylesheet">
  356. <style>
  357. @import url('https://fonts.googleapis.com/css2?family=Solway&display=swap');
  358. </style>
  359. <link rel="preconnect" href="https://fonts.googleapis.com">
  360. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  361. <link href="https://fonts.googleapis.com/css2?family=Sniglet&display=swap" rel="stylesheet">
  362. <style>
  363. @import url('https://fonts.googleapis.com/css2?family=Sniglet&display=swap');
  364. </style>
  365. <link rel="preconnect" href="https://fonts.googleapis.com">
  366. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  367. <link href="https://fonts.googleapis.com/css2?family=Gravitas+One&display=swap" rel="stylesheet">
  368. <style>
  369. @import url('https://fonts.googleapis.com/css2?family=Gravitas+One&display=swap');
  370. </style>
  371. <link rel="preconnect" href="https://fonts.googleapis.com">
  372. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  373. <link href="https://fonts.googleapis.com/css2?family=Bellota&display=swap" rel="stylesheet">
  374. <style>
  375. @import url('https://fonts.googleapis.com/css2?family=Bellota&display=swap');
  376. </style>
  377.  
  378. <link rel="preconnect" href="https://fonts.googleapis.com">
  379. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  380. <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
  381. <style>
  382. @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
  383. </style>
  384. <link rel="preconnect" href="https://fonts.googleapis.com">
  385. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  386. <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  387. <style>
  388. @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
  389. </style>
  390. <link rel="preconnect" href="https://fonts.googleapis.com">
  391. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  392. <link href="https://fonts.googleapis.com/css2?family=Shrikhand&display=swap" rel="stylesheet">
  393. <style>
  394. @import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
  395. </style>
  396. <link rel="preconnect" href="https://fonts.googleapis.com">
  397. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  398. <link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre&display=swap" rel="stylesheet">
  399. <style>
  400. @import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre&display=swap');
  401. </style>
  402.  
  403. <!-- PXU PHOTOSET -->
  404. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  405. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  406. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  407.  
  408.  
  409. <style type="text/css">
  410.  
  411. tooltip {
  412. display: inline;
  413. position: relative;
  414. }
  415. #s-m-t-tooltip {
  416. max-width: 300px;
  417. margin: 22px 7px -2px 22px;
  418. padding: 5px;
  419. background-color: {color:TooltipBg};
  420. color: {color:TooltipText};
  421. text-align: center;
  422. text-transform: uppercase;
  423. letter-spacing: 2px;
  424. z-index: 999999999999999999999999999999999999;
  425. {block:ifRounded}
  426. border-radius: 10px;
  427. {/block:ifRounded}
  428. }
  429.  
  430. {block:ifNotPlainScrollbar}
  431. ::-webkit-scrollbar {
  432. width: 8px;
  433. height: 8px;
  434. }
  435. ::-webkit-scrollbar-thumb {
  436. background-color: {color:Scrollbar};
  437. {block:ifNotWindows98Scrollbar}
  438. {block:ifRounded}
  439. border-radius: 10px;
  440. {/block:ifRounded}
  441. {/block:ifNotWindows98Scrollbar}
  442. }
  443. ::-webkit-scrollbar-track {
  444. background-color: {color:ScrollbarTrack};
  445. }
  446. {/block:ifNotPlainScrollbar}
  447. {block:ifWindows98Scrollbar}
  448. ::-webkit-scrollbar {
  449. width: 16px;
  450. height: 10px;
  451. }
  452. ::-webkit-scrollbar-thumb {
  453. background-color: {color:Scrollbar};
  454. background-image: url(https://static.tumblr.com/tookzbf/RxQnrc5jr/aadds.png);
  455. border-top: 1px solid #bdbdbd;
  456. border-left: 1px solid #bdbdbd;
  457. border-right: 1px solid black;
  458. border-bottom: 1px solid black;
  459. }
  460. ::-webkit-scrollbar-track {
  461. background-color: {color:ScrollbarTrack};
  462. background-image: url(https://static.tumblr.com/tookzbf/Qhenrc5iw/scrollbartrack.png);
  463. }
  464. ::-webkit-scrollbar-button:vertical:increment {
  465. background-image: url(https://static.tumblr.com/tookzbf/dyLnrc5kz/aaaaaaaaaaaaaaaaaaaaaa.png);
  466. width: 14px;
  467. height: 16px;
  468. border-top: 1px solid #bdbdbd;
  469. border-left: 1px solid #bdbdbd;
  470. border-right: 1px solid black;
  471. border-bottom: 1px solid black;
  472. }
  473. ::-webkit-scrollbar-button:vertical:decrement {
  474. background-image: url(https://static.tumblr.com/tookzbf/AjHnrc5k9/aaaaaaaa.png);
  475. border-top: 1px solid #bdbdbd;
  476. border-left: 1px solid #bdbdbd;
  477. border-right: 1px solid black;
  478. border-bottom: 1px solid black;
  479. width: 14px;
  480. height: 16px;
  481. }
  482. {/block:ifWindows98Scrollbar}
  483.  
  484.  
  485. ::selection {
  486. background-color: {color:SelectionBg};
  487. color: {color:SelectionText};
  488. }
  489. ::-moz-selection{
  490. background-color: {color:SelectionBg};
  491. color: {color:SelectionText};
  492. }
  493.  
  494. a {
  495. {block:ifNotUnderlinedLinks}
  496. text-decoration: none;
  497. {/block:ifNotUnderlinedLinks}
  498. color: {color:Link};
  499. -webkit-transition: 0.3s ease-in-out;
  500. -moz-transition: 0.3s ease-in-out;
  501. -o-transition: 0.3s ease-in-out;
  502. transition: 0.3s ease-in-out;
  503. }
  504. a:hover {
  505. color: {color:LinkHover};
  506. cursor: help;
  507. -webkit-transition: 0.3s ease-in-out;
  508. -moz-transition: 0.3s ease-in-out;
  509. -o-transition: 0.3s ease-in-out;
  510. transition: 0.3s ease-in-out;
  511. }
  512.  
  513. blockquote {
  514. margin: 0px;
  515. margin-top: 10px;
  516. padding-left: 10px;
  517. border-left: 1px solid {color:Blockquote};
  518. }
  519.  
  520. body {
  521. background-image: url({image:BgImg});
  522. background-attachment: fixed;
  523. background-size: repeat;
  524. {block:ifBgCover}
  525. background-size: cover;
  526. {/block:ifBgCover}
  527. background-color: {color:Bg};
  528. {block:ifAnimatedBg}
  529. background: linear-gradient(3deg, {color:AnimatedBg3}, {color:AnimatedBg2}, {color:AnimatedBg1});
  530. background-size: 800% 800%;
  531. -webkit-animation: AnimationName 30s ease infinite;
  532. -moz-animation: AnimationName 30s ease infinite;
  533. animation: AnimationName 30s ease infinite;
  534. {/block:ifAnimatedBg}
  535. color: {color:Text};
  536. font-family: {select:Font};
  537. font-size: {text:FontSize}px;
  538. }
  539. {block:ifAnimatedBg}
  540. @-webkit-keyframes AnimationName {
  541. 0%{background-position:50% 0%}
  542. 50%{background-position:50% 100%}
  543. 100%{background-position:50% 0%}
  544. }
  545. @-moz-keyframes AnimationName {
  546. 0%{background-position:50% 0%}
  547. 50%{background-position:50% 100%}
  548. 100%{background-position:50% 0%}
  549. }
  550. @keyframes AnimationName {
  551. 0%{background-position:50% 0%}
  552. 50%{background-position:50% 100%}
  553. 100%{background-position:50% 0%}
  554. }
  555. {/block:ifAnimatedBg}
  556.  
  557. p {
  558. margin: 0 0 10px 0;
  559. }
  560. pre {
  561. font-family: {select:Font};
  562. }
  563. img {
  564. width: 100%;
  565. max-width: 100%;
  566. {block:ifRounded}
  567. border-radius: 10px;
  568. {/block:ifRounded}
  569. border: none;
  570. outline: none;
  571. }
  572.  
  573. .stuff {
  574. margin-bottom: 10px;
  575. }
  576. .con {
  577. width: 350px;
  578. margin: 50px auto;
  579. margin-top: 75px;
  580. }
  581. .posts {
  582. width: {text:PostSize}px;
  583. max-width: {text:PostSize}px;
  584. margin-top: 20px;
  585. margin-bottom: 70px;
  586. padding: 20px;
  587. }
  588. .t {
  589. margin-bottom: 10px;
  590. font-size: {text:TitleFontSize}px;
  591. font-family: {select:TitleFont};
  592. font-weight: bold;
  593. text-align: center;
  594. color: {color:Title};
  595. }
  596. .cap {
  597. margin-top: 10px;
  598. }
  599. .cap img {
  600. height: 100%;
  601. }
  602. .footer {
  603. margin: 0;
  604. margin-top: -5px;
  605. margin-bottom: -10px;
  606. padding: 5px;
  607. text-align: {select:FooterAlign};
  608. font-size: {text:FontSize}px;
  609. }
  610. .tags {
  611. letter-spacing: none;
  612. word-spacing: 1px;
  613. }
  614.  
  615.  
  616. #sidebar {
  617. position: fixed;
  618. width: {text:SidebarWidth}px;
  619. padding: 10px;
  620. margin-top: {text:SidebarTop}px;
  621. margin-left: {text:SidebarLeft}px;
  622. }
  623. #sidebart {
  624. font-family: {select:TitleFont};
  625. font-size: {text:TitleFontSize}px;
  626. color: {color:Title};
  627. font-weight: bold;
  628. text-align: {select:TitleAlign};
  629. }
  630. #desc {
  631. margin-top: 10px;
  632. text-align: {select:SidebarTextAlign};
  633. }
  634. #navcon {
  635. margin-top: -5px;
  636. }
  637. #navtext {
  638. color: {color:Link};
  639. margin-top: 15px;
  640. text-align: {select:SidebarTextAlign};
  641. line-height: 15px;
  642. {block:ifBoldNavlinks}
  643. font-weight: bold;
  644. {/block:ifBoldNavlinks}
  645. }
  646. #pagination {
  647. text-align: {select:SidebarTextAlign};
  648. margin-top: 8px;
  649. }
  650.  
  651. .quote {
  652. font-size: 18px;
  653. text-align: center;
  654. margin-bottom: 10px;
  655. margin-top: -10px;
  656. }
  657. .source {
  658. margin-bottom: 10px;
  659. }
  660. .link {
  661. font-size: 18px;
  662. text-align: center;
  663. margin-bottom: 10px;
  664. margin-top: -10px;
  665. }
  666. .chat {
  667. margin-top: -10px;
  668. line-height: 20px;
  669. }
  670. .ask {
  671. margin-top: -10px;
  672. margin-bottom: 10px;
  673. }
  674. .acon {
  675. height: 40px;
  676. {block:ifRounded}
  677. border-radius: 10px;
  678. {/block:ifRounded}
  679. background-color: #e4e4e4;
  680. {block:ifWhiteAudioPlayer}
  681. background-color: white;
  682. {/block:ifWhiteAudioPlayer}
  683. {block:ifBlackAudioPlayer}
  684. background-color: black;
  685. {/block:ifBlackAudioPlayer}
  686. }
  687. .ap {
  688. position: absolute;
  689. background-color: #e4e4e4;
  690. {block:ifWhiteAudioPlayer}
  691. background-color: white;
  692. {/block:ifWhiteAudioPlayer}
  693. {block:ifBlackAudioPlayer}
  694. background-color: black;
  695. {/block:ifBlackAudioPlayer}
  696. overflow: hidden;
  697. width: 30px;
  698. height: 30px;
  699. margin-top: 7px;
  700. margin-left: 10px;
  701. }
  702. .ai {
  703. position: absolute;
  704. background-color: #e4e4e4;
  705. {block:ifWhiteAudioPlayer}
  706. background-color: white;
  707. {/block:ifWhiteAudioPlayer}
  708. {block:ifBlackAudioPlayer}
  709. background-color: black;
  710. {/block:ifBlackAudioPlayer}
  711. color: {color:Text};
  712. {block:ifBlackAudioPlayer}
  713. color: white;
  714. {/block:ifBlackAudioPlayer}
  715. font-size: {text:FontSize}px;
  716. margin-top: -32px;
  717. margin-left: 45px;
  718. }
  719. .vid {
  720. max-width: {text:PostSize}px;
  721. max-height: {text:PostSize}px;
  722. }
  723. .vidcon {
  724. position: center;
  725. overflow: hidden;
  726. }
  727. .vidcon iframe, .vidcon object, .vidcon embed {
  728. position: center;
  729. max-width: {text:PostSize}px;
  730. max-height: {text:PostSize}px;
  731. {block:ifRounded}
  732. border-radius: 10px;
  733. {/block:ifRounded}
  734. }
  735.  
  736. ol.notes {
  737. padding: 0;
  738. list-style-type: none;
  739. max-height: 280px;
  740. overflow: auto;
  741. }
  742. ol.notes li.note {
  743. padding: 5px;
  744. padding: right: 5px;
  745. }
  746. ol.notes li.note img.avatar {
  747. width: 16px;
  748. height: 16px;
  749. vertical-align: -4px;
  750. margin-right: 10px;
  751. }
  752.  
  753. #c {
  754. position: fixed;
  755. bottom: 12px;
  756. right: 12px;
  757. z-index: 99;
  758. font-size: 12px;
  759. }
  760.  
  761. </style>
  762. </head>
  763.  
  764. <body>
  765.  
  766. <div class="con">
  767.  
  768. <div id="sidebar">
  769. <center>
  770. <div id="sidebart">
  771. {text:SidebarTitle}
  772. <a href="/" title="{text:SidebarImgHover}"><img src="{image:SidebarImg}"<div style="margin-top: 10px"></a>
  773. </div>
  774. </center>
  775.  
  776. <div id="desc">
  777. {block:Description}
  778. <p>{Description}
  779. </p>
  780. {/block:Description}
  781. </div>
  782.  
  783. <div id="navcon">
  784. <div id="navtext">
  785. {block:ifLink1}
  786. <a href="{text:Link1URL}">{text:Link1Name}</a><br>
  787. {/block:ifLink1}
  788. {block:ifLink2}
  789. <a href="{text:Link2URL}">{text:Link2Name}</a><br>
  790. {/block:ifLink2}
  791. {block:ifLink3}
  792. <a href="{text:Link3URL}">{text:Link3Name}</a><br>
  793. {/block:ifLink3}
  794. {block:ifLink4}
  795. <a href="{text:Link4URL}">{text:Link4Name}</a>
  796. {/block:ifLink4}
  797. </div>
  798. </div>
  799.  
  800. {block:Pagination}
  801. <div id="pagination">
  802. {block:PreviousPage}
  803. <a href="{PreviousPage}">←</a>
  804. {/block:PreviousPage}
  805. {block:NextPage}
  806. <a href="{NextPage}">→</a>
  807. {/block:NextPage}
  808. </div>
  809. {/block:Pagination}
  810.  
  811. </div>
  812.  
  813. <div class = "autopagerize_page_element" >
  814.  
  815. {block:Posts}
  816.  
  817. <!-- {block:NoRebloggedFrom}
  818. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  819. {/block:NoRebloggedFrom} -->
  820. {block:ContentSource}<!-- {SourceURL}
  821. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  822. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  823. {/block:ContentSource}
  824.  
  825. <div class="posts">
  826.  
  827. {block:Text}
  828. {block:Title}
  829. <div class="t">
  830. {Title}
  831. </div>
  832. {/block:Title}
  833. {Body}
  834. {/block:Text}
  835.  
  836. <div class="stuff">
  837. {block:Photo}
  838. <center>
  839. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
  840. </center>
  841. {block:ifNotHideCaptions}
  842. {block:Caption}
  843. <div class="cap">
  844. {Caption}
  845. </div>
  846. {/block:Caption}
  847. {/block:ifNotHideCaptions}
  848. {/block:Photo}
  849. </div>
  850.  
  851. <div class="stuff">
  852. {block:Photoset}
  853. <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>
  854. {block:ifNotHideCaptions}
  855. {block:Caption}
  856. <div class="cap">
  857. {Caption}
  858. </div>
  859. {/block:Caption}
  860. {/block:ifNotHideCaptions}
  861. {/block:Photoset}
  862. </div>
  863.  
  864. {block:Quote}
  865. <div class="quote">
  866. "{Quote}"
  867. </div>
  868. <div align="left">
  869. {block:Source}
  870. <div class="source">
  871. -{Source}
  872. </div>
  873. {/block:Source}
  874. </div>
  875. {/block:Quote}
  876.  
  877. <div class="stuff">
  878. {block:Video}
  879. <div class="vid">
  880. <div class="vidcon">
  881. {Video-500}
  882. </div>
  883. </div>
  884. {block:ifNotHideCaptions}
  885. {block:Caption}
  886. <div class="cap">
  887. {Caption}
  888. </div>
  889. {/block:Caption}
  890. {/block:ifNotHideCaptions}
  891. {/block:Video}
  892. </div>
  893.  
  894. {block:Link}
  895. <div class="link">
  896. <a href="{URL}" class="link" {Target}>{Name}</a></div>
  897. {block:Description}
  898. <div class="cap">
  899. {Description}
  900. </div>
  901. {/block:Description}
  902. {/block:Link}
  903.  
  904. {block:Chat}
  905. {block:Title}
  906. <div class="t">
  907. {Title}
  908. </div>
  909. {/block:Title}
  910. <div class="chat">
  911. {block:Lines}
  912. <div class="{Alt} user_{UserNumber}">
  913. {block:Label}
  914. <b>{Label}</b>
  915. {/block:Label}
  916. {Line}
  917. </div>
  918. {/block:Lines}
  919. </div>
  920. {/block:Chat}
  921.  
  922. <div class="stuff">
  923. {block:Audio}
  924. <div class="acon">
  925. <div class="ap">
  926. {block:ifNotWhiteAudioPlayer}
  927. {block:ifNotBlackAudioPlayer}
  928. {AudioPlayerGrey}
  929. {/block:ifNotBlackAudioPlayer}
  930. {/block:ifNotWhiteAudioPlayer}
  931. {block:ifWhiteAudioPlayer}
  932. {AudioPlayerWhite}
  933. {/block:ifWhiteAudioPlayer}
  934. {block:ifBlackAudioPlayer}
  935. {AudioPlayerBlack}
  936. {/block:ifBlackAudioPlayer}
  937. </div>
  938. </div>
  939. <div class="ai">
  940. {block:TrackName}
  941. {TrackName}
  942. {/block:TrackName}
  943. <br>
  944. {block:Artist}
  945. {Artist}
  946. {/block:Artist}
  947. </div>
  948. {block:Caption}
  949. <div class="cap">
  950. {Caption}
  951. </div>
  952. {/block:Caption}
  953. {/block:Audio}
  954. </div>
  955.  
  956. {block:Answer}
  957. <div class="ask">
  958. {Asker} said: <b>{Question}</b>
  959. </div>
  960. <div class="cap">
  961. {Answer}
  962. </div>
  963. {/block:Answer}
  964.  
  965. {block:Date}
  966. <div class="footer">
  967. {block:IndexPage}
  968. <a href="{Permalink}" title="{ShortMonth} {DayofMonth}{DayofMonthSuffix}"><b>{Timeago}</b></a>
  969. <a href="{Permalink}" title="Permalink">{block:NoteCount}<b>({NoteCountwithLabel})</b>{/block:NoteCount}</a>
  970. {/block:IndexPage}
  971. {block:PermalinkPage}
  972. <b><a href="{ReblogParentURL}">{NoteCountWithLabel}{block:RebloggedFrom} via {ReblogParentName}{/block:RebloggedFrom}</a></b>
  973. <br>
  974. {/block:PermalinkPage}
  975. {block:ifNotHideTags}
  976. <div class="tags">
  977. {block:HasTags}
  978. {block:Tags}
  979. <a href="{TagURL}" title="#{Tag}">{Tag}</a>
  980. {/block:Tags}
  981. {/block:HasTags}
  982. </div>
  983. {/block:ifNotHideTags}
  984. </div>
  985. {/block:Date}
  986.  
  987. {block:PermalinkPage}
  988. {block:PostNotes}
  989. {PostNotes}
  990. {/block:PostNotes}
  991. {/block:PermalinkPage}
  992.  
  993. </div>
  994.  
  995. {/block:Posts}
  996.  
  997. </div>
  998.  
  999. </div>
  1000.  
  1001. <div id="c">
  1002. <a href="https://pastebin.com/u/celestyl" title="THEME">▬</a>
  1003. </div>
  1004.  
  1005. <script>
  1006. $(document).ready(function(){
  1007. $('.photo-slideshow').pxuPhotoset({
  1008. lightbox: true,
  1009. rounded: false,
  1010. gutter: '4px',
  1011. borderRadius: '0px',
  1012. photoset: '.photo-slideshow',
  1013. photoWrap: '.photo-data',
  1014. photo: '.pxu-photo'
  1015. });
  1016. });
  1017. </script>
  1018.  
  1019. </body>
  1020. </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!