Advertisement
sunrisen

tiptoe theme v2

Jan 30th, 2013
4,991
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.40 KB | None | 0 0
  1. <!--
  2.  
  3. TIPTOE THEME V2 - RELEASED 30.01.13
  4. ----------------------------------------
  5. CREATED BY SUNRISEN - THEME BLOG: SUNRISENTHEMES
  6. ----------------------------------------
  7. THIS THEME AND ALL OTHER THEMES BY SUNRISEN
  8. ARE USED SUBJECT TO THE AGREEMENT OF THE TERMS
  9. FOR MORE INFORMATION, VISIT
  10. HTTP://THEMES.SUNRISEN.CO/TERMS
  11.  
  12. -->
  13. <html lang="en">
  14. <head>
  15.  
  16. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  17.  
  18. <html xmlns="http://www.w3.org/1999/xhtml">
  19. <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
  20. <script type="text/javascript"
  21. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  22.  
  23. <title>{Title}</title>
  24.  
  25. <link rel="shortcut icon" href="{Favicon}">
  26.  
  27. <meta name="color:background" content="#ffffff"/>
  28. <meta name="color:text" content="#000000"/>
  29. <meta name="color:link" content="#000000"/>
  30. <meta name="color:hover" content="#cccccc"/>
  31.  
  32. <meta name="font:sidebar" content=""/>
  33. <meta name="font:posts" content=""/>
  34. <meta name="font:navigation" content=""/>
  35.  
  36. <meta name="if:show photo permalinks" content="1"/>
  37. <meta name="if:title font" content="1"/>
  38. <meta name="if:image fade" content="1"/>
  39.  
  40. <meta name="text:link one" content=""/>
  41. <meta name="text:link one title" content=""/>
  42. <meta name="text:link two" content=""/>
  43. <meta name="text:link two title" content=""/>
  44. <meta name="text:link three" content=""/>
  45. <meta name="text:link three title" content=""/>
  46. <meta name="text:link four" content=""/>
  47. <meta name="text:link four title" content=""/>
  48. <meta name="text:link five" content=""/>
  49. <meta name="text:link five title" content=""/>
  50.  
  51. <style type="text/css">
  52.  
  53. ::-webkit-scrollbar-thumb:vertical{
  54. -moz-border-radius:10px;
  55. -webkit-border-radius:10px;
  56. }
  57.  
  58. #tumblr_controls{
  59. position:fixed !important;
  60. }
  61.  
  62. .wrapper{
  63. width:1000px;
  64. margin:0px auto;
  65. }
  66.  
  67. ::-webkit-scrollbar {width: 6px; height: 4px; }
  68. ::-webkit-scrollbar-thumb { background-color: #130C11;}
  69.  
  70. body{
  71. margin:0px;
  72. background-attachment: fixed;
  73. background-repeat: repeat;
  74. background-color:{color:background};
  75. background-attachment: fixed;
  76. background-repeat: repeat;
  77. font-size: 10px;
  78. font-family: Geneva;
  79. line-height:11px;
  80. color: {color:text};
  81. }
  82.  
  83. a:link, a:active, a:visited{
  84. color: {color:link};
  85. text-decoration: none;
  86. -webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;
  87. }
  88.  
  89. a:hover{
  90. color: {color:hover};
  91. -webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;
  92. }
  93.  
  94. .entry {
  95. margin:2px;
  96. margin-bottom:-2px;
  97. padding: 0px;
  98. float:left;
  99. background-color:transparent;
  100. {block:IndexPage}
  101. width:230px;
  102. {/block:IndexPage}
  103. {block:PermalinkPage}
  104. width:480px;
  105. {/block:PermalinkPage}
  106. padding-bottom: 0px;
  107. font-family:{font:posts};
  108. font-size: 10px;
  109. line-height:14px;
  110. overflow:hidden;
  111. }
  112.  
  113. .img{{block:ifimagefade}opacity:.8;{/block:ifimagefade}{block:ifnotimagefade}opacity:1;{/block:ifnotimagefade}-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}
  114. .img:hover{opacity:1;-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}
  115.  
  116. .perma {position:absolute; text-decoration:none; margin-top:0px; margin-left:150px; padding:4px; background:#fff; opacity:0; -webkit-transition: 0.4s ease-in;z-index:10;font-family:{font:posts};color:{color:text};width:107px;text-align:center;{block:ifnotshowphotopermalinks}visibility:hidden;{/block:ifnotshowphotopermalinks}}
  117. .perma a {text-decoration:none;text-transform:uppercase;}
  118. .entry:hover .perma {-webkit-transition: 0.3s ease-in; position:absolute; margin-top:0px; margin-left:0px;padding:4px; background:#fff; opacity:.9;}
  119. .entry:hover .perma:hover{opacity:1;}
  120.  
  121. .perma2 {position:absolute; text-decoration:none; margin-top:0px;margin-left:-10px; padding:4px; background:#fff; opacity:0; -webkit-transition: 0.4s ease-in;z-index:10;font-family:{font:posts};color:{color:link};width:107px;text-align:center;{block:ifnotshowphotopermalinks}visibility:hidden;{/block:ifnotshowphotopermalinks}}
  122. .perma2 a {text-decoration:none;text-transform:uppercase;}
  123. .entry:hover .perma2 {-webkit-transition: 0.3s ease-in; position:absolute; margin-top:0px; margin-left:115px;padding:4px; background:#fff; opacity:.9;}
  124. .entry:hover .perma2:hover{opacity:1;}
  125.  
  126. #sidebar{
  127. opacity:1;
  128. background:transparent;
  129. margin-top: 0px;
  130. width:470px;
  131. overflow:hidden;
  132. margin-left:270px;
  133. font-family:{font:sidebar};
  134. font-size: 10px;
  135. padding-top:0px;
  136. padding: 4px;
  137. padding-bottom:15px;
  138. height:auto;
  139. z-index:1;
  140. position:relative;
  141. text-align:center;
  142. border-bottom:1px solid #cccccc;
  143. }
  144.  
  145. #posts {
  146. width: 484px;
  147. padding-left: 2px;
  148. background:transparent;
  149. padding-right: 2px;
  150. padding-top:10px;
  151. margin-top:0px;
  152. margin-left:270px;
  153. float:left;
  154. }
  155.  
  156. #infscr-loading{
  157. bottom: -70px;
  158. position: absolute;
  159. left: 50%;
  160. margin-left:-8px;
  161. width:16px;
  162. height:11px;
  163. overflow:hidden;
  164. margin-bottom: 50px;
  165. }
  166.  
  167. .title{
  168. font-family:{font:posts};
  169. font-size: 13px;
  170. text-transform:uppercase;
  171. line-height:15px;
  172. }
  173.  
  174. blockquote{
  175. padding:0px 0px 2px 5px;
  176. margin:0px 0px 2px 10px;
  177. border-left: 1px dotted #555555;
  178. }
  179.  
  180. ul, ol, li{list-style:none; margin:0px; padding:0px;}
  181. .user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label,
  182. .user_7 .label, .user_8 .label, .user_9 .label {color:#130C11;}
  183. .notes img{width:10px; position:relative; top:3px;}
  184.  
  185. .perm {
  186. margin:0px;
  187. text-align:center;
  188. padding:0px;
  189. padding-bottom:5px;
  190. opacity:0;
  191. text-transform:uppercase;
  192. font-family:{font:posts};
  193. -moz-transition: all 0.6s ease-out;
  194. -o-transition: all 0.6s ease-out;
  195. -webkit-transition: all 0.6s ease-out;
  196. transition: all 0.6s ease-out;
  197. }
  198.  
  199. .entry:hover .perm{
  200. opacity: 1;
  201. }
  202.  
  203. .blogtitle{
  204. {block:iftitlefont}
  205. font-family: vampiro one;
  206. {/block:iftitlefont}
  207. {block:ifnottitlefont}
  208. font-family:permanent marker;
  209. {/block:ifnottitlefont}
  210. text-transform:lowercase;
  211. font-size:40px;
  212. color: {color:primary};
  213. line-height: 40px;
  214. -webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;transition: all 0.2s ease-out;
  215. padding-bottom:10px;
  216. }
  217. .desc{font-size:12px;padding-top:5px;height:24px;line-height:11px;overflow:auto;width:200px;}
  218. .info{border-top:1px solid #cccccc;margin-bottom:-5px;margin-top:-60px;opacity:0;-webkit-transition: all 0.6s ease-out;-moz-transition: all 0.6s ease-out;transition: all 0.6s ease-out;}
  219. #sidebar:hover .info{margin-top:0px;opacity:1;-webkit-transition: all 0.6s ease-out;-moz-transition: all 0.6s ease-out;transition: all 0.6s ease-out;}
  220.  
  221. .nav{font-family:{font:navigation};border-radius:0px;font-size:11px;line-height:5px;margin:3px;text-transform:uppercase;letter-spacing:1px;padding-bottom:3px;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  222.  
  223. .nav:hover{border-top:4px solid {color:link};margin:7px;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  224.  
  225. </style>
  226. <link href='http://fonts.googleapis.com/css?family=Vampiro+One' rel='stylesheet' type='text/css'>
  227. <link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
  228. {block:IndexPage}
  229. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  230. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
  231.  
  232. <script type="text/javascript">
  233. $(window).load(function () {
  234. var $content = $('#posts');
  235. $content.masonry({itemSelector: '.entry'}),
  236. $content.infinitescroll({
  237. navSelector : 'div#pagination',
  238. nextSelector : 'div#pagination a#nextPage',
  239. itemSelector : '.entry',
  240. loading: {
  241. finishedMsg: '',
  242. img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
  243. },
  244. bufferPx : 600,
  245. debug : false,
  246. },
  247. // call masonry as a callback.
  248. function( newElements ) {
  249. var $newElems = $( newElements );
  250. $newElems.hide();
  251. // ensure that images load before adding to masonry layout
  252. $newElems.imagesLoaded(function(){
  253. $content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );
  254. });
  255. });
  256. });
  257. </script>
  258.  
  259. {/block:IndexPage}
  260.  
  261. <meta name="viewport" content="width=800" />
  262.  
  263. </head>
  264. <body>
  265. <div class="wrapper">
  266. <div id="sidebar">
  267. <center><div class="blogtitle"><a href="/">{Title}</a></div>
  268. <div class="info">
  269. <div class="desc">{description}</div>
  270. <br>
  271. <a href="/" class="nav">home</a> <a href="/ask" class="nav">message</a> {block:iflinkonetitle}<a href="{text:link one}" class="nav">{text:link one title}</a>{/block:iflinkonetitle} {block:iflinktwotitle}<a href="{text:link two}" class="nav">{text:link two title}</a>{/block:iflinktwotitle} {block:iflinkthreetitle}<a href="{text:link three}" class="nav">{text:link three title}</a>{/block:iflinkthreetitle} {block:iflinkfourtitle}<a href="{text:link four}" class="nav">{text:link four title}</a>{/block:iflinkfourtitle} {block:iflinkfivetitle}<a href="{text:link five}" class="nav">{text:link five title}</a>{/block:iflinkfivetitle} <a href="http://sunrisen.tumblr.com" class="nav">theme</a>
  272. </div>
  273. </center>
  274. </div>
  275.  
  276. <div id="posts">
  277. <div class="autopagerize_page_element">
  278. {block:Posts}
  279. <div class="entry">
  280.  
  281. {block:Text}
  282. {block:IndexPage}
  283. {/block:IndexPage}{block:Title}<span class="title">{Title}</span>{/block:Title}<span class="entrytext">{Body}</span>
  284. {block:IndexPage}<div class="perm"><a href="{reblogurl}" target="_blank">REBLOG</a> / <a href="{permalink}">{notecountwithlabel}</a></div>{/block:IndexPage}
  285. {/block:Text}
  286.  
  287. {block:Link}
  288. {block:IndexPage}
  289. {/block:IndexPage}<a href="{URL}" class="title">{Name}</a>
  290. {block:Description}{Description}{/block:Description}
  291. {block:IndexPage}<div class="perm"><a href="{reblogurl}" target="_blank">REBLOG</a> / <a href="{permalink}">{notecountwithlabel}</a></div>{/block:IndexPage}
  292. {block:Link}
  293.  
  294. {block:Photo}
  295. {block:IndexPage}
  296. <div class="perma"><a href="{reblogurl}" target="_blank">REBLOG</a></div>
  297. <div class="perma2"><a href="{permalink}">{notecountwithlabel}</a></div>
  298. {/block:IndexPage}
  299. {block:IndexPage}<div class="img">{LinkOpenTag}<div class="photo"><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="230"/></a></div>{LinkCloseTag}</div>{/block:IndexPage}
  300. {block:PermalinkPage}{LinkOpenTag}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="480px"/></a>{LinkCloseTag}{/block:PermalinkPage}
  301. {/block:Photo}
  302.  
  303.  
  304. {block:Photoset}
  305. <center>
  306. {block:IndexPage}
  307. {Photoset-250}
  308. {block:IndexPage}
  309. {/block:IndexPage}
  310. </center>
  311. <center>{block:PermalinkPage}{Photoset-410}{/block:PermalinkPage}</center>
  312. {block:IndexPage}<div class="perm"><a href="{reblogurl}" target="_blank">REBLOG</a> / <a href="{permalink}">{notecountwithlabel}</a></div>{/block:IndexPage}
  313. {/block:Photoset}
  314.  
  315. {block:Quote}
  316. {block:IndexPage}
  317. {/block:IndexPage}
  318. {Quote}</span>
  319. {block:IndexPage}<div class="perm"><a href="{reblogurl}" target="_blank">REBLOG</a> / <a href="{permalink}">{notecountwithlabel}</a></div>{/block:IndexPage}
  320. {/block:Quote}
  321.  
  322. {block:Chat}
  323. {block:IndexPage}
  324. {/block:IndexPage}
  325. {block:Title}<span class="title">{Title}</span>{/block:Title}
  326. <ul class="chat">
  327. {block:Lines}
  328. <li class="user_{UserNumber}">
  329. {block:Label}
  330. <span class="label">{Label}</span>
  331. {/block:Label}
  332. {Line}
  333. </li>
  334. {/block:Lines}
  335. </ul>
  336. {block:IndexPage}<div class="perm"><a href="{reblogurl}" target="_blank">REBLOG</a> / <a href="{permalink}">{notecountwithlabel}</a></div>{/block:IndexPage}
  337. {/block:Chat}
  338.  
  339. {block:Audio}
  340. {block:IndexPage}
  341. {/block:IndexPage}
  342. <center><div style="width:250px; height:28px;"><div style="float:left">{AudioPlayerBlack}</div><div style="margin-top:10px; float:right;">
  343. {block:ExternalAudio}{/block:ExternalAudio}</div></div></center>
  344. {/block:Audio}
  345.  
  346. {block:Video}
  347. {block:IndexPage}
  348. {/block:IndexPage}
  349. <center>
  350. {block:IndexPage}
  351. {Video-250}
  352. {/block:IndexPage}
  353. </center>
  354. <center>{block:PermalinkPage}{Video-250}{/block:PermalinkPage}</center>
  355. {block:IndexPage}<div class="perm"><a href="{reblogurl}" target="_blank">REBLOG</a> / <a href="{permalink}">{notecountwithlabel}</a></div>{/block:IndexPage}
  356. {block:Video}
  357.  
  358. {block:Answer}
  359. {block:IndexPage}
  360. {/block:IndexPage}
  361. <img src="{AskerPortraitURL-30}" width="30" align="left" style="margin-right:3px;"/>
  362. <b>{Asker}</b>: <b>{Question}</b>{Answer}
  363. {block:IndexPage}<div class="perm">POSTED {timeago} WITH <a href="{permalink}">{notecountwithlabel}</a></div>{/block:IndexPage}
  364. {/block:Answer}
  365.  
  366.  
  367. {block:PermalinkPage}
  368. {block:Date}
  369. <center>
  370. {TimeAgo} | {12HourWithZero}:{Minutes}{AmPm}
  371. <br>{block:Caption}{Caption}{/block:Caption}{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} &middot; {block:Tags}<a href="TagURL"> #{Tag}</a> {/block:Tags}{/block:hasTags}</center>
  372. {/block:Date}
  373.  
  374. {/block:PermalinkPage}
  375.  
  376. {block:PostNotes}{PostNotes}
  377. {/block:PostNotes}
  378. </div>
  379.  
  380.  
  381. {/block:Posts}
  382. </div>
  383. </div>
  384. <div class="right">
  385. </div>
  386. <div class="footer">
  387. <br>
  388. </div>
  389. </div>
  390. </body>
  391. </html>
  392. <div style="position:fixed;right:0px;bottom:-425px;">
  393. <---DONT REMOVE---->
  394. {block:IndexPage}
  395. {block:Pagination}
  396. <div id="pagination">
  397. {block:NextPage}
  398. <a id="nextPage" href="{NextPage}">&nbsp;&rarr;</a>
  399. {/block:NextPage}
  400. {block:PreviousPage}
  401. <a href="{PreviousPage}">&larr;&nbsp;</a>
  402. {/block:PreviousPage}
  403. </div>
  404. {/block:Pagination}
  405. {/block:IndexPage}</div>
  406. </div>
  407. </body>
  408. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement