API tools faq
paste
spirkism

Theme #4: Boxes

spirkism
May 29th, 2014
586
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.16 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. THEME #4: Boxes
  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. <!DOCTYPE html>
  16. <html lang="en">
  17.  
  18. <head>
  19.  
  20. <title>{Title}</title>
  21.  
  22. {block:Description}
  23. <meta name="description" content="{MetaDescription}" />
  24. {/block:Description}
  25.  
  26. <link rel="shortcut icon" href="{Favicon}" />
  27.  
  28. <link rel="alternate" type="application/rss+xml" title="{Title} RSS" href="{RSS}"/>
  29.  
  30. <link href='http://fonts.googleapis.com/css?family=Condiment|Allura|Alegreya+Sans|Kaushan+Script|Satisfy' rel='stylesheet' type='text/css'>
  31.  
  32.  
  33. <!-- color metas -->
  34. <meta name="color:background" content="#ffffff" />
  35. <meta name="color:title color" content="#007ba4" />
  36. <meta name="color:title hover color" content="#004484" />
  37. <meta name="color:sidebar" content="#ececec" />
  38. <meta name="color:sidebar link hover color" content="#004586" />
  39. <meta name="color:sidebar link color" content="#004586" />
  40. <meta name="color:sidebar link text hover" content="#004586" />
  41. <meta name="color:text color" content="#000000" />
  42. <meta name="color:link color" content="#000008" />
  43. <meta name="color:link hover color" content="#007ba4" />
  44. <meta name="color:post color inside" content="#ffffff" />
  45. <meta name="color:border color" content="#000000" />
  46.  
  47.  
  48. <!-- image metas -->
  49. <meta name="image:background image" content="" />
  50.  
  51.  
  52. <!-- text metas -->
  53. <meta name="text:link1 url" content="" />
  54. <meta name="text:link1 text" content="" />
  55. <meta name="text:link2 url" content="" />
  56. <meta name="text:link2 text" content="" />
  57. <meta name="text:link3 url" content="" />
  58. <meta name="text:link3 text" content="" />
  59. <meta name="text:link4 url" content="" />
  60. <meta name="text:link4 text" content="" />
  61.  
  62.  
  63.  
  64.  
  65. <style type="text/css">
  66.  
  67. /* GENERAL STUFF */
  68.  
  69. ::-webkit-scrollbar {
  70. width:3px;height: 5px;background: {color:background};
  71. }
  72.  
  73. ::-webkit-scrollbar-thumb {
  74. background: {color:title color};
  75. }
  76.  
  77. body {
  78. background-color: {color:background};
  79. font-family: Calibri, sans-serif;
  80. background-image: url({image:background image});
  81. margin: 0;
  82. word-wrap: break-word;
  83. background-attachment: fixed;
  84. background-repeat: no-repeat;
  85. color: {color:text color};
  86. }
  87.  
  88. a:link, a:active, a:visited {
  89. text-decoration: none;
  90. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  91. -o-transition: 0.5s ease;
  92. -moz-transition: 0.5s ease;
  93. color:{color:link color};
  94. }
  95.  
  96. a:hover {
  97. color:{color:link hover color};
  98. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  99. -o-transition: 0.5s ease;
  100. -moz-transition: 0.5s ease;
  101. }
  102.  
  103. /* SIDEBAR THINGS */
  104.  
  105.  
  106.  
  107.  
  108.  
  109. .blogtitle {
  110. font-size: 23px;
  111. text-align: center;
  112. padding: 10px;
  113. font-family: 'Allura', cursive;
  114. position:fixed;
  115. margin-left: 245px;
  116. margin-top: 132px;
  117. overflow: hidden;
  118. z-index: 999;
  119. }
  120.  
  121. .blogtitle a {
  122. color: {color:title color};
  123. text-decoration: none;
  124. }
  125.  
  126. .blogtitle a:hover {
  127. color: {color:title hover color};
  128. }
  129.  
  130.  
  131.  
  132. /* sidebar */
  133.  
  134. #sidebar {
  135. width:90px;
  136. margin-left: 225px;
  137. margin-top: 167px;
  138. position:fixed;
  139. text-align:center;
  140. font-size: 12px;
  141. }
  142.  
  143. #link1 {
  144. background-color:{color:sidebar};
  145. color: {color:sidebar link color};
  146. text-align: center;
  147. line-height: 50px;
  148. width: 50px;
  149. height: 50px;
  150. position: fixed;
  151. padding: 5px;
  152. margin-left: 20px;
  153. margin-top:5px;
  154. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  155. -o-transition: 0.5s ease;
  156. -moz-transition: 0.5s ease;
  157. }
  158.  
  159. #link2 {
  160. background-color:{color:sidebar};
  161. color: {color:sidebar link color};
  162. text-align: center;
  163. line-height: 50px;
  164. width: 50px;
  165. height: 50px;
  166. position: fixed;
  167. padding: 5px;
  168. margin-left: 85px;
  169. margin-top:5px;
  170. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  171. -o-transition: 0.5s ease;
  172. -moz-transition: 0.5s ease;
  173. }
  174.  
  175. #link3 {
  176. background-color:{color:sidebar};
  177. color: {color:sidebar link color};
  178. text-align: center;
  179. line-height: 50px;
  180. width: 50px;
  181. height: 50px;
  182. position: fixed;
  183. padding: 5px;
  184. margin-left: 20px;
  185. margin-top:70px;
  186. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  187. -o-transition: 0.5s ease;
  188. -moz-transition: 0.5s ease;
  189. }
  190.  
  191. #link4 {
  192. background-color:{color:sidebar};
  193. color: {color:sidebar link color};
  194. text-align: center;
  195. line-height: 50px;
  196. width: 50px;
  197. height: 50px;
  198. position: fixed;
  199. padding: 5px;
  200. margin-left: 85px;
  201. margin-top:70px;
  202. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  203. -o-transition: 0.5s ease;
  204. -moz-transition: 0.5s ease;
  205. }
  206.  
  207. #link1:hover {
  208. background-color: {color:sidebar link hover color};
  209. color: {color:sidebar link text hover};
  210. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  211. -o-transition: 0.5s ease;
  212. -moz-transition: 0.5s ease;
  213. }
  214.  
  215. #link2:hover {
  216. background-color: {color:sidebar link hover color};
  217. color: {color:sidebar link text hover};
  218. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  219. -o-transition: 0.5s ease;
  220. -moz-transition: 0.5s ease;
  221. }
  222.  
  223.  
  224. #link3:hover {
  225. background-color: {color:sidebar link hover color};
  226. color: {color:sidebar link text hover};
  227. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  228. -o-transition: 0.5s ease;
  229. -moz-transition: 0.5s ease;
  230. }
  231.  
  232. #link4:hover {
  233. background-color: {color:sidebar link hover color};
  234. color: {color:sidebar link text hover};
  235. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  236. -o-transition: 0.5s ease;
  237. -moz-transition: 0.5s ease;
  238. }
  239.  
  240.  
  241. /* pagination */
  242.  
  243.  
  244. #pagination {
  245. width: 110px;
  246. text-align: center;
  247. font-size: 11px;
  248. overflow: hidden;
  249. margin-left: 252px;
  250. margin-top: 300px;
  251. position:fixed;
  252. font-family: Calibri;
  253. }
  254.  
  255. #pagination a {
  256. color: {color:sidebar link color};
  257. text-decoration: none;
  258. text-align: center;
  259. }
  260.  
  261. #pagination a:hover {
  262. color: {color:sidebar link hover color};
  263. }
  264.  
  265.  
  266. /*CONTENT THINGS */
  267.  
  268. #content {
  269. width: 560px;
  270. background-color: none;
  271. padding: 20px 0;
  272. color: {text:color};
  273. overflow: hidden;
  274. margin-left: 500px;
  275. margin-top: 50px;
  276. }
  277.  
  278. #content a {
  279. color: {color:link color};
  280. text-decoration: none;
  281. }
  282.  
  283. #content a:hover {
  284. color: {color:link hover color};
  285. }
  286.  
  287. #content blockquote {
  288. border-left: solid 2px #505050;
  289. margin: 0;
  290. padding-left: 10px;
  291. }
  292.  
  293. img {
  294. border: 0;
  295. max-width: 100%;
  296. }
  297.  
  298.  
  299. #content #posts {
  300. background-color: {color:post color inside};
  301. width: 500px;
  302. height: auto;
  303. margin: 0 auto 30px;
  304. padding: 10px 10px 0 10px;
  305. border: 1px dotted {color:border color};
  306. font-size: 14px;
  307. }
  308.  
  309.  
  310. #content #posts .title {
  311. font-size: 16px;
  312. }
  313.  
  314. #content #posts .text {
  315. font-size: 12px;
  316. }
  317.  
  318.  
  319. /* PERMALINK STUFF */
  320.  
  321. #permalink {
  322. font-size: 9px;
  323. margin-top: 2px;
  324. }
  325.  
  326. #posts:hover #tags {
  327. opacity: 1;
  328. -webkit-transition: 0.7s ease;transition: 0.7s ease;
  329. -o-transition: 0.7s ease;
  330. -moz-transition: 0.7s ease;
  331. }
  332.  
  333. #tags {
  334. font-size:9px;
  335. width: 500px;
  336. text-align: center;
  337. margin-top: 5px;
  338. margin-bottom: 6px;
  339. opacity:0;
  340. -webkit-transition: 0.7s ease;transition: 0.7s ease;
  341. -o-transition: 0.7s ease;
  342. -moz-transition: 0.7s ease;
  343. }
  344.  
  345. #tags .comma:last-child {
  346. display: none;
  347. }
  348.  
  349.  
  350. #reblogged {
  351. position: relative;
  352. font-size: 9px;
  353. overflow: hidden;
  354. }
  355.  
  356.  
  357. /* PERMALINK PAGE THINGS */
  358.  
  359. #content #notecontainer {
  360. margin: 20px auto;
  361. width: 460px;
  362. font-size: 11px;
  363. }
  364.  
  365.  
  366. #content #notecontainer ol.notes {
  367. list-style-type: none;
  368. margin: 1;
  369. padding: 2;
  370. }
  371.  
  372. #content #notecontainer img.avatar {
  373. margin-right: 10px;
  374. width: 16px;
  375. height: 16px;
  376. margin: 1;
  377. padding: 2;
  378. }
  379.  
  380. #content #posts #tagsbox {
  381. border: 1px solid {color:border color};
  382. padding: 1px 4px 3px 4px;
  383. margin-top: 15px;
  384. margin-bottom: 5px;
  385. }
  386.  
  387. /* POST STUFF */
  388.  
  389. .linkpost {
  390. background-color: #ececec;
  391. padding: 5px;
  392. }
  393.  
  394. .linkpost .title {
  395. margin-top: -2px;
  396. margin-left: 7px;
  397. padding: 2px 0 0 0;
  398. }
  399.  
  400. #side {
  401. margin-left: 50px;
  402. fixed;
  403. }
  404.  
  405.  
  406. .askericon {
  407. border: 1px dotted {color:border color};
  408. height:40px;
  409. width:40px;
  410. margin-left:228px;
  411. margin-top: -20px;
  412. overflow: visible;
  413. z-index:999;
  414.  
  415. }
  416.  
  417.  
  418. .question {
  419. border: 1px dotted {color:border color};
  420. overflow: hidden;
  421. width: 477px;
  422. height: auto;
  423. margin-top: -14px;
  424. padding: 2px 10px 5px 10px;
  425. color: {color:text color};
  426. background-color: #F6F6F6;
  427. font-size: 12px;
  428. text-decoration: italic;
  429. z-index:-9;
  430.  
  431. }
  432.  
  433. .asker {
  434. font-size: 13px;
  435. text-transform:uppercase;
  436. color: #007ba4;
  437. }
  438.  
  439. .answer {
  440. font-size: 12px;
  441. border: 1px dotted {color:border color};
  442. padding: 5px 10px 0 10px;
  443. width: 477px;
  444. margin-top:-13px;
  445. overflow: hidden;
  446. }
  447.  
  448. .textpost {
  449. font-size: 13px;
  450. margin-top: -12px;
  451. }
  452.  
  453. .caption {
  454. font-size: 12px;
  455. }
  456.  
  457. .quote {
  458. font-size: 20px;
  459. font-family: 'Satisfy', sans-serif;
  460. }
  461.  
  462. .audiopost {
  463. padding: 0 10px;
  464. width: 477px;
  465. font-size: 10px;
  466. margin-top: -20px;
  467. }
  468.  
  469. .audio {
  470. border: 2px double {color:border color};
  471. padding: 5px 10px;
  472. width: 478px;
  473. font-size: 15px;
  474. font-family: 'Satisfy';
  475. margin-bottom: 7px;
  476. }
  477.  
  478. .chattitle {
  479. font-size: 16px;
  480. }
  481.  
  482.  
  483. /* PLEASE DO NOT REMOVE THE CREDIT OR MOVE IT */
  484.  
  485. #credit {
  486. bottom: 8px;
  487. right: 8px;
  488. border: 1px solid #BABABA;
  489. font-size: 10px;
  490. color: #5A5A5A;
  491. height: 13px;
  492. width: 13px;
  493. line-height: 13px;
  494. position: fixed;
  495. text-align: center;
  496. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  497. -o-transition: 0.5s ease;
  498. -moz-transition: 0.5s ease;
  499. }
  500.  
  501. #credit:hover {
  502. background-color: #2E2E2E;
  503. color: #fff;
  504. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  505. -o-transition: 0.5s ease;
  506. -moz-transition: 0.5s ease;
  507. }
  508.  
  509.  
  510. {CustomCSS}
  511.  
  512. </style>
  513.  
  514.  
  515. </head>
  516.  
  517. <body>
  518.  
  519. <div class="blogtitle"><a href="/">{Title}</a></div>
  520.  
  521. <div id="sidebar">
  522. <a href="{text:link1 url}"><div id="link1">{text:link1 text}</div></a>
  523. <a href="{text:link2 url}"><div id="link2">{text:link2 text}</div></a>
  524. <a href="{text:link3 url}"><div id="link3">{text:link3 text}</div></a>
  525. <a href="{text:link4 url}"><div id="link4">{text:link4 text}</div></a>
  526.  
  527. </div>
  528.  
  529. <div class="description">
  530. {Description}
  531.  
  532. {block:Pagination}
  533. <div id="pagination">
  534. {block:PreviousPage}
  535. <a href="{PreviousPage}">&#8612;</a>
  536. {/block:PreviousPage}
  537.  
  538. {block:JumpPagination length="5"}
  539. {block:CurrentPage}
  540. <span class="current_page"><u>{PageNumber}</u></span>
  541. {/block:CurrentPage}
  542.  
  543. {block:JumpPage}
  544. <a class="jump_page" href="{URL}">{PageNumber}</a>
  545. {/block:JumpPage}
  546. {/block:JumpPagination}
  547.  
  548. {block:NextPage}
  549. <a href="{NextPage}">&#8614;</a>
  550. {/block:NextPage}
  551. </div>
  552. {/block:Pagination}</div>
  553.  
  554.  
  555.  
  556.  
  557. <!-- boring post stuff - you don't really need to edit there I'd say -->
  558. <div id="content">
  559. {block:Posts}
  560.  
  561.  
  562. <div id="posts">
  563.  
  564. {block:ContentSource}
  565. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  566. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  567. {/block:SourceLogo}
  568. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  569. {/block:ContentSource}
  570.  
  571. {block:Photo}
  572. {LinkOpenTag}<img src="{PhotoURL-500}" />{LinkCloseTag}
  573. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  574. {/block:Photo}
  575.  
  576. {block:Photoset}
  577. {Photoset-500}
  578. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  579. {/block:Photoset}
  580.  
  581. {block:Video}
  582. {Video-500}
  583. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  584. {/block:Video}
  585.  
  586. {block:Audio}
  587. <div class="audio">
  588. {block:TrackName}
  589. ' {TrackName} '
  590. {/block:TrackName}
  591. {block:Artist}
  592. by
  593. ' {Artist} '
  594. {/block:Artist}
  595. </div>
  596. {AudioPlayerWhite}
  597. {block:Caption}<br /><div class="audiopost">{Caption}</div>{/block:Caption}
  598. {/block:Audio}
  599.  
  600. {block:Quote}
  601. <div class="quote">“{Quote}”</div>
  602. {block:Source}<div class="text">~ {Source}</div>{/block:Source}
  603. {/block:Quote}
  604.  
  605. {block:Text}
  606. {block:Title}<div class="title">{Title}</div><br/>{/block:Title}<div class="textpost">{Body}</div>
  607. {/block:Text}
  608.  
  609. {block:Answer}
  610. <div class="askericon"><img src="{AskerPortraitURL-64}" /></div>
  611. <div class="question"><div class="asker">{Asker}:</div><em>{Question}</em></div><br />
  612. <div class="answer">{block:Answerer}<div class="answerer">{Answerer}:</div>{/block:Answerer}<div class="answerer-answer">{Answer}</div></div>
  613. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  614. {/block:Answer}
  615.  
  616. {block:Chat}
  617. {block:Title}<div class="chattitle">{Title}</div>{/block:Title}
  618. {block:Lines}
  619. {block:Label}<strong>{Label}</strong>{/block:Label} <em>{Line}</em><br />
  620. {/block:Lines}
  621. {/block:Chat}
  622.  
  623. {block:Link}
  624. <div class="linkpost"><div class="title"><a href="{URL}" >{Name}</a></div></div>
  625. {block:Description}<div class="caption">{Description}</div>{/block:Description}
  626. {/block:Link}
  627.  
  628.  
  629.  
  630. <div id="tagsbox">
  631. <div id="permalink">
  632. <a href="{Permalink}">
  633. {block:Date}{lang:Posted TimeAgo}{/block:Date}
  634. {block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}</a>
  635. {block:RebloggedFrom}&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;via: <a href="{ReblogParentURL}">{ReblogParentName}</a> &nbsp;-&nbsp;
  636. originally: <a href="{ReblogRootURL}">{ReblogRootName}</a>
  637. {/block:RebloggedFrom}
  638. &nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;
  639. <a href="{ReblogURL}" target="_blank">reblog</a>
  640.  
  641. </div>
  642.  
  643. </div>
  644.  
  645. {block:HasTags}<div id="tags">
  646. {block:Tags}
  647. <a href="{TagURL}">{Tag}</a><span class="comma"> &nbsp;&middot;&nbsp; </span>
  648. {/block:Tags}
  649. </div>
  650. {/block:HasTags}
  651.  
  652.  
  653. </div> <!-- posts div -->
  654.  
  655.  
  656. {block:PostNotes}
  657. <div id="notecontainer">{PostNotes}</div>
  658. {/block:PostNotes}
  659.  
  660. {/block:Posts}
  661. </div> <!-- content div-->
  662.  
  663.  
  664. <!-- credit, please do not remove! -->
  665. <a href="http://spirkthemes.tumblr.com"><div id="credit">P</div></a>
  666.  
  667.  
  668. </body>
  669.  
  670. </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!