API tools faq
paste
nikili621

Balcony Theme Code

nikili621
May 1st, 2013
2,133
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.07 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!--
  5. BALCONY BY PEONIFY (NICOLE)
  6. -->
  7.  
  8. <link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
  9.  
  10. <meta name="color:Background" content="#ffffff" />
  11. <meta name="color:Body links" content="#000000" />
  12. <meta name="color:Body text" content="#000000" />
  13. <meta name="color:Sidebar text" content="#000000" />
  14. <meta name="color:Title" content="#000000" />
  15. <meta name="color:Sidebar links shadow" content="#585858" />
  16. <meta name="color:Sidebar line" content="#cccccc" />
  17. <meta name="if:Infinite scroll" content="1"/>
  18.  
  19. <meta name="if:Show Title" content="1"/>
  20. <meta name="if:Show Header Image" content="0"/>
  21. <meta name="image:Banner" content="" />
  22. <meta name="text:Background size" content="10px" />
  23. <meta name="image:Background" content="" />
  24.  
  25. {block:Description}
  26. <meta name="description" content="{MetaDescription}" />
  27. {/block:Description}
  28. <meta charset="utf-8">
  29. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  30. <title>{block:TagPage}{Tag} posts - {/block:TagPage} {block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
  31. <link rel="shortcut icon" href="{Favicon}">
  32. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  33. <link rel="stylesheet" href="css/normalize.min.css">
  34. <script type="text/javascript" src="http://static.tumblr.com/j1tjexd/WYwm8ed44/like_script.js"></script>
  35.  
  36. <style type="text/css">
  37.  
  38.  
  39. #tumblr_controls{top: 1px !important; margin: 0 0 0 0; right: 6px !important; position: fixed !important;-webkit-filter: invert(100%) ;important;}
  40.  
  41.  
  42. #content {
  43. {Block:IndexPage}
  44. width: 300px;
  45. margin-left:700px;
  46. {/Block:IndexPage}
  47. {Block:PermalinkPage}
  48. width: 500px;
  49. margin-left:500px;
  50. {/Block:PermalinkPage}
  51. margin-top:50px;
  52. position:absolute;
  53. }
  54.  
  55.  
  56. body {
  57. background: {color:Background};
  58. color: {color:Body text};
  59. font-family: arial;
  60. font-size: 11px;
  61. margin: 0;
  62. padding: 0;
  63. background: url('{image:Background}') fixed ;
  64. background-size:{text:Background size};
  65. }
  66.  
  67.  
  68. a {
  69. color: {color:Body links};
  70. text-decoration:none;
  71. }
  72.  
  73.  
  74. iframe, img, embed, object, video {
  75. max-width: 100%;
  76. }
  77.  
  78.  
  79. img {
  80. height: auto;
  81. width: auto;
  82. }
  83.  
  84.  
  85. nav li {
  86. display: inline;
  87. }
  88. /*Article*/
  89. article {
  90. width:90%;
  91. margin: 20px;
  92. {block:permalinkpage}width:540px;{/block:permalinkpage}
  93. }
  94. .chat span {
  95. float: left;
  96. margin-right: 1%;
  97. }
  98. /*Metadata*/
  99. .metadata {
  100. display: inline-block;
  101. width: 100%;
  102. }
  103. .reblogged {
  104. float: center;
  105. }
  106. /*Tags and notes*/
  107. #tags, nav ul, .chat ul {
  108. list-style: none;
  109. list-style-image: none;
  110. margin: 0;
  111. padding: 0;
  112. }
  113. #tags li {
  114. float: left;
  115. margin-right: 1%;
  116. }
  117. .notes {
  118. clear: both;
  119. padding: 0;
  120. }
  121.  
  122. .entry #permalink {
  123. position:absolute;
  124. width:auto;
  125. height:15px;
  126. background-color:#fff;
  127. overflow:hidden;
  128. margin-left: 10px;
  129. margin-top: 10px;
  130. text-transform: uppercase;
  131. font-size:10px;
  132. line-height:14px;
  133. text-align:center;
  134. padding:5px;
  135. opacity:0.0;
  136.  
  137. -webkit-transition: all 0.3s linear;
  138. -moz-transition: all 0.3s linear;
  139. transition: all 0.3s linear;
  140. }
  141.  
  142. .entry:hover #permalink {
  143. overflow:visible;
  144. -webkit-transition: opacity 0.5s linear; opacity: 0.6;
  145. transition: all 0.4s linear;
  146. font-size:10px;
  147. margin-left: 10px;
  148. margin-top: 10px;
  149. width: auto;
  150. height: 15px;
  151. padding:5px;
  152. -webkit-transition: all 0.3s linear;
  153. -moz-transition: all 0.3s linear;
  154. transition: all 0.3s linear;
  155. opacity:1;
  156. background-color:#ffffff;
  157. }
  158.  
  159. .entry #permalinks {
  160. position:absolute;
  161. width:auto;
  162. height:15px;
  163. background-color:#fff;
  164. overflow:hidden;
  165. margin-left: 70px;
  166. margin-top: 10px;
  167. text-transform: uppercase;
  168. font-size:10px;
  169. line-height:14px;
  170. text-align:center;
  171. padding:5px;
  172. opacity:0.0;
  173.  
  174. -webkit-transition: all 0.3s linear;
  175. -moz-transition: all 0.3s linear;
  176. transition: all 0.3s linear;
  177. }
  178.  
  179. .entry:hover #permalinks {
  180. overflow:visible;
  181. -webkit-transition: opacity 0.5s linear; opacity: 0.6;
  182. transition: all 0.4s linear;
  183. font-size:10px;
  184. margin-left: 70px;
  185. margin-top: 10px;
  186. width: auto;
  187. height: 15px;
  188. padding:5px;
  189. -webkit-transition: all 0.3s linear;
  190. -moz-transition: all 0.3s linear;
  191. transition: all 0.3s linear;
  192. opacity:1;
  193. background-color:#ffffff;
  194. }
  195.  
  196. .entry #permatext {
  197. position:absolute;
  198. overflow:hidden;
  199. margin-right: 2px;
  200. margin-top: -10px;
  201. font-family: 'Didact Gothic', sans-serif;
  202. text-transform: uppercase;
  203. font-size:10px;
  204. line-height:14px;
  205. text-align:right;
  206. opacity:0.0;
  207. -webkit-transition: all 0.3s linear;
  208. -moz-transition: all 0.3s linear;
  209. transition: all 0.3s linear;
  210. }
  211.  
  212. .entry:hover #permatext {
  213. overflow:visible;
  214. -webkit-transition: opacity 0.5s linear; opacity: 0.6;
  215. transition: all 0.4s linear;
  216. font-size:10px;
  217. margin-right: 2px;
  218. margin-top: 1px;
  219. -webkit-transition: all 0.3s linear;
  220. -moz-transition: all 0.3s linear;
  221. transition: all 0.3s linear;
  222. opacity:1;
  223. }
  224.  
  225. #titlelol a{
  226. color:{color:Title};
  227. font-size:40px;
  228. font-family: 'Julius Sans One', sans-serif;
  229. }
  230.  
  231. #masthead {
  232. position:fixed;
  233. z-index:1;
  234. overflow:hidden;
  235. top:200px;
  236. left:80px;
  237. font-size:11px;
  238. padding:10px;
  239. {Block:IndexPage}
  240. width:500px;
  241. {/Block:IndexPage}
  242. {Block:PermalinkPage}
  243. width:300px;
  244. {/Block:PermalinkPage}
  245. height:auto;
  246. text-align:left;
  247. }
  248.  
  249. #pages{
  250. padding-bottom:10px;
  251. border-bottom:1px solid {color:Sidebar line};
  252. color:{color:Sidebar text};
  253. }
  254.  
  255. #description{
  256. color:{color:Sidebar text};
  257. }
  258.  
  259. #pages a{
  260. font-family: 'Julius Sans One', sans-serif;
  261. color:{color:Sidebar text};
  262. }
  263.  
  264. #pages a:hover{
  265. text-shadow: 4px 4px 6px {color:Sidebar links shadow};
  266. color:{color:Sidebar text};
  267. }
  268.  
  269. </style>
  270. </head>
  271. <body>
  272.  
  273. <!--Masthead-->
  274. <header id="masthead">
  275. <!--Details: title and description-->
  276. <div id="header">
  277.  
  278. <div id="titlelol">
  279. {block:ifshowtitle}
  280. <a href="/" title="{lang:Home}">{Title}</a>
  281. {/block:ifshowtitle}
  282.  
  283. {block:ifshowheaderimage}
  284. <a href="/"><img src="{image:Banner}" height="200"/></a>
  285. {/block:ifshowheaderimage}
  286.  
  287. </div>
  288.  
  289. <br>
  290.  
  291. <div id="pages">
  292. {block:Pages}
  293. <a href="{URL}">{Label}</a> &nbsp;-&nbsp;
  294. {/block:Pages}
  295. {/block:HasPages}
  296. {block:SubmissionsEnabled}
  297. <a href="/submit">{SubmitLabel}</a> &nbsp;-&nbsp;
  298. {/block:SubmissionsEnabled}
  299. <a href="/ask">ASK</a> &nbsp;-&nbsp;
  300. <a href="http://peonify.tumblr.com/">THEME</a>
  301. </div>
  302. <br>
  303.  
  304. <div id="description">
  305. {block:Description}
  306. {Description}
  307. {block:Description}
  308. </div>
  309.  
  310.  
  311.  
  312. </div>
  313. </header>
  314.  
  315.  
  316.  
  317.  
  318. <!--Content holder-->
  319. <div id="content">
  320. {block:Posts}
  321. <article>
  322. <!--Metadata: date, note count, content source-->
  323. <header class="metadata">
  324.  
  325. <div class="reblogged">
  326. </div>
  327.  
  328. </header>
  329. <!--Unique code for each post type-->
  330. <div class="entry">
  331.  
  332. {block:Text}
  333. <p style="font-style:normal;">
  334. <div class="text">
  335. {block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  336. {Body}
  337. <div id="permatext">
  338. <a href="{Permalink}">{NoteCountWithLabel}</a></span>
  339. </div>
  340. </p>
  341. {/block:Text}
  342.  
  343. {block:Photo}{block:IndexPage}
  344. <div id="permalink">
  345. <a href="{ReblogURL}">REBLOG</a></span>
  346. </div>
  347. <div id="permalinks">
  348. <a href="{Permalink}">{NoteCount}</a></span>
  349. </div>
  350. {/block:IndexPage}
  351. {block:IndexPage}{LinkOpenTag}<a href="{permalink}"><a><a href="{Permalink}" target="_blank"><img class="photo"
  352. src="{PhotoURL-HighRes}" alt="{PhotoAlt}"
  353. width="280"/></a>
  354. {LinkCloseTag}{/block:IndexPage}
  355. {block:PermalinkPage}{LinkOpenTag}<a href="{permalink}"><img
  356. class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}"
  357. width="520"/></a>{LinkCloseTag}
  358. {/block:PermalinkPage}
  359. {/block:Photo}
  360.  
  361.  
  362. {block:Photoset}
  363. <div class="photoset">
  364. {block:IndexPage}{Photoset-250}{/block:IndexPage}
  365. {block:PermalinkPage}{Photoset-700}{/block:PermalinkPage}
  366. {/block:Photoset}
  367.  
  368. {block:Quote}
  369. <div class="quote">
  370. {Quote}
  371. {block:Source}<cite> {Source} </cite>{/block:Source}
  372. <div id="permatext">
  373. <a href="{Permalink}">{NoteCountWithLabel}</a></span>
  374. </div>
  375. {/block:Quote}
  376.  
  377. {block:Link}
  378. <div class="link">
  379. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  380. {block:Description}{Description}{/block:Description}
  381. <div id="permatext">
  382. <a href="{Permalink}">{NoteCountWithLabel}</a></span>
  383. </div>
  384. {/block:Link}
  385.  
  386. {block:Chat}
  387. <div class="chat">
  388. <ul>
  389. {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  390. </ul>
  391. <div id="permatext">
  392. <a href="{Permalink}">{NoteCountWithLabel}</a></span>
  393. </div>
  394. {/block:Chat}
  395.  
  396. {block:Audio}
  397. <div class="audio">
  398. {block:TrackName}<h1 class="title"><a href="{Permalink}">{TrackName}</a></h1>{/block:TrackName}
  399. <div class="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}</div>
  400. <div class="player">{AudioPlayerBlack}</div>
  401. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  402. {/block:Audio}
  403.  
  404. {block:Video}
  405. <div class="video">
  406. <div class="video-player">{Video-500}</div>
  407. {/block:Video}
  408.  
  409. {block:Answer}
  410. <div class="answer">
  411. {asker} inquired: <div class="title">{Question}</div>
  412. <div class="user"</div>
  413. {Answer}
  414. <div id="permatext">
  415. <a href="{Permalink}">{NoteCountWithLabel}</a></span>
  416. </div>
  417. {/block:Answer}
  418. </div>
  419. <!--Post footer (tags and notes) on displayed on permalink pages-->
  420. {block:Permalink}
  421. <footer class="details">
  422. {block:HasTags}
  423. <ul id="tags">
  424. {block:Tags}<li> <a href="{TagURL}">{Tag}</a> </li>{/block:Tags}
  425. </ul>
  426. {/block:HasTags}
  427. {block:PostNotes}
  428. <div id="notes">
  429. {PostNotes}
  430. </div>
  431. {/block:PostNotes}
  432. </footer>
  433. {/block:Permalink}
  434. </article>
  435. {/block:Posts}
  436. <!--Close of article-->
  437. </div>
  438. </div>
  439.  
  440.  
  441.  
  442. <!--Pagination: previous/next page links-->
  443. {block:Pagination}
  444. <div class="pagination">
  445. {block:PreviousPage}<a href="{PreviousPage}">Previous page</a>{/block:PreviousPage}
  446. {block:NextPage}<a href="{NextPage}">Next page</a>{/block:NextPage}
  447. </div>
  448. {/block:Pagination}
  449. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  450. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  451. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  452. {block:IfInfiniteScroll}
  453. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  454. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  455. {/block:IfInfiniteScroll}
  456. <!--Code for infinite scroll and grid layout-->
  457. <script>
  458. (function() {
  459. var $tumblelog = $('#content');
  460. {block:IfInfiniteScroll}
  461. $tumblelog.infinitescroll({
  462. navSelector : ".pagination",
  463. nextSelector : ".pagination a:first",
  464. itemSelector : "article",
  465. bufferPx : 50,
  466. done : "",
  467. loading: {
  468. finishedMsg: "<p> </p>",
  469. img : " ",
  470. msg: null,
  471. msgText: "<p> </p>"
  472. },
  473. },
  474. function( newElements ) {
  475. var $newElems = $( newElements ).css({ opacity: 0 });
  476. $newElems.imagesLoaded(function(){
  477. $newElems.animate({ opacity: 1 });
  478. $tumblelog.masonry( 'appended', $newElems);
  479. });
  480. }
  481. );
  482. {/block:IfInfiniteScroll}
  483. $tumblelog.imagesLoaded( function(){
  484. $tumblelog.masonry({
  485. columnWidth: function( containerWidth ) {
  486. return containerWidth / 100;
  487. }
  488. });
  489. });
  490. })();
  491. </script>
  492.  
  493.  
  494. <div style="position:fixed; bottom:5px; right:5px; opacity:1;"><a href="http://peonify.tumblr.com" title="©"><font size=3px>©</font></a></div
  495. </body>
  496. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!