API tools faq
paste
thehiddenwill-themes

Theme 07. (posts aligned to middle)

thehiddenwill-themes
Jun 1st, 2013
417
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.92 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <!-----------------------------------------------------------------------
  4. THEME 07.
  5. @the-hidden-will.tumblr.com
  6. ------------------------------------------------------------------------->
  7. <html xmlns="http://www.w3.org/1999/xhtml">
  8. <head>
  9. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  10. <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
  11. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14. <meta name="if:MusicPlayer" content=""/>
  15. <meta name="if:BirdsBG" content=""/>
  16. <meta name="text:Music" content=""/>
  17. <meta name="text:Link 1" content=""/>
  18. <meta name="text:Link 1 URL" content=""/>
  19. <meta name="text:Link 2" content=""/>
  20. <meta name="text:Link 2 URL" content=""/>
  21. <meta name="text:Link 3" content=""/>
  22. <meta name="text:Link 3 URL" content=""/>
  23. <meta name="text:Link 4" content=""/>
  24. <meta name="text:Link 4 URL" content=""/>
  25. <meta name="text:Home Label" content="Home"/>
  26. <meta name="text:Ask Label" content="Ask"/>
  27. <meta name="if:Show Title" content="1"/>
  28. <meta name="if:Show Tags" content="0"/>
  29. <meta name="if:Show Captions" content="0"/>
  30. <meta name="if:Show Tags" content="0"/>
  31. <meta name="image:Background" content=""/>
  32. <meta name="image:Sidebar" content=""/>
  33. <script type="text/javascript" src="http://static.tumblr.com/uiqhh9x/jkEm9tb4p/jquery-1.8.1.min.js"></script>
  34. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/cpaytv3/2V1m9r58l/reset.css">
  35. </script>
  36. <style type="text/css">
  37.  
  38. ::-webkit-scrollbar {background-color:#fff; height:8px; width:4px}
  39. ::-webkit-scrollbar-thumb:vertical {background-color:#000; height:50px}
  40. ::-webkit-scrollbar-thumb:horizontal {background-color:#000; height:8px!important}
  41.  
  42. .photo {
  43. filter: url("data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’><filter id=’grayscale’><feColorMatrix type=’matrix’ values=’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0’/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  44. filter: gray; /* IE6-9 */
  45. -webkit-filter: grayscale(1);
  46. -webkit-transition: all 0.5s ease-in-out;
  47. -moz-transition: all 0.5s ease-in-out;
  48. -o-transition: all 0.5s ease-in-out;
  49. -ms-transition: all 0.5s ease-in-out;
  50. transition: all 0.5s ease-in-out;
  51. }
  52.  
  53. .photo:hover{
  54. filter: none;
  55. -webkit-filter: grayscale(0.7);
  56. -webkit-transition: all 0.7s ease-in-out;
  57. -moz-transition: all 0.7s ease-in-out;
  58. -o-transition: all 0.7s ease-in-out;
  59. }
  60.  
  61.  
  62. iframe.photoset{
  63. max-width:180px!important;
  64. }
  65.  
  66. iframe#tumblr_controls {position: fixed !important;z-index: 9999;opacity:0;-webkit-filter: invert(0%);-webkit-transition:opacity 0.4s linear;-webkit-transition:all 0.4s linear; -moz-transition:all 0.4s linear; transition:all 0.4s linear}
  67. iframe#tumblr_controls:hover {opacity:1;-webkit-transition:opacity 0.4s linear;-webkit-transition:all 0.4s linear; -moz-transition:all 0.4s linear; transition:all 0.4s linear;}
  68.  
  69. :-moz-selection {
  70. background: #eee;
  71. color: #000;
  72. }
  73.  
  74. ::selection {
  75. background: #eee;
  76. color: #000;
  77. }
  78.  
  79. body {
  80. color: #000000;background: #ffffff url({image:Background});
  81. font-family: consolas;
  82. font-size: 8px;
  83. line-height: 1.5em;
  84. }
  85.  
  86.  
  87. p {
  88. margin:0 0 .75em 0
  89. }
  90.  
  91. p:last-child {
  92. margin:0;
  93. }
  94.  
  95.  
  96.  
  97. a {
  98. cursor:help;
  99. color: #000;
  100. text-decoration:none;
  101. }
  102.  
  103. a:hover {
  104. color: #000;
  105. }
  106.  
  107.  
  108. blockquote {
  109. quotes: "" "" "'" "'";
  110. margin: 0.75em 0 .75em .75em;
  111. padding-left: 1.5em;
  112. line-height: 100%;
  113. border-left: solid 4px #eee;
  114. }
  115.  
  116.  
  117. h1 {
  118. font-family: georgia;
  119. font-size: 12px;
  120. font-style:none;
  121. line-height: 1.5em;font-weight: normal;
  122. }
  123.  
  124.  
  125. ul {
  126. margin: 0px 1.5em .75em;
  127. }
  128.  
  129.  
  130. li {
  131. margin: .75em 0;
  132. list-style-type: hiragana;
  133. }
  134.  
  135.  
  136. .box img {
  137. display: block;
  138. max-width: 100%;
  139. }
  140.  
  141. .m-i {
  142. display: block;
  143. line-height: 1px!important;
  144. }
  145.  
  146. .menu-picture {
  147. line-height: 100%;
  148. display: inline-block;
  149. line-height: 0px!important;
  150. }
  151.  
  152.  
  153. .post-link{
  154. font-family: consolas;
  155. font-size: 8px;
  156. line-height: 8px;
  157. }
  158.  
  159. p.source{
  160. text-align: center;
  161. }
  162.  
  163. .menu-picture {
  164. line-height: 100%;
  165. display: inline-block;
  166. }
  167.  
  168. p.source{
  169. text-align: center;
  170. }
  171.  
  172.  
  173. h3 {
  174. font-family: georgia;
  175. font-size: 12px;
  176. font-style:italic;
  177. text-transform:lowercase;
  178. text-align:center;
  179. padding-bottom:5px;
  180. font-weight: normal;
  181. }
  182.  
  183. .tagged {
  184. text-align: center;
  185. line-height: 8px;
  186. font-size: 8px;
  187. }
  188.  
  189.  
  190. .text {
  191. padding: 10px;
  192. }
  193.  
  194. p.question {
  195. margin-bottom: .375em;
  196. }
  197.  
  198. p.words {
  199. padding: 6px;
  200. line-height: 1.5em;
  201. color: #333333;
  202. background: #ffffff;
  203. }
  204.  
  205. .response {
  206. background: #fafafa;
  207. padding: 5px;
  208. margin-bottom: .75em;
  209. }
  210.  
  211. .answer {
  212. text-align: center;
  213. }
  214.  
  215. .post {
  216. position: relative;
  217. width:180px;
  218. float:left;
  219.  
  220. background: transparent
  221. padding:10px;
  222. margin:20px;
  223. }
  224.  
  225. .post {
  226. {block:IndexPage}
  227. width:180px;
  228. {/block:IndexPage}
  229. {block:PermalinkPage}
  230. width:400px;
  231. right:150px;
  232. {/block:PermalinkPage}
  233. }
  234.  
  235. .box {
  236. position: relative;
  237. }
  238.  
  239.  
  240. #side {
  241. text-align: center;
  242. margin-top: 20px;
  243.  
  244. {block:IndexPage}
  245. right:500px;
  246. {/block:IndexPage}
  247. {block:PermalinkPage}
  248. right:500px;
  249. {/block:PermalinkPage}
  250.  
  251. width:100px;
  252. padding:5px;position: fixed;
  253. background: transparent
  254. }
  255.  
  256.  
  257.  
  258.  
  259. #side img {
  260. opacity:1;
  261. border: 1px solid #eee;
  262. padding:10px;
  263. max-width: 50px;
  264. }
  265.  
  266. #description {
  267. font-family:cambria;
  268. font-size:7px;
  269. letter-spacing:1px;
  270. font-style:italic;
  271. color:#000;
  272. margin-top:15px;
  273. width:120px;
  274. margin-left:-15px;
  275.  
  276. }
  277.  
  278. #description a {
  279. color: #000;
  280. }
  281.  
  282.  
  283. ul {
  284. margin-bottom: .75em;
  285. }
  286.  
  287.  
  288. #contain {
  289. width:10px;
  290. margin: 20px auto 0;
  291. }
  292.  
  293.  
  294. #content {
  295. margin-top:5px;
  296. width:250px;
  297. float: right;
  298. }
  299.  
  300.  
  301.  
  302. .perma-a {
  303. text-align: right;
  304. text-transform: uppercase;
  305. }
  306.  
  307. p.menu-m {
  308. margin: .375em;
  309. }
  310.  
  311. .menu-link {
  312. font-family:consolas;
  313. font-size:7px;
  314. width:200px;
  315. letter-spacing:0px;
  316. text-transform:uppercase;
  317. margin: 0 3px;
  318. }
  319.  
  320.  
  321. .text img {
  322. max-width: 100%;
  323. }
  324.  
  325. img {
  326. display: block;
  327. }
  328.  
  329. .box img {
  330. display: block;
  331. }
  332.  
  333. .post-info-data{
  334. text-align:center;
  335. }
  336.  
  337. .notes img{
  338. display:block;
  339. float:left;
  340. margin-right:.75em;
  341. }
  342.  
  343. ol.notes li{
  344. margin:.375em 0;
  345. list-style-type:hiragana;
  346. line-height:16px;
  347. }
  348.  
  349. #s-m-t-tooltip {
  350. z-index:9999;
  351. text-transform:lowercase;
  352. background:#000;
  353. line-height:11px;
  354. font:8px consolas;
  355. letter-spacing:1px;
  356. color:#fff;
  357. max-width:400px;
  358. word-wrap:break-word;
  359. padding:1px 3px 1px 3px;
  360. display:block;
  361. margin:25px 0 0 15px;
  362. -webkit-border-radius: 50px;
  363. -moz-border-radius: 50px;
  364. border-radius: 50px;
  365. }
  366.  
  367. #musicart {
  368. position: absolute;
  369. height: 40px;
  370. width: 40px;
  371. }
  372.  
  373. #musicart img {
  374. height: 40px;
  375. width: 40px;
  376. -moz-border-radius: 35px;
  377. -webkit-border-radius: 35px;
  378. border-radius: 35px;
  379. }
  380.  
  381. #player {
  382.  
  383. opacity: 1;
  384. -webkit-transition: all 0.6s ease-in-out;
  385. -moz-transition: all 0.6s ease-in-out;
  386. -o-transition: all 0.6s ease-in-out;
  387. }
  388.  
  389. #entry:hover #player {
  390. opacity: 1;
  391. }
  392.  
  393. #bottom {
  394. height:18px;
  395. width: 100%;
  396. position:fixed;bottom:-2px;
  397. left: 0px;
  398. opacity:1;
  399. background-color:#000;
  400. z-index:9;
  401. }
  402.  
  403. #bottom3 {
  404. height:12px;
  405. width: 100%;
  406. position:fixed;bottom:19px;
  407. left: 0px;
  408. opacity:1;
  409. background-color:#000000;
  410. z-index:9;
  411. }
  412.  
  413. #bottom4 {
  414. height:30px;
  415. width: 100%;
  416. position:fixed;top:0px;
  417. left: 0px;
  418. opacity:1;
  419. background-color:#000000;
  420. z-index:9;
  421. }
  422.  
  423. #cred{
  424. position:fixed;
  425. top:40px;
  426. right:60px;
  427. width:10px;
  428. height:10px;}
  429.  
  430. #cred a{
  431. color:#aaa;
  432. font: 8px consolas;
  433. text-align:center;
  434. padding:3px;
  435. display:block;
  436. text-transform:uppercase;
  437. text-decoration:none;}
  438.  
  439.  
  440.  
  441. </style>
  442.  
  443. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  444.  
  445. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  446. <script>
  447. (function($){
  448. $(document).ready(function(){
  449. $("[title]").style_my_tooltips();
  450. });
  451. })(jQuery);
  452. </script>
  453. </head>
  454. <body>
  455.  
  456. <div id="cred"><a title="credit" href="http://thehiddenwill-themes.tumblr.com">C</a></div>
  457.  
  458. {block:IfBirdsBG}
  459. <img src="http://static.tumblr.com/xgibsin/DX2mnp6xi/tumblr_static_b_w_birds_black_white_design_flower_idea-577e29d1cc67f6365edb0a8090b9baa5_h.jpg" style="position:fixed;bottom:30px;right:45px;z-index:-999"/>
  460. {/block:IfBirdsBG}
  461.  
  462.  
  463. {block:IfMusicPlayer}
  464. {block:IndexPage}
  465. <div style="bottom: 40px; right:60px; border: px solid #000;padding-top:-5px; padding-right:1px; position: fixed; width: 25px; margin: 7px 0px 0px 5px; overflow: hidden; z-index: 9999; opacity: 1;"><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="200" height="20">
  466. <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
  467. <param name="bgcolor" value="#ffffff" />
  468. <param name="FlashVars" value="mp3={text:Music}&amp;autoplay=0&amp;bgcolor=ffffff&amp;loadingcolor=000000&amp;buttoncolor=000000" />
  469. </object></div>
  470. {/block:IndexPage}
  471. {/block:IfMusicPlayer}
  472.  
  473. <a style="position:fixed; right:0px; border:25px solid #000000; top:-1px; bottom:-1px;"></a>
  474.  
  475. <a style="position:fixed; left:0px; border:25px solid #000000; top:-1px; bottom:-1px;"></a>
  476.  
  477. <div id="bottom"></div>
  478. <div id="bottom2"></div>
  479. <div id="bottom3"></div>
  480. <div id="bottom4"></div>
  481. <div id="bottom5"></div>
  482.  
  483.  
  484.  
  485.  
  486. <div style="font-size: 23px; line-height: 25px; position: fixed; margin-top:80px; right:10px;"><font color="#ffffff"><br>こ<br>れ<br>は<br>お<br>別<br>れ<br>で<br>あ<br>る<br>理<br>由<br>で<br>す</font></div>
  487.  
  488.  
  489. <div id="contain" class="clearfix">
  490. <div id="side">
  491. <div class="text">
  492. {block:IfShowTitle}<h1><a href="/">{Title}</a></h1>{/block:IfShowTitle}<a href="/" class="m-i"><img class="menu-picture" src="{image:sidebar}"/></a><div id="description">{Description}</div>
  493. <div><a class="menu-link" href="/">{text:Home Label}</a> <a class="menu-link" href="/ask">{text:Ask label}</a>{block:iflink1}<a class="menu-link" href="{text:link 1 url}">{text:link 1}</a>{/block:iflink1}{block:iflink2} <a class="menu-link" href="{text:link 2 url}">{text:link 2}</a>{/block:iflink2}{block:iflink3} <a class="menu-link" href="{text:link 3 url}">{text:link 3}</a>{/block:iflink3}{block:iflink4} <a class="menu-link" href="{text:link 4 url}">{text:link 4}</a>{/block:iflink4}
  494. </div>
  495.  
  496.  
  497.  
  498. </div>
  499. </div>
  500. <div id="content">
  501. <div class="autopagerize_page_element"/>
  502. {block:Posts}
  503. <div class="post">
  504.  
  505. {block:Text}
  506. <div class="text">
  507. {block:Title}<h3>{Title}</h3>{/block:Title}
  508. {Body}
  509. <!-- permalink --> {block:IndexPage}
  510. <p class="post-link perma-a">{timeago} with <a href="{Permalink}">{NoteCountWithLabel}</a></p>
  511. <!-- /permalink --> {/block:IndexPage}
  512. </div>
  513. {/block:Text}
  514.  
  515. {block:Quote}
  516. <div style="color: #000; font-size: 20px; line-height: 30px; float: left; font-family: consolas;">
  517. ❝</div>
  518. <div style="font-size:12px; letter-spacing: 1px; line-height:120%; font-family: georgia; font-style: italic; margin-left: 30px; padding-left: 10px;">
  519. {Quote}
  520. </div>
  521. {block:Source}
  522. <div style="text-align: right; margin-top: 10px; font-size: 8px; text-transform: lowercase; font-family: consolas; line-height: 10px; letter-spacing: 1px;"> {Source}</div>
  523. {/block:Source}
  524.  
  525.  
  526.  
  527. <!-- permalink --> {block:IndexPage}
  528. <p><p class="post-link perma-a">{timeago} . <a href="{Permalink}">{NoteCountWithLabel}</a> . <a href={ReblogURL} target="_blank" class="details">REBLOG?</a></p></p>
  529. <!-- /permalink --> {/block:IndexPage}
  530. {/block:Quote}
  531.  
  532. {block:Link}
  533. <div class="text link">
  534. <h3><a href="{URL}" {Target}>{Name}</a></h3>
  535. {block:Description}{Description}{/block:Description}
  536. <!-- permalink --> {block:IndexPage}
  537. <p class="post-link perma-a">{timeago} with <a href="{Permalink}">{NoteCountWithLabel}</a></p>
  538. <!-- /permalink --> {/block:IndexPage}
  539. </div>
  540. {/block:Link}
  541.  
  542. {block:Chat}
  543. <div class="text chat">
  544. <ul class="conversation">
  545. {block:Lines}
  546. <li class="line {Alt}">
  547. {block:Label}<span class="person">{Label}</span>{/block:Label}
  548. <span class="person-said">{Line}</span>
  549. </li>
  550. {/block:Lines}
  551. </ul>
  552. <!-- permalink --> {block:IndexPage}
  553. <p class="post-link perma-a">{timeago} with <a href="{Permalink}">{NoteCountWithLabel}</a></p>
  554. <!-- /permalink --> {/block:IndexPage}
  555. </div>
  556. {/block:Chat}
  557.  
  558. {block:Audio}
  559.  
  560. <div id="musicart">
  561. {block:AlbumArt}
  562. <img src="{AlbumArtURL}">
  563. {/block:AlbumArt}
  564. </div>
  565.  
  566.  
  567. <div id="player"><div style="position: absolute; margin-top: -5px; margin-left: -5px; padding: 12px 11px 11px 12px; background: #FFF; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;">
  568. <div style="width: 27px; height: 27px; overflow: hidden;">
  569. {AudioPlayerWhite}
  570. </div></div></div>
  571.  
  572. <div style="margin-left: 52px; line-height: 10px;">
  573. <b>Track:</b> {block:TrackName}{TrackName}{/block:TrackName}
  574. <br>
  575. <b>Artist:</b> {block:Artist}{Artist}{/block:Artist}<br>
  576. <b>Album:</b> {block:Album}{Album}{/block:Album}<br>
  577. {PlayCountWithLabel}<br>
  578. </div>
  579.  
  580. <!-- permalink --> {block:IndexPage}
  581. <p><p class="post-link perma-a">{timeago} . <a href="{Permalink}">{NoteCountWithLabel}</a> . <a href={ReblogURL} target="_blank" class="details">REBLOG?</a></p></p>
  582. <!-- /permalink --> {/block:IndexPage}
  583.  
  584. {/block:Audio}
  585.  
  586. {block:Answer}
  587. <div class="text answer">
  588. <div class="response">
  589. <p class="question">{Question}</p>
  590. <p>@{Asker}</p></div>
  591. {Answer}
  592. <!-- permalink --> {block:IndexPage}
  593. <p class="post-link perma-a">{timeago} with <a href="{Permalink}">{NoteCountWithLabel}</a></p>
  594. <!-- /permalink --> {/block:IndexPage}
  595. </div>
  596. {/block:Answer}
  597.  
  598. {block:Photoset}
  599. <div class="photoset">
  600. <div class="box">
  601. <!-- permalink --> {block:IndexPage}
  602. <p><p class="post-link perma-a">{timeago} . <a href="{Permalink}">{NoteCountWithLabel}</a> . <a href={ReblogURL} target="_blank" class="details">REBLOG?</a></p></p>
  603. <!-- /permalink --> {/block:IndexPage}
  604. <center><div class="photo"{Photoset-250}</center>
  605. </div>
  606. {block:IndexPage}{block:IfShowCaptions}
  607. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  608. {/block:IfShowCaptions}{/block:IndexPage}
  609. </div>
  610. {/block:Photoset}
  611.  
  612. {block:Video}
  613. <div class="video">
  614. <div class="box">
  615. <!-- permalink --> {block:IndexPage}
  616.  
  617. <!-- /permalink --> {/block:IndexPage}
  618. <center>{Video-250}</center>
  619. </div>
  620. {block:IndexPage}{block:IfShowCaptions}
  621. {block:Caption}<div class="caption text">{Caption}</div>{/block:Caption}
  622. {/block:IfShowCaptions}{/block:IndexPage}
  623. </div>
  624. {/block:Video}
  625.  
  626. {block:Photo}
  627.  
  628. {LinkOpenTag}<a href="{Permalink}"><img src="{PhotoURL-400}" width="100%"title="{NoteCountWithLabel}" <div class="photo"></a>{LinkCloseTag}
  629.  
  630. {/block:Photo}
  631.  
  632. {block:IfShowTags}{block:IndexPage}{block:HasTags}
  633. <div class="tagged"><p>{lang:Tagged}: {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</p></div>
  634. {/block:HasTags}{/block:IndexPage}{/block:IfShowTags}
  635.  
  636. {block:PermalinkPage}
  637. <div id="post-info" class="text">
  638. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  639. {block:HasTags}
  640. <p class="tagged">{lang:Tagged}: {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</p>
  641. {/block:HasTags}
  642. <p class="post-info-data">
  643. {block:Date}{12Hour}:{Minutes}:{Seconds} @ {MonthNumber}/{DayOfMonth}/{Year}<br/>{/block:Date}
  644. {block:NoteCount}{NoteCountWithLabel}<br />{/block:NoteCount}{block:RebloggedFrom}
  645. Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br/>Posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>{block:RebloggedFrom}</p>
  646. {block:PostNotes}
  647. {PostNotes}
  648. {/block:PostNotes}
  649. </div>
  650. {/block:PermalinkPage}
  651.  
  652. </div> <!-- end single post -->
  653. {block:ContentSource}
  654. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  655. {/block:ContentSource}
  656. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  657. {/block:Posts}
  658. </div> <!-- end content -->
  659.  
  660. </body></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!