helloiloveju

Magic Door - Other Post Size

Dec 17th, 2013
119
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.51 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6. <!----
  7. M A G I C D O O R
  8. theme #3 by
  9. helloiloveju.tumblr.com
  10. DO NOT REMOVE CREDIT!
  11. feel free to edit
  12. e n j o y !
  13. & don't remove this comment
  14. --->
  15.  
  16.  
  17. <meta name="color:Background" content="#615151" />
  18. <meta name="color:Body links" content="#615151" />
  19. <meta name="color:text" content="#1d1818" />
  20. <meta name="color:bold" content="#d2ecb7" />
  21. <meta name="color:italic" content="#ddd898" />
  22. <meta name="color:Navi links" content="#b1b0b0" />
  23. <meta name="color:Navi background" content="#ffffff" />
  24. <meta name="color:head text" content="#868484" />
  25. <meta name="color:Post color" content="#ffffff" />
  26. <meta name="color:Text highlight" content="#d2ecb7" />
  27. <meta name="font:Body" content='Georgia,serif'/>
  28. <meta name="if:PortraitIcon" content=""/>
  29. <meta name="if:DescriptionIcon" content=""/>
  30. <meta name="if:250px" content=""/>
  31. <meta name="if:400px" content="1"/>
  32. <meta name="if:500px" content=""/>
  33. <meta name="if:OtherPostSize" content=""/>
  34. <meta name="if:InfiniteScroll" content=""/>
  35. <meta name="text:OtherPostSize" content="700px" />
  36. <meta name="text:OtherPostSize2" content="630px" />
  37. <meta name="text:Font size" content='0.8em'/>
  38. <meta name="text:Font Size Title" content='35px'/>
  39. <meta name="text:Maintitle2" content="this is your subtext"/>
  40. <meta name="image:Background" content="" />
  41. <meta name="image:Description Icon" content="" />
  42.  
  43.  
  44. <meta name="text:Link1" content="/" />
  45. <meta name="text:Link1 Title" content="home" />
  46. <meta name="text:Link2" content="/about" />
  47. <meta name="text:Link2 Title" content="about me" />
  48. <meta name="text:Link3" content="/tags" />
  49. <meta name="text:Link3 Title" content="tags" />
  50. <meta name="text:Link4" content="/ask" />
  51. <meta name="text:Link4 Title" content="ask" />
  52. <meta name="text:Link5" content="/submit" />
  53. <meta name="text:Link5 Title" content="submit" />
  54.  
  55. {block:Description}
  56. <meta name="description" content="{MetaDescription}" />
  57. {/block:Description}
  58. <meta charset="utf-8">
  59. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  60. <title>{Title}</title>
  61. <link rel="shortcut icon" href="{Favicon}">
  62. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  63. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  64. <link href='http://fonts.googleapis.com/css?family=Zeyada' rel='stylesheet' type='text/css'>
  65. <style type="text/css">
  66. /*Basic styles*/
  67. ::-moz-selection {
  68. background: {color:Text highlight};
  69. color: #fff;
  70. }
  71. ::selection {
  72. background: {color:Text highlight};
  73. color: #fff;}
  74.  
  75. #content {
  76. margin: 2%;}
  77.  
  78. body {
  79. background: {color:Background} url('{image:Background}');
  80. color: {color:text};
  81. font-family: {font:Body};
  82. font-size: {text:Font size};
  83. margin: 0;
  84. padding: 0;}
  85.  
  86. .maintitle1 {
  87. font:{text:Font Size Title} 'Zeyada';
  88. text-transform:lowercase;
  89. color: #fff;
  90. padding:10px;
  91. text-align: left;
  92. margin-top:-10px;}
  93.  
  94. .maintitle2 {
  95. font: 7px arial;
  96. letter-spacing:1px;
  97. text-transform:uppercase;
  98. color: #fff;
  99. padding:10px;
  100. text-align: left;
  101. margin-top:-42px;}
  102.  
  103. h1 {
  104. color:{color:text};
  105. line-height: 20px;
  106. font-weight: normal;
  107. font: 17px georgia;
  108. font-style:italic;
  109. text-transform: none;}
  110.  
  111. h2 {
  112. color:{color:Navi Links};
  113. margin-bottom:-3px;
  114. font-weight: normal;
  115. font: 15px times;
  116. letter-spacing:4px;
  117. text-transform: uppercase;}
  118.  
  119. a {
  120. color: {color:Body links};
  121. text-decoration: none;}
  122.  
  123. a:hover {
  124. color: {color:text};
  125. text-decoration: none;}
  126.  
  127. b, strong, bold {
  128. font-weight : bold;
  129. color: {color:bold};}
  130.  
  131. i, em, italic {
  132. font-style : italic;
  133. color : {color:italic};}
  134.  
  135. blockquote {
  136. border-left: 5px solid #e3e3e3;
  137. margin: 0;
  138. padding: 2%;}
  139.  
  140. iframe, img, embed, object, video {
  141. max-width: 100%;}
  142.  
  143. img {
  144. height: auto;
  145. width: auto;}
  146.  
  147. /*head*/
  148. #head {
  149. padding: 70px 10px 10px 10px;
  150. color: {color:head text};}
  151.  
  152. #head a {
  153. color: {color:head links};}
  154.  
  155. nav li {
  156. display: inline;}
  157.  
  158. .round{
  159. width:50px;
  160. height:50px;
  161. -moz-border-radius:50px 50px 50px 50px;
  162. -o-border-radius:50px 50px 50px 50px;
  163. -webkit-border-radius:50px 50px 50px 50px;
  164. border-radius:50px 50px 50px 50px;}
  165.  
  166. /*Top Navi*/
  167. .top {
  168. position:relative;
  169. width:560px;
  170. height:30px;
  171. margin:0 auto;
  172. background:{color:Navi background};
  173. padding:5px;
  174. -moz-border-radius:0px 0px 10px 10px;
  175. -o-border-radius:0px 0px 10px 10px;
  176. -webkit-border-radius:0px 0px 10px 10px;
  177. border-radius:0px 0px 10px 10px;
  178. -webkit-transition: all 1s linear;
  179. -moz-transition: all 1s linear;
  180. -o-transition: all 1s linear;}
  181.  
  182. .top:hover {
  183. height:130px;
  184. padding-bottom:5px;
  185. -webkit-transition: all 1s linear;
  186. -moz-transition: all 1s linear;
  187. -o-transition: all 1s linear;}
  188.  
  189. #invisible{
  190. padding:0 0 0 25%;
  191. background-color:transparent;
  192. text-decoration:none;
  193. text-transform:none;
  194. border:0;
  195. clear:both;
  196. opacity:0;
  197. -webkit-transition: all 1s ease-in-out;
  198. -moz-transition: all 1s ease-in-out;
  199. -o-transition: all 1s ease-in-out;}
  200.  
  201. #invisible:hover{
  202. opacity:1;
  203. -webkit-transition: all 1s ease-in-out;
  204. -moz-transition: all 1s ease-in-out;
  205. -o-transition: all 1s ease-in-out;}
  206.  
  207. #navi {
  208. width:100%;
  209. height:10px;
  210. margin:0;}
  211.  
  212. #navi a {
  213. display:block;
  214. float:left;
  215. text-transform:uppercase;
  216. letter-spacing:2px;
  217. text-decoration: none;
  218. margin:0 0 0 30px;
  219. padding:10px;
  220. line-height:7px;
  221. font:7px times;
  222. color:{color:Navi links};
  223. background:#fff;}
  224.  
  225. #navi a:hover{
  226. border-bottom:1px solid {color:Navi links};}
  227.  
  228. .desc{
  229. width:200px;
  230. color:{color:Navi links};
  231. font:8px arial;
  232. border-left:3px solid #e3e3e3;
  233. padding-left:20px;
  234. background-color:transparent;}
  235.  
  236. /*Article*/
  237. article {
  238. background: {color:Post color};
  239. margin: 10px;
  240. {block:ifOtherPostSize}width:{text:OtherPostSize};{/block:ifOtherPostSize}
  241. {block:if500px}width:500px;{/block:if500px}
  242. {block:if400px}width:400px;{/block:if400px}
  243. {block:if250px}width:250px;{/block:if250px}}
  244.  
  245. .chat span {
  246. float: left;
  247. margin-right: 1%; }
  248.  
  249. /*Tags and notes*/
  250. #bottom{
  251. border-top:2px solid #e3e3e3;
  252. padding:4px;
  253. margin-bottom:2px;
  254. font: 7px arial;
  255. letter-spacing:1px;
  256. text-align:left;
  257. color:#888888;
  258. line-height:110%;
  259. }
  260.  
  261. #bottom a {
  262. color:#555555;
  263. font-size:7px;}
  264.  
  265. #bottom a:hover {
  266. color:white;
  267. background-color:#181718;}
  268.  
  269. .notes {
  270. clear: both;
  271. padding: 0;}
  272.  
  273. #tags{
  274. font: 7px arial;
  275. letter-spacing:1px;
  276. text-align:left;
  277. margin-top:-5px;
  278. text-transform:uppercase;
  279. color:#888888;}
  280.  
  281. /*ask and answer*/
  282.  
  283. #ask {
  284. float:left;
  285. margin-right:5px;}
  286.  
  287. #asker{
  288. text-align:center;
  289. background-color:#f6f6f6;
  290. {block:ifOtherPostSize}width:{text:OtherPostSize2};{/block:ifOtherPostSize}
  291. {block:if500px}width:430px;{/block:if500px}
  292. {block:if400px}width:330px;{/block:if400px}
  293. {block:if250px}width:180px;{/block:if250px}}
  294.  
  295.  
  296. /* Album art for audio posts */
  297.  
  298. #albumart img {
  299. width: 70px;
  300. height: 70px;}
  301.  
  302. /*Pagination*/
  303. #pag {
  304. font: 8px trebuchet ms;
  305. text-align:left;
  306. color:#fff;
  307. letter-spacing:1px;}
  308.  
  309. .pag a {
  310. color: #fff;
  311. margin-left:1px;}
  312.  
  313. .pag a:hover {
  314. color : {color:text};}
  315.  
  316. /*Custom CSS*/
  317. {CustomCSS}
  318. </style>
  319. </head>
  320. <body>
  321.  
  322. <div id="navi">
  323. <div class="top">
  324. {block:ifLink1}<a style="color: {color:navi links}"href="{text:Link1}">{text:Link1 Title}</a> {/block:ifLink1}
  325. {block:ifLink2}<a style="color: {color:navi links}"href="{text:Link2}">{text:Link2 Title}</a> {/block:ifLink2}
  326. {block:ifLink3}<a style="color: {color:navi links}"href="{text:Link3}">{text:Link3 Title}</a> {/block:ifLink3}
  327. {block:ifLink4}<a style="color: {color:navi links}"href="{text:Link4}">{text:Link4 Title}</a> {/block:ifLink4}
  328. {block:ifLink5}<a style="color: {color:navi links}"href="{text:Link5}">{text:Link5 Title}</a> {/block:ifLink5}
  329. <a style="color: {color:navi links}"href="http://helloiloveju.tumblr.com">© THEME</a>
  330. <br>
  331. <div id="invisible">
  332. <table>
  333. <tr>
  334. <td><div style="margin:15px 10px 0 0">
  335. {block:ifDescriptionIcon}<img src="{image:Description Icon}" class="round">{/block:ifDescriptionIcon}
  336. {block:ifNotDescriptionIcon}<img src="{PortraitURL-64}" class="round">{/block:ifNotDescriptionIcon}
  337. </div></td>
  338. <td> <div class="desc"><h2>{Title}</h2>{Description}</div></td>
  339. </tr>
  340. <tr>
  341. </table>
  342. </div>
  343. </div>
  344. </div>
  345.  
  346. <!--head-->
  347. <div id="head">
  348. <div id="header" style="margin-left:20px;">
  349.  
  350. <table>
  351. <tr>
  352. {block:ifPortraitIcon}<td> <a href="/" border="0"><img src="{PortraitURL-64}" class="round"></a></td>{block:ifPortraitIcon}
  353. <td> <a href="{BlogURL}" border="0"><div class="maintitle1">{title}</div></a><div class="maintitle2">{text:maintitle2}
  354. <!--Pagination-->
  355. {block:Pagination}
  356. <div id="pag">
  357. <div class="pag">
  358. {block:PreviousPage}<a href="{PreviousPage}">←</a>{/block:PreviousPage}
  359. {block:JumpPagination length="5"}{block:CurrentPage}<span class="current_page" style="color:#fff;">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination} OF {TotalPages}{block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}{/block:Pagination}
  360. </div></div>
  361.  
  362. </div></td>
  363. </tr>
  364. <tr>
  365. </table>
  366. </div>
  367. </div>
  368.  
  369.  
  370.  
  371.  
  372. <!--Content holder-->
  373. <div id="content">
  374. {block:Posts}
  375.  
  376. <article>
  377.  
  378. {block:Text}
  379. <div class="text" style="padding: 15px;">
  380. {block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  381. {Body}</div>
  382. {/block:Text}
  383.  
  384. {block:Photo}
  385. <div class="photo">
  386. {LinkOpenTag}
  387. {block:if500px}<img src="{PhotoURL-500}" border="0">{/block:if500px}
  388. {block:if400px}<img src="{PhotoURL-400}" border="0">{/block:if400px}
  389. {block:if250px}<img src="{PhotoURL-250}" border="0">{/block:if250px}
  390. {block:ifOtherPostSize}<img src="{PhotoURL-500}" border="0" style="width:{text:OtherPostSize}">{/block:ifOtherPostSize}
  391. {LinkCloseTag}
  392. {block:PermalinkPage}{block:Caption}<div style="padding: 15px;">{Caption}</div>{/block:Caption}{/block:PermalinkPage}</div>
  393. {/block:Photo}
  394.  
  395. {block:Photoset}
  396. <div class="photoset" style="width:{text:OtherPostSize};height:100%">
  397. {block:IndexPage}
  398. {block:Photos}
  399. {block:ifOtherPostSize}{Photoset}{/block:ifOtherPostSize}
  400. {block:if500px}{Photoset-500}{/block:if500px}
  401. {block:if400px}{Photoset-400}{/block:if400px}
  402. {block:if250px}{Photoset-250}{/block:if250px}
  403. {/block:Photos}
  404. {/block:IndexPage}
  405. {block:PermalinkPage}{Photoset}{/block:PermalinkPage}
  406. {block:PermalinkPage}{block:Caption}<div style="padding: 15px;">{Caption}</div>{/block:Caption}{/block:PermalinkPage}</div>
  407. {/block:Photoset}
  408.  
  409. {block:Quote}
  410. <div class="quote"style="padding: 15px;">
  411. <div style="font-family: times; color: {color:navu};font-style: italic; font-size: 58px; margin-bottom: -30px; position: relative; text-align: left; top: 20px; left: 0px;" >“</div><br>
  412. <font style="color:#838282; font-size:11px;line-height:12px;font-weight:nromal;font-family:courier new;font-style:italic;margin:0"><br><br><div style="padding-left:30px;padding-right:30px;">{quote}</font></div>
  413. <div style="font-family: times; font-style: italic; font-size: 48px; margin-bottom: -20px; position: relative; text-align: right; bottom: -20px; right: 20px; color:{color:navu};">”</div>
  414. <br><br>{block:Source}<p align="right">&mdash; <FONT style="FONT-WEIGHT: bold; TEXT-TRANSFORM: uppercase; COLOR: {color:navu}; LINE-HEIGHT: 8pt; LETTER-SPACING: 3pt; text-transform:uppercase;padding-right:5px;font:7pt courier new;">{Source}</font></p>{/block:Source}</div>
  415. {/block:Quote}
  416.  
  417. {block:Link}
  418. <div class="link"style="padding: 15px;">
  419. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  420. {block:Description}{Description}{/block:Description}</div>
  421. {/block:Link}
  422.  
  423. {block:Chat}
  424. <div class="chat">
  425. <ul>
  426. {block:Lines}{block:Label}<span class="label"><b>{Label}</b></span>{/block:Label}<p> {Line} </p>{/block:Lines}
  427. </ul></div>
  428. {/block:Chat}
  429.  
  430.  
  431. {block:Video}
  432. <div class="video">
  433. <div class="video-player">{Video-500}</div>
  434. {block:PermalinkPage}{block:Caption}<div style="padding: 15px;">{Caption}{/block:Caption}{/block:PermalinkPage}</div></div>
  435. {/block:Video}
  436.  
  437. {block:Audio}
  438. <div id="albumart">
  439. {block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  440. {AudioPlayerWhite}
  441. <div style="padding: 15px;">
  442. {block:TrackName}<b>Track:</b> {TrackName}<br>{/block:TrackName}
  443. {block:Artist}<b>Artist:</b> {Artist}<br>{/block:Artist}
  444. {block:Album}<b>Album:</b> {Album}<br>{/block:Album}
  445. <b>Plays:</b> {PlayCount}<br></div>
  446. {/block:Audio}
  447.  
  448. {block:Answer}
  449. <div id="ask">
  450. <table>
  451. <tr>
  452. <td> <img src="{AskerPortraitURL-48}" style="border:5px solid #fff;"></td>
  453. <td> <div id="asker"><p><span style="font: 12px georgia;font-style:italic;text-align:center;">{Asker} asked:</span><br><span style="text-align:justify;"> {Question}</span></p></div></td>
  454. </tr>
  455. </table>
  456. <div style="padding: 15px;margin-top:-8px;">{Answer}</div>
  457. {/block:Answer}
  458.  
  459.  
  460. <!--Metadata: date, note count, content source-->
  461. <div id="bottom"><div class="bottom">
  462.  
  463.  
  464. <div class="reblogged">
  465. <div style="float:left;">
  466. <a href="{ReblogURL}" target="_blank">REBLOG</a> + <a href="{Permalink}" target="_blank">{NoteCount} NOTES</a></div>
  467. {block:RebloggedFrom}
  468. <div style="float:right;">
  469. <a href="{ReblogParentURL}" target="_blank">VIA</a> /
  470. <a href="{ReblogRootURL}" target="_blank">©</a></div>
  471. {/block:RebloggedFrom}
  472. <br><br>
  473. {block:HasTags}
  474. <div id="tags"><div class="tags">
  475. {block:HasTags} <div class="tags"> {block:Tags}
  476. <a href="{TagURL}">#{Tag}</a>
  477. {/block:Tags} </div></div>{/block:HasTags}
  478.  
  479.  
  480. </div>
  481.  
  482. <!--Post footer (tags and notes) on displayed on permalink pages-->
  483. {block:Permalink}
  484. <footer class="details">
  485.  
  486. {block:PostNotes}
  487. <div id="notes">
  488. {PostNotes}
  489. </div>
  490. {/block:PostNotes}
  491. </footer>
  492. {/block:Permalink}
  493. </article>
  494. {/block:Posts}
  495. <!--Close of bottom-->
  496. </div>
  497. </div>
  498. <!--Close of article-->
  499. </div>
  500.  
  501.  
  502.  
  503. <!--Pagination: previous/next page links-->
  504. {block:Pagination}
  505. <div class="pagination">
  506. {block:PreviousPage}<a href="{PreviousPage}">Previous page</a>{/block:PreviousPage}
  507. {block:NextPage}<a href="{NextPage}">Next page</a>{/block:NextPage}
  508. </div>
  509. {/block:Pagination}
  510. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  511. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  512. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  513. {block:IfInfiniteScroll}
  514. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  515. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  516. {/block:IfInfiniteScroll}
  517. <!--Code for infinite scroll and grid layout-->
  518. <script>
  519. (function() {
  520. var $tumblelog = $('#content');
  521. {block:IfInfiniteScroll}
  522. $tumblelog.infinitescroll({
  523. navSelector : ".pagination",
  524. nextSelector : ".pagination a:first",
  525. itemSelector : "article",
  526. bufferPx : 50,
  527. done : "",
  528. loading: {
  529. finishedMsg: "<p> </p>",
  530. img : " ",
  531. msg: null,
  532. msgText: "<p> </p>"
  533. },
  534. },
  535. function( newElements ) {
  536. var $newElems = $( newElements ).css({ opacity: 0 });
  537. $newElems.imagesLoaded(function(){
  538. $newElems.animate({ opacity: 1 });
  539. $tumblelog.masonry( 'appended', $newElems);
  540. });
  541. }
  542. );
  543. {/block:IfInfiniteScroll}
  544. $tumblelog.imagesLoaded( function(){
  545. $tumblelog.masonry({
  546. columnWidth: function( containerWidth ) {
  547. return containerWidth / 100;
  548. }
  549. });
  550. });
  551. })();
  552. </script>
  553.  
  554. </body>
  555. </html>
Advertisement
Add Comment
Please, Sign In to add comment