API tools faq
paste
cherrybearr

Theme 8 Kirby

cherrybearr
Jun 7th, 2015
1,315
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.71 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. Kirby theme 8.0 made by Lilcherrybearr: lilcherrybearr.tumblr.com
  3. If you find a bug, need help, want to suggest improvements, or are interested in commissions, please contact me. More info on my blog ^^
  4.  
  5. Theme info:
  6. Don't worry if the right side where you preview your theme looks messed up. It will look fine when you get out of editing mode.
  7. -->
  8.  
  9. <html>
  10. <head>
  11. <title>{Title}</title>
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14. {block:Description}
  15. <meta name="description" content="{MetaDescription}" />
  16. {/block:Description}
  17. <meta name="image:background" content="https://fc03.deviantart.net/fs70/f/2011/301/5/c/kirby__s_dreamland_by_neoooen-d4e95a5.png" />
  18. <meta name="font:font" content="" />
  19. <meta name="color:background color" content="#FFFFFF" />
  20. <meta name="color:post color" content="#FFBCDE" />
  21. <meta name="color:link color" content="#FF1437" />
  22. <meta name="if:Infinite Scroll" content="0">
  23.  
  24.  
  25. <script type="text/javascript"
  26. src="https://www.google.com/jsapi"></script>
  27.  
  28. <script type="text/javascript">
  29. google.load("jquery", "1.3");
  30. google.setOnLoadCallback(function() {
  31. jQuery(function($) {
  32. // do some stuff here, eg load your tweets, ...
  33. $('#star').click(function(){
  34. $("html, body").animate({ scrollTop: "500px" },1500);
  35. $('#star').animate({ top: "+=-110%", left: "+=5%" },1000);
  36. $('#star').animate({ top: "+=110%", left: "+=-5%" },1000);
  37. $("html, body").animate({ scrollTop: "0px" },700);
  38. });
  39. });
  40. });
  41. </script>
  42.  
  43. </head>
  44. <style>
  45.  
  46. /*Post Content*/
  47. body {
  48. background:url({image:background});
  49. background-color:{color:background color};
  50. background-attachment:fixed;
  51. background-position:center;
  52. font-family:{font:font};
  53. font-size:13px;
  54. }
  55.  
  56. a {
  57. text-decoration:none;
  58. color:{color:link color};
  59. }
  60.  
  61. #content {
  62. }
  63.  
  64. #posts2 {
  65. width:530px;
  66. list-style-type:none;
  67. margin:30px;
  68. left:25%;
  69. position:relative;
  70. }
  71. .posts {
  72. background-color:rgba(255,255,255,.8);
  73. width:500px;
  74. margin:0 auto;
  75. overflow-x:auto;
  76. padding:10px;
  77. }
  78.  
  79. blockquote {
  80. border-left:2px dotted {color:post color};
  81. margin-left:10px;
  82. padding-left:5px;
  83. }
  84. .asker {
  85. margin-top:-20px;
  86. margin-left:45px;
  87. }
  88. .asker a{
  89. margin-left:5px;
  90. }
  91. .asker-question {
  92. margin-top:10px;
  93. }
  94. .answerer {
  95. margin-top:-20px;
  96. margin-left:25px;
  97. }
  98. .aswerer-answer {
  99. margin-top:10px;
  100. }
  101. .question {
  102. background-color:rgba(100,100,100,.3);
  103. padding:5px;
  104. border-radius:10px;
  105. margin:5px;
  106. }
  107. .answer {
  108. background-color:rgba(100,100,100,.3);
  109. padding:5px;
  110. border-radius:10px;
  111. margin:5px;
  112. }
  113.  
  114. #permalink {
  115. background-color:{color:post color};
  116. padding:5px;
  117. text-align:center;
  118. box-shadow:0 1px 3px rgba(0,0,0,.5);
  119. }
  120.  
  121. #tags {
  122. background-color:{color:post color};
  123. padding:5px;
  124. text-align:center;
  125. box-shadow:0 1px 3px rgba(0,0,0,.5);
  126. margin-bottom:10px;
  127. color:{color:link color};
  128. }
  129.  
  130. #notecontainer {
  131. background-color:rgba(255,255,255,.8);
  132. }
  133.  
  134. /* Sidebar */
  135. #sidebar {
  136. width:260px;
  137. position:fixed;
  138. top:20%;
  139. left:7%;
  140. padding:5px;
  141. z-index:5;
  142. }
  143. #icon{
  144. margin-left:15px;
  145. border-radius:70px;
  146. border:3px dotted {color:post color};
  147. }
  148. #searchbar {
  149. float:right;
  150. margin-right:15px;
  151. margin-top:20px;
  152. border:2px solid {color:post color};
  153. }
  154. #search {
  155. width:100px;
  156. }
  157. #button {
  158. background-color:{color:post color};
  159. }
  160. #description {
  161. background-color:rgba(255,255,255,.8);
  162. padding:10px;
  163. border-radius:20px;
  164. width:200px;
  165. margin:0 auto;
  166. }
  167. #pagination {
  168. margin-left:100px;
  169. color:{color:link color};
  170. }
  171. #pagination a {
  172.  
  173. }
  174. .page {
  175. border:1px dotted {color:post color};
  176. padding:5px;
  177. border-radius:50px;
  178. margin:3px;
  179. background-color:rgba(255,255,255,.3);
  180. -webkit-transition:all .5s ease-in-out;
  181. }
  182. .page:hover {
  183. background-color:rgba(255,255,255,1);
  184. }
  185. #current_page {
  186. background-color:rgba(255,255,255,1);
  187. }
  188.  
  189. /* Extra */
  190. #kirby {
  191. position:absolute;
  192. position:fixed;
  193. margin-left:10px;
  194. -webkit-animation: down 20s infinite;
  195. -moz-animation: down 20s infinite;
  196. }
  197. @-webkit-keyframes down {
  198. 0% {
  199. margin-top:-10%;
  200. }
  201. 10% {
  202. margin-left:5%;
  203. }
  204. 20% {
  205. margin-left:0%;
  206. }
  207. 40% {
  208. margin-left:10%;
  209. }
  210. 50% {
  211. margin-left:-5%;
  212. }
  213. 60% {
  214. margin-left:10%;
  215. }
  216. 100% {
  217. margin-top:80%;
  218. }
  219. }
  220. @-moz-keyframes down {
  221. 0% {
  222. margin-top:-10%;
  223. }
  224. 10% {
  225. margin-left:5%;
  226. }
  227. 20% {
  228. margin-left:0%;
  229. }
  230. 40% {
  231. margin-left:10%;
  232. }
  233. 50% {
  234. margin-left:-5%;
  235. }
  236. 60% {
  237. margin-left:10%;
  238. }
  239. 100% {
  240. margin-top:80%;
  241. }
  242. }
  243. #star {
  244. border-radius:200px;
  245. height:80px;
  246. width:80px;
  247. box-shadow:0 0 10px white;
  248. position:fixed;
  249. top:85%;
  250. left:90%;
  251. cursor:pointer;
  252. -webkit-animation: rotate 10s infinite;
  253. -moz-animation: rotate 10s infinite;
  254. }
  255. @-webkit-keyframes rotate {
  256. 0% {
  257. -webkit-transform:rotate(0deg);
  258. }
  259. 100% {
  260. -webkit-transform:rotate(360deg);
  261. }
  262. }
  263. @-moz-keyframes rotate {
  264. 0% {
  265. -moz-transform:rotate(0deg);
  266. }
  267. 100% {
  268. -moz-transform:rotate(360deg);
  269. }
  270. }
  271.  
  272. #creditpic {
  273. width:25px;
  274. height:25px;
  275. background-image:url('https://68.media.tumblr.com/d137832f5aba57e671dca865d7794f9a/tumblr_o0m662tTo91thncmho6_r1_400.png');
  276. background-size:100% 100%;
  277. float:left;
  278. }
  279. #credit {
  280. position:absolute;
  281. position:fixed;
  282. left:3%;
  283. top:90%;
  284. width:25px;
  285. height:25px;
  286. padding:2px;
  287. background-color:white;
  288. overflow:hidden;
  289. -webkit-transition:all .5s ease-in-out;
  290. }
  291. #credit:hover {
  292. width:120px;
  293. }
  294. #creditwords {
  295. position:relative;
  296. top:10px;
  297. left:5px;
  298. }
  299.  
  300. /* Links */
  301. #list {
  302. list-style-type:none;
  303. top:20%;
  304. left:70%;
  305. position:fixed;
  306. }
  307. .links {
  308. position:relative;
  309. top:15px;
  310. left:60px;
  311. font-size:18px;
  312. }
  313. .all_links {
  314. width:50px;
  315. height:50px;
  316. overflow:hidden;
  317. padding:5px;
  318. -webkit-transition:all .7s ease-in-out;
  319. -moz-transition:all .7s ease-in-out;
  320. }
  321. .all_links:hover {
  322. background-color:White;
  323. width:200px;
  324. height:50px;
  325. padding:5px;
  326. }
  327. .bubble {
  328. position:fixed;
  329. }
  330. .abilities {
  331. max-height:70px;
  332. max-width:70px;
  333. margin-left:130px;
  334. margin-top:-30px;
  335. }
  336. #custom {
  337. margin-left:35px;
  338. margin-top:10px;
  339. z-index:1;
  340. width:200px;
  341. }
  342. #all_links2 {
  343. width:50px;
  344. height:50px;
  345. overflow:hidden;
  346. padding:5px;
  347. -webkit-transition:all .7s ease-in-out;
  348. -moz-transition:all .7s ease-in-out;
  349. }
  350. #all_links2:hover {
  351. background-color:White;
  352. width:250px;
  353. height:auto;
  354. overflow:hidden;
  355. padding:5px;
  356. -webkit-transition:all .7s ease-in-out;
  357. -moz-transition:all .7s ease-in-out;
  358. }
  359. </style>
  360.  
  361. <body>
  362.  
  363. <a id="credit" title="Theme by Lilcherrybearr. Images/sprites used are made by fans or creators of Kirby" href="https://themebylilcherrybearr.tumblr.com/"> <div id="creditpic"></div> <span id="creditwords">Theme Credit</span> </a>
  364. <div id="sidebar">
  365. <img id="icon" src="{PortraitURL-48}" />
  366. <form id="searchbar" action="/search" method="get">
  367. <input id="search" type="text" name="q" value="{SearchQuery}" placeholder="Search..." />
  368. <input id="button" type="submit" value="Search">
  369. </form>
  370.  
  371. <div id="description"> {Description} </div>
  372. <br>
  373. {block:IndexPage}
  374. {block:IfNotInfiniteScroll}
  375. <p id="pagination">
  376. {block:Pagination}{block:JumpPagination length="5"}{block:CurrentPage}
  377. <span class="page" id="current_page">{PageNumber}</span>
  378. {/block:CurrentPage}{block:JumpPage}
  379. <a class="page" id="jump_page" href="{URL}">{PageNumber}</a>
  380. {/block:JumpPage}{/block:JumpPagination}
  381. {/block:Pagination}
  382. {/block:IfNotInfiniteScroll}
  383. {/block:IndexPage}
  384. </div>
  385.  
  386. <!--parasol kirby-->
  387. <img id="kirby" src="https://66.media.tumblr.com/86837ecdc9aa8d35ef99f8be33e1725a/c92a9358687cf5b8-9e/s540x810/74710fc2aa5d53162ab48c3c8538932819c7588a.gif" />
  388. <img id="star" title="Scroll to top" src="https://68.media.tumblr.com/a7b2e372093b9852feb2d1be119a6ec6/tumblr_inline_npi0o3rZAr1qfjhw8_540.png" />
  389.  
  390. <ul id="list">
  391. <li class="all_links"> <a href="{BlogURL}"> <img class="bubble" src="https://68.media.tumblr.com/6ed179af9cc949d5b3077005ae5116a1/tumblr_inline_npecyeNiLI1qfjhw8_540.png" /> <span class="links"> Home </a> <img class="abilities" src="https://66.media.tumblr.com/c7d83934389a8ab62a736391a1f1ccd3/c92a9358687cf5b8-bb/s540x810/9b9cae62adb7e2fb5822a2804896c7e7304e791e.gif" /> </span> </li>
  392. <li class="all_links"> <a href="/archive"> <img class="bubble" src="https://40.media.tumblr.com/d929da9b9731827b001f6af1c7f03996/tumblr_inline_npecymqOSY1qfjhw8_540.png" /> <span class="links"> Archive </a> <img class="abilities" src="https://66.media.tumblr.com/47f42a0aace1bc51bed40c0b3dcfbbc2/c92a9358687cf5b8-60/s540x810/ccb3bd883c272795f3b69e5abc3dc43c57c62a08.gif" /> </span> </li>
  393. <li class="all_links"> <a href="/ask"> <img class="bubble" src="https://68.media.tumblr.com/b153919be9e34531cad166f1026053e6/tumblr_inline_npedex6vhy1qfjhw8_540.png" /> <span class="links"> Ask </a> <img class="abilities" style="height:90px; width:90px;" src="https://66.media.tumblr.com/dfaca786b5e933f66dffdc16f5fbca81/c92a9358687cf5b8-51/s540x810/10a83386a1d0407d3d74f7650f719c47ceba6c09.gif" /> </span> </li>
  394. <li class="all_links"> <a href="/submit"> <img class="bubble" src="https://68.media.tumblr.com/9f8bd68683139b3641b8aeb9cf7dc206/tumblr_inline_npee5buOLq1qfjhw8_540.png" /> <span class="links"> Submit </a> <img class="abilities" style="height:60px; width:60px;" src="https://dl4.glitter-graphics.net/pub/1596/1596644lco3xrvizy.gif" /> </span> </li>
  395. <li id="all_links2"> <img class="bubble" src="https://66.media.tumblr.com/390f049b5e1418420bd7d50dd781a366/c92a9358687cf5b8-39/s540x810/91927503311d043ea83a47e75ca2e571bedbfcd3.gif" /> <ul id="custom">
  396. <div id="customlinks">{block:HasPages}{block:Pages}<li><a href="{url}">{Label}</a></li>{/block:Pages}{/block:HasPages}</div>
  397. </ul>
  398. <img class="abilities" style=" position:relative; top:10px; left:50px; height:60px" src="https://66.media.tumblr.com/b10e287d9e4449f6344c9e7c2c838adc/c92a9358687cf5b8-09/s540x810/66e9304345af79200acd97c93c96c3f6147f8f60.gif" /> </li>
  399. </ul>
  400.  
  401. <ol id="content">
  402. {block:Posts}
  403. <div id="posts2">
  404.  
  405. {block:IndexPage}
  406. <div id="permalink">
  407. <a href="{Permalink}">{block:Date}Posted {TimeAgo} {/block:Date} {block:NoteCount} with {NoteCountWithLabel} {/block:NoteCount} </a>
  408. </div>
  409. {/block:IndexPage}
  410.  
  411. {block:Text}
  412. <li class="posts">
  413. {block:Title}
  414. <h3 id="title"><a id="title2" href="{Permalink}">{Title}</a></h3>
  415. {/block:Title}{Body}
  416. </li>
  417. {/block:Text}
  418.  
  419. {block:Photo}
  420. <li class="posts">
  421. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  422.  
  423. {block:Caption}
  424. <div class="caption">{Caption}</div>
  425. {/block:Caption}
  426. </li>
  427. {/block:Photo}
  428.  
  429. {block:Panorama}
  430. <li class="posts">
  431. {LinkOpenTag}
  432. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  433. {LinkCloseTag}{block:Caption}
  434. <div class="caption">{Caption}</div>
  435. {/block:Caption}
  436. </li>
  437. {/block:Panorama}
  438.  
  439. {block:Photoset}
  440. <li class="posts">
  441. {Photoset-500}{block:Caption}
  442. <div class="caption">{Caption}</div>
  443. {/block:Caption}
  444. </li>
  445. {/block:Photoset}
  446.  
  447. {block:Quote}
  448. <li class="posts">
  449. <big>"{Quote}"</big>
  450.  
  451. {block:Source}
  452. <div class="source">- {Source}</div>
  453. {/block:Source}
  454. </li>
  455. {/block:Quote}
  456.  
  457. {block:Link}
  458. <li class="posts">
  459. <a href="{URL}" class="link" {Target}>{Name}</a>
  460.  
  461. {block:Description}
  462. <div class="description">{Description}</div>
  463. {/block:Description}
  464. </li>
  465. {/block:Link}
  466.  
  467. {block:Chat}
  468. <li class="posts">
  469. {block:Title}
  470. <h3><a href="{Permalink}">{Title}</a></h3>
  471. {/block:Title}
  472.  
  473. <ul class="chat">
  474. {block:Lines}
  475. <li class="{Alt} user_{UserNumber}">
  476. {block:Label}
  477. <span class="label">{Label}</span>
  478. {/block:Label}{Line}
  479. </li>
  480. {/block:Lines}
  481. </ul>
  482. </li>
  483. {/block:Chat}
  484.  
  485. {block:Video}
  486. <li class="posts">
  487. {Video-500}{block:Caption}
  488. <div class="caption">{Caption}</div>
  489. {/block:Caption}
  490. </li>
  491. {/block:Video}
  492.  
  493. {block:Audio}
  494. <li class="posts">
  495. {AudioEmbed}{block:Caption}
  496. <div class="caption">{Caption}</div>
  497. {/block:Caption}
  498. </li>
  499. {/block:Audio}
  500.  
  501. {block:Answer}
  502. <li class="posts">
  503. <div class="question"><img class="asker-avatar" src="{AskerPortraitURL-40}" alt=""><div class="asker">{Asker} asked:</div>
  504. <div class="asker-question">{Question}</div></div>
  505. <p>
  506. {block:Answerer}
  507. <div class="answer"><img class="answerer-avatar" src="{AnswererPortraitURL-40}" alt=""><div class="answerer">{Answerer}:</div><p><div class="answerer-answer">{Answer}</div></div>
  508. {/block:Answerer}
  509. <div class="replies">
  510. {Replies}
  511. </div>
  512. </li>
  513. {/block:Answer}
  514.  
  515. {block:HasTags}
  516. <div id="tags">
  517. {block:Tags}#<a href="{TagURL}">{Tag} </a>
  518. {/block:Tags}
  519. </div> <!--tags-->
  520. <br>{/block:HasTags}
  521.  
  522. {block:PostNotes}
  523. <div id="notecontainer">{PostNotes}</div>
  524. {/block:PostNotes}
  525.  
  526. </div> <!--posts2-->
  527. {/block:Posts}
  528.  
  529. </p>
  530. </ol>
  531. </body>
  532. </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!