API tools faq
paste
spirkism

Theme #8: Behind Bars

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