API tools faq
paste
spirkism

Theme #17a: Spring City

spirkism
Feb 7th, 2015
496
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.68 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. THEME: SPRING CITY
  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. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  29.  
  30. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  31.  
  32.  
  33.  
  34. <link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
  35.  
  36.  
  37.  
  38.  
  39.  
  40. <meta name="color:background" content="#ffffff" />
  41. <meta name="color:text" content="#2E2E2E" />
  42. <meta name="color:links" content="#220146" />
  43. <meta name="color:linkshover" content="#5104A4" />
  44. <meta name="color:desc" content="#fff" />
  45. <meta name="color:desctext" content="#000" />
  46. <meta name="color:border" content="#E6E6E6" />
  47. <meta name="color:caption" content="7A1BDF" />
  48. <meta name="color:linkpost" content="#ffffff" />
  49. <meta name="color:postinside" content="#DADADA" />
  50. <meta name="color:header" content="#D4D4D4" />
  51. <meta name="color:color1" content="#AEFF7E" />
  52. <meta name="color:color2" content="#61ABFF" />
  53. <meta name="color:color3" content="#FFED61" />
  54. <meta name="color:color4" content="#FF7C61" />
  55.  
  56.  
  57. <meta name="text:sblink1url" content="/" />
  58. <meta name="text:sblink1text" content="link" />
  59. <meta name="text:sblink2url" content="/" />
  60. <meta name="text:sblink2text" content="link" />
  61. <meta name="text:sblink3url" content="/" />
  62. <meta name="text:sblink3text" content="link" />
  63. <meta name="text:sblink4url" content="/" />
  64. <meta name="text:sblink4text" content="link" />
  65. <meta name="text:sblink5url" content="/" />
  66. <meta name="text:sblink5text" content="link" />
  67. <meta name="text:sblink6url" content="/" />
  68. <meta name="text:sblink6text" content="link" />
  69. <meta name="text:sblink7url" content="/" />
  70. <meta name="text:sblink7text" content="link" />
  71. <meta name="text:sblink8url" content="/" />
  72. <meta name="text:sblink8text" content="link" />
  73.  
  74. <meta name="if:SidebarBottom" content="0" />
  75.  
  76. <style type="text/css">
  77.  
  78.  
  79. ::-webkit-scrollbar-thumb{
  80. background-color: {color:color3};
  81. height:auto;
  82. width: 10px;
  83. z-index: 9999999999999999999999999999999999999;
  84. }
  85.  
  86. ::-webkit-scrollbar {
  87. height:auto;
  88. width:10px;
  89. background-color:{color:header};
  90. z-index: 999999999999999999999999999999999999;
  91. }
  92.  
  93. iframe#tumblr_controls {
  94. position:fixed;-webkit-filter:invert(100%);opacity:0.5;
  95. -webkit-transition: 0.7s ease;transition: 0.7s ease;
  96. -o-transition: 0.7s ease;-moz-transition: 0.7s ease;}
  97.  
  98.  
  99. div#qTip {
  100. text-transform: lowercase;
  101. font-size: 18px;
  102. font-family: 'Amatic SC', sans-serif;
  103. line-height: 18px;
  104. display: none;
  105. text-align: center;
  106. position: absolute;
  107. z-index: 999999999999999999999999999999999999999999999999999999;
  108. background-color: {color:color2};
  109. padding: 3px;
  110. color: {color:background};
  111. max-width: 200px;
  112. height: auto;
  113. border: 1px solid {color:text};
  114. -webkit-transition: all 0.1s ease-out;
  115. -moz-transition: all 0.1s ease-out;
  116. -o-transition: all 0.1s ease-out;
  117. }
  118.  
  119.  
  120. body {
  121. background-color: {color:background};
  122. margin: 0 auto;
  123. font-family: 'Calibri', sans-serif;
  124. word-wrap:break-word;
  125. }
  126.  
  127. a:link, a:active, a:visited {
  128. text-decoration: none;
  129. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  130. -o-transition: 0.5s ease;
  131. -moz-transition: 0.5s ease;
  132. color:{color:links};
  133. }
  134.  
  135. a:hover {
  136. color:{color:linkshover};
  137. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  138. -o-transition: 0.5s ease;
  139. -moz-transition: 0.5s ease;
  140. }
  141.  
  142.  
  143. :focus, :active {
  144. outline: 0;
  145. }
  146.  
  147.  
  148. /* TITLE */
  149. #title {
  150. width: 100%;
  151. height: 30px;
  152. background-color: {color:header};
  153. position: fixed;
  154. top: 0;
  155. z-index: 999999;
  156. text-align: center;
  157. line-height: 30px;
  158. font-family: 'Amatic SC', sans-serif;
  159. font-size: 20px;
  160. }
  161.  
  162.  
  163.  
  164.  
  165. /* SIDEBAR */
  166.  
  167. .sbblock p {
  168. color: {color:text};
  169. font-family: 'Amatic SC', sans-serif;
  170. font-size: 25px;
  171. -ms-transform: rotate(-90deg);
  172. -webkit-transform: rotate(-90deg);
  173. transform: rotate(-90deg);
  174. }
  175.  
  176. /*SIDEBAR LEFT */
  177.  
  178. {block:IfSidebarBottom}
  179.  
  180. /* PAGINATION */
  181.  
  182. #prevpage {
  183. width: 20px;
  184. background-color: {color:header};
  185. position: fixed;
  186. top: 40px;
  187. left: 310px;
  188. font-family: 'Calibri', sans-serif;
  189. font-size: 10px;
  190. padding: 5px;
  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. #prevpage:hover {
  197. background-color: {color:color1};
  198. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  199. -o-transition: 0.5s ease;
  200. -moz-transition: 0.5s ease;
  201. }
  202.  
  203. #nextpage {
  204. width: 20px;
  205. background-color: {color:header};
  206. position: fixed;
  207. top: 40px;
  208. left: 880px;
  209. font-family: 'Calibri', sans-serif;
  210. font-size: 10px;
  211. padding: 5px;
  212. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  213. -o-transition: 0.5s ease;
  214. -moz-transition: 0.5s ease;
  215. }
  216.  
  217. #nextpage:hover {
  218. background-color: {color:color1};
  219. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  220. -o-transition: 0.5s ease;
  221. -moz-transition: 0.5s ease;
  222. }
  223.  
  224. #sidebar-left {
  225. position: fixed;
  226. bottom: 0;
  227. left: 0;
  228. }
  229.  
  230. #sb-left-block-1 {
  231. width: 80px;
  232. height: 225px;
  233. background-color: {color:color1};
  234. position: absolute;
  235. bottom: 0;
  236. left: 0;
  237. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  238. -o-transition: 0.5s ease;
  239. -moz-transition: 0.5s ease;
  240. }
  241.  
  242.  
  243. #sb-left-block-1:hover {
  244. height: 250px;
  245. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  246. -o-transition: 0.5s ease;
  247. -moz-transition: 0.5s ease;
  248. }
  249.  
  250. #sb-left-block-2 {
  251. width: 80px;
  252. height: 175px;
  253. background-color: {color:color2};
  254. position: absolute;
  255. bottom: 0;
  256. left: 80px;
  257. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  258. -o-transition: 0.5s ease;
  259. -moz-transition: 0.5s ease;
  260. }
  261.  
  262. #sb-left-block-2:hover {
  263. height: 200px;
  264. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  265. -o-transition: 0.5s ease;
  266. -moz-transition: 0.5s ease;
  267. }
  268.  
  269. #sb-left-block-3 {
  270. width: 80px;
  271. height: 200px;
  272. background-color: {color:color3};
  273. position: absolute;
  274. bottom: 0;
  275. left: 160px;
  276. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  277. -o-transition: 0.5s ease;
  278. -moz-transition: 0.5s ease;
  279. }
  280.  
  281. #sb-left-block-3:hover {
  282. height: 225px;
  283. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  284. -o-transition: 0.5s ease;
  285. -moz-transition: 0.5s ease;
  286. }
  287.  
  288. #sb-left-block-4 {
  289. width: 80px;
  290. height: 150px;
  291. background-color: {color:color4};
  292. position: absolute;
  293. bottom: 0;
  294. left: 240px;
  295. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  296. -o-transition: 0.5s ease;
  297. -moz-transition: 0.5s ease;
  298. }
  299.  
  300. #sb-left-block-4:hover {
  301. height: 175px;
  302. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  303. -o-transition: 0.5s ease;
  304. -moz-transition: 0.5s ease;
  305. }
  306.  
  307. /*SIDEBAR RIGHT */
  308.  
  309. #sidebar-right {
  310. position: fixed;
  311. bottom: 0;
  312. left: 900px;
  313. }
  314.  
  315. #sb-right-block-1 {
  316. width: 80px;
  317. height: 200px;
  318. background-color: {color:color3};
  319. position: absolute;
  320. bottom: 0;
  321. left: 0px;
  322. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  323. -o-transition: 0.5s ease;
  324. -moz-transition: 0.5s ease;
  325. }
  326.  
  327. #sb-right-block-1:hover {
  328. height: 225px;
  329. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  330. -o-transition: 0.5s ease;
  331. -moz-transition: 0.5s ease;
  332. }
  333.  
  334. #sb-right-block-2 {
  335. width: 80px;
  336. height: 150px;
  337. background-color: {color:color4};
  338. position: absolute;
  339. bottom: 0;
  340. left: 80px;
  341. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  342. -o-transition: 0.5s ease;
  343. -moz-transition: 0.5s ease;
  344. }
  345.  
  346. #sb-right-block-2:hover {
  347. height: 175px;
  348. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  349. -o-transition: 0.5s ease;
  350. -moz-transition: 0.5s ease;
  351. }
  352.  
  353. #sb-right-block-3 {
  354. width: 80px;
  355. height: 225px;
  356. background-color: {color:color1};
  357. position: absolute;
  358. bottom: 0;
  359. left: 160px;
  360. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  361. -o-transition: 0.5s ease;
  362. -moz-transition: 0.5s ease;
  363. }
  364.  
  365. #sb-right-block-3:hover {
  366. height: 250px;
  367. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  368. -o-transition: 0.5s ease;
  369. -moz-transition: 0.5s ease;
  370. }
  371.  
  372. #sb-right-block-4 {
  373. width: 80px;
  374. height: 175px;
  375. background-color: {color:color2};
  376. position: absolute;
  377. bottom: 0;
  378. left: 240px;
  379. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  380. -o-transition: 0.5s ease;
  381. -moz-transition: 0.5s ease;
  382. }
  383.  
  384. #sb-right-block-4:hover {
  385. height: 200px;
  386. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  387. -o-transition: 0.5s ease;
  388. -moz-transition: 0.5s ease;
  389. }
  390.  
  391. {/block:IfSidebarBottom}
  392.  
  393.  
  394. {block:IfNotSidebarBottom}
  395.  
  396. /* PAGINATION */
  397.  
  398. #prevpage {
  399. width: 20px;
  400. background-color: {color:header};
  401. position: fixed;
  402. bottom: 10px;
  403. left: 310px;
  404. font-family: 'Calibri', sans-serif;
  405. font-size: 10px;
  406. padding: 5px;
  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. #prevpage:hover {
  413. background-color: {color:color1};
  414. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  415. -o-transition: 0.5s ease;
  416. -moz-transition: 0.5s ease;
  417. }
  418.  
  419. #nextpage {
  420. width: 20px;
  421. background-color: {color:header};
  422. position: fixed;
  423. bottom: 10px;
  424. left: 880px;
  425. font-family: 'Calibri', sans-serif;
  426. font-size: 10px;
  427. padding: 5px;
  428. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  429. -o-transition: 0.5s ease;
  430. -moz-transition: 0.5s ease;
  431. }
  432.  
  433. #nextpage:hover {
  434. background-color: {color:color1};
  435. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  436. -o-transition: 0.5s ease;
  437. -moz-transition: 0.5s ease;
  438. }
  439.  
  440. #sidebar-left {
  441. position: fixed;
  442. top: 30;
  443. left: 0;
  444. }
  445.  
  446. #sb-left-block-1 {
  447. width: 80px;
  448. height: 225px;
  449. background-color: {color:color1};
  450. position: absolute;
  451. top: 30px;
  452. left: 0;
  453. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  454. -o-transition: 0.5s ease;
  455. -moz-transition: 0.5s ease;
  456. }
  457.  
  458.  
  459. #sb-left-block-1:hover {
  460. height: 250px;
  461. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  462. -o-transition: 0.5s ease;
  463. -moz-transition: 0.5s ease;
  464. }
  465.  
  466. #sb-left-block-1 p {
  467. max-width: 150px;
  468. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  469. -o-transition: 0.5s ease;
  470. -moz-transition: 0.5s ease;
  471. }
  472.  
  473. #sb-left-block-1:hover p {
  474. margin-top: 40px;
  475. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  476. -o-transition: 0.5s ease;
  477. -moz-transition: 0.5s ease;
  478. }
  479.  
  480. #sb-left-block-2 {
  481. width: 80px;
  482. height: 175px;
  483. background-color: {color:color2};
  484. position: absolute;
  485. top: 30px;
  486. left: 80px;
  487. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  488. -o-transition: 0.5s ease;
  489. -moz-transition: 0.5s ease;
  490. }
  491.  
  492. #sb-left-block-2:hover {
  493. height: 200px;
  494. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  495. -o-transition: 0.5s ease;
  496. -moz-transition: 0.5s ease;
  497. }
  498.  
  499. #sb-left-block-2 p {
  500. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  501. -o-transition: 0.5s ease;
  502. -moz-transition: 0.5s ease;
  503. }
  504.  
  505. #sb-left-block-2:hover p {
  506. margin-top: 40px;
  507. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  508. -o-transition: 0.5s ease;
  509. -moz-transition: 0.5s ease;
  510. }
  511.  
  512. #sb-left-block-3 {
  513. width: 80px;
  514. height: 200px;
  515. background-color: {color:color3};
  516. position: absolute;
  517. top: 30px;
  518. left: 160px;
  519. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  520. -o-transition: 0.5s ease;
  521. -moz-transition: 0.5s ease;
  522. }
  523.  
  524. #sb-left-block-3:hover {
  525. height: 225px;
  526. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  527. -o-transition: 0.5s ease;
  528. -moz-transition: 0.5s ease;
  529. }
  530.  
  531. #sb-left-block-3 p {
  532. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  533. -o-transition: 0.5s ease;
  534. -moz-transition: 0.5s ease;
  535. }
  536.  
  537. #sb-left-block-3:hover p {
  538. margin-top: 40px;
  539. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  540. -o-transition: 0.5s ease;
  541. -moz-transition: 0.5s ease;
  542. }
  543.  
  544. #sb-left-block-4 {
  545. width: 80px;
  546. height: 150px;
  547. background-color: {color:color4};
  548. position: absolute;
  549. top: 30px;
  550. left: 240px;
  551. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  552. -o-transition: 0.5s ease;
  553. -moz-transition: 0.5s ease;
  554. }
  555.  
  556. #sb-left-block-4:hover {
  557. height: 175px;
  558. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  559. -o-transition: 0.5s ease;
  560. -moz-transition: 0.5s ease;
  561. }
  562.  
  563. #sb-left-block-4 p {
  564. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  565. -o-transition: 0.5s ease;
  566. -moz-transition: 0.5s ease;
  567. }
  568.  
  569. #sb-left-block-4:hover p {
  570. margin-top: 40px;
  571. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  572. -o-transition: 0.5s ease;
  573. -moz-transition: 0.5s ease;
  574. }
  575.  
  576. /*SIDEBAR RIGHT */
  577.  
  578. #sidebar-right {
  579. position: fixed;
  580. top: 0;
  581. left: 900px;
  582. }
  583.  
  584. #sb-right-block-1 {
  585. width: 80px;
  586. height: 200px;
  587. background-color: {color:color3};
  588. position: absolute;
  589. top: 30px;
  590. left: 0px;
  591. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  592. -o-transition: 0.5s ease;
  593. -moz-transition: 0.5s ease;
  594. }
  595.  
  596. #sb-right-block-1:hover {
  597. height: 225px;
  598. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  599. -o-transition: 0.5s ease;
  600. -moz-transition: 0.5s ease;
  601. }
  602.  
  603. #sb-right-block-1 p {
  604. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  605. -o-transition: 0.5s ease;
  606. -moz-transition: 0.5s ease;
  607. }
  608.  
  609. #sb-right-block-1:hover p {
  610. margin-top: 40px;
  611. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  612. -o-transition: 0.5s ease;
  613. -moz-transition: 0.5s ease;
  614. }
  615.  
  616. #sb-right-block-2 {
  617. width: 80px;
  618. height: 150px;
  619. background-color: {color:color4};
  620. position: absolute;
  621. top: 30px;
  622. left: 80px;
  623. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  624. -o-transition: 0.5s ease;
  625. -moz-transition: 0.5s ease;
  626. }
  627.  
  628. #sb-right-block-2:hover {
  629. height: 175px;
  630. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  631. -o-transition: 0.5s ease;
  632. -moz-transition: 0.5s ease;
  633. }
  634.  
  635. #sb-right-block-2 p {
  636. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  637. -o-transition: 0.5s ease;
  638. -moz-transition: 0.5s ease;
  639. }
  640.  
  641. #sb-right-block-2:hover p {
  642. margin-top: 40px;
  643. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  644. -o-transition: 0.5s ease;
  645. -moz-transition: 0.5s ease;
  646. }
  647.  
  648. #sb-right-block-3 {
  649. width: 80px;
  650. height: 225px;
  651. background-color: {color:color1};
  652. position: absolute;
  653. top: 30px;
  654. left: 160px;
  655. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  656. -o-transition: 0.5s ease;
  657. -moz-transition: 0.5s ease;
  658. }
  659.  
  660. #sb-right-block-3:hover {
  661. height: 250px;
  662. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  663. -o-transition: 0.5s ease;
  664. -moz-transition: 0.5s ease;
  665. }
  666.  
  667. #sb-right-block-3 p {
  668. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  669. -o-transition: 0.5s ease;
  670. -moz-transition: 0.5s ease;
  671. }
  672.  
  673. #sb-right-block-3:hover p {
  674. margin-top: 40px;
  675. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  676. -o-transition: 0.5s ease;
  677. -moz-transition: 0.5s ease;
  678. }
  679.  
  680. #sb-right-block-4 {
  681. width: 80px;
  682. height: 175px;
  683. background-color: {color:color2};
  684. position: absolute;
  685. top: 30px;
  686. left: 240px;
  687. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  688. -o-transition: 0.5s ease;
  689. -moz-transition: 0.5s ease;
  690. }
  691.  
  692. #sb-right-block-4:hover {
  693. height: 200px;
  694. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  695. -o-transition: 0.5s ease;
  696. -moz-transition: 0.5s ease;
  697. }
  698.  
  699. #sb-right-block-4 p {
  700. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  701. -o-transition: 0.5s ease;
  702. -moz-transition: 0.5s ease;
  703. }
  704.  
  705. #sb-right-block-4:hover p {
  706. margin-top: 40px;
  707. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  708. -o-transition: 0.5s ease;
  709. -moz-transition: 0.5s ease;
  710. }
  711.  
  712. {/block:IfNotSidebarBottom}
  713.  
  714. /*CONTENT THINGS */
  715.  
  716. #content {
  717. width: 520px;
  718. background-color: none;
  719. padding: 20px 0;
  720. color: {color:text};
  721. overflow: hidden;
  722. margin-left: 350px;
  723. top: 20px;
  724. position: relative;
  725. }
  726.  
  727. #content a {
  728. color: {color:link color};
  729. text-decoration: none;
  730. }
  731.  
  732. #content a:hover {
  733. color: {color:link hover color};
  734. }
  735.  
  736. #content blockquote {
  737. border-left: solid 2px #505050;
  738. margin: 0;
  739. padding-left: 10px;
  740. }
  741.  
  742. img {
  743. border: 0;
  744. max-width: 100%;
  745. }
  746.  
  747.  
  748. #content #posts {
  749. width: 500px;
  750. height: auto;
  751. margin: 0 0 80px 0;
  752. padding: 10px 10px 5px 10px;
  753. font-size: 14px;
  754. position: relative;
  755. float: left;
  756. z-index: 100;
  757. border-bottom: 5px solid {color:border};
  758. }
  759.  
  760.  
  761. #content #posts .title {
  762. font-size: 16px;
  763.  
  764. }
  765.  
  766. #content #posts .text {
  767. font-size: 12px;
  768.  
  769. }
  770.  
  771.  
  772. /* PERMALINK STUFF */
  773.  
  774.  
  775.  
  776. .permlink {
  777. position: absolute;
  778. width: 20px;
  779. float: right;
  780. margin-top: 10px;
  781. margin-right: 10px;
  782. }
  783.  
  784.  
  785. #perm {
  786. position: relative;
  787. height: 20px;
  788. background-color: {color:color1};
  789. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  790. -o-transition: 0.5s ease;
  791. -moz-transition: 0.5s ease;
  792. }
  793.  
  794. #perm:hover {
  795. height: 30px;
  796. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  797. -o-transition: 0.5s ease;
  798. -moz-transition: 0.5s ease;
  799. }
  800.  
  801. #via {
  802. position: relative;
  803. height: 30px;
  804. background-color: {color:color4};
  805. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  806. -o-transition: 0.5s ease;
  807. -moz-transition: 0.5s ease;
  808. }
  809.  
  810. #via:hover {
  811. height: 40px;
  812. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  813. -o-transition: 0.5s ease;
  814. -moz-transition: 0.5s ease;
  815. }
  816.  
  817. #origin {
  818. position: relative;
  819. height: 25px;
  820. background-color: {color:color3};
  821. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  822. -o-transition: 0.5s ease;
  823. -moz-transition: 0.5s ease;
  824. }
  825.  
  826. #origin:hover {
  827. height: 35px;
  828. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  829. -o-transition: 0.5s ease;
  830. -moz-transition: 0.5s ease;
  831. }
  832.  
  833. #reblog {
  834. position: relative;
  835. height: 45px;
  836. background-color: {color:color2};
  837. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  838. -o-transition: 0.5s ease;
  839. -moz-transition: 0.5s ease;
  840. }
  841.  
  842. #reblog:hover {
  843. height: 55px;
  844. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  845. -o-transition: 0.5s ease;
  846. -moz-transition: 0.5s ease;
  847. }
  848.  
  849.  
  850. #posts:hover #tags {
  851. opacity: 1;
  852. }
  853.  
  854. #tags {
  855. font-size:9px;
  856. width: 380px;
  857. margin-top: 13px;
  858. position: absolute;
  859. opacity: 0;
  860. margin-left: 120px;
  861. -webkit-transition: 0.7s ease;transition: 0.7s ease;
  862. -o-transition: 0.7s ease;
  863. -moz-transition: 0.7s ease;
  864. }
  865.  
  866. #tags .comma:last-child {
  867. display: none;
  868. }
  869.  
  870.  
  871. #reblogged {
  872. position: relative;
  873. font-size: 9px;
  874. overflow: hidden;
  875. border-radius: 20px;
  876. }
  877.  
  878.  
  879. /* PERMALINK PAGE THINGS */
  880.  
  881. #content #notecontainer {
  882. margin-left: 30px;
  883. margin-top: -10px;
  884. width: 460px;
  885. font-size: 11px;
  886. border-radius: 20px;
  887. }
  888.  
  889.  
  890. #content #notecontainer ol.notes {
  891. list-style-type: none;
  892. margin: 1px 1px 1px 1px;
  893. padding: 1px;
  894. line-height: 16px;
  895. }
  896.  
  897. #content #notecontainer img.avatar {
  898. width: 16px;
  899. height: 16px;
  900. margin: 1px 5px 1px 1px;
  901. padding: 1px;
  902. }
  903.  
  904. #content #posts #tagsbox {
  905. position: absolute;
  906. background-color: transparent;
  907. }
  908.  
  909.  
  910. /* POST STUFF */
  911.  
  912. .linkpost {
  913. padding: 5px;
  914. }
  915.  
  916.  
  917. .linktitle {
  918. margin-bottom: 3px;
  919. font-size: 25px;
  920. background-color: {color:postinside};
  921. padding: 10px;
  922. text-align: center;
  923. font-family: 'Amatic SC', sans-serif;
  924. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  925. -o-transition: 0.5s ease;
  926. -moz-transition: 0.5s ease;
  927. }
  928.  
  929. .linktitle:hover {
  930. background-color: {color:color3};
  931. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  932. -o-transition: 0.5s ease;
  933. -moz-transition: 0.5s ease;
  934. }
  935.  
  936.  
  937.  
  938. .askicon img {
  939. z-index: 9;
  940. height: 40px;
  941. width: 40px;
  942. position: relative;
  943. border: 5px solid {color:postinside};
  944. }
  945.  
  946.  
  947. .askicon img{
  948. z-index: 9;
  949. width: 40px;
  950. }
  951.  
  952.  
  953.  
  954. .arrow-left {
  955. width: 0;
  956. height: 0;
  957. border-top: 15px solid transparent;
  958. border-bottom: 15px solid transparent;
  959. border-right:25px solid {color:postinside};
  960. position: relative;
  961. margin-left: 50px;
  962. margin-top: -47px;
  963. }
  964.  
  965.  
  966.  
  967. .question {
  968. width: 403px;
  969. height: auto;
  970. padding: 2px 10px 7px 10px;
  971. color: {color:text};
  972. background-color: {color:postinside};
  973. font-size: 11.5px;
  974. text-align: left;
  975. margin-left: 74px;
  976. margin-top: -35px;
  977. margin-bottom: 15px;
  978. }
  979.  
  980. .asker {
  981. font-size: 22px;
  982. color: {color:link};
  983. text-align: left;
  984. margin-top: 5px;
  985. margin-bottom: 3px;
  986. font-family: 'Amatic SC', sans-serif;
  987. }
  988.  
  989. .answer {
  990. font-size: 11px;
  991. padding: 1px 10px 5px 10px;
  992. width: 477px;
  993. margin-top:-12px;
  994. overflow: hidden;
  995. border-radius:0px;
  996. text-align: left;
  997. }
  998.  
  999. .posttitle {
  1000. font-size: 25px;
  1001. font-family: 'Amatic SC', sans-serif;
  1002. background-color: {color:postinside};
  1003. text-align: center;
  1004. margin-bottom: 5px;
  1005. padding: 2px;
  1006. }
  1007.  
  1008. .textpost {
  1009. font-size: 12px;
  1010. }
  1011.  
  1012. .caption {
  1013. font-size: 12px;
  1014. background-color: {color:caption};
  1015. padding: 5px;
  1016. }
  1017.  
  1018. .quote {
  1019. font-size: 20px;
  1020. font-family: 'Amatic SC', sans-serif;
  1021. text-align: center;
  1022. }
  1023.  
  1024. .quotesource {
  1025. text-align: center;
  1026. font-size: 11px;
  1027. margin-top: 5px;
  1028. }
  1029.  
  1030.  
  1031.  
  1032. .audiopost {
  1033. padding: 0 10px;
  1034. width: 477px;
  1035. font-size: 10px;
  1036. margin-top: -20px;
  1037. font-family: 'Amatic SC', sans-serif;
  1038. }
  1039.  
  1040. .player {
  1041. position: absolute;
  1042. float: left;
  1043. width: 30px;
  1044. height: 30px;
  1045. overflow: hidden;
  1046. margin-left: 20px;
  1047. }
  1048.  
  1049. .audio {
  1050. border: 1px solid {color:border};
  1051. background-color: {color:postinside};
  1052. text-align: center;
  1053. padding: 5px 10px;
  1054. width: 420px;
  1055. font-size: 15px;
  1056. font-family: 'Amatic SC', sans-serif;
  1057. margin-bottom: 7px;
  1058. margin-left: 48px;
  1059. position: relative;
  1060. float: right;
  1061. }
  1062.  
  1063. .chat {
  1064. font-size: 12px;
  1065. margin-bottom: 10px;
  1066. }
  1067.  
  1068. .chattitle {
  1069. font-size: 25px;
  1070. font-family: 'Amatic SC', sans-serif;
  1071. background-color: {color:postinside};
  1072. text-align: center;
  1073. margin-bottom: 5px;
  1074. padding: 2px;
  1075. }
  1076.  
  1077. .chatbubble {
  1078. width: 5px;
  1079. height: 5px;
  1080. background-color: {color:color1};
  1081. margin-left: 13px;
  1082. margin-right: 5px;
  1083. float: left;
  1084. position: relative;
  1085. margin-top: 6px;
  1086. }
  1087.  
  1088.  
  1089. /* PLEASE DO NOT REMOVE THE CREDIT OR MOVE IT */
  1090.  
  1091. #credit {
  1092. bottom: 8px;
  1093. right: 8px;
  1094. border: 1px solid #BABABA;
  1095. font-size: 10px;
  1096. color: #5A5A5A;
  1097. height: 12px;
  1098. width: 12px;
  1099. line-height: 12px;
  1100. position: fixed;
  1101. text-align: center;
  1102. background-color:white;
  1103. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  1104. -o-transition: 0.5s ease;
  1105. -moz-transition: 0.5s ease;
  1106. }
  1107.  
  1108. #credit:hover {
  1109. background-color: #2E2E2E;
  1110. color: #fff;
  1111. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  1112. -o-transition: 0.5s ease;
  1113. -moz-transition: 0.5s ease;
  1114. }
  1115.  
  1116.  
  1117. </style>
  1118.  
  1119.  
  1120. </head>
  1121.  
  1122.  
  1123. <body>
  1124.  
  1125.  
  1126.  
  1127. <div id="sidebar-left">
  1128.  
  1129. <a href="{text:sblink1url}">
  1130. <div id="sb-left-block-1" class="sbblock">
  1131. <p>{text:sblink1text}</p>
  1132. </div>
  1133. </a>
  1134.  
  1135. <a href="{text:sblink2url}">
  1136. <div id="sb-left-block-2" class="sbblock">
  1137. <p>{text:sblink2text}</p>
  1138. </div>
  1139. </a>
  1140.  
  1141.  
  1142. <a href="{text:sblink3url}">
  1143. <div id="sb-left-block-3" class="sbblock">
  1144. <p>{text:sblink3text}</p>
  1145. </div>
  1146. </a>
  1147.  
  1148.  
  1149. <a href="{text:sblink4url}">
  1150. <div id="sb-left-block-4" class="sbblock">
  1151. <p>{text:sblink4text}</p>
  1152. </div>
  1153. </a>
  1154.  
  1155.  
  1156.  
  1157. </div>
  1158.  
  1159. <div id="title">{Title}</div>
  1160.  
  1161.  
  1162. <div id="sidebar-right">
  1163.  
  1164. <a href="{text:sblink5url}">
  1165. <div id="sb-right-block-1" class="sbblock">
  1166. <p>{text:sblink5text}</p>
  1167. </div>
  1168. </a>
  1169.  
  1170. <a href="{text:sblink6url}">
  1171. <div id="sb-right-block-2" class="sbblock">
  1172. <p>{text:sblink6text}</p>
  1173. </div>
  1174. </a>
  1175.  
  1176.  
  1177. <a href="{text:sblink7url}">
  1178. <div id="sb-right-block-3" class="sbblock">
  1179. <p>{text:sblink7text}</p>
  1180. </div>
  1181. </a>
  1182.  
  1183.  
  1184.  
  1185. <a href="{text:sblink8url}">
  1186. <div id="sb-right-block-4" class="sbblock">
  1187. <p>{text:sblink8text}</p>
  1188. </div>
  1189. </a>
  1190.  
  1191.  
  1192.  
  1193.  
  1194.  
  1195. </div>
  1196.  
  1197.  
  1198.  
  1199. {block:PreviousPage}
  1200. <a href="{PreviousPage}"><div id="prevpage">prev</div></a>
  1201. {/block:PreviousPage}
  1202.  
  1203.  
  1204.  
  1205. {block:NextPage}
  1206. <a href="{NextPage}"><div id="nextpage">next</div></a>
  1207. {/block:NextPage}
  1208. </div>
  1209.  
  1210.  
  1211.  
  1212. <!-- boring post stuff - you don't really need to edit there I'd say -->
  1213. <div id="content">
  1214. {block:Posts}
  1215.  
  1216.  
  1217.  
  1218. <div id="posts">
  1219.  
  1220.  
  1221.  
  1222. {block:ContentSource}
  1223. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1224. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1225. {/block:SourceLogo}
  1226. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1227. {/block:ContentSource}
  1228.  
  1229. {block:Photo}
  1230. {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
  1231. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1232. {/block:Photo}
  1233.  
  1234. {block:Photoset}
  1235. {Photoset-500}
  1236. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1237. {/block:Photoset}
  1238.  
  1239. {block:Video}
  1240. {Video-500}
  1241. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1242. {/block:Video}
  1243.  
  1244. {block:Audio}
  1245. <div class="audio">
  1246. {block:TrackName}
  1247. {TrackName}
  1248. {/block:TrackName}
  1249. {block:Artist}
  1250. &middot;&middot;&middot;
  1251. {Artist}
  1252. {/block:Artist}
  1253. </div>
  1254. <div class="player">
  1255. {AudioPlayerWhite}
  1256. </div>
  1257. {block:Caption}<br /><div class="audiopost">{Caption}</div>{/block:Caption}
  1258. {/block:Audio}
  1259.  
  1260. {block:Quote}
  1261. <div class="quote">“{Quote}”</div>
  1262. {block:Source}<div class="quotesource">&middot;&middot;&middot; {Source}</div>{/block:Source}
  1263. {/block:Quote}
  1264.  
  1265. {block:Text}
  1266. {block:Title}<div class="posttitle">{Title}</div><br/>{/block:Title}<div class="textpost">{Body}</div>
  1267. {/block:Text}
  1268.  
  1269. {block:Answer}
  1270. <div class="askicon"><img src="{AskerPortraitURL-64}" /></div><div class="arrow-left"></div>
  1271. <div class="question"><div class="asker">{Asker}:</div>{Question}</div>
  1272. <div class="answer">{block:Answerer}<div class="answerer">{Answerer}:</div>{/block:Answerer}<div class="answerer-answer">{Answer}</div></div>
  1273. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1274. {/block:Answer}
  1275. {block:Reblog}<div class="caption">{Replies}</div>{/block:Reblog}
  1276.  
  1277. {block:Chat}
  1278. <div class="chat">
  1279. {block:Title}<div class="chattitle">{Title}</div>{/block:Title}
  1280. {block:Lines}
  1281. {block:Label}<div class="chatbubble"></div><strong>{Label}</strong>{/block:Label} {Line}<br />
  1282. {/block:Lines}
  1283. </div>
  1284. {/block:Chat}
  1285.  
  1286. {block:Link}
  1287. <div class="linkpost">
  1288. <a href="{URL}" ><div class="linktitle">{Name}</div></a>
  1289. {block:Description}<div class="caption">{Description}</div>{/block:Description}</div>
  1290. {/block:Link}
  1291.  
  1292.  
  1293.  
  1294. <div id="tagsbox">
  1295. <a href="{Permalink}" title="{block:Date}{lang:Posted TimeAgo}{/block:Date}
  1296. {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}"><div id="perm" class="permlink"></div>
  1297. </a>
  1298. {block:RebloggedFrom}<a href="{ReblogParentURL}" title="via: {ReblogParentName}"><div id="via" class="permlink"></div></a>
  1299. <a href="{ReblogRootURL}" title="originally: {ReblogRootName}"><div id="origin" class="permlink"></div></a>
  1300. {/block:RebloggedFrom}
  1301. <a href="{ReblogURL}" title="reblog" target="_blank"><div id="reblog" class="permlink"></div></a>
  1302. </div>
  1303.  
  1304.  
  1305.  
  1306. {block:HasTags}<div id="tags">
  1307. {block:Tags}
  1308. <a href="{TagURL}">{Tag}</a><span class="comma"> &nbsp;&middot;&nbsp; </span>
  1309. {/block:Tags}
  1310. </div>
  1311. {/block:HasTags}
  1312.  
  1313. </div> <!-- posts div -->
  1314.  
  1315.  
  1316.  
  1317.  
  1318. {block:PostNotes}
  1319. <div id="notecontainer">{PostNotes}</div>
  1320. {/block:PostNotes}
  1321.  
  1322. {/block:Posts}
  1323. </div> <!-- content div-->
  1324.  
  1325.  
  1326.  
  1327. <!-- credit, please do not remove! -->
  1328. <a href="http://spirkthemes.tumblr.com"><div id="credit">P</div></a>
  1329.  
  1330.  
  1331. <script type="text/javascript" src="jquery.easing.1.3.js"></script>
  1332.  
  1333.  
  1334.  
  1335.  
  1336.  
  1337. </body>
  1338.  
  1339.  
  1340. </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!