spirkism

Theme #19: Stripes

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