Advertisement
ogaraster

Soap Theme

Jun 15th, 2013
21,667
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.66 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. Soap Theme brought to you by Atlas Designs
  7. http://atlasdesigns.co/
  8.  
  9. Do not remove credits unless given permission to do so.
  10.  
  11. -->
  12.  
  13. <head>
  14.  
  15. <link rel="shortcut icon" href="{Favicon}">
  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="#898989" />
  51. <meta name="color:title" content="#ffffff" />
  52. <meta name="color:title banner" content="#91dab2" />
  53. <meta name="color:banner corners" content="#68ac87" />
  54. <meta name="color:link" content="#cacaca" />
  55. <meta name="color:link hover" content="#a3a3a3" />
  56. <meta name="color:scrollbar" content="#cacaca" />
  57. <meta name="color:perma border" content="#a3a3a3">
  58.  
  59. <meta name="text:reblog" content="reblog">
  60. <meta name="text:home" content="home">
  61. <meta name="text:message" content="contact">
  62. <meta name="text:archive" content="index">
  63.  
  64. <meta name="image:background" content="" />
  65.  
  66. <style type="text/css">
  67.  
  68.  
  69. ::-webkit-scrollbar {width: 7px; height: 0px; background:{color:background};}
  70. ::-webkit-scrollbar-thumb {background: {color:scrollbar}; border-radius:10px;}
  71.  
  72. iframe#tumblr_controls {position:fixed; z-index:9999999999; top: 3px; margin: 0 0 0 0; right:4px; -webkit-filter: invert(100%);}
  73.  
  74. body {
  75. background-color: {color:background};
  76. background-image:url({image:Background});
  77. background-attachment: fixed;
  78. background-repeat: repeat;
  79. font-size:12px;
  80. font-family:helvetica neue;
  81. font-weight:400;
  82. line-height:14px;
  83. text-transform:none;
  84. color: {color:text};
  85. }
  86.  
  87. #sidebar{
  88. position:absolute;
  89. width:240px;
  90. top:-20px;
  91. left:50%;
  92. margin-left:-120px;
  93. text-align:center;
  94. padding-top:100px;
  95. }
  96.  
  97. #title{
  98. position:fixed;
  99. min-width:250px;
  100. top:150px;
  101. right:50%;
  102. margin-right:310px;
  103. color:{color:title};
  104. background-color:{color:title banner};
  105. font-size:17px;
  106. padding:25px;
  107. letter-spacing:5px;
  108. text-transform:uppercase;
  109. font-weight:100;
  110. text-align:center;
  111. }
  112. #title:after{
  113. content: "";
  114. display: block;
  115. position:absolute;
  116. bottom:-30px;
  117. left:-0px;
  118. width: 0px;
  119. height: 0px;
  120. border-style: solid;
  121. border-width: 0 30px 30px 0;
  122. border-color: transparent {color:banner corners} transparent transparent;
  123. }
  124. #title:before{
  125. content: "";
  126. display: block;
  127. position:absolute;
  128. bottom:-30px;
  129. right:-0px;
  130. width: 0px;
  131. height: 0px;
  132. border-style: solid;
  133. border-width: 30px 30px 0 0;
  134. border-color: {color:banner corners} transparent transparent transparent;
  135. }
  136.  
  137. .desc{
  138. font-size:12px;
  139. line-height:14px;
  140. text-transform:none;
  141. letter-spacing:0px;
  142. color:{color:text};
  143. padding-bottom:30px;
  144. font-weight:400;
  145. }
  146.  
  147. #nav a{
  148. font-size:10px;
  149. line-height:24px;
  150. letter-spacing:3px;
  151. text-transform:uppercase;
  152. text-shadow:none;
  153. padding:3px;
  154. padding-left:6px;
  155. color:white;
  156. background-color:{color:title banner};
  157. }
  158. #nav a:hover{
  159. background-color:{color:banner corners};
  160. }
  161.  
  162. .answer{
  163. }
  164. .answer img {
  165. width:250px;
  166. height:auto;
  167. {block:permalinkpage}
  168. width:auto;
  169. height:auto;
  170. {/block:permalinkpage}
  171. }
  172.  
  173. a {
  174. text-decoration:none;
  175. color:{color:link};
  176. }
  177.  
  178. a:link, a:active, a:visited{
  179. color: {color:link};
  180. }
  181.  
  182. a:hover{
  183. color: {color:link hover};
  184. }
  185.  
  186. div#center{
  187. margin-left: 0px;
  188. width: 100%;
  189. height: auto;
  190. overflow-x:hidden;
  191. }
  192.  
  193. div#content {
  194. width: 840px;
  195. margin-left:-300px;
  196. margin-top:20px;
  197. left:50%;
  198. float:left;
  199. position: absolute;
  200. }
  201.  
  202. .entry{
  203. margin:15px;
  204. padding:0px;
  205. float:left;
  206. height:auto;
  207. background-color: #trans;
  208. {block:IndexPage}
  209. width:250px;
  210. overflow:hidden;
  211. {/block:IndexPage}
  212. {block:PermalinkPage}
  213. width:500px;
  214. height:auto;
  215. {/block:PermalinkPage}
  216. }
  217.  
  218. .title{
  219. font-size:22px;
  220. line-height:28px;
  221. text-transform:normal;
  222. color: {color:text};
  223. font-weight:100;
  224. }
  225.  
  226. blockquote{
  227. padding:0px 0px 0px 3px;
  228. margin:0px 0px 0px 2px;
  229. border-left: 2px solid #ddd;
  230. }
  231.  
  232. .like_and_reblog_buttons {
  233. display:block;
  234. position:absolute;
  235. top:-12px;
  236. right:0px;
  237. list-style: none;
  238. opacity:0;
  239. -webkit-transition: all 0.2s linear;
  240. -webkit-transition: all 0.2s linear;
  241. -moz-transition: all 0.2s linear;
  242. transition: all 0.2s linear;
  243. }
  244. .entry:hover .like_and_reblog_buttons{
  245. opacity:.8;
  246. -webkit-transition: all 0.2s linear;
  247. -webkit-transition: all 0.2s linear;
  248. -moz-transition: all 0.2s linear;
  249. transition: all 0.2s linear;
  250. }
  251.  
  252. .like_and_reblog_buttons li {
  253. float: left;
  254. background-color:white;
  255. padding:10px;
  256. height:20px;
  257. width:20px;
  258. }
  259.  
  260. .permalink{
  261. font-size:10px;
  262. line-height:0;
  263. text-transform:uppercase;
  264. text-align:left;
  265. opacity:0;
  266. -webkit-transition: all 0.4s linear;
  267. -webkit-transition: all 0.4s linear;
  268. -moz-transition: all 0.4s linear;
  269. transition: all 0.4s linear;
  270. }
  271. .entry:hover .permalink{
  272. line-height:10px;
  273. opacity:1;
  274. -webkit-transition: all 0.4s linear;
  275. -webkit-transition: all 0.4s linear;
  276. -moz-transition: all 0.4s linear;
  277. transition: all 0.4s linear;
  278. }
  279.  
  280. .notess{
  281. position:absolute;
  282. left:0px;
  283. width:500px;
  284. height:200px;
  285. overflow:auto;
  286. text-align:center;
  287. }
  288. .notess img{
  289. border-radius:100%;
  290. }
  291. .notess li{
  292. list-style:none;
  293. }
  294.  
  295. {CustomCSS}
  296. </style>
  297.  
  298. <title>{title}</title>
  299.  
  300. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  301.  
  302. </head>
  303. <body>
  304.  
  305. <div id="title">{Title}
  306.  
  307. <div id="sidebar">
  308. <div class="desc">{Description}</div>
  309. <div id="nav">
  310. <a href="/">{text:home}</a> <a href="/ask">{text:message}</a> <a href="/archive">{text:archive}</a>
  311. {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a> {/block:Pages}{/block:HasPages}
  312. <a href="http://atlasdesigns.co/">theme</a>
  313. </div>
  314. </div>
  315.  
  316. </div>
  317.  
  318. <div id="center">
  319. <div id="content">
  320.  
  321. {block:Posts}
  322.  
  323. <div class="entry">
  324.  
  325. {block:Text}
  326. {block:Title}<center><span class="title">{Title}</span></center>{/block:Title}<div class="answer">
  327. <div style="margin-left:1px;">{Body}</div></div>
  328. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  329. {/block:Text}
  330.  
  331. {block:Link}
  332. <center><a href="{URL}"><span class="title">{Name}</span></a></center>
  333. <div style="margin-left:3px;">{block:Description}{Description}{/block:Description}</div>
  334. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  335. {block:Link}
  336.  
  337. {block:Photo}
  338. {block:IndexPage}{LinkOpenTag}<div class="photo"><a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=250px/></a></div>{LinkCloseTag}
  339. <ul class="like_and_reblog_buttons">
  340. <li>{ReblogButton color="grey"}</li><br>
  341. <li>{LikeButton color="grey"}</li>
  342. </ul>
  343. {/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"width=500px/>{LinkCloseTag}{/block:PermalinkPage}
  344. {/block:Photo}
  345.  
  346. {block:Photoset}
  347. <center>
  348. {block:IndexPage}{Photoset-250}{/block:IndexPage}
  349. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  350. </center>
  351. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  352. {/block:IndexPage}
  353. {/block:Photoset}
  354.  
  355. {block:Quote}
  356. <div style="margin-left:3px;">
  357. {Quote}<br><i>{Source}</i></span>
  358. </div>
  359. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  360. {/block:Quote}
  361.  
  362. {block:Chat}
  363. <div style="margin-left:3px;">
  364. {block:Title}<span class="title">{Title}</span>{/block:Title}
  365. <ul class="chat">
  366. {block:Lines}
  367. <li class="user_{UserNumber}">
  368. {block:Label}
  369. <span class="label">{Label}</span>
  370. {/block:Label}
  371. {Line}
  372. </li>
  373. {/block:Lines}
  374. </ul>
  375. </div>
  376. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  377. {/block:Chat}
  378.  
  379. {block:Audio}<div style="height:0px;background-color:black;opacity:0.1;width:100%;margin-top:10px;margin-bottom:5px;"></div>
  380. <center>{AudioPlayerBlack}
  381. {block:Caption}{Caption}{/block:Caption}</center>
  382. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  383. {/block:Audio}
  384.  
  385. {block:Answer}<img src="{AskerPortraitURL-24}" align="left" z-index: 1; style="padding:0px; border:3px solid #eeeeee"/><br>{Asker} asked: <br><i>{Question}</i><br><br><div class="answer">{Answer}</div>
  386. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  387. {/block:Answer}
  388.  
  389. {block:Video}
  390. {block:IndexPage}
  391. <center>
  392. {Video-250}</center>
  393. {/block:IndexPage}
  394. {block:PermalinkPage}
  395. <center>
  396. {Video-500}</center>
  397. {/block:PermalinkPage}
  398. <div class="permalink"><a href="{ReblogUrl}">{text:reblog}</a>&nbsp;with&nbsp;<a href="{permalink}">{NoteCountwithLabel}</a></div>
  399. {block:Video}
  400.  
  401. {block:PermalinkPage}
  402. {block:Caption}{Caption}<div style="height:1px;background-color:black;opacity:0.1;width:100%;margin-top:5px;margin-bottom:5px;"></div>{/block:Caption}
  403. {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} &middot; {block:Tags}<a href="TagURL"> #{Tag}</a> {/block:Tags}{/block:hasTags}
  404. {/block:PermalinkPage}
  405.  
  406.  
  407. {block:PostNotes}
  408. </center></center>
  409. <div class="notess">{PostNotes}</div>
  410. {/block:PostNotes}
  411. </div>
  412.  
  413. {/block:Posts}
  414.  
  415. {block:IndexPage}
  416. {block:Pagination}
  417. <div id="pagination">
  418. {block:NextPage}
  419. <a id="nextPage" href="{NextPage}"></a>
  420. {/block:NextPage}
  421. {block:PreviousPage}
  422. <a href="{PreviousPage}"></a>
  423. {/block:PreviousPage}
  424. </div>
  425. {/block:Pagination}
  426. {/block:IndexPage}
  427. </div>
  428.  
  429. <div style="position:absolute;z-index:99999999999999999999999999999999999; !important;top:24px;right:3px;-webkit-filter:invert(100%);"><a href="http://atlasdesigns`.tumblr.com/"><img src="http://static.tumblr.com/2w7y46r/wuvmba8c2/installtheme.png"></a></div>
  430.  
  431. </body>
  432. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement