Advertisement
ogaraster

Rain Theme v.2

Apr 10th, 2013
7,907
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.89 KB | None | 0 0
  1. <!--
  2.  
  3. Rain Theme (v.2) brought to you by Atlas Designs
  4. http://atlasdesigns.co/
  5.  
  6. Do not remove theme credit without permission.
  7.  
  8. -->
  9.  
  10. <head>
  11. <title>{title}</title>
  12. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  13. <link rel="shortcut icon" href="{Favicon}">
  14.  
  15. <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
  16.  
  17. {block:IndexPage}
  18.  
  19. <script type="text/javascript"
  20. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  21.  
  22. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  23.  
  24. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
  25. <script type="text/javascript">
  26. $(window).load(function () {
  27. var $content = $('#content');
  28. $content.masonry({itemSelector: '.entry'}),
  29. $content.infinitescroll({
  30. navSelector : 'div#pagination',
  31. nextSelector : 'div#pagination a#nextPage',
  32. itemSelector : '.entry',
  33. loading: {
  34. finishedMsg: '',
  35. img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
  36. },
  37. bufferPx : 600,
  38. debug : false,
  39. },
  40. // call masonry as a callback.
  41. function( newElements ) {
  42. var $newElems = $( newElements );
  43. $newElems.hide();
  44. // ensure that images load before adding to masonry layout
  45. $newElems.imagesLoaded(function(){
  46. $content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );});});});</script>
  47. {/block:IndexPage}
  48.  
  49. <meta name="color:background" content="#ffffff" />
  50. <meta name="color:text" content="#000" />
  51. <meta name="color:title" content="#000" />
  52. <meta name="color:borders" content="#ebebeb" />
  53. <meta name="color:nav link" content="#828282" />
  54. <meta name="color:nav hover" content="#828282" />
  55. <meta name="color:link" content="#828282" />
  56. <meta name="color:link hover" content="#eee" />
  57. <meta name="color:scrollbar" content="#a3a3a3" />
  58. <meta name="color:post hover" content="#fff">
  59.  
  60. <meta name="text:reblog" content="reblog">
  61. <meta name="text:home" content="home">
  62. <meta name="text:message" content="message">
  63. <meta name="text:archive" content="index">
  64.  
  65. <meta name="if:larger posts" content="0">
  66. <meta name="if:one column" content="0">
  67. <meta name="if:two columns" content="0">
  68. <meta name="if:show title" content="0">
  69. <meta name="if:show banner" content="0">
  70.  
  71. <meta name="image:background" content="" />
  72. <meta name="image:banner" content="" />
  73.  
  74. <style type="text/css">
  75.  
  76.  
  77. ::-webkit-scrollbar {width: 5px; height: 0px; background:{color:background};}
  78. ::-webkit-scrollbar-thumb {background: {color:scrollbar};}
  79.  
  80. iframe#tumblr_controls {position:fixed; z-index:9999999999; top: 3px; margin: 0 0 0 0; right:4px; -webkit-filter: invert(100%);}
  81.  
  82. body {
  83. background-color: {color:background};
  84. background-image:url({image:Background});
  85. background-attachment: fixed;
  86. background-repeat: repeat;
  87. font-size:12px;
  88. font-family:lato;
  89. line-height:14px;
  90. text-transform:none;
  91. color: {color:text};
  92. }
  93.  
  94. #description{
  95. {block:ifnotonecolumn}
  96. position:absolute;
  97. {/block:ifnotonecolumn}
  98. {block:ifonecolumn}
  99. position:fixed;
  100. {/block:ifonecolumn}
  101. {block:ifnottwocolumns}
  102. position:absolute;
  103. {/block:ifnottwocolumns}
  104. {block:iftwocolumns}
  105. position:fixed;
  106. {/block:iftwocolumns}
  107. top:0px;
  108.  
  109. {block:ifshowtitle}
  110. top:30px;
  111. {/block:ifshowtitle}
  112.  
  113. {block:ifshowbanner}
  114. top:103px;
  115. {/block:ifshowbanner}
  116.  
  117. left:325px;
  118. width:250px;
  119. border-left:20px solid {color:borders};
  120. padding-left:5px;
  121. padding-right:5px;
  122. padding-top:5px;
  123. padding-bottom:10px;
  124. -moz-transition: all 0.2s ease-in-out;
  125. -webkit-transition: all 0.2s ease-in-out;
  126. -o-transition: all 0.2s ease-in-out;
  127. -ms-transition: all 0.2s ease-in-out;
  128. transition: all 0.2s ease-in-out;
  129. z-index:999;
  130. }
  131.  
  132. #nav{
  133. {block:ifnotonecolumn}
  134. position:absolute;
  135. {/block:ifnotonecolumn}
  136. {block:ifonecolumn}
  137. position:fixed;
  138. {/block:ifonecolumn}
  139. {block:ifnottwocolumns}
  140. position:absolute;
  141. {/block:ifnottwocolumns}
  142. {block:iftwocolumns}
  143. position:fixed;
  144. {/block:iftwocolumns}
  145. top:0px;
  146.  
  147. {block:ifshowtitle}
  148. top:30px;
  149. {/block:ifshowtitle}
  150.  
  151. {block:ifshowbanner}
  152. top:103px;
  153. {/block:ifshowbanner}
  154.  
  155. left:45px;
  156. width:250px;
  157. text-transform:uppercase;
  158. text-align:right;
  159. letter-spacing:3px;
  160. line-height:20px;
  161. border-right:20px solid {color:borders};
  162. padding-left:5px;
  163. padding-top:5px;
  164. padding-right:0px;
  165. padding-bottom:7px;
  166. -moz-transition: all 0.2s ease-in-out;
  167. -webkit-transition: all 0.2s ease-in-out;
  168. -o-transition: all 0.2s ease-in-out;
  169. -ms-transition: all 0.2s ease-in-out;
  170. transition: all 0.2s ease-in-out;
  171. z-index:999;
  172. }
  173. #nav a{
  174. color:{color:nav link};
  175. padding-left:2px;
  176. }
  177. #nav a:hover{
  178. background-color:{color:nav hover};
  179. color:{color:background};
  180. -moz-transition: all 0.2s ease-in-out;
  181. -webkit-transition: all 0.2s ease-in-out;
  182. -o-transition: all 0.2s ease-in-out;
  183. -ms-transition: all 0.2s ease-in-out;
  184. transition: all 0.2s ease-in-out;
  185. }
  186.  
  187. #blogtitle{
  188. {block:ifnotonecolumn}
  189. position:absolute;
  190. {/block:ifnotonecolumn}
  191. {block:ifonecolumn}
  192. position:fixed;
  193. {/block:ifonecolumn}
  194. {block:ifnottwocolumns}
  195. position:absolute;
  196. {/block:ifnottwocolumns}
  197. {block:iftwocolumns}
  198. position:fixed;
  199. {/block:iftwocolumns}
  200. width:300px;
  201. text-align:center;
  202. top:3px;
  203. left:173px;
  204. font-size:26px;
  205. line-height:26px;
  206. }
  207.  
  208. .answer{
  209. }
  210. .answer img {
  211. width:250px;
  212. height:auto;
  213. {block:permalinkpage}
  214. width:auto;
  215. height:auto;
  216. {/block:permalinkpage}
  217. }
  218.  
  219. a {
  220. text-decoration:none;
  221. color:{color:link};
  222. -webkit-transition: all 0.2s linear;
  223. -moz-transition: all 0.2s linear;
  224. transition: all 0.2s linear;
  225. }
  226.  
  227. a:link, a:active, a:visited{
  228. color: {color:link};
  229. }
  230.  
  231. a:hover{
  232. color: {color:link hover};
  233. }
  234.  
  235. div#center{
  236. margin-left: 0px;
  237. width: 100%;
  238. height: auto;
  239. overflow-x:hidden;
  240. }
  241.  
  242. div#content {
  243. width: 1160px;
  244. left:50%;
  245. margin-left:-580px;
  246. margin-top:150px;
  247. {block:ifshowbanner}
  248. margin-top:220px;
  249. {/block:ifshowbanner}
  250. float:left;
  251. position: absolute;
  252. {block:ifonecolumn}
  253. width: 300px;
  254. left:1175px;
  255. margin-top:00px;
  256. {/block:ifonecolumn}
  257. {block:iftwocolumns}
  258. width: 650px;
  259. left:1175px;
  260. margin-top:00px;
  261. position: absolute;
  262. {/block:iftwocolumns}
  263. }
  264.  
  265. #over{
  266. height:1000px!important;
  267. position:absolute;
  268. top:0px;
  269. left:0px;
  270. width: 100%;
  271. }
  272.  
  273. .entry{
  274. margin:40px;
  275.  
  276. {block:iflargerposts}
  277. margin:20px;
  278. {/block:iflargerposts}
  279.  
  280. float:left;
  281. height:auto;
  282. background-color: #trans;
  283. {block:IndexPage}
  284. width:150px;
  285.  
  286. {block:iflargerposts}
  287. width:250px;
  288. {/block:iflargerposts}
  289.  
  290. overflow:hidden;
  291. {/block:IndexPage}
  292. {block:PermalinkPage}
  293. width:450px;
  294. height:auto;
  295. {/block:PermalinkPage}
  296. -moz-transition: all 0.4s ease-in-out;
  297. -webkit-transition: all 0.4s ease-in-out;
  298. -o-transition: all 0.4s ease-in-out;
  299. -ms-transition: all 0.4s ease-in-out;
  300. transition: all 0.4s ease-in-out;
  301. }
  302.  
  303. .title{
  304. font-size:16px;
  305. line-height:28px;
  306. text-transform:uppercase;
  307. letter-spacing:2px;
  308. color: {color:title};
  309. }
  310.  
  311. blockquote{
  312. padding:0px 0px 0px 3px;
  313. margin:0px 0px 0px 2px;
  314. border-left: 2px solid #ddd;
  315. }
  316.  
  317. .entry .perma{
  318. position:absolute;
  319. left:7px;
  320. top:0px;
  321. width:auto;
  322. height:100%;
  323. padding:5px;
  324. overflow:hidden;
  325. background:{color:post hover};
  326. overflow:hidden;
  327. font-size:20px;
  328. line-height:30px;
  329. text-align:center;
  330. opacity: 0;
  331. -webkit-transition: all 0.2s linear;
  332. -webkit-transition: all 0.2s linear;
  333. -moz-transition: all 0.2s linear;
  334. transition: all 0.2s linear;
  335. }
  336.  
  337. .entry:hover .perma{
  338. opacity: .9;
  339. -webkit-transition: all 0.2s linear;
  340. -webkit-transition: all 0.2s linear;
  341. -moz-transition: all 0.2s linear;
  342. transition: all 0.2s linear;
  343. }
  344.  
  345. .entry:hover .permalink{
  346. line-height:10px;
  347. opacity:1;
  348. -webkit-transition: all 0.4s linear;
  349. -webkit-transition: all 0.4s linear;
  350. -moz-transition: all 0.4s linear;
  351. transition: all 0.4s linear;
  352. }
  353.  
  354. .permalink{
  355. font-size:10px;
  356. line-height:0;
  357. text-transform:uppercase;
  358. text-align:center;
  359. opacity:0;
  360. -webkit-transition: all 0.4s linear;
  361. -webkit-transition: all 0.4s linear;
  362. -moz-transition: all 0.4s linear;
  363. transition: all 0.4s linear;
  364. }
  365.  
  366. .notess{
  367. position:absolute;
  368. left:500px;
  369. top:10px;
  370. height:500px;
  371. width:500px;
  372. overflow:scroll;
  373. }
  374.  
  375. {CustomCSS}
  376. </style>
  377.  
  378. <title>{title}</title>
  379.  
  380. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  381.  
  382. </head>
  383. <body>
  384.  
  385. <div id="fb-root"></div>
  386. <script>(function(d, s, id) {
  387. var js, fjs = d.getElementsByTagName(s)[0];
  388. if (d.getElementById(id)) return;
  389. js = d.createElement(s); js.id = id;
  390. js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  391. fjs.parentNode.insertBefore(js, fjs);
  392. }(document, 'script', 'facebook-jssdk'));</script>
  393.  
  394. <div id="blogtitle">
  395. {block:ifnotshowbanner}{block:ifshowtitle}{title}{/block:ifshowtitle}{/block:ifnotshowbanner}
  396. {block:ifshowbanner}<img src="{image:banner}" height="100px">{block:ifshowbanner}
  397. </div>
  398.  
  399.  
  400. <div id="description">
  401. {Description}
  402. </div>
  403.  
  404. <div id="nav">
  405. <a href="/">{text:home}</a> <br>
  406. <a href="/ask">{text:message}</a> <br>
  407. <a href="/archive">{text:archive}</a> <br>
  408. {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a><br>{/block:Pages}{/block:HasPages}
  409. <a href="http://atlasdesigns.tumblr.com/">THEME</a> <br>
  410. </div>
  411.  
  412. <div id="center">
  413. <div id="over">
  414. <div id="content">
  415.  
  416. {block:Posts}
  417.  
  418. <div class="entry">
  419.  
  420. {block:Text}
  421. {block:Title}<center><span class="title">{Title}</span></center>{/block:Title}<div class="answer">
  422. <div style="margin-left:1px;">{Body}</div></div>
  423. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  424. {/block:Text}
  425.  
  426. {block:Link}
  427. <center><a href="{URL}"><span class="title">{Name}</span></a></center>
  428. <div style="margin-left:3px;">{block:Description}{Description}{/block:Description}</div>
  429. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  430. {block:Link}
  431.  
  432. {block:Photo}
  433. {block:IndexPage}{LinkOpenTag}<div class="photo"><a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" {block:iflargerposts} width=250px {/block:iflargerposts} width=150px /></a></div>{LinkCloseTag}
  434. <div class="perma">
  435. <a href="{ReblogURL}" target="_blank">⟲</a></div>
  436. {/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"width=450px/>{LinkCloseTag}{/block:PermalinkPage}
  437. {/block:Photo}
  438.  
  439. {block:Photoset}
  440. <center>
  441. {block:IndexPage}{Photoset-250}{/block:IndexPage}
  442. {block:PermalinkPage}{Photoset-400}{/block:PermalinkPage}
  443. </center>
  444. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  445. {/block:IndexPage}
  446. {/block:Photoset}
  447.  
  448. {block:Quote}
  449. {Quote}<br><i>{Source}</i>
  450. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  451. {/block:Quote}
  452.  
  453. {block:Chat}
  454. <div style="margin-left:3px;">
  455. {block:Title}<span class="title">{Title}</span>{/block:Title}
  456. <ul class="chat">
  457. {block:Lines}
  458. <li class="user_{UserNumber}">
  459. {block:Label}
  460. <span class="label">{Label}</span>
  461. {/block:Label}
  462. {Line}
  463. </li>
  464. {/block:Lines}
  465. </ul>
  466. </div>
  467. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  468. {/block:Chat}
  469.  
  470. {block:Audio}<div style="height:0px;background-color:black;opacity:0.1;width:100%;margin-top:10px;margin-bottom:5px;"></div>
  471. <center>{AudioPlayerBlack}
  472. {block:Caption}{Caption}{/block:Caption}</center>
  473. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  474. {/block:Audio}
  475.  
  476. {block:Answer}<img src="{AskerPortraitURL-24}" align="left" z-index: 1; style="padding:2px; border:1px solid #eeeeee"/> {Asker} asked: <br><i>{Question}</i><br><br><div class="answer">{Answer}</div>
  477. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  478. {/block:Answer}
  479.  
  480. {block:Video}
  481. {block:IndexPage}
  482. <center>
  483. {Video-250}</center>
  484. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  485. {/block:IndexPage}
  486. {block:PermalinkPage}
  487. <center>
  488. {Video-400}</center>
  489. {/block:PermalinkPage}
  490. {block:Video}
  491.  
  492. {block:PermalinkPage}
  493. {block:Caption}{Caption}<div style="height:1px;background-color:black;opacity:0.1;width:100%;margin-top:5px;margin-bottom:5px;"></div>{/block:Caption}
  494. {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} &middot; {block:Tags}<a href="TagURL"> #{Tag}</a> {/block:Tags}{/block:hasTags}
  495. {/block:PermalinkPage}
  496.  
  497.  
  498. {block:PostNotes}
  499. <div class="notess">{PostNotes}</div>
  500. {/block:PostNotes}
  501. </div>
  502.  
  503. {/block:Posts}
  504. </div>
  505. {block:IndexPage}
  506. {block:Pagination}
  507. <div id="pagination">
  508. {block:NextPage}
  509. <a id="nextPage" href="{NextPage}"></a>
  510. {/block:NextPage}
  511. {block:PreviousPage}
  512. <a href="{PreviousPage}"></a>
  513. {/block:PreviousPage}
  514. </div>
  515. {/block:Pagination}
  516. {/block:IndexPage}
  517. </div>
  518.  
  519. </body>
  520. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement