Advertisement
sunrisen

islands theme

Jun 1st, 2013
20,051
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.73 KB | None | 0 0
  1. <!--
  2.  
  3. ISLANDS THEME - RELEASED 01.06.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. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  16. <html xmlns="http://www.w3.org/1999/xhtml">
  17. <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
  18. <script type="text/javascript"
  19. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  20. <title>{Title}</title>
  21.  
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24. <meta name="color:background" content="#ffffff"/>
  25. <meta name="color:text" content="#000000"/>
  26. <meta name="color:link" content="#000000"/>
  27. <meta name="color:hover" content="#ffffff"/>
  28. <meta name="color:posts blackground" content="#ffffff"/>
  29.  
  30. <meta name="image:header" content=""/>
  31. <meta name="image:background" content=""/>
  32.  
  33. <meta name="if:show header image" content="0"/>
  34. <meta name="if:three columns" content="0"/>
  35. <meta name="if:four columns" content="1"/>
  36. <meta name="if:five columns" content="0"/>
  37. <meta name="if:show background image" content="0"/>
  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.  
  49. <style type="text/css">
  50.  
  51. #tumblr_controls{
  52. position:fixed !important;
  53. }
  54.  
  55. ::-webkit-scrollbar-thumb{
  56. background-color: {color:text};
  57. border: 2px solid {color:background};
  58. height:auto;
  59. -moz-border-radius: 10px;
  60. border-radius: 10px;
  61. }
  62.  
  63. ::-webkit-scrollbar {
  64. height:auto;
  65. width:9px;
  66. background-color: #999999;
  67. border: 4px solid {color:background};
  68. }
  69.  
  70. body{
  71. margin:0px;
  72. background-attachment: fixed;
  73. background-repeat: repeat;
  74. background-color:{color:background};
  75. {block:ifshowbackgroundimage}
  76. background:url('{image:background}');
  77. {/block:ifshowbackgroundimage}
  78. background-attachment: fixed;
  79. background-repeat: repeat;
  80. font-size: 11px;
  81. font-family: courier;
  82. line-height:9px;
  83. text-transform:lowercase;
  84. color: {color:text};
  85. }
  86.  
  87. a:link, a:active, a:visited{
  88. color: {color:link};
  89. text-decoration: none;
  90. padding-bottom:1px;
  91. }
  92.  
  93. a:hover{
  94. color: {color:link};
  95. }
  96.  
  97. .entry {
  98. margin:30px;
  99. padding: 0px;
  100. padding-bottom:0px;
  101. margin-bottom:25px;
  102. float:left;
  103. background-color:transparent;
  104. {block:IndexPage}
  105. width:200px;
  106. {/block:IndexPage}
  107. {block:PermalinkPage}
  108. width:500px;
  109. {/block:PermalinkPage}
  110. font-family:oxygen;
  111. font-weight:bold;
  112. font-size: 10px;
  113. overflow:hidden;
  114. text-transform:uppercase;
  115. line-height:14px;
  116. {block:ifanimatedpostentry}
  117. -webkit-transition-duration:2s;
  118. {/block:ifanimatedpostentry}
  119. }
  120. .photo a, .photo a:hover{background:none;border:none;}
  121.  
  122. .header_wrapper{width:800px;margin:0px auto;}
  123. #sidebar{
  124. z-index:109;
  125. overflow:hidden;
  126. font-size: 11px;
  127. font-family:geneva;
  128. text-transform:lowercase;
  129. width: 800px;
  130. padding-top:30px;
  131. height:auto;
  132. margin-top:0px;
  133. padding-bottom:10px;
  134. position:fixed;
  135. text-align:center;
  136. padding-bottom:50px;
  137. }
  138. .header{opacity:0;padding-top:10px;-webkit-transition-duration:.5s;}
  139. #sidebar:hover .header{opacity:1;}
  140. #description_box{width:200px;margin-top:-59px;text-align:right;padding:3px;-webkit-transition-duration:.5s;}
  141. #link_box{margin-top:-59px;width:200px;text-align:left;margin-left:600px;opacity:0;-webkit-transition-duration:.5s;padding:3px;}
  142. #sidebar:hover #link_box{opacity:1;}
  143. #sidebar:hover .blogtitle{opacity:.4;}#description_box:hover{-webkit-transition-duration:.5s;background:{color:background};border-radius:5px;}
  144. .links{float: left; font-family:trebuchet ms; margin-bottom: 4px; text-transform:uppercase; font-size: 10px; line-height: 15px; letter-spacing:1px; margin: 2px; background-color: #F8F8F8; width: auto; padding: 6px; text-align:center;padding-top:3px;padding-bottom:5px;}
  145. .links:hover{background-color: #b8b8b8;}
  146.  
  147. #posts {
  148. {block:indexpage}
  149. {block:ifthreecolumns}
  150. width:780px;
  151. {/block:ifthreecolumns}
  152. {block:iffourcolumns}
  153. width:1040px;
  154. {/block:iffourcolumns}
  155. {block:iffivecolumns}
  156. width:1300px;
  157. {/block:iffivecolumns}
  158. {/block:indexpage}
  159. {block:permalinkpage}
  160. width:520px;
  161. {/block:permalinkpage}
  162. margin:0px auto;
  163. padding-top:100px;
  164. }
  165.  
  166. #infscr-loading{
  167. bottom: -70px;
  168. position: absolute;
  169. left: 50%;
  170. margin-left:-8px;
  171. width:16px;
  172. height:11px;
  173. overflow:hidden;
  174. margin-bottom: 50px;
  175. }
  176.  
  177. .img{{block:indexpage}{block:ifimagefade}opacity:.8;{/block:ifimagefade}{/block:indexpage}-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
  178. }
  179.  
  180. .img:hover{opacity:1;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  181.  
  182. .title{
  183. font-family:geneva;
  184. font-size: 12px;
  185. font-weight:normal;
  186. line-height:15px;
  187. text-transform:uppercase;
  188. }
  189.  
  190. blockquote{
  191. padding:0px 0px 2px 5px;
  192. margin:0px 0px 2px 10px;
  193. border-left: 1px dotted #555555;
  194. }
  195.  
  196. ul, ol, li{list-style:none; margin:0px; padding:0px;}
  197. .user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label,
  198. .user_7 .label, .user_8 .label, .user_9 .label {color:#130C11;}
  199. .notes img{width:15px;height:15px;border-radius:10000px; position:relative; top:3px;}
  200. .notes{font-size:9px;text-transform:uppercase;}
  201.  
  202. .blogtitle{
  203. font-family:oxygen;
  204. font-size:35px;
  205. color: {color:blogtitle};
  206. line-height: 50px;
  207. padding:0px;
  208. padding-left:5px;padding-right:5px;
  209. margin:0px;
  210. text-transform:uppercase;
  211. border:2px solid {color:link};
  212. -webkit-transition-duration:.5s;
  213. }
  214. .blogtitle:hover a{background:transparent;color:{color:hover};text-decoration:none;-webkit-transition-duration:.5s;}
  215. .blogtitle:hover{background:{color:link};color:{color:hover};-webkit-transition-duration:.5s;}}
  216. .blogtitle a:hover{color:{color:hover};-webkit-transition-duration:.5s;}
  217.  
  218. .perm{margin-top:5px;font-family:oxygen;font-size:9px;text-transform:uppercase;opacity:1;text-align:right;border-top:1px solid #ccc;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;transition: all 0.3 ease-in-out;}
  219.  
  220. .entry:hover .perm{margin-top:5px;opacity:1;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
  221.  
  222. .photoperma {-webkit-transition-duration:.2s;position:absolute; text-decoration:none; margin-top:-25px; margin-left:8px; padding:0px;background:none; opacity:0;z-index:10;font-size:10px;width:50px;height:10px;line-height:9px;color:black;}
  223. .entry:hover .photoperma {-webkit-transition-duration:.2s;z-index:1; position:absolute; opacity:1;margin-top:5px;}
  224. .entry:hover .photoperma:hover{opacity:1;}
  225.  
  226. .photoperm {-webkit-transition-duration:.4s;z-index:1;position:absolute; text-decoration:none; margin-top:-19px; margin-left:42px; padding:0px; background:none; opacity:0; z-index:10;font-size:10px;width:50px;height:20px;line-height:9px;color:black;background:none;border-bottom-right-radius:10px;}
  227. .entry:hover .photoperm { -webkit-transition-duration:.4s;position:absolute;margin-top:5px; opacity:1;}
  228. .entry:hover .photoperm:hover{opacity:1;}
  229.  
  230. @font-face{font-family:pixel;src:url('http://static.tumblr.com/apahx90/BfAmkmufl/freepixel-1.ttf');}
  231.  
  232. .audioperma {z-index:1;position:absolute; text-decoration:none; margin-top:0px; margin-left:0px; padding:0px; background:{color:background}; opacity:0; -webkit-transition: 0.4s ease-in;z-index:10;width:200px;height:200px;text-align:center;font-size:12px;text-transform:uppercase;}
  233. .entry:hover .audioperma {-webkit-transition: 0.3s ease-in;position:absolute; margin-left:0px;padding:0px; background:{color:background}; opacity:.8;}
  234.  
  235. .permm{margin-top:-8px;font-family:oxygen;font-size:9px;text-transform:uppercase;text-align:center;opacity:0;border-top:1px solid #cccccc;-webkit-transition: all 0.3s ease-in-out;
  236. -moz-transition: all 0.3s ease-in-out;
  237. transition: all 0.3 ease-in-out;}
  238.  
  239. .entry:hover .permm{margin-top:-8px;opacity:1;-webkit-transition: all 0.5s ease-in-out;
  240. -moz-transition: all 0.5s ease-in-out;
  241. transition: all 0.5s ease-in-out;}
  242.  
  243. {CustomCSS}
  244. </style>
  245. <link href='http://fonts.googleapis.com/css?family=Oxygen:700,400' rel='stylesheet' type='text/css'>
  246. {block:IndexPage}
  247. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  248. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
  249. <script type="text/javascript">
  250. $(window).load(function () {
  251. var $content = $('#posts');
  252. $content.masonry({itemSelector: '.entry'}),
  253. $content.infinitescroll({
  254. navSelector : 'div#pagination',
  255. nextSelector : 'div#pagination a#nextPage',
  256. itemSelector : '.entry',
  257. loading: {
  258. finishedMsg: '',
  259. img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
  260. },
  261. bufferPx : 600,
  262. debug : false,
  263. },
  264. // call masonry as a callback.
  265. function( newElements ) {
  266. var $newElems = $( newElements );
  267. $newElems.hide();
  268. // ensure that images load before adding to masonry layout
  269. $newElems.imagesLoaded(function(){
  270. $content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );
  271. });
  272. });
  273. });
  274. </script>
  275.  
  276. {/block:IndexPage}
  277. <meta name="viewport" content="width=800" />
  278.  
  279. </head><body>
  280. <div class="header_wrapper">
  281. <div id="sidebar">
  282. {block:ifshowheaderimage}<a href="/"><img src="{image:header}" style="max-width:100px;"/></a><br>{/block:ifshowheaderimage}
  283. {block:ifnotshowheaderimage}<a href="/" class="blogtitle">{Title}</a><br>{/block:ifnotshowheaderimage}
  284. <div class="header">
  285. <div id="description_box">{description}</div>
  286. </div>
  287. <div id="link_box">
  288. <a href="/" class="links">home</a><a href="/ask" class="links">message</a>{block:iflinkonetitle}<a href="{text:link one}" class="links">{text:link one title}</a>{/block:iflinkonetitle}{block:iflinktwotitle}<a href="{text:link two}" class="links">{text:link two title}</a>{/block:iflinktwotitle}{block:iflinkthreetitle}<a href="{text:link three}" class="links">{text:link three title}</a>{/block:iflinkthreetitle}{block:iflinkfourtitle}<a href="{text:link four}" class="links">{text:link four title}</a>{/block:iflinkfourtitle}<a href="http://sunrisen.tumblr.com" class="links">theme</a>
  289. </div>
  290. </div>
  291. </div>
  292. <div class="autopagerize_page_element">
  293. <div id="posts">
  294.  
  295. {block:Posts}
  296. <div class="entry" style="{block:Audio}{block:PermalinkPage}width:250px;{/block:permalinkpage}{/block:audio}">
  297.  
  298. {block:Text}
  299. <div style="padding:5px;">
  300. {block:IndexPage}<div style="display:none;">{block:RebloggedFrom}{ReblogParentName}{ReblogParentTitle}{ReblogParentURL}{/block:RebloggedFrom}{block:ContentSource}{SourceURL} {/block:ContentSource}</div>
  301. {/block:IndexPage}{block:Title}<span class="title">{Title}</span>{/block:Title}<span class="entrytext">{Body}</span>
  302. {block:IndexPage}<div class="perm"><a href="{reblogurl}" target="_blank">reblog</a> : <a href="{permalink}" target="_blank">{notecountwithlabel}</a></div>
  303. {/block:IndexPage}
  304. </div>
  305. {/block:Text}
  306.  
  307. {block:Link}
  308. <div style="padding:5px;">
  309. {block:IndexPage}<div style="display:none;">{block:RebloggedFrom}{ReblogParentName}{ReblogParentTitle}{ReblogParentURL}{/block:RebloggedFrom}{block:ContentSource}{SourceURL} {/block:ContentSource}</div>
  310. {/block:IndexPage}<a href="{URL}" class="title">{Name}</a>
  311. {block:Description}{Description}{/block:Description}
  312. {block:IndexPage}<div class="perm"><a href="{reblogurl}" target="_blank">reblog</a> : <a href="{permalink}" target="_blank">{notecountwithlabel}</a></div>
  313. {/block:IndexPage}
  314. </div>
  315. {block:Link}
  316.  
  317. {block:Photo}
  318. {block:IndexPage}
  319. <div class="photoperma"><a href="{reblogurl}" target="_blank"><img src="http://static.tumblr.com/t98gn37/RA4mf7oly/reblawg.png" width=20 style="margin-left:-5px;margin-top:-2px;background:white;padding:4px;border-radius:50px;"/></a></div>
  320. <div class="photoperm">
  321. <a href="{permalink}"><img src="http://cdn5.iconfinder.com/data/icons/iconsweets2/40/link_seo.png" style="float:center;margin-left:-7px;margin-top:-2px;background:white;padding:1px;border-radius:50px;" width="26px;"/></a></div>
  322. {/block:IndexPage}
  323. {block:IndexPage}<div class="img"><a href="{Permalink}" style="background-color:transparent;">
  324. <img src="{PhotoURL-250}" width="100%" class="border"></img></a></div>{/block:IndexPage}{block:PermalinkPage}<img src="{PhotoURL-400}" width="500px" class="border"></img>{/block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
  325. {/block:Photo}
  326.  
  327. {block:Photoset}
  328. {block:IndexPage}<a href="{permalink}">{block:Photos}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="200px"/>{/block:Photos}<div style="display:none;">{block:RebloggedFrom}{ReblogParentName}{ReblogParentTitle}{ReblogParentURL}{/block:RebloggedFrom}{block:ContentSource}{SourceURL} {/block:ContentSource}</div></a>{/block:IndexPage}
  329. {block:PermalinkPage}{Photoset-400}{/block:PermalinkPage}
  330. {/block:Photoset}
  331.  
  332. {block:Quote}
  333. {block:IndexPage}<div style="display:none;">{block:RebloggedFrom}{ReblogParentName}{ReblogParentTitle}{ReblogParentURL}{/block:RebloggedFrom}{block:ContentSource}{SourceURL} {/block:ContentSource}</div>
  334. {/block:IndexPage}
  335. {Quote}</span>
  336. {block:IndexPage}<div class="perm"><div style="float:left;">{block:source}{source}{/block:source}</div><a href="{reblogurl}" target="_blank">reblog</a> : <a href="{permalink}" target="_blank">{notecountwithlabel}</a></div>
  337. {/block:IndexPage}
  338. {/block:Quote}
  339.  
  340. {block:Chat}
  341. {block:IndexPage}<div style="display:none;">{block:RebloggedFrom}{ReblogParentName}{ReblogParentTitle}{ReblogParentURL}{/block:RebloggedFrom}{block:ContentSource}{SourceURL} {/block:ContentSource}</div>
  342. {/block:IndexPage}
  343. {block:Title}<span class="title">{Title}</span>{/block:Title}
  344. <ul class="chat">
  345. {block:Lines}
  346. <li class="user_{UserNumber}">
  347. {block:Label}
  348. <span class="label">{Label}</span>
  349. {/block:Label}
  350. {Line}
  351. </li>
  352. {/block:Lines}
  353. </ul>
  354. {block:IndexPage}<div class="perm"><a href="{reblogurl}" target="_blank">reblog</a> : <a href="{permalink}" target="_blank">{notecountwithlabel}</a></div>
  355. {/block:IndexPage}
  356. {/block:Chat}
  357.  
  358. {block:Audio}
  359. {block:AlbumArt}<a href="{reblogurl}" target="_blank"><img src="{AlbumArtURL}" style="{block:indexpage}width:200px;height:200px;{/block:indexpage}{block:permalinkpage}width:220px;height:220px;float:center;{/block:permalinkpage}position:relative;"></a>{/block:AlbumArt}
  360. <div style="{block:indexpage}position:relative;width:200px;height:27px;margin-top:-1px;margin-right:2px;{/block:indexpage}{block:permalinkpage}float:left;text-align:left;width:25px;height:27px;padding-top:5px;padding:0px;margin-top:-120px;margin-right:120px;margin-left:50px;z-index:100000000000009;float:center;border-radius:100px;overflow:hidden;{/block:permalinkpage}float:right;background-color:#000000;">{AudioPlayerBlack}
  361. {block:ExternalAudio}{/block:ExternalAudio}</div>
  362. {/block:Audio}
  363.  
  364. {block:Video}
  365. {block:IndexPage}
  366. {/block:IndexPage}
  367. <center>
  368. {block:IndexPage}
  369. <div style="width:198px;height:auto;padding-top:20px;padding-bottom:20px;font-family:oxygen;text-transform:uppercase;font-size:11px;font-weight:bold;border:1px solid white;"><a href="{permalink}">view video</a></div>
  370. {/block:IndexPage}
  371. </center>
  372. <center>{block:PermalinkPage}{Video-400}{/block:PermalinkPage}</center>
  373. {block:Video}
  374.  
  375. {block:Answer}
  376. <div style="padding:2px;">
  377. {block:IndexPage}
  378. {/block:IndexPage}
  379. <img src="{AskerPortraitURL-30}" width="30" align="left" style="margin-right:3px;border-radius:500px;"/>
  380. <b>{Asker}</b>: <b>{Question}</b>{Answer}
  381. {block:IndexPage}<div class="perm"><a href="{permalink}" target="_blank">{notecountwithlabel}</a></div>
  382. {/block:IndexPage}
  383. </div>
  384. {/block:Answer}
  385.  
  386.  
  387. {block:PermalinkPage}
  388. {block:Date}
  389. <center>
  390. {TimeAgo} | {12HourWithZero}:{Minutes}{AmPm}
  391. <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>
  392. {/block:Date}
  393. <center>
  394. via: <a href="{ReblogParentURL}">{ReblogParentName}</a></center><br>
  395. {/block:PermalinkPage}
  396.  
  397. {block:PostNotes}<div class="notes">{PostNotes}</div>
  398. {/block:PostNotes}
  399. </div>
  400.  
  401.  
  402. {/block:Posts}
  403. </div>
  404. </div>
  405. <div class="right">
  406. </div>
  407. <div class="footer">
  408. <br>
  409. </div>
  410. </div>
  411. </body>
  412. </html>
  413. <div style="position:fixed;right:0px;bottom:-425px;">
  414. {block:IndexPage}
  415. {block:Pagination}
  416. <div id="pagination">
  417. {block:NextPage}
  418. <a id="nextPage" href="{NextPage}">&nbsp;&rarr;</a>
  419. {/block:NextPage}
  420. {block:PreviousPage}
  421. <a href="{PreviousPage}">&larr;&nbsp;</a>
  422. {/block:PreviousPage}
  423. </div>
  424. {/block:Pagination}
  425. {/block:IndexPage}</div>
  426. </body>
  427. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement