API tools faq
paste
Advertisement
helloiloveju

#3 Magic Door

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