spirkism

Theme #21: Zachary Quinto

Feb 16th, 2015
762
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.59 KB | None | 0 0
  1. <!--
  2. THEME #21: Zachary Quinto
  3. by Phil (spirkism/spirkthemes)
  4.  
  5. Originally made for jasperjordanrps
  6.  
  7. Rules:
  8. - please do not steal/redistribute, I spent quite a bit of time coding this
  9. - also don't remove the credit please, that would make me very sad :(
  10. - don't use as a base code, there are plenty of those out there
  11. - don't just take snippets and reuse them either
  12. - you are allowed to edit as much as you like though, have fun playing around with code, that's how you learn! :)
  13. - 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 ;)
  14. And now: enjoy! :)
  15. -->
  16.  
  17.  
  18.  
  19. <!DOCTYPE html>
  20.  
  21. <head>
  22.  
  23.  
  24. <title>{Title}</title>
  25.  
  26. <link rel="shortcut icon" href="{Favicon}" />
  27.  
  28. <script type="text/javascript" src="http://static.tumblr.com/tiu5k68/xTkm8wqw2/tumblr-title-qtip.js"></script>
  29.  
  30. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  31.  
  32. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  33.  
  34. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  35.  
  36. {block:ifInfiniteScroll}
  37. <script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>
  38. {/block:ifInfiniteScroll}
  39.  
  40. <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans|Indie+Flower|Shadows+Into+Light|Megrim|Fredericka+the+Great|Josefin+Sans:400,600|Limelight|Open+Sans+Condensed:300|Julius+Sans+One|Lobster|Audiowide|Special+Elite|Amatic+SC|Pacifico|Iceland' rel='stylesheet' type='text/css'>
  41.  
  42.  
  43.  
  44.  
  45. <meta name="color:Background" content="#ffffff" />
  46. <meta name="color:Text" content="#2E2E2E" />
  47. <meta name="color:Links" content="#754200" />
  48. <meta name="color:Links hover" content="#FF9100" />
  49. <meta name="color:Description background" content="#f3ece4" />
  50. <meta name="color:Description text" content="#2a2a2a" />
  51. <meta name="color:Posts" content="#f3ece4" />
  52. <meta name="color:Post Insides" content="#FFC477" />
  53. <meta name="color:Question" content="#FFC477" />
  54. <meta name="color:Sidebar stripe background" content="#c6b5a0" />
  55. <meta name="color:Title" content="#ff9100" />
  56. <meta name="color:Sidebar background" content="#AEAEAE" />
  57. <meta name="color:Sidebar background hover" content="#494949" />
  58. <meta name="color:Sidebar link background" content="#ffc477" />
  59. <meta name="color:Sidebar link text" content="#353535" />
  60. <meta name="color:Sidebar link text hover" content="#ffffff" />
  61. <meta name="color:Shadow" content="#939393" />
  62.  
  63. <meta name="text:Sidebar links top position" content="150px" />
  64. <meta name="text:Sidebar hover slide opacity" content="0.9" />
  65. <meta name="text:Link 1 url" content="/" />
  66. <meta name="text:Link 1 text" content="home" />
  67. <meta name="text:Link 2 url" content="/ask" />
  68. <meta name="text:Link 2 text" content="ask" />
  69. <meta name="text:Link 3 url" content="/archive" />
  70. <meta name="text:Link 3 text" content="archive" />
  71. <meta name="text:Link 4 url" content="/" />
  72. <meta name="text:Link 4 text" content="link" />
  73. <meta name="text:Link 5 url" content="/" />
  74. <meta name="text:Link 5 text" content="link" />
  75. <meta name="text:Link 6 url" content="/" />
  76. <meta name="text:Link 6 text" content="link" />
  77. <meta name="text:Link 7 url" content="/" />
  78. <meta name="text:Link 7 text" content="" />
  79. <meta name="text:Link 8 url" content="/" />
  80. <meta name="text:Link 8 text" content="" />
  81. <meta name="text:Link 9 url" content="/" />
  82. <meta name="text:Link 9 text" content="" />
  83. <meta name="text:Link 10 url" content="/" />
  84. <meta name="text:Link 10 text" content="" />
  85.  
  86.  
  87. <meta name="image:Background image" content="" />
  88. <meta name="image:Sidebar image" content="http://i.imgur.com/k3XhJXS.png" />
  89.  
  90.  
  91. <meta name="select:Special font" content="indieflower" title="Indie Flower" />
  92. <meta name="select:Special font" content="fredericka" title="Fredericka the Great">
  93. <meta name="select:Special font" content="limelight" title="Limelight">
  94. <meta name="select:Special font" content="shadowsintolight" title="Shadows Into Light">
  95. <meta name="select:Special font" content="lobster" title="Lobster">
  96. <meta name="select:Special font" content="pacifico" title="Pacifico">
  97. <meta name="select:Special font" content="audiowide" title="Audiowide">
  98. <meta name="select:Special font" content="specialelite" title="Special Elite">
  99. <meta name="select:Special font" content="amaticsc" title="Amatic SC">
  100.  
  101. <meta name="select:Index tags" content="no-tags" title="no tags" />
  102. <meta name="select:Index tags" content="hover-tags" title="tags on hover" />
  103. <meta name="select:Index tags" content="fixed-tags" title="visible tags" />
  104. <meta name="select:Perma tags" content="no-tags" title="no tags" />
  105. <meta name="select:Perma tags" content="hover-tags" title="tags on hover" />
  106. <meta name="select:Perma tags" content="fixed-tags" title="visible tags" />
  107.  
  108. <meta name="if:Infinite scroll" content="0" />
  109. <meta name="if:500px posts" content="1" />
  110. <meta name="if:White tumblr buttons" content="1" />
  111. <meta name="if:Hover effect" content="1" />
  112. <meta name="if:Shadow" content="1" />
  113.  
  114.  
  115. <meta name="font:Body font" content="Arial, Helvetica, sans-serif"/>
  116.  
  117.  
  118. <style type="text/css">
  119.  
  120.  
  121. ::-webkit-scrollbar-thumb{
  122. background-color: {color:Title};
  123. height:auto;
  124. width: 7px;
  125. z-index: 9999999999999999999999999999999999999;
  126. }
  127.  
  128. ::-webkit-scrollbar {
  129. height:auto;
  130. width:7px;
  131. background-color:{color:Posts};
  132. z-index: 999999999999999999999999999999999999;
  133. }
  134.  
  135. iframe#tumblr_controls {
  136. position:fixed;-webkit-filter:invert(100%);opacity:0.5;
  137. -webkit-transition: 0.7s ease;transition: 0.7s ease;
  138. -o-transition: 0.7s ease;-moz-transition: 0.7s ease;}
  139.  
  140.  
  141. div#qTip {
  142. text-transform: lowercase;
  143. font-size: 12px;
  144. font-family: 'Alegreya Sans', sans-serif;
  145. line-height: 12px;
  146. display: none;
  147. text-align: center;
  148. position: absolute;
  149. z-index: 999999999999999999999999999999999999999999999999999999;
  150. background-color: {color:Post insides};
  151. padding: 3px;
  152. color: {color:Background};
  153. max-width: 200px;
  154. height: auto;
  155. border: 1px solid {color:Text};
  156. -webkit-transition: all 0.1s ease-out;
  157. -moz-transition: all 0.1s ease-out;
  158. -o-transition: all 0.1s ease-out;
  159. }
  160.  
  161.  
  162. body {
  163. background-image: url("{image:Background image}");
  164. background-repeat: no-repeat;
  165. background-position: top left;
  166. background-attachment: fixed;
  167. background-color: {color:Background};
  168. margin: 0 auto;
  169. font: 12px {font:Body font};
  170. word-wrap:break-word;
  171. }
  172.  
  173. a:link, a:active, a:visited {
  174. text-decoration: none;
  175. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  176. -o-transition: 0.5s ease;
  177. -moz-transition: 0.5s ease;
  178. color:{color:Links};
  179. }
  180.  
  181. a:hover {
  182. color:{color:Links hover};
  183. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  184. -o-transition: 0.5s ease;
  185. -moz-transition: 0.5s ease;
  186. }
  187.  
  188.  
  189. :focus, :active {
  190. outline: 0;
  191. }
  192.  
  193. /* FONTS */
  194.  
  195. .indieflower {
  196. font-family: 'Indie Flower', Arial, sans-serif;
  197. }
  198.  
  199. .limelight {
  200. font-family: 'Limelight', sans-serif;
  201. }
  202.  
  203. .fredericka {
  204. font-family: 'Fredericka the Great', sans-serif;
  205. }
  206.  
  207. .shadowsintolight {
  208. font-family: 'Shadows Into Light', sans-serif;
  209. }
  210.  
  211. .lobster {
  212. font-family: 'Lobster', sans-serif;
  213. }
  214.  
  215. .pacifico {
  216. font-family: 'Pacifico', sans-serif;
  217. }
  218.  
  219. .audiowide {
  220. font-family: 'Audiowide', sans-serif;
  221. }
  222.  
  223.  
  224. .specialelite {
  225. font-family: 'Special Elite', sans-serif;
  226. }
  227.  
  228. .amaticsc {
  229. font-family: 'Amatic SC', sans-serif;
  230. }
  231.  
  232.  
  233. /* SIDEBAR THINGS */
  234.  
  235.  
  236. #sidebar {
  237. position: fixed;
  238. top: 0;
  239. height: 100%;
  240. width: 250px;
  241. background-image: url('{image:Sidebar image}');
  242. background-repeat: no-repeat;
  243. background-position: center;
  244. background-size: auto 100%;
  245. background-color: {color:Sidebar background};
  246. z-index: 8;
  247. -webkit-transition: 0.8s ease;transition: 0.8s ease;
  248. -o-transition: 0.8s ease;
  249. -moz-transition: 0.8s ease;
  250. }
  251.  
  252. #title {
  253. position: relative;
  254. top: 50px;
  255. width: 220px;
  256. left: 15px;
  257. text-align:center;
  258. font-size: 25px;
  259. }
  260.  
  261. #title a {
  262. color:{color:Title};
  263. {block:IfShadow}
  264. text-shadow: 1px 1px 1px {color:Shadow};
  265. {block:IfShadow}
  266. }
  267.  
  268. #desc {
  269. position: absolute;
  270. background-color: {color:Description background};
  271. color: {color:Description text};
  272. font-size: 11px;
  273. padding: 10px;
  274. z-index: 10;
  275. bottom: 0;
  276. width: 230px;
  277. }
  278.  
  279. {block:IfHoverEffect}
  280. #sidebar:hover {
  281. box-shadow:inset 250px 0 0 0 RGBA({RGBcolor:Sidebar background hover}, {text:Sidebar hover slide opacity});
  282. -webkit-transition: 0.8s ease;transition: 0.8s ease;
  283. -o-transition: 0.8s ease;
  284. -moz-transition: 0.8s ease;
  285. }
  286. {/block:IfHoverEffect}
  287.  
  288. #sblinks {
  289. position: absolute;
  290. left: 15px;
  291. top: {text:Sidebar links top position};
  292. width: 218px;
  293. }
  294.  
  295. .sblink {
  296. color: {color:Sidebar link text};
  297. width: 100px;
  298. text-align: center;
  299. margin-bottom: 2px;
  300. padding: 3px;
  301. font-family: 12px;
  302. opacity: 0.8;
  303. margin-left: 2px;
  304. float: left;
  305. border-radius: 2px;
  306. background-color: {color:Sidebar link background};
  307. -webkit-transition: 1s ease;transition: 1s ease;
  308. -o-transition: 1s ease;
  309. -moz-transition: 1s ease;
  310. }
  311.  
  312. .sblink:hover {
  313. background-color: transparent;
  314. letter-spacing: 0.15em;
  315. opacity: 1;
  316. color: {color:Sidebar link text hover};
  317. -webkit-transition: 1s ease;transition: 1s ease;
  318. -o-transition: 1s ease;
  319. -moz-transition: 1s ease;
  320. }
  321.  
  322. #sidebar:hover .sblink {
  323. opacity: 0.9;
  324. -webkit-transition: 0.8s ease;transition: 0.8s ease;
  325. -o-transition: 0.8s ease;
  326. -moz-transition: 0.8s ease;
  327. }
  328.  
  329.  
  330. .prevpage {
  331. position:relative;
  332. float: left;
  333. display: inline-block;
  334. left: 0px;
  335. top: 3px;
  336. font-size: 13px;
  337. font-family: FontAwesome;
  338. margin-left: 3px;
  339. color: {color:Sidebar link background};
  340. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  341. -o-transition: 0.5s ease;
  342. -moz-transition: 0.5s ease;
  343. }
  344.  
  345. .prevpage:hover {
  346. color: {color:Sidebar link text hover};
  347. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  348. -o-transition: 0.5s ease;
  349. -moz-transition: 0.5s ease;
  350. }
  351.  
  352. .nextpage {
  353. position:relative;
  354. display: inline-block;
  355. float: right;
  356. right: 0px;
  357. top: 3px;
  358. margin-right: 3px;
  359. font-size: 13px;
  360. font-family: FontAwesome;
  361. color: {color:Sidebar link background};
  362. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  363. -o-transition: 0.5s ease;
  364. -moz-transition: 0.5s ease;
  365. }
  366.  
  367. .nextpage:hover {
  368. color: {color:Sidebar link text hover};
  369. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  370. -o-transition: 0.5s ease;
  371. -moz-transition: 0.5s ease;
  372. }
  373.  
  374. .prevpage:before {
  375. content: "\f060";
  376. }
  377.  
  378. .nextpage:before {
  379. content: "\f061";
  380. }
  381.  
  382.  
  383.  
  384.  
  385. /*CONTENT THINGS */
  386.  
  387. #content {
  388. width: 570px;
  389. background-color: none;
  390. padding: 20px 0;
  391. color: {color:Text};
  392. overflow: hidden;
  393. margin-top: 50px;
  394. margin-left: 400px;
  395. position: relative;
  396. }
  397.  
  398. #content a {
  399. color: {color:link};
  400. text-decoration: none;
  401. }
  402.  
  403. #content a:hover {
  404. color: {color:link hover};
  405. }
  406.  
  407. #content blockquote {
  408. border-left: solid 2px #505050;
  409. margin: 0;
  410. padding-left: 10px;
  411. }
  412.  
  413. img {
  414. border: 0;
  415. max-width: 100%;
  416. }
  417.  
  418.  
  419. #content #posts {
  420. {block:If500pxPosts}
  421. width: 500px;
  422. {/block:If500pxPosts}
  423. {block:IfNot500pxPosts}
  424. width: 400px;
  425. {/block:IfNot500pxPosts}
  426. height: auto;
  427. margin: 0 0 80px 0;
  428. padding: 20px 20px 0px 20px;
  429. font-size: 14px;
  430. position: relative;
  431. float: left;
  432. z-index: 100;
  433. background-color: {color:Posts};
  434. {block:IfShadow}
  435. box-shadow: 5px 10px 15px {color:Shadow};
  436. {/block:IfShadow}
  437. border-radius: 5px;
  438. }
  439.  
  440.  
  441.  
  442. #content #posts .title {
  443. font-size: 16px;
  444.  
  445. }
  446.  
  447. #content #posts .text {
  448. font-size: 12px;
  449.  
  450. }
  451.  
  452.  
  453. /* PERMALINK STUFF */
  454.  
  455. #permalink {
  456. font-size: 9px;
  457. margin-top: 2px;
  458. {block:If500pxPosts}
  459. width: 447px;
  460. {/block:If500pxPosts}
  461. {block:IfNot500pxPosts}
  462. width: 347px;
  463. {/block:IfNot500pxPosts}
  464. margin-left: 30px;
  465. min-height: 12px;
  466. line-height: auto;
  467. }
  468.  
  469.  
  470.  
  471. .no-tags {
  472. display: none;
  473. font-size:9px;
  474. {block:If500pxPosts}
  475. width: 500px;
  476. {/block:If500pxPosts}
  477. {block:IfNot500pxPosts}
  478. width: 400px;
  479. {/block:IfNot500pxPosts}
  480. text-align: center;
  481. margin-top: 10px;
  482. position: absolute;
  483. }
  484.  
  485. .no-tags .comma:last-child {
  486. display: none;
  487. }
  488.  
  489. .hover-tags {
  490. opacity: 0;
  491. font-size:9px;
  492. {block:If500pxPosts}
  493. width: 500px;
  494. {block:If500pxPosts}
  495. {block:IfNot500pxPosts}
  496. width: 400px;
  497. {/block:IfNot500pxPosts}
  498. text-align: center;
  499. margin-top: 10px;
  500. position: absolute;
  501. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  502. -o-transition: 0.5s ease;
  503. -moz-transition: 0.5s ease;
  504. }
  505.  
  506. .hover-tags .comma:last-child {
  507. display: none;
  508. }
  509.  
  510. #content #posts:hover .hover-tags {
  511. opacity: 1;
  512. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  513. -o-transition: 0.5s ease;
  514. -moz-transition: 0.5s ease;
  515. }
  516.  
  517. .fixed-tags {
  518. font-size:9px;
  519. {block:If500pxPosts}
  520. width: 500px;
  521. {/block:If500pxPosts}
  522. {block:IfNot500pxPosts}
  523. width: 400px;
  524. {/block:IfNot500pxPosts}
  525.  
  526. text-align: center;
  527. margin-top: 10px;
  528. position: absolute;
  529. }
  530.  
  531. .fixed-tags .comma:last-child {
  532. display: none;
  533. }
  534.  
  535.  
  536. #reblogged {
  537. position: relative;
  538. font-size: 9px;
  539. overflow: hidden;
  540. }
  541.  
  542.  
  543. /* PERMALINK PAGE THINGS */
  544.  
  545. #content #notecontainer {
  546. margin-left: 30px;
  547. margin-top: -10px;
  548. {block:If500pxPosts}
  549. width: 460px;
  550. {/block:If500pxPosts}
  551. {block:IfNot500pxPosts}
  552. width: 360px;
  553. {/block:IfNot500pxPosts}
  554. font-size: 11px;
  555. border-radius: 20px;
  556. }
  557.  
  558.  
  559. #content #notecontainer ol.notes {
  560. list-style-type: none;
  561. margin: 1px 1px 1px 1px;
  562. padding: 1px;
  563. line-height: 16px;
  564. }
  565.  
  566. #content #notecontainer img.avatar {
  567. width: 16px;
  568. height: 16px;
  569. margin: 1px 5px 1px 1px;
  570. padding: 1px;
  571. }
  572.  
  573. #content #posts #tagsbox {
  574. padding: 3px 0px 3px 0px;
  575. background-color: {color:Post insides};
  576. text-align: center;
  577. margin-top: -5px;
  578. margin-left: -10px;
  579. border-radius: 0px;
  580. {block:If500pxPosts}
  581. width: 520px;
  582. {/block:If500pxPosts}
  583. {block:IfNot500pxPosts}
  584. width: 420px;
  585. {/block:IfNot500pxPosts}
  586. margin-bottom: -5px;
  587. border-radius: 2px;
  588. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  589. -o-transition: 0.5s ease;
  590. -moz-transition: 0.5s ease;
  591. }
  592.  
  593. {block:IfHoverEffect}
  594. #tagsbox:hover {
  595. {block:If500pxPosts}
  596. box-shadow:inset 520px 0 0 0 {color:Sidebar background hover};
  597. {/block:If500pxPosts}
  598. {block:IfNot500pxPosts}
  599. box-shadow:inset 420px 0 0 0 {color:Sidebar background hover};
  600. {/block:IfNot500pxPosts}
  601. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  602. -o-transition: 0.5s ease;
  603. -moz-transition: 0.5s ease;
  604. }
  605. {/block:IfHoverEffect}
  606.  
  607.  
  608. /* POST STUFF */
  609.  
  610. .linkpost {
  611. padding-bottom: 10px;
  612. }
  613.  
  614.  
  615. .linktitle {
  616. margin-bottom: 3px;
  617. font-size: 20px;
  618. background-color: {color:Post insides};
  619. padding: 10px;
  620. text-align: center;
  621. border-radius: 2px;
  622. {block:If500pxPosts}
  623. width: 480px;
  624. {/block:If500pxPosts}
  625. {block:IfNot500pxPosts}
  626. width: 380px;
  627. {/block:IfNot500pxPosts}
  628. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  629. -o-transition: 0.5s ease;
  630. -moz-transition: 0.5s ease;
  631. }
  632.  
  633. .linktitle:hover {
  634. background-color: {color:Sidebar background hover};
  635. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  636. -o-transition: 0.5s ease;
  637. -moz-transition: 0.5s ease;
  638. }
  639.  
  640.  
  641.  
  642. .askicon img {
  643. z-index: 9;
  644. height: 40px;
  645. width: 40px;
  646. position: relative;
  647. border-radius: 2px;
  648. border: 5px solid {color:Question};
  649. }
  650.  
  651.  
  652. .askicon img{
  653. z-index: 9;
  654. width: 40px;
  655. border-radius: 2px;
  656. }
  657.  
  658.  
  659.  
  660. .arrow-left {
  661. width: 0;
  662. height: 0;
  663. border-top: 15px solid transparent;
  664. border-bottom: 15px solid transparent;
  665. border-right:25px solid {color:Question};
  666. position: relative;
  667. margin-left: 50px;
  668. margin-top: -47px;
  669. }
  670.  
  671.  
  672.  
  673. .question {
  674. {block:If500pxPosts}
  675. width: 403px;
  676. {/block:If500pxPosts}
  677. {block:IfNot500pxPosts}
  678. width: 303px;
  679. {/block:IfNot500pxPosts}
  680. height: auto;
  681. padding: 2px 10px 7px 10px;
  682. color: {color:Text color};
  683. background-color: {color:Question};
  684. font-size: 11.5px;
  685. text-align: left;
  686. margin-left: 74px;
  687. margin-top: -35px;
  688. margin-bottom: 15px;
  689. border-radius: 2px;
  690. }
  691.  
  692. .asker {
  693. font-size: 14px;
  694. color: {color:Links};
  695. text-align: left;
  696. margin-top: 5px;
  697. margin-bottom: 3px;
  698. }
  699.  
  700. .answerer {
  701. font-size: 14px;
  702. }
  703.  
  704. .answer {
  705. font-size: 11px;
  706. padding: 1px 10px 5px 10px;
  707. {block:If500pxPosts}
  708. width: 477px;
  709. {/block:If500pxPosts}
  710. {block:IfNot500pxPosts}
  711. width: 377px;
  712. {/block:IfNot500pxPosts}
  713. margin-top:-12px;
  714. overflow: hidden;
  715. border-radius:0px;
  716. text-align: left;
  717. }
  718.  
  719. .posttitle {
  720. font-size: 20px;
  721. background-color: {color:Post insides};
  722. text-align: center;
  723. margin-bottom: -15px;
  724. padding: 2px;
  725. border-radius: 2px;
  726. }
  727.  
  728. .textpost {
  729. font-size: 12px;
  730. }
  731.  
  732. .caption {
  733. font-size: 12px;
  734. padding: 5px;
  735. border-radius: 0px;
  736. }
  737.  
  738. .quote {
  739. {block:IfMoreFontOptions}
  740. font: 15px {font:Body font};
  741. {/block:IfMoreFontOptions}
  742. {block:IfNotMoreFontOptions}
  743. font-family: 'Times New Roman','Arial', sans-serif;
  744. font-size: 15px;
  745. {/block:IfNotMoreFontOptions}
  746. text-align: center;
  747. margin-bottom:10px;
  748. }
  749.  
  750. .quotesource {
  751. text-align: center;
  752. font-size: 11px;
  753. margin-top: 10px;
  754. margin-bottom: 10px;
  755. }
  756.  
  757.  
  758.  
  759. .audiopost {
  760. padding: 0 10px;
  761. {block:If500pxPosts}
  762. width: 477px;
  763. {/block:If500pxPosts}
  764. {block:IfNot500pxPosts}
  765. width: 377px;
  766. {/block:IfNot500pxPosts}
  767. font-size: 12px;
  768. margin-top: -20px;
  769. border-radius: 2px;
  770. }
  771.  
  772. .player {
  773. position: absolute;
  774. float: left;
  775. width: 30px;
  776. height: 30px;
  777. overflow: hidden;
  778. margin-left: 20px;
  779. border-radius: 0px;
  780. }
  781.  
  782. .audio {
  783. background-color: {color:Post insides};
  784. text-align: center;
  785. padding: 5px 10px;
  786. {block:If500pxPosts}
  787. width: 420px;
  788. {/block:If500pxPosts}
  789. {block:IfNot500pxPosts}
  790. width: 320px;
  791. {/block:IfNot500pxPosts}
  792. font-size: 15px;
  793. margin-bottom: 7px;
  794. margin-left: 48px;
  795. position: relative;
  796. float: right;
  797. border-radius: 2px;
  798. }
  799.  
  800. .chat {
  801. font-size: 12px;
  802. margin-bottom: 20px;
  803. }
  804.  
  805. .chattitle {
  806. font-size: 20px;
  807. background-color: {color:Post insides};
  808. text-align: center;
  809. margin-bottom: 10px;
  810. padding: 2px;
  811. border-radius: 2px;
  812. {block:If500pxPosts}
  813. width: 496px;
  814. {/block:If500pxPosts}
  815. {block:IfNot500pxPosts}
  816. width: 396px;
  817. {/block:IfNot500pxPosts}
  818. }
  819.  
  820. .chatbubble {
  821. width: 5px;
  822. height: 5px;
  823. background-color: {color:Sidebar background hover};
  824. margin-left: 13px;
  825. margin-right: 5px;
  826. float: left;
  827. position: relative;
  828. margin-top: 6px;
  829. border-radius: 0px;
  830. }
  831.  
  832. .tumblrbutton {
  833. float: right;
  834. display: inline-block;
  835. margin-top: -13px;
  836. }
  837.  
  838. #likebutton {
  839. margin-left: 5px;
  840. margin-top: -14px;
  841. margin-right: 10px;
  842. }
  843.  
  844.  
  845. /* PLEASE DO NOT REMOVE THE CREDIT OR MOVE IT */
  846.  
  847. #credit {
  848. bottom: 8px;
  849. right: 8px;
  850. border: 1px solid #BABABA;
  851. font-size: 10px;
  852. color: #5A5A5A;
  853. height: 12px;
  854. width: 12px;
  855. line-height: 12px;
  856. position: fixed;
  857. text-align: center;
  858. background-color:white;
  859. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  860. -o-transition: 0.5s ease;
  861. -moz-transition: 0.5s ease;
  862. }
  863.  
  864. #credit:hover {
  865. background-color: #2E2E2E;
  866. color: #fff;
  867. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  868. -o-transition: 0.5s ease;
  869. -moz-transition: 0.5s ease;
  870. }
  871.  
  872.  
  873. </style>
  874.  
  875.  
  876. </head>
  877.  
  878.  
  879. <body>
  880.  
  881.  
  882.  
  883.  
  884. <div id="sidebar">
  885.  
  886.  
  887. {block:ShowTitle}<div id="title" class="{select:Special font}"><a href="/">{Title}</a></div>{/block:ShowTitle}
  888.  
  889. <div id="sblinks">
  890. {block:IfLink1Text}
  891. <a href="{text:Link 1 url}"><div class="sblink">{text:Link 1 text}</div></a>
  892. {/block:IfLink1Text}
  893.  
  894. {block:IfLink2Text}
  895. <a href="{text:Link 2 url}"><div class="sblink">{text:Link 2 text}</div></a>
  896. {/block:IfLink2Text}
  897.  
  898. {block:IfLink3Text}
  899. <a href="{text:Link 3 url}"><div class="sblink">{text:Link 3 text}</div></a>
  900. {/block:IfLink3Text}
  901.  
  902. {block:IfLink4Text}
  903. <a href="{text:Link 4 url}"><div class="sblink">{text:Link 4 text}</div></a>
  904. {/block:IfLink4Text}
  905.  
  906. {block:IfLink5Text}
  907. <a href="{text:Link 5 url}"><div class="sblink">{text:Link 5 text}</div></a>
  908. {/block:IfLink5Text}
  909.  
  910. {block:IfLink6Text}
  911. <a href="{text:Link 6 url}"><div class="sblink">{text:Link 6 text}</div></a>
  912. {/block:IfLink6Text}
  913.  
  914. {block:IfLink7Text}
  915. <a href="{text:Link 7 url}"><div class="sblink">{text:Link 7 text}</div></a>
  916. {/block:IfLink7Text}
  917.  
  918. {block:IfLink8Text}
  919. <a href="{text:Link 8 url}"><div class="sblink">{text:Link 8 text}</div></a>
  920. {/block:IfLink8Text}
  921.  
  922. {block:IfLink9Text}
  923. <a href="{text:Link 9 url}"><div class="sblink">{text:Link 9 text}</div></a>
  924. {/block:IfLink9Text}
  925.  
  926. {block:IfLink10Text}
  927. <a href="{text:Link 10 url}"><div class="sblink">{text:Link 10 text}</div></a>
  928. {/block:IfLink10Text}
  929.  
  930.  
  931. {block:IfNotInfiniteScroll}
  932. {block:PreviousPage}
  933. <a href="{PreviousPage}"><div class="prevpage"></div></a>
  934. {/block:PreviousPage}
  935. {/block:IfNotInfiniteScroll}
  936.  
  937. {block:IfNotInfiniteScroll}
  938. {block:NextPage}
  939. <a href="{NextPage}"><div class="nextpage"></div></a>
  940. {/block:NextPage}
  941. {/block:IfNotInfiniteScroll}
  942.  
  943. </div>
  944.  
  945. {block:ShowDescription}<div id="desc">{Description}</div>{/block:ShowDescription}
  946.  
  947. </div>
  948.  
  949.  
  950.  
  951.  
  952.  
  953.  
  954. <!-- boring post stuff - you don't really need to edit there I'd say -->
  955.  
  956. <div id="content">
  957. <div class = "autopagerize_page_element" >
  958. {block:Posts}
  959.  
  960. <div id="posts">
  961.  
  962. {block:ContentSource}
  963. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  964. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  965. {/block:SourceLogo}
  966. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  967. {/block:ContentSource}
  968.  
  969.  
  970. {block:If500pxPosts}
  971. {block:Photo}
  972. {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
  973. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  974. {/block:Photo}
  975.  
  976. {block:Photoset}
  977. {Photoset-500}
  978. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  979. {/block:Photoset}
  980.  
  981. {block:Video}
  982. {Video-500}
  983. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  984. {/block:Video}
  985. {/block:If500pxPosts}
  986.  
  987. {block:IfNot500pxPosts}
  988. {block:Photo}
  989. {LinkOpenTag}<img src="{PhotoURL-400}" />{LinkCloseTag}
  990. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  991. {/block:Photo}
  992.  
  993. {block:Photoset}
  994. {Photoset-400}
  995. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  996. {/block:Photoset}
  997.  
  998. {block:Video}
  999. {Video-400}
  1000. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1001. {/block:Video}
  1002. {/block:IfNot500pxPosts}
  1003.  
  1004. {block:Audio}
  1005. <div class="audio {select:Special font}">
  1006. {block:TrackName}
  1007. {TrackName}
  1008. {/block:TrackName}
  1009. {block:Artist}
  1010. &middot;&middot;&middot;
  1011. {Artist}
  1012. {/block:Artist}
  1013. </div>
  1014. <div class="player">
  1015. {AudioPlayerWhite}
  1016. </div>
  1017. {block:Caption}<br /><div class="audiopost">{Caption}</div>{/block:Caption}
  1018. {/block:Audio}
  1019.  
  1020. {block:Quote}
  1021. <div class="quote">“{Quote}”</div>
  1022. {block:Source}<div class="quotesource">&middot;&middot;&middot; {Source}</div>{/block:Source}
  1023. {/block:Quote}
  1024.  
  1025. {block:Text}
  1026. {block:Title}<div class="posttitle {select:Special font}">{Title}</div><br/>{/block:Title}<div class="textpost">{Body}</div>
  1027. {/block:Text}
  1028.  
  1029. {block:Answer}
  1030. <div class="askicon"><img src="{AskerPortraitURL-64}" /></div><div class="arrow-left"></div>
  1031. <div class="question"><div class="asker {select:Special font}">{Asker}:</div>{Question}</div>
  1032. <div class="answer">{block:Answerer}<div class="answerer {select:Special font}">{Answerer}:</div>{/block:Answerer}<div class="answerer-answer">{Answer}</div></div>
  1033. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1034. {/block:Answer}
  1035. {block:Reblog}<div class="caption">{Replies}</div>{/block:Reblog}
  1036.  
  1037. {block:Chat}
  1038. <div class="chat">
  1039. {block:Title}<div class="chattitle {select:Special font}">{Title}</div>{/block:Title}
  1040. {block:Lines}
  1041. {block:Label}<div class="chatbubble"></div><strong>{Label}</strong>{/block:Label} {Line}<br />
  1042. {/block:Lines}
  1043. </div>
  1044. {/block:Chat}
  1045.  
  1046. {block:Link}
  1047. <div class="linkpost">
  1048. <a href="{URL}" ><div class="linktitle {select:Special font}">{Name}</div></a>
  1049. {block:Description}<div class="caption">{Description}</div>{/block:Description}</div>
  1050. {/block:Link}
  1051.  
  1052.  
  1053.  
  1054. <div id="tagsbox">
  1055. <div id="permalink">
  1056. <a href="{Permalink}">
  1057. {block:Date}{Year}-{MonthNumber}-{DayOfMonth} | {12Hour}:{Minutes}{AmPm}{/block:Date}
  1058. {block:NoteCount}&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;{NoteCount} notes{/block:NoteCount}</a>
  1059. {block:RebloggedFrom}&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;<a href="{ReblogParentURL}">via</a> &nbsp;&middot;&nbsp;
  1060. <a href="{ReblogRootURL}">&copy;</a>
  1061. {/block:RebloggedFrom}
  1062.  
  1063. </div>
  1064.  
  1065. {block:IfNotWhiteTumblrButtons}
  1066. <div class="tumblrbutton" id="likebutton">{LikeButton color="black" size="13"}</div>
  1067. <div class="tumblrbutton">{ReblogButton color="black" size="13"}</div>
  1068. {/block:IfNotWhiteTumblrButtons}
  1069. {block:IfWhiteTumblrButtons}
  1070. <div class="tumblrbutton" id="likebutton">{LikeButton color="white" size="13"}</div>
  1071. <div class="tumblrbutton">{ReblogButton color="white" size="13"}</div>
  1072. {/block:IfWhiteTumblrButtons}
  1073. </div>
  1074.  
  1075. {block:IndexPage}
  1076.  
  1077. {block:HasTags}<div class="content {select:Index tags}">
  1078. {block:Tags}
  1079. <a href="{TagURL}">{Tag}</a><span class="comma"> &nbsp;&middot;&nbsp; </span>
  1080. {/block:Tags}
  1081. </div>
  1082. {/block:HasTags}
  1083.  
  1084. {/block:IndexPage}
  1085.  
  1086. {block:PermalinkPage}
  1087.  
  1088. {block:HasTags}<div class="content {select:Perma tags}">
  1089. {block:Tags}
  1090. <a href="{TagURL}">{Tag}</a><span class="comma"> &nbsp;&middot;&nbsp; </span>
  1091. {/block:Tags}
  1092. </div>
  1093. {/block:HasTags}
  1094.  
  1095. {/block:PermalinkPage}
  1096.  
  1097.  
  1098. </div> <!-- posts div -->
  1099.  
  1100.  
  1101. {block:PermalinkPage}
  1102.  
  1103. {block:PostNotes}
  1104. <div id="notecontainer">{PostNotes}</div>
  1105. {/block:PostNotes}
  1106.  
  1107. {/block:PermalinkPage}
  1108.  
  1109. {/block:Posts}
  1110. </div>
  1111. </div> <!-- content div-->
  1112.  
  1113.  
  1114.  
  1115. <!-- credit, please do not remove! -->
  1116. <a href="http://spirkthemes.tumblr.com"><div id="credit">P</div></a>
  1117.  
  1118.  
  1119. <script type="text/javascript" src="jquery.easing.1.3.js"></script>
  1120.  
  1121.  
  1122.  
  1123.  
  1124.  
  1125. </body>
  1126.  
  1127.  
  1128. </html>
Advertisement
Add Comment
Please, Sign In to add comment