spirkism

Theme #23: Dimensions

Aug 2nd, 2015
792
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.02 KB | None | 0 0
  1. <!--
  2. THEME: DIMENSIONS
  3. by Zeke (spirkism/spirkthemes)
  4.  
  5. Rules:
  6. - please do not steal/redistribute, I spent quite a bit of time coding this
  7. - also don't remove the credit please, that would make me very sad :(
  8. - don't use as a base code, there are plenty of those out there
  9. - you are allowed to edit as much as you like though, have fun playing around with code, that's how you learn! :)
  10. - tell me if there are any bugs or if you have any questions, need help with the theme or want a detail differently - I'll see what I can do for you ;)
  11. And now: enjoy! :)
  12. -->
  13.  
  14. <!DOCTYPE html>
  15. <head>
  16.  
  17. <title>{Title}</title>
  18.  
  19. <!-- /* LINKS */ -->
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23. <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC|Julee|Philosopher|Bad+Script|Federo|Quicksand|Eagle+Lake|Shadows+Into+Light|Calligraffitti|Exo|Architects+Daughter|Coming+Soon|Amatic+SC|Kaushan+Script|Voltaire|Julius+Sans+One|Geo' rel='stylesheet' type='text/css'>
  24.  
  25. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  26.  
  27.  
  28. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/h5czl1a/aTqnk4mjj/tooltipstuff.css"/>
  29.  
  30.  
  31. <!-- /* SCRIPTS */ -->
  32.  
  33. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
  34. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  35. <script src="http://static.tumblr.com/h5czl1a/ACynk4kjd/tipped.js"></script>
  36.  
  37.  
  38. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  39. <script>
  40. (function($){
  41. $(document).ready(function(){
  42. $("[title]").style_my_tooltips({
  43. tip_follows_cursor:true,
  44. tip_delay_time:200,
  45. tip_fade_speed:300
  46. }
  47. );
  48. });
  49. })(jQuery);
  50. </script>
  51.  
  52. <script type='text/javascript'>
  53. $(document).ready(function() {
  54. Tipped.create('#credit','theme credit');
  55. });
  56. </script>
  57.  
  58.  
  59. <!-- /* META TAGS */ -->
  60. <meta name="color:text color" content="#323232" />
  61. <meta name="color:background" content="#f6f6f6" />
  62. <meta name="color:box background" content="#373636" />
  63. <meta name="color:sidebar" content="#121212" />
  64. <meta name="color:title" content="#E5E5E5" />
  65. <meta name="color:desc" content="#E5E5E5" />
  66. <meta name="color:desc text" content="#FFFFFF" />
  67. <meta name="color:post background" content="#DFDFDF" />
  68. <meta name="color:caption background" content="#EEEEEE" />
  69. <meta name="color:link color" content="#6bcb27" />
  70. <meta name="color:link hover color" content="#94ff51" />
  71. <meta name="color:permbox" content="#5d5d5d" />
  72. <meta name="color:tagbox" content="#202020" />
  73. <meta name="color:post inside" content="#E5E5E5" />
  74. <meta name="color:question background" content="#5D5D5D" />
  75. <meta name="color:answer background" content="#979797" />
  76. <meta name="color:question color" content="#fff" />
  77. <meta name="color:answer color" content="#202020" />
  78. <meta name="color:border" content="#aff728" />
  79. <meta name="color:sidebar link color" content="#aff728" />
  80. <meta name="color:sidebar link hover color" content="#0c0c0c" />
  81.  
  82. <meta name="text:link1 url" content="/" />
  83. <meta name="text:link1 text" content="link" />
  84. <meta name="text:link2 url" content="/" />
  85. <meta name="text:link2 text" content="link" />
  86. <meta name="text:link3 url" content="/" />
  87. <meta name="text:link3 text" content="link" />
  88. <meta name="text:link4 url" content="/" />
  89. <meta name="text:link4 text" content="link" />
  90. <meta name="text:link5 url" content="/" />
  91. <meta name="text:link5 text" content="link" />
  92. <meta name="text:link6 url" content="/" />
  93. <meta name="text:link6 text" content="link" />
  94. <meta name="text:link7 url" content="/" />
  95. <meta name="text:link7 text" content="link" />
  96. <meta name="text:link8 url" content="/" />
  97. <meta name="text:link8 text" content="link" />
  98.  
  99. <meta name="image:background" content="" />
  100. <meta name="image:sidebar background" content="" />
  101. <meta name="image:sidebar" content="http://i.imgur.com/k3XhJXS.png" />
  102. <meta name="image:sidebar2" content="http://i.imgur.com/k3XhJXS.png" />
  103.  
  104. <meta name="if:Box" content="1" />
  105. <meta name="if:Hover Desc" content="1" />
  106. <meta name="if:Links Right" content="1" />
  107. <meta name="if:2 Sidebar Images" content="0" />
  108. <meta name="if:500px posts" content="1" />
  109. <meta name="if:Searchbar" content="1" />
  110.  
  111. <meta name="select:Font" content="alegreya" title="Alegreya Sans SC" />
  112. <meta name="select:Font" content="julee" title="Julee" />
  113. <meta name="select:Font" content="philosopher" title="Philosopher" />
  114. <meta name="select:Font" content="badscript" title="Bad Script" />
  115. <meta name="select:Font" content="federo" title="Federo" />
  116. <meta name="select:Font" content="quicksand" title="Quicksand" />
  117. <meta name="select:Font" content="eaglelake" title="Eagle Lake" />
  118. <meta name="select:Font" content="shadowsintolight" title="Shadows Into Light" />
  119. <meta name="select:Font" content="exofont" title="Exo" />
  120. <meta name="select:Font" content="archi" title="Architects Daughter" />
  121. <meta name="select:Font" content="comingsoon" title="Coming Soon" />
  122. <meta name="select:Font" content="calli" title="Calligraffitti" />
  123.  
  124. <meta name="select:Index tags" content="hover-tags" title="tags on hover" />
  125. <meta name="select:Index tags" content="no-tags" title="no tags" />
  126. <meta name="select:Index tags" content="fixed-tags" title="visible tags" />
  127.  
  128. <meta name="select:Perma tags" content="fixed-tags" title="visible tags" />
  129. <meta name="select:Perma tags" content="no-tags" title="no tags" />
  130. <meta name="select:Perma tags" content="hover-tags" title="tags on hover" />
  131.  
  132. <meta name="font:Body" content="Arial, Helvetica, sans-serif"/>
  133.  
  134. <style type="text/css">
  135.  
  136. /* GENERAL */
  137.  
  138. ::-webkit-scrollbar-thumb {
  139. background-color: {color:link color};
  140. height:auto;
  141. width: 10px;
  142. z-index: 9999999999999999999999999999999999999;
  143. }
  144.  
  145. ::-webkit-scrollbar {
  146. height:auto;
  147. width:10px;
  148. background-color:{color:post background};
  149. z-index: 999999999999999999999999999999999999;
  150. }
  151.  
  152. #box::-webkit-scrollbar-thumb {
  153. background-color: {color:link color};
  154. height:auto;
  155. width: 5px;
  156. z-index: 9999999999999999999999999999999999999;
  157. }
  158.  
  159. #box::-webkit-scrollbar {
  160. height:auto;
  161. width:5px;
  162. background-color:{color:post background};
  163. z-index: 999999999999999999999999999999999999;
  164. }
  165.  
  166. div#qTip {
  167. font-size: 11px;
  168. font-family: 'Calibri', sans-serif;
  169. line-height: 11px;
  170. display: none;
  171. text-align: center;
  172. position: absolute;
  173. z-index: 999999999999999999999999999999999999999999999999999999;
  174. background-color: {color:post background};
  175. padding: 3px 7px;
  176. color: {color:background};
  177. max-width: 200px;
  178. height: auto;
  179. border: 1px solid {color:border};
  180. -webkit-transition: all 0.1s ease-out;
  181. -moz-transition: all 0.1s ease-out;
  182. -o-transition: all 0.1s ease-out;
  183. }
  184.  
  185. body {
  186. word-wrap:break-word;
  187. margin: 0;
  188. background-image: url('{image:background}');
  189. background-color: {color:background};
  190. font: 12px {font:Body};
  191. color: {color:text color};
  192. }
  193.  
  194. img {
  195. max-width: 100%;
  196. }
  197.  
  198. a {
  199. text-decoration: none;
  200. color: {color:link color};
  201. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  202. -o-transition: 0.5s ease;
  203. -moz-transition: 0.5s ease;
  204. }
  205.  
  206. a:hover {
  207. text-decoration: none;
  208. color: {color:link hover color};
  209. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  210. -o-transition: 0.5s ease;
  211. -moz-transition: 0.5s ease;
  212. }
  213.  
  214. blockquote {
  215. border-left: solid 2px #818181;
  216. padding-left: 10px;
  217. max-width: 100%;
  218. }
  219.  
  220. /* FONTS */
  221.  
  222. .alegreya {
  223. font-family: 'Alegreya Sans SC', sans-serif;
  224. }
  225.  
  226. .julee {
  227. font-family: 'Julee', cursive;
  228. }
  229.  
  230. .philosopher {
  231. font-family: 'Philosopher', sans-serif;
  232. }
  233.  
  234. .badscript {
  235. font-family: 'Bad Script', cursive;
  236. }
  237.  
  238. .federo {
  239. font-family: 'Federo', sans-serif;
  240. }
  241.  
  242. .quicksand {
  243. font-family: 'Quicksand', sans-serif;
  244. }
  245.  
  246. .eaglelake {
  247. font-family: 'Eagle Lake', cursive;
  248. }
  249.  
  250. .shadowsintolight {
  251. font-family: 'Shadows Into Light', cursive;
  252. }
  253.  
  254. .calli {
  255. font-family: 'Calligraffitti', cursive;
  256. }
  257.  
  258. .exofont {
  259. font-family: 'Exo', sans-serif;
  260. }
  261.  
  262. .archi {
  263. font-family: 'Architects Daughter', cursive;
  264. }
  265.  
  266. .comingsoon {
  267. font-family: 'Coming Soon', cursive;
  268. }
  269.  
  270.  
  271. /* SIDEBAR, HEADER, ETC */
  272.  
  273. /* SIDEBAR */
  274.  
  275. #sidebar {
  276. position: fixed;
  277. left: 2%;
  278. top: 4%;
  279. width: 460px;
  280. height: 92%;
  281. background-color: {color:sidebar};
  282. background-image: url('{image:sidebar background}');
  283. z-index: 5;
  284. /* box-shadow: inset 0 0 10px 5px #434343; */
  285. }
  286.  
  287. #title {
  288. position: relative;
  289. top: 30px;
  290. text-align: center;
  291. width: 300px;
  292. left: 80px;
  293. font-size: 18px;
  294. margin-bottom: 50px;
  295. color: {color:title};
  296. }
  297.  
  298. .sbimg {
  299. position: relative;
  300. width: 260px;
  301. border: 20px solid {color:border};
  302. left: 80px;
  303. }
  304.  
  305. #desc {
  306. position: relative;
  307. width: 260px;
  308. padding: 20px;
  309. background-color: {color:desc};
  310. color: {color:desc text};
  311. left: 80px;
  312. font-size: 10px;
  313. {block:IfHoverDesc}
  314. {block:IfSearchbar}
  315. margin-top: -150px;
  316. {/block:IfSearchbar}
  317. {block:IfNotSearchbar}
  318. margin-top: -154px;
  319. {/block:IfNotSearchbar}
  320. opacity: 0;
  321. {/block:IfHoverDesc}
  322. {block:IfNotHoverDesc}
  323. {block:IfSearchbar}
  324. margin-top: 0px;
  325. {/block:IfSearchbar}
  326. {block:IfNotSearchbar}
  327. margin-top: -4px;
  328. {/block:IfNotSearchbar}
  329. {/block:IfNotHoverDesc}
  330. -webkit-transition: 0.7s ease;transition: 0.7s ease;
  331. -o-transition: 0.7s ease;
  332. -moz-transition: 0.7s ease;
  333. }
  334.  
  335.  
  336. {block:IfHoverDesc}
  337. #sidebar:hover #desc {
  338. {block:IfSearchbar}
  339. margin-top: 0px;
  340. {/block:IfSearchbar}
  341. {block:IfNotSearchbar}
  342. margin-top: -4px;
  343. {/block:IfNotSearchbar}
  344. opacity: 1;
  345. -webkit-transition: 0.7s ease;transition: 0.7s ease;
  346. -o-transition: 0.7s ease;
  347. -moz-transition: 0.7s ease;
  348. }
  349. {/block:IfHoverDesc}
  350.  
  351. #searchbar {
  352. position: relative;
  353. margin-left: 80px;
  354. margin-top: -3px;
  355. }
  356.  
  357. #searchform input {
  358. border: 0px;
  359. padding: 5px;
  360. text-transform: uppercase;
  361. margin-top: 0px;
  362. letter-spacing: 1px;
  363. font-size: 0.8em;
  364. color: #575757;
  365. }
  366.  
  367. #searchinput {
  368. width: 234px;
  369. }
  370.  
  371. #searchbutton {
  372. margin-left: -3px;
  373. }
  374.  
  375. #sblinks {
  376. position: absolute;
  377. right: 0;
  378. width: 80px;
  379. top: 90px;
  380. }
  381.  
  382. #sblinks2 {
  383. position: absolute;
  384. left: 0;
  385. width: 80px;
  386. top: 90px;
  387. text-align: right;
  388. }
  389.  
  390. .sblink {
  391. border-bottom: 1px solid {color:box background};
  392. float: right;
  393. width: 70px;
  394. padding: 5px;
  395. font-size: 12px;
  396. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  397. -o-transition: 0.5s ease;
  398. -moz-transition: 0.5s ease;
  399. }
  400.  
  401. .sblink:hover {
  402. color: {color:sidebar link hover color};
  403. letter-spacing: 0.1em;
  404. box-shadow:inset 80px 0 0 0 {color:border};
  405. -moz-transition-duration:.3s;
  406. -webkit-transition-duration:.3s;
  407. -o-transition-duration:.3s;
  408.  
  409. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  410. -o-transition: 0.5s ease;
  411. -moz-transition: 0.5s ease;
  412. }
  413.  
  414. #sblinks2 .sblink:hover {
  415. color: {color:sidebar link hover color};
  416. letter-spacing: 0.1em;
  417. box-shadow:inset 80px 0 0 0 {color:box background};
  418. -moz-transition-duration:.3s;
  419. -webkit-transition-duration:.3s;
  420. -o-transition-duration:.3s;
  421.  
  422. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  423. -o-transition: 0.5s ease;
  424. -moz-transition: 0.5s ease;
  425. }
  426.  
  427.  
  428. /* POSTS & CONTENT */
  429.  
  430. {block:ifBox}
  431. #box {
  432. width: 98%;
  433. height: 96%;
  434. margin-top: 1%;
  435. margin-left: 1%;
  436. position: fixed;
  437. background-color: {color:box background};
  438. overflow-y:scroll;
  439. box-shadow: 0px 0px 10px 5px #929292;
  440. }
  441. {/block:ifBox}
  442.  
  443. #content {
  444. position: relative;
  445. width: 600px;
  446. margin-left: 500px;
  447. height: 120%;
  448. bottom: 0;
  449. }
  450.  
  451.  
  452. #post {
  453. top: 30px;
  454. left: 30px;
  455. position: relative;
  456. {block:If500pxPosts}
  457. width: 500px;
  458. {/block:If500pxPosts}
  459. {block:IfNot500pxPosts}
  460. width: 400px;
  461. {/block:IfNot500pxPosts}
  462. padding: 20px 20px 20px 20px;
  463. margin-bottom: 50px;
  464. background-color: {color:post background};
  465. }
  466.  
  467. .caption {
  468. background-color: {color:caption background};
  469. padding: 5px 10px;
  470. margin-bottom: 0px;
  471. margin-top: 0px;
  472. font-size: 12px;
  473. }
  474.  
  475.  
  476. /* DIFFERENT KINDS OF POSTS */
  477.  
  478. .textpost {
  479. font-size: 12px;
  480. }
  481.  
  482. .textpost-title {
  483. font-size: 16px;
  484. text-align: center;
  485. background-color: {color:post inside};
  486. padding: 10px;
  487. }
  488.  
  489. .textpost-text {
  490. background-color: {color:caption background};
  491. padding: 5px 10px;
  492. margin-bottom: 0px;
  493. margin-top: 0px;
  494. font-size: 12px;
  495. }
  496.  
  497. .photopost {
  498.  
  499. }
  500.  
  501. .photopost .caption {
  502. margin-top: -4px;
  503. }
  504.  
  505. .panoramapost {
  506.  
  507. }
  508.  
  509. .panoramapost .caption {
  510. margin-top: -3px;
  511. }
  512.  
  513. .photosetpost {
  514.  
  515. }
  516.  
  517. .photosetpost .caption {
  518. margin-top: 5px;
  519. }
  520.  
  521. .quotepost {
  522.  
  523. }
  524.  
  525. .quotepost-quote {
  526. font-size: 14px;
  527. background-color: {color:post inside};
  528. padding: 10px 10px 10px 15px;
  529. }
  530.  
  531. .quotepost-source {
  532. margin-bottom: 0px;
  533. margin-left: 20px;
  534. background-color: {color:caption background};
  535. padding: 5px;
  536. }
  537.  
  538. .linkpost {
  539.  
  540. }
  541.  
  542. .linkpost-title {
  543. font-size: 16px;
  544. text-align: center;
  545. background-color: {color:post inside};
  546. border: 3px solid {color:link color};
  547. min-height: 80px;
  548. line-height: 80px;
  549. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  550. -o-transition: 0.5s ease;
  551. -moz-transition: 0.5s ease;
  552. }
  553.  
  554. .linkpost-title:hover {
  555. background-color: {color:permbox};
  556. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  557. -o-transition: 0.5s ease;
  558. -moz-transition: 0.5s ease;
  559. }
  560.  
  561. .linkpost-img {
  562. width: 80px;
  563. display: inline-block;
  564. float: right;
  565. }
  566.  
  567. .chatpost {
  568.  
  569. }
  570.  
  571. .chatpost-title {
  572. font-size: 16px;
  573. text-align: center;
  574. background-color: {color:post inside};
  575. padding: 10px;
  576. }
  577.  
  578. .chatpost ul {
  579. list-style-type: none;
  580. margin-left: -40px;
  581. margin-top: 0px;
  582. margin-bottom: 0px;
  583. }
  584.  
  585. .chatpost ul .odd {
  586. background-color: {color:question background};
  587. color: {color:question color};
  588. margin-left: 10px;
  589. {block:If500pxPosts}
  590. width: 400px;
  591. {/block:If500pxPosts}
  592. {block:IfNot500pxPosts}
  593. width: 330px;
  594. {/block:IfNot500pxPosts}
  595. padding: 5px;
  596. margin-bottom: 0px;
  597. }
  598.  
  599. .chatpost ul .even {
  600. background-color: {color:answer background};
  601. color: {color:answer color};
  602. {block:If500pxPosts}
  603. margin-left: 80px;
  604. width: 400px;
  605. {/block:If500pxPosts}
  606. {block:IfNot500pxPosts}
  607. margin-left: 50px;
  608. width: 330px;
  609. {/block:IfNot500pxPosts}
  610. padding: 5px;
  611. margin-bottom: 0px;
  612. }
  613.  
  614. .audiopost {
  615.  
  616. }
  617.  
  618. .audiopost-player {
  619. float: left;
  620. width: 27px;
  621. overflow: hidden;
  622. z-index: 3;
  623. margin-top: 27px;
  624. margin-left: 27px;
  625. }
  626.  
  627.  
  628. .audiopost-img {
  629. display: inline-block;
  630. float: left;
  631. height: 80px;
  632. margin-left: -54px;
  633. z-index: 2;
  634. width: 80px;
  635. background-color: {color:permbox};
  636. z-index: 1;
  637. }
  638.  
  639.  
  640. .audiopost ul {
  641. list-style-type: none;
  642. display: inline-block;
  643. margin-left: -20px;
  644. }
  645.  
  646. .audiopost-audio {
  647. padding: 10px;
  648. background-color: {color:post inside};
  649. height: 80px;
  650. }
  651.  
  652.  
  653. .videopost {
  654.  
  655. }
  656.  
  657. .videopost-video {
  658.  
  659. }
  660.  
  661. .answerpost {
  662.  
  663. }
  664.  
  665. .answerpost img {
  666. position: relative;
  667. max-width: 100%;
  668. display: block;
  669. }
  670.  
  671. .answerpost-1 {
  672. background-color: {color:question background};
  673. color: {color:question color};
  674. padding: 10px;
  675. min-height: 85px;
  676. }
  677.  
  678. .answerpost-asker {
  679. text-transform:uppercase;
  680. text-align: right;
  681. }
  682.  
  683. .answerpost-askerimg {
  684. display: inline-block;
  685. border: 10px solid {color:border};
  686. float: right;
  687. margin-left: 10px;
  688. }
  689.  
  690. .answerpost-question {
  691. font-size: 12px;
  692. text-align: right;
  693. right: 10px;
  694. }
  695.  
  696. .answerpost-2 {
  697. background-color: {color:answer background};
  698. color: {color:answer color};
  699. padding: 10px;
  700. min-height: 85px;
  701. margin-top: 0px;
  702. }
  703.  
  704. .answerpost-answererimg {
  705. position: absolute;
  706. border: 10px solid {color:permbox};
  707. float: left;
  708. top: 5px;
  709. left: 5px;
  710. margin-right: 20px;
  711. }
  712.  
  713. .answerpost-answerer {
  714. text-transform:uppercase;
  715. }
  716.  
  717. .answerpost-answer {
  718. position: relative;
  719. {block:If500pxPosts}
  720. width: 480px;
  721. {/block:If500pxPosts}
  722. {block:IfNot500pxPosts}
  723. width: 380px;
  724. {/block:IfNot500pxPosts}
  725. text-align: left;
  726. font-size: 12px;
  727. margin-bottom: 0px;
  728. display: inline;
  729. }
  730.  
  731. .answerpost-answer img {
  732. {block:If500pxPosts}
  733. max-width: 380px;
  734. {/block:If500pxPosts}
  735. {block:IfNot500pxPosts}
  736. max-width: 280px;
  737. {/block:IfNot500pxPosts}
  738. margin-bottom: 2px;
  739. }
  740.  
  741. .answerpost-answer-answer {
  742. text-align: left;
  743. position: relative;
  744. font-size: 12px;
  745. }
  746.  
  747. #permbox {
  748. text-align: center;
  749. background-color: {color:permbox};
  750. {block:If500pxPosts}
  751. width: 480px;
  752. {/block:If500pxPosts}
  753. {block:IfNot500pxPosts}
  754. width: 380px;
  755. {/block:IfNot500pxPosts}
  756. padding: 10px;
  757. text-transform: uppercase;
  758. }
  759.  
  760. #likebutton {
  761. display: inline-block;
  762. }
  763.  
  764. #reblogbutton {
  765. display: inline-block;
  766. }
  767.  
  768. .no-tags {
  769. display: none;
  770. }
  771.  
  772. .no-tags .comma:last-child {
  773. display: none;
  774. }
  775.  
  776. .hover-tags {
  777. margin-top: -30px;
  778. text-align: center;
  779. background-color: {color:tagbox};
  780. {block:If500pxPosts}
  781. width: 480px;
  782. {/block:If500pxPosts}
  783. {block:IfNot500pxPosts}
  784. width: 380px;
  785. {/block:IfNot500pxPosts}
  786. padding: 10px;
  787. opacity: 0;
  788. z-index: -99;
  789. font-size: 10px;
  790. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  791. -o-transition: 0.5s ease;
  792. -moz-transition: 0.5s ease;
  793. }
  794.  
  795. .hover-tags .comma:last-child {
  796. display: none;
  797. }
  798.  
  799. #post:hover .hover-tags {
  800. margin-top: 0px;
  801. opacity: 1;
  802. z-index: 1;
  803. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  804. -o-transition: 0.5s ease;
  805. -moz-transition: 0.5s ease;
  806. }
  807.  
  808. .fixed-tags {
  809. margin-top: 0px;
  810. text-align: center;
  811. background-color: {color:tagbox};
  812. {block:If500pxPosts}
  813. width: 480px;
  814. {/block:If500pxPosts}
  815. {block:IfNot500pxPosts}
  816. width: 380px;
  817. {/block:IfNot500pxPosts}
  818. padding: 10px;
  819. z-index: -99;
  820. font-size: 10px;
  821. }
  822.  
  823. .fixed-tags .comma:last-child {
  824. display: none;
  825. }
  826.  
  827. #notes ol {
  828. list-style:none;
  829. font-size: 11px;
  830. }
  831.  
  832. #notes ol img {
  833. margin-right: 3px;
  834. display: none;
  835. }
  836.  
  837.  
  838.  
  839.  
  840.  
  841. #credit { /* DO NOT CHANGE ANY OF THIS WITHOUT ASKING */
  842. position: fixed;
  843. {block:IfBox}
  844. right: 3%;
  845. bottom: 4%;
  846. {/block:IfBox}
  847. {block:IfNotBox}
  848. right: 10px;
  849. bottom: 10px;
  850. {/block:IfNotBox}
  851. width: 20px;
  852. height: 20px;
  853. border: 1px solid black;
  854. background-color: #484848;
  855. color: white;
  856. text-align: center;
  857. line-height: 20px;
  858. }
  859.  
  860. #credit:before {
  861. content: "\f023";
  862. font-family: FontAwesome;
  863. text-align:center;
  864. font-size:1.2em;
  865. }
  866.  
  867. /* TOOLTIP STUFF */
  868.  
  869. /* Skins */
  870. /* default (dark) */
  871. .tpd-skin-dark .tpd-content,
  872. .tpd-skin-dark .tpd-title,
  873. .tpd-skin-dark .tpd-close { color: #fff; }
  874. .tpd-skin-dark .tpd-background-content,
  875. .tpd-skin-dark .tpd-background-title {
  876. background-color: #282828;
  877. }
  878. .tpd-skin-dark .tpd-background {
  879. border-width: 1px;
  880. border-color: #282828;
  881. border-color: rgba(255,255,255,.1);
  882. }
  883. /* line below the title */
  884. .tpd-skin-dark .tpd-title-wrapper { border-bottom: 1px solid #404040; }
  885. /* links */
  886. .tpd-skin-dark a,
  887. .tpd-skin-dark a:hover { color: #ccc; }
  888.  
  889.  
  890.  
  891. </style>
  892. </head>
  893.  
  894. <body>
  895. <div id="box">
  896. <!-- /* SIDEBAR, HEADER, ETC. */ -->
  897.  
  898. <!-- /* SIDEBAR */ -->
  899.  
  900. <div id="sidebar">
  901. <div id="title" class="{select:Font}">{Title}</div>
  902. <img src="{image:sidebar}" class="sbimg">
  903. {block:IfSearchbar}
  904. <div id="searchbar">
  905. <form action="/search" method="get" id=searchform>
  906. <input type="text" name="q" value="{SearchQuery}" id="searchinput"/>
  907. <input type="submit" value="search" id="searchbutton"/>
  908. </div>
  909. </form>
  910. {/block:IfSearchbar}
  911. <div id="desc">{Description}</div>
  912. {block:IfLinksRight}
  913. <div id="sblinks">
  914. <a href="{text:link1 url}"><div class="sblink">{text:link1 text}</div></a>
  915. <a href="{text:link2 url}"><div class="sblink">{text:link2 text}</div></a>
  916. <a href="{text:link3 url}"><div class="sblink">{text:link3 text}</div></a>
  917. <a href="{text:link4 url}"><div class="sblink">{text:link4 text}</div></a>
  918. <a href="{text:link5 url}"><div class="sblink">{text:link5 text}</div></a>
  919. <a href="{text:link6 url}"><div class="sblink">{text:link6 text}</div></a>
  920. <a href="{text:link7 url}"><div class="sblink">{text:link7 text}</div></a>
  921. <a href="{text:link8 url}"><div class="sblink">{text:link8 text}</div></a>
  922. {block:PreviousPage}
  923. <a href="{PreviousPage}"><div class="sblink">prev</div></a>
  924. {/block:PreviousPage}
  925. {block:NextPage}
  926. <a href="{NextPage}"><div class="sblink">next</div></a>
  927. {/block:NextPage}
  928. </div>
  929. {/block:IfLinksRight}
  930. {block:IfNotLinksRight}
  931. <div id="sblinks2">
  932. <a href="{text:link1 url}"><div class="sblink">{text:link1 text}</div></a>
  933. <a href="{text:link2 url}"><div class="sblink">{text:link2 text}</div></a>
  934. <a href="{text:link3 url}"><div class="sblink">{text:link3 text}</div></a>
  935. <a href="{text:link4 url}"><div class="sblink">{text:link4 text}</div></a>
  936. <a href="{text:link5 url}"><div class="sblink">{text:link5 text}</div></a>
  937. <a href="{text:link6 url}"><div class="sblink">{text:link6 text}</div></a>
  938. <a href="{text:link7 url}"><div class="sblink">{text:link7 text}</div></a>
  939. <a href="{text:link8 url}"><div class="sblink">{text:link8 text}</div></a>
  940. {block:PreviousPage}
  941. <a href="{PreviousPage}"><div class="sblink">prev</div></a>
  942. {/block:PreviousPage}
  943. {block:NextPage}
  944. <a href="{NextPage}"><div class="sblink">next</div></a>
  945. {/block:NextPage}
  946. </div>
  947. {/block:IfNotLinksRight}
  948. {block:If2SidebarImages}
  949. <img src="{image:sidebar2}" class="sbimg">
  950. {/block:If2SidebarImages}
  951.  
  952. </div>
  953. <!-- /* POSTS */ -->
  954.  
  955. <div id="content">
  956. {block:Posts}
  957. <div id="post" class="{TagsAsClasses}">
  958.  
  959. {block:ContentSource}
  960. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  961. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  962. {/block:SourceLogo}
  963. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  964. {/block:ContentSource}
  965.  
  966. <!-- /* TEXT POST */ -->
  967. {block:Text}<div class="textpost">
  968. {block:Title}<div class="textpost-title {select:Font}">{Title}</div>{/block:Title}
  969. <div class="textpost-text">
  970. {Body}
  971. </div>
  972. </div>
  973. {/block:Text}
  974.  
  975. <!-- /* PHOTO POST */ -->
  976. {block:Photo}<div class="photopost">
  977. {LinkOpenTag}
  978. {block:If500pxPosts}
  979. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  980. {/block:If500pxPosts}
  981. {block:IfNot500pxPosts}
  982. <img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
  983. {/block:IfNot500pxPosts}
  984. {LinkCloseTag}
  985. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  986. </div>
  987. {/block:Photo}
  988.  
  989. <!-- /* PANORAMA POST */ -->
  990. {block:Panorama}<div class="panoramapost">
  991. {LinkOpenTag}
  992. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />
  993. {LinkCloseTag}
  994. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  995. </div>
  996. {/block:Panorama}
  997.  
  998. <!-- /* PHOTOSET POST */ -->
  999. {block:Photoset}<div class="photosetpost">
  1000. {block:If500pxPosts}
  1001. {Photoset-500}
  1002. {/block:If500pxPosts}
  1003. {block:IfNot500pxPosts}
  1004. {Photoset-400}
  1005. {/block:IfNot500pxPosts}
  1006. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1007. </div>
  1008. {/block:Photoset}
  1009.  
  1010. <!-- /* QUOTE POST */ -->
  1011. {block:Quote}<div class="quotepost">
  1012. <div class="quotepost-quote {select:Font}">{Quote}</div>
  1013. {block:Source}<div class="quotepost-source">~ {Source}</div>{/block:Source}
  1014. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1015. </div>
  1016. {/block:Quote}
  1017.  
  1018. <!-- /* LINK POST */ -->
  1019. {block:Link}<div class="linkpost">
  1020. <a href="{URL}"><div class="linkpost-title {select:Font}">{Name}
  1021. {block:Thumbnail}<img src="{Thumbnail}" class="linkpost-img">{/block:Thumbnail}</div></a>
  1022. {block:Description}<div class="caption">{Description}</div>{/block:Description}
  1023. </div>
  1024. {/block:Link}
  1025.  
  1026. <!-- /* CHAT POST */ -->
  1027. {block:Chat}<div class="chatpost">
  1028. {block:Title}<div class="chatpost-title {select:Font}">{Title}</div>{/block:Title}
  1029. <ul>
  1030. {block:Lines}
  1031. <li class="{Alt}">{block:Label}<strong>{Label}</strong> {/block:Label}{Line}</li>
  1032. {/block:Lines}
  1033. </ul>
  1034. </div>
  1035. {/block:Chat}
  1036.  
  1037. <!-- /* AUDIO POST */ -->
  1038. {block:Audio}
  1039. <div class="audiopost">
  1040. <div class="audiopost-audio">
  1041. {block:AudioPlayer}<div class="audiopost-player">{AudioPlayer}</div>{/block:AudioPlayer}
  1042. {block:AlbumArt}
  1043. <div class="audiopost-img"><img src="{AlbumArtURL}"></div>
  1044. {/block:AlbumArt}
  1045. <ul>
  1046. {block:TrackName}<li><strong>{TrackName}</strong></li>{/block:TrackName}
  1047. {block:Artist}<li>Artist: {Artist}</li>{/block:Artist}
  1048. {block:Album}<li>Album: {Album}</li>{/block:Album}
  1049. </ul>
  1050. </div>
  1051. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1052. </div>
  1053. {/block:Audio}
  1054.  
  1055. <!-- /* VIDEO POST */ -->
  1056. {block:Video}<div class="videopost"><div class="videopost-video">
  1057. {block:If500pxPosts}
  1058. {Video-500}
  1059. {/block:If500pxPosts}
  1060. {block:IfNot500pxPosts}
  1061. {Video-400}
  1062. {/block:IfNot500pxPosts}
  1063. </div>
  1064. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1065. </div>
  1066. {/block:Video}
  1067.  
  1068. <!-- /* ANSWER POST */ -->
  1069. {block:Answer}
  1070. <div class="answerpost">
  1071. <div class="answerpost-1">
  1072. <img src="{AskerPortraitURL-64}" class="answerpost-askerimg">
  1073. <div class="answerpost-question">
  1074. <div class="answerpost-asker {select:Font}">{Asker}:</div> {Question}
  1075. </div>
  1076. </div>
  1077. <div class="answerpost-2">
  1078. <div class="answerpost-answer">
  1079. {block:Answerer}
  1080. <img src="{AnswererPortraitURL-64}" class="answerpost-answererimg">
  1081.  
  1082. <div class="answerpost-answerer {select:Font}">{Answerer}:</div>
  1083. {/block:Answerer}
  1084. <div class="answerpost-answer-answer">
  1085. {Answer}
  1086. </div>
  1087. </div></div>
  1088. {block:Reblog}<div class="caption">{Replies}</div>{/block:Reblog}
  1089. </div>
  1090. {/block:Answer}
  1091.  
  1092. <!-- /* PERM */ -->
  1093. <div id="permbox">
  1094. <a href="{Permalink}">{TimeAgo}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  1095. {block:NoteCount}<a href="{Permalink}">{NoteCount} NOTES</a>
  1096. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{/block:NoteCount}
  1097. {block:RebloggedFrom}<a href="{ReblogParentURL}">VIA</a>
  1098. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{/block:RebloggedFrom}
  1099. {block:ContentSource}<a href="{SourceURL}">&#169;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{/block:ContentSource}
  1100. <div id="likebutton">{LikeButton color="grey" size="15"}</div>
  1101. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  1102. <div id="reblogbutton">{ReblogButton color="grey" size="15"}</div>
  1103. </div>
  1104.  
  1105. <!-- /* TAGS */ -->
  1106. {block:IndexPage}
  1107. {block:HasTags}<div id="tags" class="{select:Index tags}">
  1108. {block:Tags}
  1109. <a href="{TagURL}">{Tag}</a><span class="comma"> &nbsp;&middot;&nbsp; </span>
  1110. {/block:Tags}
  1111. </div>
  1112. {/block:HasTags}
  1113. {/block:IndexPage}
  1114.  
  1115. {block:PermalinkPage}
  1116. {block:HasTags}<div id="tags" class="{select:Perma tags}">
  1117. {block:Tags}
  1118. <a href="{TagURL}">{Tag}</a><span class="comma"> &nbsp;&middot;&nbsp; </span>
  1119. {/block:Tags}
  1120. </div>
  1121. {/block:HasTags}
  1122. {/block:PermalinkPage}
  1123.  
  1124. </div> <!-- post div -->
  1125. {/block:Posts}
  1126.  
  1127. <!-- /* POST NOTES */ -->
  1128. {block:PostNotes}
  1129. <div id="notes">
  1130. <ul>
  1131. {PostNotes}
  1132. </ul>
  1133. </div>
  1134. {/block:PostNotes}
  1135. </div> <!-- content div -->
  1136.  
  1137. <!-- /* CREDIT: DO NOT REMOVE !!! */ -->
  1138. <a href="http://spirkthemes.tumblr.com"><div id="credit" data-tipped-options="position: 'left'"></div></a>
  1139.  
  1140. </div> <!-- box div -->
  1141.  
  1142. </body>
  1143. </html>
Advertisement
Add Comment
Please, Sign In to add comment