Advertisement
timbllr

BLISS THEME CREATED BY TIMBLLR

Jan 23rd, 2013
11,201
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.80 KB | None | 0 0
  1. <html>
  2.  
  3. <!--
  4.  
  5. BLISS THEME CREATED BY TIMBLLR
  6.  
  7. by using this theme you agree to not do any of the following:
  8.  
  9. - remove or change the credit of this theme
  10. - edit this html and take all credit
  11. - steal any parts of this code or redistribute it
  12.  
  13. -> this theme is licensed under the creative commons attribution 3.0 unported license <-
  14.  
  15. -->
  16.  
  17.  
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20. <link href='http://fonts.googleapis.com/css?family=Didact+Gothic|Pacifico' rel='stylesheet' type='text/css'>
  21.  
  22. <meta name="color:Background" content="#ffffff" />
  23. <meta name="color:hover Background" content="#d4ff00" />
  24. <meta name="color:menu background" content="#d4ff00" />
  25. <meta name="color:text" content="#000" />
  26.  
  27. <meta name="if:Disable Right Click" content="0"/>
  28. <meta name="if:Show A Home Link" content="1"/>
  29. <meta name="if:Show Ask Link" content="1"/>
  30. <meta name="if:Show Archive Link" content="1"/>
  31. <meta name="if:Show Two Custom Links" content="0"/>
  32. <meta name="if:Show Three Custom Links" content="0"/>
  33. <meta name="if:Show Four Custom Links" content="0"/>
  34. <meta name="if:Infinite scroll" content="1"/>
  35. <meta name="if:2 columns" content="0"/>
  36. <meta name="if:3 columns" content="0"/>
  37. <meta name="if:4 columns" content="1"/>
  38. <meta name="if:5 columns" content="0"/>
  39. <meta name="if:Use Banner" content="0">
  40. <meta name="if:Use Title" content="1">
  41.  
  42.  
  43. <meta name="text:Ask Page" content="/ask" />
  44. <meta name="text:Reblog Word" content="REBLOG" />
  45. <meta name="text:Custom Link One Title" content="" />
  46. <meta name="text:Custom Link One" content="" />
  47. <meta name="text:Custom Link Two Title" content="" />
  48. <meta name="text:Custom Link Two" content="" />
  49. <meta name="text:Custom Link Three Title" content="" />
  50. <meta name="text:Custom Link Three" content="" />
  51. <meta name="text:Custom Link Four Title" content"" />
  52. <meta name="text:Custom Link Four" content="" />
  53.  
  54. <meta name="image:menu" content="" />
  55. <meta name="image:Background" content="" />
  56. <meta name="image:Banner" content="">
  57.  
  58. <head>
  59.  
  60.  
  61.  
  62.  
  63. <style type="text/css">
  64.  
  65. iframe#tumblr_controls { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); opacity:.2;transition: .8s ease-in-out; -webkit-transition: .8s ease-in-out;-moz-transition: .8s ease-in-out;-o-transition: .8s ease-in-out; }
  66.  
  67. .headertext {text-transform:uppercase;}
  68.  
  69. ::-moz-selection {
  70. background: #fdfdfd;
  71. color: {color:text};
  72. }
  73. ::selection {
  74. background: #fdfdfd;
  75. color: {color:hover background};
  76. }
  77.  
  78. #content {
  79. margin: 2%;
  80.  
  81. {block:PermalinkPage} width:3000px;
  82. margin-left:fixed{/block:PermalinkPage}
  83.  
  84. }
  85. body {
  86. background: {color:Background} url('{image:Background}');
  87. background-size: cover;
  88. color: #1d1818;
  89. font-family: 'Didact Gothic', sans-serif;
  90. font-size: 0.8em;
  91. margin: 0;
  92. color:{color:text};
  93. padding: 0;}
  94.  
  95. a {
  96. color: #050404;
  97. text-decoration: none;
  98. }
  99.  
  100. iframe, img, embed, object, video {
  101. max-width: 100%;
  102. }
  103. img {
  104. height: auto;
  105. width: auto;
  106. }
  107.  
  108. #menu {
  109. background: {color:menu background} url('{image:menu}');
  110. background-size: cover;
  111. width:100%;
  112. height:auto;
  113. z-index:503;
  114. text-align: center;
  115. padding: 1%;
  116. color: #070606;
  117. margin-top:-10px;
  118. position: fixed;
  119. }
  120.  
  121.  
  122. }
  123. nav li {
  124. display: inline;
  125. }
  126.  
  127.  
  128.  
  129. article {
  130. background: {color:background};
  131. margin: 25px;
  132.  
  133. {block:if2columns}margin-left: 230px;{/block:if2columns}
  134. {block:if3columns}margin-left: 100px;{/block:if3columns}
  135. {block:if4columns}margin-left: 45px;{/block:if4columns}
  136. {block:if5columns}margin-left: 45px;{/block:if5columns}
  137. padding: 0%;
  138.  
  139.  
  140. {block:if2columns}width: 27%;{/block:if2columns}
  141. {block:if3columns}width: 22%;{/block:if3columns}
  142. {block:if4columns}width: 19%;{/block:if4columns}
  143. {block:if5columns}width: 14%;{/block:if5columns}
  144. }
  145.  
  146.  
  147.  
  148. .chat span {
  149. float: left;
  150. margin-right: 1%;
  151. }
  152.  
  153.  
  154. #tags, nav ul, .chat ul {
  155. list-style: none;
  156. list-style-image: none;
  157. margin: 0;
  158. padding: 0;
  159. }
  160. #tags li {
  161. float: left;
  162. margin-right: 1%;
  163. }
  164.  
  165. .blogtitle {
  166. font-family: 'Pacifico', cursive;
  167. font-size:20px;
  168. text-align:center;
  169. margin-top: -30px;
  170. color:{color:title}
  171. }
  172.  
  173. .perma {position:absolute;
  174. padding:10px;
  175. opacity:0;
  176. -webkit-transition: 0.2s ease-in;}
  177. .photo:hover .perma {-webkit-transition: 0.2s ease-in;
  178. opacity:0.4;}
  179.  
  180. .photo:hover .perma {
  181. -webkit-transition: 0.3s ease-in;
  182. position:absolute;
  183. margin:8px;
  184. padding:7px;
  185. background:#fff;
  186. opacity:0.7;
  187. }
  188.  
  189. .photo:hover .perma:hover{
  190. opacity:0.9;
  191. background-color: {color:hover background};}
  192. z-index:1;
  193. }
  194.  
  195. .pset:hover .perma {-webkit-transition: 0.2s ease-in;
  196. opacity:0.4;}
  197.  
  198. .pset:hover .perma {
  199. -webkit-transition: 0.3s ease-in;
  200. position:absolute;
  201. margin:8px;
  202. padding:7px;
  203. background:#fff;
  204. opacity:0.7;
  205. }
  206.  
  207. .pset:hover .perma:hover{
  208. opacity:0.9;
  209. background-color: {color:hover background};}
  210. z-index:1;
  211. }
  212.  
  213. </style>
  214. </head>
  215.  
  216. <body>
  217. <div style="display:block;bottom:5px;right:3px;font-size:24px;font-family:{font:posts};position:fixed;background-color:#fff;padding:3px;border-radius:2px;z-index:5;opacity:0.9;z-index:9999999999999999999999999999999999999;"><a href="http://timbllr-themes.tumblr.com/">ⓣ</a></div>
  218.  
  219. {block:ifdisablerightclick}
  220.  
  221. <script language=JavaScript>
  222. <!--
  223.  
  224. //Disable right mouse click Script
  225. //By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
  226. //For full source code, visit http://www.dynamicdrive.com
  227.  
  228. var message="";
  229.  
  230. ///////////////////////////////////
  231. function clickIE4(){
  232. if (event.button==2){
  233. alert(message);
  234. return false;
  235. }
  236. }
  237.  
  238. function clickNS4(e){
  239. if (document.layers||document.getElementById&&!document.all){
  240. if (e.which==2||e.which==3){
  241. alert(message);
  242. return false;
  243. }
  244. }
  245. }
  246.  
  247. if (document.layers){
  248. document.captureEvents(Event.MOUSEDOWN);
  249. document.onmousedown=clickNS4;
  250. }
  251. else if (document.all&&!document.getElementById){
  252. document.onmousedown=clickIE4;
  253. }
  254.  
  255. document.oncontextmenu=new Function("return false")
  256.  
  257. // -->
  258. </script>
  259.  
  260. {/block:ifdisablerightclick}
  261.  
  262. <header id="menu">
  263. {block:ifusetitle}<div class="blogtitle"><h1>{Title}</a></div></h1>{/block:ifusetitle}
  264.  
  265. <div style="text-align: center;">{block:ifusebanner}<Br><img style="max-width:400px; max-height:300px" src="{image:banner}"/><Br><br>{/block:ifusebanner}
  266.  
  267. <span class="headertext">
  268.  
  269. {block:ifShowAHomeLink}<a href="/">home</a> │ {/block:ifShowAHomeLink}
  270. {block:ifShowArchiveLink} <a href="/archive">history</a> │ {/block:ifShowArchiveLink}
  271. {block:ifShowAskLink}<a href="{text:ask page}">contact</a> │ {/block:ifShowAskLink}
  272. {block:ifShowTwoCustomLinks}
  273. <a href="{text:Custom Link One}">{text:Custom Link One Title}</a>
  274. <a href="{text:Custom Link Two}">{text:Custom Link Two Title}</a>
  275. {/block:ifShowTwoCustomLinks}
  276.  
  277. {block:ifShowThreeCustomLinks}
  278. <a href="{text:Custom Link One}">{text:Custom Link One Title}</a>
  279. <a href="{text:Custom Link Two}">{text:Custom Link Two Title}</a>
  280. <a href="{text:Custom Link Three}">{text:Custom Link Three Title}</a>
  281. {/block:ifShowThreeCustomLinks}
  282.  
  283. {block:ifShowFourCustomLinks}
  284. <a href="{text:Custom Link One}">{text:Custom Link One Title}</a>
  285. <a href="{text:Custom Link Two}">{text:Custom Link Two Title}</a>
  286. <a href="{text:Custom Link Three}">{text:Custom Link Three Title}</a>
  287. <a href="{text:Custom Link Four}">{text:Custom Link Four Title}</a>
  288. {/block:ifShowFourCustomLinks}
  289. <a href="http://timbllr.tumblr.com">theme</a>
  290.  
  291.  
  292. </span><br><Br>
  293.  
  294. <description>{description}</description>
  295.  
  296. </div>
  297.  
  298.  
  299. </div> </header>
  300.  
  301.  
  302. <div style="padding-top:170px">
  303.  
  304. <div id="content">
  305.  
  306.  
  307. {block:Posts}
  308.  
  309. <article>
  310.  
  311. {block:Photo}
  312. <div class="photo">{block:IndexPage}<span class="perma"><a href="{Permalink}">{Notecount} ✩</a> <a href="{ReblogURL}" target="_blank">{text:Reblog Word}</a></span>{/block:IndexPage}
  313.  
  314. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  315.  
  316. {/block:Photo}
  317.  
  318. {block:Text}
  319. <div class="text"><div style="padding:1px;">
  320. {block:indexpage} {block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  321. {Body}
  322. <a href="{Permalink}">{notecountwithlabel}</a><div>{/block:indexpage}
  323. {block:permalinkpage} {block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  324. {Body}
  325. {/block:permalinkpage}
  326. {/block:Text}
  327.  
  328. {block:Photoset}
  329.  
  330. {block:IndexPage}<div class="pset"><span class="perma"><a href="{Permalink}">{Notecount}</a> ✩ <a href="{ReblogURL}" target="_blank">REBLOG</a></span>{/block:IndexPage}{block:Photos}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{/block:Photos}</div>{/block:IndexPage}
  331.  
  332. {block:permalinkpage}<div style="margin-left:500px;">{/block:permalinkpage}
  333.  
  334. {/block:Photoset}
  335.  
  336. {block:Quote}
  337. <div class="quote">{Quote}<Br> ― <b>{Source}</b><div class="tperma"><a href="{Permalink}"><br>{notecountwithlabel}</a></div></div>
  338.  
  339. {/block:Quote}
  340.  
  341. {block:Link}
  342. <div class="link">
  343. {block:indexpage} <h1 class="title"><a href="{URL}">{Name}</a></h1>
  344. {block:Description}{Description}{/block:Description}
  345. <a href="{Permalink}">{notecountwithlabel}</a>{/block:indexpage}
  346. {block:permalinkpage} <h1 class="title"><a href="{URL}">{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:permalinkpage}
  347. {/block:Link}
  348.  
  349. {block:Chat}
  350. <div class="chat">
  351. {block:indexpage} <ul>
  352. {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  353. </ul>
  354. <a href="{Permalink}">{notecountwithlabel}</a>{/block:indexpage}
  355. {block:permalinkpage}<ul>
  356. {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  357. </ul>{/block:permalinkpage}
  358. {/block:Chat}
  359.  
  360. {block:Audio}
  361. <div class="audio">
  362. {block:TrackName}<h1 class="title"><a href="{Permalink}">{TrackName}</a></h1>{/block:TrackName}
  363. <div class="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}</div>
  364. <div class="player">{AudioPlayerBlack}</div>
  365. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  366. {/block:Audio}
  367.  
  368. {block:Video}
  369. <div class="video"><div class="video-player">{Video-500}</div>
  370. {/block:Video}
  371.  
  372. {block:Answer}
  373. {block:IndexPage}<div class="text"><div style="padding:15px;">{Question}<br><b>asked by {Asker}</b><br>{Answer}<a href="{Permalink}">{notecountwithlabel}</a></div></div>{/block:IndexPage}
  374. {block:PermalinkPage}<div style="width:500px">{Question}<br><b>asked by {Asker}</b><br>{Answer}</div>{/block:PermalinkPage}
  375. {/block:Answer}
  376.  
  377. {block:Permalink}
  378. <footer class="details">
  379. {block:PostNotes}
  380. <br>{block:RebloggedFrom}<b>reblogged from</b>: {ReblogParentName}{/block:RebloggedFrom}<br>{block:ContentSource}<b>original source</b>: {SourceURL} {/block:ContentSource}<br><br>{block:HasTags}<b>tagged with</b>: {block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}<br><b><u>this post has {NoteCountWithLabel}</b></u>
  381. <br><br>
  382. {PostNotes}
  383. {/block:PostNotes}
  384. {/block:Permalink}
  385. </article>
  386. {/block:Posts}
  387.  
  388.  
  389. </div>
  390.  
  391. {block:Pagination}
  392. <div class="pagination">
  393. {block:PreviousPage}<a href="{PreviousPage}">Previous page</a>{/block:PreviousPage}
  394. {block:NextPage}<a href="{NextPage}">Next page</a>{/block:NextPage}
  395. </div>
  396. {/block:Pagination}
  397.  
  398. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  399. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  400. {block:IfInfiniteScroll}
  401. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  402. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  403. {/block:IfInfiniteScroll}
  404.  
  405. <script>
  406. (function() {
  407. var $tumblelog = $('#content');
  408. {block:IfInfiniteScroll}
  409. $tumblelog.infinitescroll({
  410. navSelector : ".pagination",
  411. nextSelector : ".pagination a:first",
  412. itemSelector : "article",
  413. bufferPx : 50,
  414. done : "",
  415. loading: {
  416. finishedMsg: "<p> </p>",
  417. img : " ",
  418. msg: null,
  419. msgText: "<p> </p>"
  420. },
  421. },
  422. function( newElements ) {
  423. var $newElems = $( newElements ).css({ opacity: 0 });
  424. $newElems.imagesLoaded(function(){
  425. $newElems.animate({ opacity: 1 });
  426. $tumblelog.masonry( 'appended', $newElems);
  427. });
  428. }
  429. );
  430. {/block:IfInfiniteScroll}
  431. $tumblelog.imagesLoaded( function(){
  432. $tumblelog.masonry({
  433. columnWidth: function( containerWidth ) {
  434. return containerWidth / 100;
  435. }
  436. });
  437. });
  438. })();
  439. </script>
  440. </body>
  441. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement