API tools faq
paste
madpatter

Yogurt Theme - full sized header

madpatter
Oct 20th, 2014
197
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.47 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <head>
  3. <!-- theme by oddhour.tumblr.com
  4. don't steal, do learn
  5. -->
  6.  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  8. <title>{Title}{block:TagPage} | #{Tag} {/block:TagPage} {block:SearchPage} | {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title>
  9. <meta name="description" content="{block:IndexPage}{block:Description}{MetaDescription}{/block:Description}{/block:IndexPage}{block:PermalinkPage}{PostSummary}{/block:PermalinkPage}" />
  10. <link rel="shortcut icon" href="{Favicon}" />
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  12.  
  13. <!-- ### Custom Stuff ### -->
  14. <meta name="color:Text" content="#555555"/>
  15. <meta name="color:Links" content="#22a3b4"/>
  16. <meta name="image:Header Image" content=""/>
  17. <meta name="if:Show Description" content="true"/>
  18. <meta name="if:Show Archive" content="true"/>
  19. <meta name="if:Show Currently" content="true"/>
  20.  
  21. <meta name="text:Current1 Header" content="listening" />
  22. <meta name="text:Current1 Content" content="R U Mine? - Arctic Monkeys" />
  23. <meta name="text:Current2 Header" content="watching" />
  24. <meta name="text:Current2 Content" content="Breaking Bad" />
  25. <meta name="text:Current3 Header" content="reading" />
  26. <meta name="text:Current3 Content" content="Game of Thrones" />
  27. <meta name="text:Current4 Header" content="" />
  28. <meta name="text:Current4 Content" content="" />
  29. <meta name="text:Current5 Header" content="" />
  30. <meta name="text:Current5 Content" content="" />
  31.  
  32. <meta name="font:Body" content="Helvetica Neue"/>
  33.  
  34. <link rel="stylesheet" href="http://static.tumblr.com/thpaaos/DIcklyl4z/reset.css" type="text/css" />
  35.  
  36.  
  37. <style>
  38.  
  39.  
  40. .cf:before,
  41. .cf:after { content: " "; /* 1 */ display: table; /* 2 */ }
  42. .cf:after { clear: both; }
  43. .cf { *zoom: 1; }
  44.  
  45. html, body {
  46. height: 100%;
  47. }
  48.  
  49. body {
  50. color: {color:Text};
  51. font-size: 14px;
  52. font-family: {font:Body};
  53. line-height: 1.5em;
  54. background: #fff;
  55. }
  56.  
  57. a img { border-width: 0px; }
  58. *:active, *:focus { outline: 0px; }
  59. a { color: {color:Links}; text-decoration: none;
  60. }
  61.  
  62. a:hover { text-decoration:underline; }
  63.  
  64. ol, ul {
  65. padding-left: 30px;
  66. margin: 1em 0;
  67.  
  68. }
  69.  
  70. h2 + a.timestamp {
  71. line-height: 30px;
  72. }
  73.  
  74. p {
  75. margin: 0;
  76. padding: 8px 0;
  77. }
  78.  
  79. a.title {
  80. text-decoration: none;
  81. font-size: 1.3em;
  82. color: {color:Text};
  83. }
  84.  
  85. a.title + p { padding: 8px 0 8px 0; }
  86. p + blockquote { margin: 0 0 8px 0; }
  87. p + ul, p + ol, ul > ul, ul > ol, ol > ul, ol > ol { margin-top: .5em; }
  88. ul ul, ul ol, ol ul, ol ol { margin: 0; }
  89.  
  90. blockquote {
  91. border-left: 5px solid #eee;
  92. margin: 8px 0;
  93. padding: 0 0 0 15px;
  94. }
  95.  
  96. blockquote > p:first-child {
  97. padding: 0;
  98. }
  99.  
  100. pre {
  101. width: 100%;
  102. overflow: auto;
  103. background: #efefef;
  104. font-family: 'Courier New', Courier, monospace;
  105. padding: .5em;
  106. font-size: .85em;
  107. line-height: 1.1em;
  108. }
  109.  
  110. strong { font-weight: bold; }
  111. em { font-style: italic; }
  112. sub { vertical-align: sub; }
  113. sup { vertical-align: super; }
  114. sub, sup { font-size: .8em; }
  115. small { font-size: .9em; }
  116.  
  117.  
  118. .caption {
  119. padding: 8px 0;
  120. }
  121.  
  122. .quote-caption {
  123. text-align: right;
  124. margin-left: 20px;
  125. }
  126.  
  127. #container {
  128. width: 880px;
  129. margin: 0 auto;
  130. position: relative;
  131. }
  132.  
  133. #header {
  134. margin: 0 0 0 20px;
  135. font-size: .95em;
  136. clear: both;
  137. position: relative;
  138. }
  139.  
  140.  
  141. #posts {
  142. width: 900px;
  143. clear: both;
  144. }
  145.  
  146. .post {
  147. margin: 0 25px;
  148. padding: 50px 0px 20px;
  149. {block:IndexPage} width: 400px; {/block:IndexPage}
  150. {block:PermalinkPage} width: 500px;
  151. margin-bottom: 100px;
  152. {/block:PermalinkPage}
  153. }
  154. .tags {
  155. margin: 10px 0;
  156. }
  157.  
  158. .tag {
  159. font-size: .85em;
  160. color: #999;
  161. text-decoration: none;
  162. }
  163.  
  164. .pound { opacity: .4; }
  165.  
  166.  
  167. a.tag:hover {
  168. color: {color:Links};
  169. text-decoration: none;
  170. }
  171.  
  172. a.timestamp {
  173. {block:IndexPage}font-size: .85em;{/block:IndexPage}
  174. line-height: 1em;
  175. color: #444;
  176. display: inline-block;
  177. padding: 3px;
  178. margin-top: 10px;
  179. text-decoration: none;
  180. }
  181.  
  182. .timestamp-wrap {
  183. text-align: center;
  184. }
  185.  
  186. .sourcelink {
  187. font-size: .85em;
  188. }
  189.  
  190. .timestamp:hover * {
  191. color: #fff;
  192. }
  193.  
  194. .red { color: red; }
  195.  
  196. .timestamp:hover,
  197. .timestamp:hover .timestamp {
  198. color: #FFFFFF;
  199. background: {color:Links};
  200. }
  201.  
  202. .post img {
  203. max-width: 100%;
  204. }
  205.  
  206. a.readMore {
  207. display: block;
  208. padding: 3px;
  209. border-top: 1px dashed #ccc;
  210. border-bottom: 1px dashed #ccc;
  211. text-align: center;
  212. text-decoration: none;
  213. text-transform: lowercase;
  214. font-size: .9em;
  215. -webkit-transition: all .3s;
  216. -moz-transition: all .3s;
  217. -ms-transition: all .3s;
  218. -o-transition: all .3s;
  219. transition: all .3s;
  220. }
  221.  
  222. a.readMore:hover {
  223. color: #fff;
  224. background: {color:Links};
  225. border-color: transparent;
  226.  
  227. }
  228.  
  229. .ask_question {
  230. font-size: .9em;
  231. padding: 15px;
  232. border: 1px solid #eee;
  233. background: #f7f7f7;
  234. }
  235.  
  236. .ask_answer {
  237. margin-top: 15px;
  238. }
  239.  
  240. .ask_asker {
  241. font-weight: bold;
  242. text-align: right;
  243. font-size: .85em;
  244. text-transform: uppercase;
  245. }
  246.  
  247. .audio {
  248. margin-bottom: 20px;
  249. }
  250.  
  251. .audio-player {
  252. width: 100%;
  253. }
  254.  
  255. .audio-art {
  256. width: 100px;
  257. height: 100px;
  258. float: left;
  259. margin-right: 10px;
  260. -webkit-border-radius: 10px;
  261. -moz-border-radius: 10px;
  262. border-radius: 10px;
  263. overflow: hidden;
  264. }
  265.  
  266. .audio-info {
  267. float: left;
  268. {block:IndexPage}width: 260px;{/block:IndexPage}
  269. {block:PermalinkPage}width: 360px;{/block:PermalinkPage}
  270. }
  271. .audio-artist {
  272. text-transform: uppercase;
  273. font-size: .8em;
  274. color: #888;
  275. }
  276. .audio-track {
  277. font-weight: 300;
  278. font-size: 1.3em;
  279. }
  280.  
  281.  
  282. .chat {
  283. font-size: .9em;
  284. width: 100%;
  285. margin: 0 0 10px 0;
  286. border-collapse: collapse;
  287. font-family: "Courier New", "Courier", monospace;
  288. }
  289.  
  290. h2 + .chat {
  291. margin: 10px 0 3px 0;
  292. }
  293.  
  294. .chat .line {
  295. padding: 4px 12px;
  296. line-height: 1.1em;
  297. }
  298.  
  299. .chat .name {
  300. font-weight: bold;
  301. }
  302.  
  303.  
  304. .quote {
  305. font-size: 1.2em;
  306. line-height: 1.5em;
  307. padding: 10px 30px;
  308. font-weight: 300;
  309. }
  310.  
  311. .quote.long { font-size: 1em; padding: 10px 0; }
  312. .quote.short { font-size: 1.4em; }
  313.  
  314. .link_url {
  315. font-size: .7em;
  316. color: {color:Links};
  317. }
  318.  
  319. .answer_form_container { width: 512px; }
  320.  
  321. .notes { list-style-type: none; margin: 31px 0 10px 0; padding: 0; padding-top: 10px; font-size:.9em; }
  322. .notes li.note { margin: 0 0 1px 0; padding: 0 4px; }
  323. .notes a { color: #aaa; }
  324. .notes img.avatar { display: none; }
  325. .notes blockquote { margin: 0; }
  326. .notes blockquote a { text-decoration: none; }
  327.  
  328. a.tumblr_blog {
  329. {block:IndexPage}
  330. color: #777;
  331. text-decoration: underline;
  332. {/block:IndexPage}
  333. }
  334.  
  335. .button-bar-wrap {
  336. position: relative;
  337. text-align:center;
  338. }
  339. .button-bar {
  340. display: inline-block;
  341. padding: 5px;
  342. clear:both;
  343. margin: 0 auto;
  344. background: #ffffff;
  345. position: relative;
  346. z-index: 10;
  347. }
  348. .button-bar-line {
  349. width: 100%;
  350. background: #ccc;
  351. height: 1px;
  352. position: absolute;
  353. margin-top: 15px;
  354. z-index: 1;
  355. }
  356.  
  357. .like_button, .reblog_button, .post-button {
  358. display: inline-block;
  359. margin: 0 2px 2px;
  360. }
  361.  
  362.  
  363.  
  364. #bottom-pagination {
  365. text-align: center;
  366. padding: 20px;
  367. margin-bottom: 100px;
  368. font-size: 1.5em;
  369. font-weight: 300;
  370. letter-spacing: 1px;
  371. }
  372.  
  373. #header-main-links { margin-left: -10px; }
  374. #header-main-links a { display: inline-block; padding: 0px 15px; margin: 0; border-right: 1px solid #ccc; line-height: .8em;}
  375.  
  376. #header-img {
  377. text-align: center;
  378. }
  379. #header-img img {
  380. width: 100%;
  381. }
  382.  
  383. #credit {
  384. position: fixed;
  385. right: 20px;
  386. bottom: 5px;
  387. opacity: .7;
  388. }
  389. #credit:hover {
  390. opacity: 1;
  391. }
  392.  
  393. #currently {
  394. position: absolute;
  395. right: 0;
  396. z-index: 10;
  397. display:inline-block;
  398. padding: 1px 10px;
  399. border-bottom: 3px solid #ddd;
  400. font-size: .75em;
  401. text-align: right;
  402. background: #fff;
  403. }
  404. #currently h4 {
  405. cursor: pointer;
  406. }
  407. #currently:hover {
  408. margin-top: -1px;
  409. margin-right: -1px;
  410. border: 1px solid #ddd;
  411. }
  412. #currently:hover table {
  413. display: block;
  414. }
  415. #currently table {
  416. display:none;
  417. max-width: 200px;
  418. margin: 5px 0 10px;
  419. }
  420. #currently table td {
  421. padding: 0px 5px;
  422. text-align: left;
  423. }
  424.  
  425. #currently table td:first-child {
  426. font-weight: bold;
  427. text-align: right;
  428. border-right: 1px solid #aaa;
  429. }
  430.  
  431. #currently table .second-col {
  432. width: 130px;
  433. }
  434.  
  435. {CustomCSS}
  436.  
  437.  
  438. </style>
  439.  
  440. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  441. <script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>
  442.  
  443. <script>
  444. {block:IndexPage}
  445. function masonryReload() {
  446. $('#posts').masonry('layout');
  447. }
  448.  
  449. $(document).ready(function () {
  450. $('#posts').masonry({"columnWidth": 400, "itemSelector": ".post"}
  451. );
  452. var masonryTimer = setInterval(masonryReload, 2000);
  453. setTimeout( function() {
  454. clearInterval(masonryTimer);
  455. }, 10000)
  456.  
  457. });
  458. {/block:IndexPage}
  459.  
  460. $(window).load(function () {
  461. {block:IndexPage}
  462. $('#posts').masonry('layout');
  463. {/block:IndexPage}
  464. });
  465.  
  466. </script>
  467.  
  468. </head>
  469. <body>
  470. {block:IfHeaderImage}<div id="header-img" ><a href="/"><img src="{image:Header Image}"/></a></div>{/block:IfHeaderImage}
  471. <div id="container">
  472. <div id="header">
  473. {block:IfShowDescription}<p>{Description}</p>{/block:IfShowDescription}
  474. <div id="header-main-links">
  475. <a href="/">home</a>
  476. {block:AskEnabled}<a href="/ask">{AskLabel}</a>{/block:AskEnabled}
  477.  
  478. {block:HasPages}
  479. {block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}
  480. {/block:HasPages}
  481. {block:IfShowArchive}<a href="/archive" style="border-right: 0px;" >archive</a>{/block:IfShowArchive}
  482.  
  483. {block:IfShowCurrently}
  484. <div id="currently">
  485. <h4>CURRENTLY &#9662;</h4>
  486. <table>
  487. {block:IfCurrent1Content}<tr><td>{text:Current1 Header}</td><td class="second-col">{text:Current1 Content}</td></tr>{/block:IfCurrent1Content}
  488. {block:IfCurrent2Content}<tr><td>{text:Current2 Header}</td><td>{text:Current2 Content}</td></tr>{/block:IfCurrent2Content}
  489. {block:IfCurrent3Content}<tr><td>{text:Current3 Header}</td><td>{text:Current3 Content}</td></tr>{/block:IfCurrent3Content}
  490. {block:IfCurrent4Content}<tr><td>{text:Current4 Header}</td><td>{text:Current4 Content}</td></tr>{/block:IfCurrent4Content}
  491. {block:IfCurrent5Content}<tr><td>{text:Current5 Header}</td><td>{text:Current5 Content}</td></tr>{/block:IfCurrent5Content}
  492. </table>
  493. </div>
  494. {/block:IfShowCurrently}
  495.  
  496. </div>
  497. <br/>
  498. </div>
  499.  
  500. <div id="posts">
  501. {block:Posts}
  502. <div class="post">
  503. {block:Photo}
  504. {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
  505. {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
  506. <img src="{block:IndexPage}{PhotoURL-500}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}">
  507. {block:IndexPage}</a>{/block:IndexPage}
  508. {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
  509.  
  510. {block:Caption}<div class="caption">{Caption}
  511. {block:More}
  512. <a href="{Permalink}" class="readMore">{lang:Read more}</a>
  513. {/block:More}
  514.  
  515. </div>{/block:Caption}
  516. {/block:Photo}
  517.  
  518. {block:Audio}
  519. <div class="cf audio">
  520. {block:AlbumArt}
  521. <div class="audio-art"><img src="{AlbumArtURL}"/></div>
  522. {/block:AlbumArt}
  523.  
  524. <div class="audio-info">
  525.  
  526. <div class="audio-track">{block:TrackName}{TrackName}{/block:TrackName}</div>
  527. <div class="audio-artist">{block:Artist}{Artist}{/block:Artist}</div>
  528.  
  529.  
  530. <br/>
  531. {block:AudioEmbed}
  532. <div class="audio-play">{AudioEmbed-400}</div>
  533. {/block:AudioEmbed}
  534.  
  535. {block:AudioPlayer}
  536. <div class="audio-player">{AudioPlayerWhite}</div>
  537. {/block:AudioPlayer}
  538. </div>
  539. </div>
  540.  
  541. {block:Caption}<div class="caption">{Caption}
  542. {block:More}
  543. <a href="{Permalink}" class="readMore">{lang:Read more}</a>
  544. {/block:More}
  545.  
  546. </div>{/block:Caption}
  547. {/block:Audio}
  548.  
  549. {block:Video}
  550. {block:IndexPage}{Video-400}{/block:IndexPage}
  551. {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
  552. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  553. {/block:Video}
  554.  
  555. {block:Text}
  556. {block:Title}<h1><a href="{Permalink}" class="title">{Title}</a></h1>{/block:Title}
  557. <div class="caption">
  558. {Body}
  559. {block:More}
  560. <a href="{Permalink}" class="readMore">{lang:Read more}</a>
  561. {/block:More}
  562. </div>
  563. {/block:Text}
  564.  
  565. {block:Answer}
  566. <div class="ask_question">
  567. <b>Q: </b>{Question}
  568. <div class="ask_asker">&mdash; {Asker}</div>
  569. </div>
  570.  
  571. <div class="ask_answer">{Answer}
  572. {block:More}
  573. <a href="{Permalink}" class="readMore">{lang:Read more}</a>
  574. {/block:More}
  575. </div>
  576. {/block:Answer}
  577.  
  578. {block:Link}
  579. <h1><a href="{URL}" class="title" {Target}>{Name}<br/><span class="link_url">from {block:Host}{Host}{/block:Host} &rarr;</span></a></h1>
  580.  
  581. {block:Description}<div class="caption">{Description}</div>{/block:Description}
  582. {/block:Link}
  583.  
  584. {block:Quote}
  585. <div class="quote {Length}">{Quote}</div>
  586. {block:Source}<div class="caption quote-caption">&mdash; {Source}</div>{/block:Source}
  587. {/block:Quote}
  588.  
  589.  
  590.  
  591. {block:Chat}
  592. {block:Title}<h2><a href="{Permalink}" class="title">{Title}</a></h2>{block:Title}
  593. <div class="chat">
  594. {block:Lines}
  595. <div class="line">
  596. {block:Label}<span class="name line{UserNumber}">{Label}</span>{block:Label} <span class="words line{UserNumber}">{Line}</span>
  597. </div>
  598. {/block:Lines}
  599. </div>
  600. {/block:Chat}
  601.  
  602. <div>
  603. {block:Date}
  604. <div class="tags">
  605. {block:Tags}
  606. <a href="{TagURL}" class="tag"><span class="pound">#</span>{Tag}</a>&nbsp;
  607. {/block:Tags}
  608. </div>
  609. <div class="timestamp-wrap">
  610. {block:NotReblog}
  611. <a href="{Permalink}" class="timestamp">Posted on {ShortMonth} {DayOfMonthWithZero} with {NoteCount} <span class="red">&hearts;</span></a>
  612. {/block:NotReblog}
  613.  
  614. {block:RebloggedFrom}
  615. <a href="{Permalink}" class="timestamp">{lang:Reblogged} on {ShortMonth} {DayOfMonthWithZero} with {NoteCount} <span class="red">&hearts;</span></a> {block:PermalinkPage}<span style="font-size:.9em;">(via <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a>)</span>{/block:PermalinkPage}
  616. {/block:RebloggedFrom}
  617. </div>
  618. {/block:Date}
  619. </div>
  620.  
  621. <div class="button-bar-wrap">
  622. <div class="button-bar-line"></div>
  623. {block:Date}
  624. <div class="button-bar">
  625. {LikeButton size="20" color="grey"}<div class="post-button">{ReblogButton size="20" color="grey"}</div>
  626. </div>
  627. {/block:Date}
  628. </div>
  629.  
  630. {block:PostNotes}
  631. <div class="notes">
  632. {PostNotes}
  633. </div>
  634. {/block:PostNotes}
  635.  
  636.  
  637. </div> <!-- .post -->
  638. {/block:Posts}
  639. </div> <!-- .posts -->
  640.  
  641. <!-- please don't remove ;_; -->
  642. <div id="credit"><a href="http://oddhour.tumblr.com/?via=theme" target="_blank" title="theme by oddhour.tumblr.com"><img src="http://static.tumblr.com/isskdo7/t8Vn3e1hg/oddhour-logo-alt.png" /></a></div>
  643.  
  644. <div style="cf"></div>
  645.  
  646. {block:Pagination}<br/><br/><div id="bottom-pagination">
  647. {block:PreviousPage}<a href="{PreviousPage}">&larr; {/block:PreviousPage}{lang:Previous}{block:PreviousPage}</a>{/block:PreviousPage} &nbsp;&nbsp;/&nbsp;&nbsp;
  648. {block:NextPage}<a href="{NextPage}">{/block:NextPage}{lang:Next}{block:NextPage} &rarr;</a>{/block:NextPage}</div>
  649. {/block:Pagination}
  650.  
  651.  
  652. {block:PermalinkPagination}<br/><br/><div id="bottom-pagination">
  653. {block:NextPost}<a href="{NextPost}">&larr; {/block:NextPost}{lang:Previous}{block:NextPost}</a>{/block:NextPost} &nbsp;&nbsp;/&nbsp;&nbsp;
  654. {block:PreviousPost}<a href="{PreviousPost}">{/block:PreviousPost}{lang:Next}{block:PreviousPost} &rarr;</a>{/block:PreviousPost}</div>
  655. {/block:PermalinkPagination}
  656.  
  657.  
  658. </div> <!-- #container -->
  659.  
  660. </body>
  661. </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!