Advertisement
approvinqq

Wonderstruck Theme // 14

Mar 26th, 2014
523
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.61 KB | None | 0 0
  1. <!--WONDERSTRUCK THEME // 14 by http://enduhlessly.tumblr.com-->
  2.  
  3. <html lang="en">
  4.  
  5. <head>
  6. <link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
  7. <meta name="color:Background" content="#FAFAFA"/>
  8. <meta name="color:Title" content="#aaa"/>
  9. <meta name="color:Text" content="#000"/>
  10. <meta name="color:Link" content="#000"/>
  11. <meta name="color:scrollbar" content="#ddd"/>
  12. <meta name="color:Hover" content="#ddd"/>
  13. <meta name="image:Background" content=""/>
  14. <meta name="image:Side Photo" content=""/>
  15. <meta name="text:Link One Title" content="one" />
  16. <meta name="text:Link One" content="" />
  17. <meta name="text:Link Two Title" content="two"/>
  18. <meta name="text:Link Two" content="" />
  19. <meta name="text:Link Three Title" content="three" />
  20. <meta name="text:Link Three" content="" />
  21. <meta name="text:Link Four Title" content="four" />
  22. <meta name="text:Link Four" content="" />
  23. <meta name="text:Link Five Title" content="five" />
  24. <meta name="text:Link Five" content="" />
  25. <meta name="text:Link Six Title" content="six" />
  26. <meta name="text:Link Six" content="" />
  27. <meta name="if:two column" content="0"/>
  28. <meta name="if:three column" content="1"/>
  29. <meta name="if:faded posts" content="1"/>
  30. <meta name="if:round posts" content="1"/>
  31. <meta name="text:blogtitle" content="Wonderstruck" />
  32.  
  33. </script>
  34.  
  35. <style type="text/css">
  36.  
  37. @font-face {font-family:Always a Good Time; src: url(http://static.tumblr.com/9wzbixa/PUwmj3iyh/kgalwaysagoodtime.ttf);}
  38. #entry img{
  39. {block:indexpage}
  40. {block:iftwocolumn}
  41. max-width:220px;
  42. {/block:iftwocolumn}
  43. {block:ifthreecolumn}
  44. max-width:200px;
  45. {/block:ifthreecolumn}
  46. {block:ifroundposts}
  47. border-radius: 5px;
  48. {/block:ifroundposts}
  49. {block:iffadedposts}
  50. opacity:.7;
  51. -webkit-transition: all 0.7s ease-out;
  52. -moz-transition: all 0.7s ease-out;
  53. transition: all 0.7s ease-out;
  54. {/block:iffadedposts}
  55. {/block:indexpage}
  56. }
  57. #entry img:hover{
  58. {block:iffadedposts}
  59. opacity: 1;
  60. -webkit-transition: all 0.7s ease-out;
  61. -moz-transition: all 0.7s ease-out;
  62. transition: all 0.7s ease-out;
  63. {block:iffadedposts}
  64. }
  65. #tumblr_controls{
  66. position:fixed !important;
  67. -webkit-filter: invert(100%)
  68. }
  69. iframe#tumblr_controls {right:3px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.2;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  70.  
  71. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: 1;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
  72.  
  73. ::-webkit-scrollbar {width: 8px; height: 4px; background: #eeeeee; border-left: 1px solid #eee; }
  74.  
  75. ::-webkit-scrollbar-thumb { background-color:{color:scrollbar}; border-bottom: 1px solid #eee; border-top: 1px solid #eee; border-left: 1px solid
  76. #eee; border-right: 1px solid #eee; }
  77.  
  78. body, a, a:hover {cursor: url(http://img69.imageshack.us/img69/7673/cursorw.png), progress;}
  79.  
  80. a:link, a:active, a:visited{
  81. color:{color:link};
  82. text-decoration: none;
  83. -webkit-transition: all 0.6s ease-out;-moz-transition: all 0.6s ease-out;-o-transition: all 0.6s ease-out;transition: all 0.6s ease-out;
  84. }
  85. a:hover {
  86. color:{color:hover};
  87. text-decoration: none;
  88. text-shadow:0px 0px 2px #000;
  89. cursor: url(http://img69.imageshack.us/img69/7673/cursorw.png), auto;
  90. }
  91. #lol{width:250px; height:auto;}
  92. {block:PermalinkPage}
  93. width:410px;
  94. {/block:PermalinkPage}
  95. }
  96. #center{
  97. padding-top:3px;
  98. padding-bottom:3px;
  99. position:fixed !important;
  100. width:250px;
  101. height:207px;
  102. background-color:white;
  103. {block:PermalinkPage}
  104. width:410px;
  105. height:207px;
  106. {/block:PermalinkPage}
  107. }
  108. body{
  109. margin:5px;
  110. background-color: {color:Background};
  111. background-image:url({image:Background});
  112. background-attachment: fixed;
  113. background-repeat: repeat;
  114. color:{color:Text};
  115. }
  116. #audio {
  117. width:200px;
  118. height:auto;
  119. min-height:60px;
  120. padding-bottom:0px;
  121. }
  122. .cover {
  123. position:absolute;
  124. z-index:1;
  125. width:60px;
  126. height:60px;
  127. }
  128. .cover img {
  129. float:left;
  130. width:60px;
  131. height:60px;
  132. border:dashed 2px #eee;
  133. }
  134. .playbox {
  135. opacity:0.6;
  136. width:27px;
  137. height:30px;
  138. overflow:hidden;
  139. position:absolute;
  140. z-index:1000;
  141. margin-left:17px;
  142. margin-top:17px;
  143. text-align:center;
  144. }
  145. .info {
  146. margin-left:73px;
  147. margin-top:4px;
  148. line-height:14px;
  149. }
  150.  
  151.  
  152. div#side{
  153. position:fixed !important;
  154. width:50px;
  155. height:100%;
  156. top:-5px;
  157. margin-left:240px;
  158. background-image:url({image:Side Photo});
  159. border: 3px solid #fff;
  160.  
  161. }
  162. #posts{
  163. float:center;
  164. {block:indexpage}
  165. {block:iftwocolumn}
  166. width:600px;
  167. {/block:iftwocolumn}
  168. {block:ifthreecolumn}
  169. width:900px;
  170. {/block:ifthreecolumn}
  171. {/block:indexpage}
  172. {block:permalinkpage}
  173. margin-left:100px;
  174. {/block:permalinkpage}
  175. margin-left: 300px;
  176. {block:iftwocolumn}
  177. margin-left:300px;
  178. {/block:iftwocolumn}
  179. margin-top:0px;
  180. }
  181. div#description{
  182. position: relative;
  183. text-transform:normal;
  184. width:auto;
  185. font-size:10px;
  186. font-family:calibri;
  187. text-transform:uppercase;
  188. letter-spacing:1px;
  189. height: 70px;
  190. color:{color:text};
  191. margin-top:2px;
  192. margin-left:313px;
  193. }
  194. #blogtitle{
  195. position:relative;
  196. font-family:Always a Good Time;
  197. font-size:25px;
  198. width:auto;
  199. margin-top:8px;
  200. margin-left:313px;
  201. text-transform:normal;
  202. background:transparent;
  203. color: {color:title};
  204. }
  205. div#links{
  206. position: relative;
  207. text-transform:uppercase;
  208. font-size:9px;
  209. font-family:calibri;
  210. color:{color:text};
  211. letter-spacing:2px;
  212. margin-top:-50px;
  213. margin-left:313px;
  214. }
  215. askk {
  216. font-family: always a good time;
  217. color: {color:Title};
  218. font-size:8px;
  219. text-transform:uppercase;
  220. letter-spacing:1px;
  221. z-index:1;
  222. }
  223. titlee {
  224. font-family: calibri;
  225. color: {color:Title};
  226. font-size:10px;
  227. text-transform:uppercase;
  228. letter-spacing:1px;
  229. z-index:1;
  230. }
  231. #entry {
  232. margin:7px;
  233. padding: 15px;
  234. border: 1px solid #ececec;
  235. border-radius:0px;
  236. float:left;
  237. margin-left:10px;
  238. margin-top:10px;
  239. background-color:white;
  240. font-size:10px;
  241. font-family:calibri;
  242. line-height:12px;
  243. padding-bottom:11px;
  244. {block:iftwocolumn}
  245. width:220px;
  246. {/block:iftwocolumn}
  247. {block:ifthreecolumn}
  248. width:200px;
  249. {/block:ifthreecolumn}
  250. {block:ifroundposts}
  251. border-radius: 5px;
  252. {/block:ifroundposts}
  253. {block:PermalinkPage}
  254. width: 520px;
  255. height: auto;
  256. margin-left:100px;
  257. {/block:PermalinkPage}
  258. }
  259. .title{
  260. font-family:always a good time;
  261. font-size: 15px;
  262. line-height: 10px;
  263. color: {color:Title};
  264. font-weight: normal;
  265. letter-spacing: 0px;
  266. text-transform: normal;
  267. padding: 2px 0px 0px 0px;
  268. }
  269. #entry .perma{
  270. {block:iftwocolumn}
  271. width:220px;
  272. {/block:iftwocolumn}
  273. {block:ifthreecolumn}
  274. width:200px;
  275. {/block:ifthreecolumn}
  276. height: 30px;
  277. font-family:calibri;
  278. position: absolute;
  279. font-size: 8px;
  280. line-height: 14px;
  281. text-align: center;
  282. z-index: 99999;
  283. text-transform:uppercase;
  284. overflow:hidden;
  285. background-color:white;
  286. letter-spacing:1px;
  287. top:25px;
  288. margin-left: 0px;
  289. padding: 2px;
  290. border-radius:0px;
  291. border-top:dashed 2px #000;
  292. border-bottom:dashed 2px #000;
  293. opacity:.0;
  294. -webkit-transition: opacity 0.5s linear;
  295. -webkit-transition: all 0.5s linear;
  296. -moz-transition: all 0.5s linear;
  297. transition: all 0.5s linear;
  298. }
  299. #entry:hover .perma{
  300. overflow:visible;
  301. opacity:.8;
  302. -webkit-transition: all 0.5s linear;
  303. -webkit-transition: all 0.5s linear;
  304. -moz-transition: all 0.5s linear;
  305. transition: all 0.5s linear;
  306. }
  307. .permalinktext{
  308. display: block;
  309. font-family:calibri;
  310. font-size:8px;
  311. line-height:10px;
  312. letter-spacing:1px;
  313. text-transform:uppercase;
  314. text-align: right;
  315. background-color:transparent;
  316. margin: 2px;
  317. margin-top:5px;
  318. }
  319. #what {
  320. position:fixed;
  321. font-family: consolas;
  322. font-size: 8px;
  323. bottom:-5px;
  324. right:5px;
  325. padding: 8px;
  326. height:12px;
  327. letter-spacing:1px;
  328. text-transform:uppercase;
  329. padding-bottom:5px;
  330. background: white;
  331. width:85px;
  332. border-top-right-radius: 10px;
  333. border-top-left-radius: 10px;
  334. border: 1px solid #f7f7f7;
  335. transition: all 0.6s ease-out;
  336. -o-transition-transition: all 0.6s ease-out;
  337. -webkit-transition: all 0.6s ease-out;
  338. -moz-transition: all 0.6s ease-out;
  339. }
  340. #what:hover{
  341. bottom:-5px;
  342. height:30px;
  343. transition: all 0.6s ease-out;
  344. -o-transition-transition: all 0.6s ease-out;
  345. -webkit-transition: all 0.6s ease-out;
  346. -moz-transition: all 0.6s ease-out;
  347. }
  348. </style>
  349.  
  350. <div style="position:fixed; right:5px; bottom:5px; opacity:0.8;"> <a href="http://robynsthemes.tumblr.com/" title="robyn's themes"><img src="http://i57.tinypic.com/9pqdmq.png" width=”25”></a></div>
  351.  
  352. <title>{title}</title>
  353. <link rel="shortcut icon" href="{favicon}">
  354. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  355. <meta name="viewport" content="width=720" />
  356. </head>
  357. <div id="side"></div>
  358. <body>
  359. <div id="center">
  360. <div id="content">
  361.  
  362.  
  363.  
  364. <div id="blogtitle">{text:blogtitle}</div>
  365. <div id="description"><titlee> </titlee>{Description}</div>
  366. <div id="links">
  367. <a href="{text:Link One}">{text:Link One Title}</a> /
  368. <a href="{text:Link Two}">{text:Link Two Title}</a> /
  369. <a href="{text:Link Three}">{text:Link Three Title}</a> /
  370. <a href="{text:Link Four}">{text:Link Four Title}</a> /
  371. <a href="{text:Link Five}">{text:Link Five Title}</a> /
  372. <a href="{text:Link Six}">{text:Link Six Title}</a> </div>
  373.  
  374. <div id="posts">
  375. {block:Posts}
  376. <div id="entry">
  377.  
  378. {block:Text}
  379. {block:Title}<span class="title">{Title}</span>{/block:Title}
  380. <span class="entrytext">{Body}</span></a>
  381. {block:IndexPage}
  382. <div class="permalinktext">
  383. {Month} {DayOfMonth} with <a href="{permalink}">{notecountwithlabel}</a>
  384. </div>
  385. {/block:IndexPage}
  386. {/block:Text}
  387.  
  388. {block:Link}
  389. <a href="{URL}" class="title">{Name}</a>
  390. {block:Description}{Description}{/block:Description}
  391. {block:IndexPage}
  392. <div class="permalinktext">
  393. {Month} {DayOfMonth} with <a href="{permalink}">{notecountwithlabel}</a>
  394. </div>
  395. {/block:IndexPage}
  396. {block:Link}
  397.  
  398.  
  399. {block:Photo}{block:IndexPage}
  400. <div class="perma">
  401. posted at {12Hour}:{Minutes} {AmPm} on {DayOfWeek}<br>
  402. with <a href="{permalink}">{notecountwithlabel}</a> - <a href="{reblogurl}">reblog this post</a> </span></div>
  403. {/block:IndexPage}
  404. {block:IndexPage}<img src="{PhotoURL-500}" alt="{PhotoAlt}" style="" width=290px /></a>{/block:IndexPage}{block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"width=520px/>{LinkCloseTag}{/block:PermalinkPage}
  405. {/block:Photo}
  406.  
  407. {block:Photoset}
  408. <center>
  409. {block:IndexPage}
  410. <div class="perma">
  411. posted {timeago} on {DayOfWeek}<br>
  412. with <a href="{permalink}">{notecountwithlabel}</a> - <a href="{reblogurl}">share this post</a>
  413. </div>
  414. <div style="width: 200px; overflow-x:hidden;overflow-y:hidden;">{Photoset-250}</div>
  415. {/block:IndexPage}
  416. </center>
  417. <center>{block:PermalinkPage}<div style="width: auto; overflow-x:hidden;overflow-y:hidden;">{Photoset-500}{/block:PermalinkPage}</center>
  418. {/block:Photoset}
  419.  
  420. {block:Quote}
  421. <div class="quote">❝{quote}</div>
  422. {block:IndexPage}
  423. <div class="permalinktext">
  424. {Month} {DayOfMonth} with <a href="{permalink}">{notecountwithlabel}</a>
  425. </div>{/block:IndexPage}
  426. {/block:IndexPage}
  427. {/block:Quote}
  428.  
  429. {block:Chat}
  430. {block:Title}<span class="title">{Title}</span>{/block:Title}
  431. <ul class="chat">
  432. {block:Lines}
  433. <li class="user_{UserNumber}">
  434. {block:Label}
  435. <span class="label">{Label}</span>
  436. {/block:Label}
  437.  
  438. {Line}<br>
  439. {/block:Lines}
  440. {block:IndexPage}
  441. <div class="permalinktext">
  442. {Month} {DayOfMonth} with <a href="{permalink}">{notecountwithlabel}</a>
  443. </div>{/block:IndexPage}
  444. {/block:Chat}
  445.  
  446. {block:Audio}
  447. <div id="audio"><div class="cover"><img src="http://static.tumblr.com/k9utpfa/tcom8wpif/default_cover_m.jpg"></div>{block:AlbumArt}<div class="cover"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}<div class="playbox">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div><div class="info"><b>Artist:</b> <span{block:Artist} style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br><b>Title:</b> <span{block:TrackName} style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br><b>Album:</b> <span{block:Album} style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}{block:PlayCount}<br><b>Plays:</b> {FormattedPlayCount}{/block:PlayCount}</div></div>
  448. {block:IndexPage}
  449. {/block:IndexPage}
  450. {/block:Audio}
  451.  
  452. {block:Video}
  453. <center>
  454. {block:IndexPage}
  455. <div class="perma">
  456. {Month} {DayOfMonth} with <a href="{permalink}">{notecountwithlabel}</a> - <a href="{reblogurl}">reblog</a>
  457. </div>
  458. <div style="width: 200px; overflow-x:hidden;overflow-y:hidden;">{Video-250}</div>
  459. {/block:IndexPage}
  460. </center>
  461. <center>{block:PermalinkPage}<div style="width: 450px; overflow-x:hidden;overflow-y:hidden;">{Video-500}{/block:PermalinkPage}</center>
  462. {block:Video}
  463.  
  464. {block:Answer}
  465. <div style="margin-top:2px;;margin-bottom:0px;min-height:auto; padding: 4px; background-color:#fff;border-bottom:1px solid #eee; text-transform:normal; font-size:10px; font-family: calibri; border-radius:0px;">
  466. <askk>{asker}</askk>: {Question}</div>
  467. <div style="margin-top:2px; line-height:11px;margin-bottom:4px; text-transform:normal; font-size:10px; font-family: calibri;background: transparent;">{Answer}</div>
  468. {block:IndexPage}
  469. <div class="permalinktext">
  470. {Month} {DayOfMonth} with <a href="{permalink}">{notecountwithlabel}</a>
  471. </div>
  472. {/block:indexpage}
  473. {/block:Answer}
  474.  
  475. {block:PermalinkPage}
  476. <center>
  477. {block:Caption}{Caption}{/block:Caption}
  478. {block:RebloggedFrom}
  479. posted {12Hour}:{Minutes} {AmPm} on {DayOfWeek}, {Month} {DayOfMonth}, {Year} with {notecountwithlabel}<br>
  480. <b>orginally posted by:</b> <a href="{ReblogRootURL}">{ReblogRootName}</a> | <b>reblogged from:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a><br>{/block:RebloggedFrom}
  481. {block:NoteCount} <div style="border-bottom: 1px solid #eee; text-align: center; margin: 10px;"></div>{/block:NoteCount}
  482. </center>
  483. {/block:PermalinkPage}
  484.  
  485. {block:PostNotes}<div align="middle"></div>
  486. <center></center></span><br>
  487. <div id="postnotes">{PostNotes}</div><br>
  488. <center>{block:ContentSource}
  489. <br><a href="{SourceURL}">
  490. {lang:Source}:
  491. {block:SourceLogo}
  492. <img src="{BlackLogoURL}" width="{LogoWidth}"
  493. height="{LogoHeight}" alt="{SourceTitle}" />
  494. {/block:SourceLogo}
  495. {block:NoSourceLogo}
  496. {SourceLink}
  497. {/block:NoSourceLogo}
  498. </a>
  499. {/block:ContentSource}</center>
  500.  
  501. {/block:PostNotes}
  502. </div>
  503. {/block:Posts}
  504. </div></div>
  505.  
  506. {block:indexpage}
  507. {block:NextPage}<div id="page-nav"><a href="{NextPage}"></a></div>{/block:NextPage}
  508. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  509. <script type="text/javascript" src="http://static.tumblr.com/bswe8t6/UFVlryaq2/jquerymsnryv2.js"></script>
  510. <script type="text/javascript">
  511. $(window).load(function(){
  512. var $wall = $('#posts');
  513. $wall.imagesLoaded(function(){
  514. $wall.masonry({
  515. itemSelector: '#entry, #entry_photo',
  516. isAnimated : false
  517. });
  518. });
  519.  
  520. $wall.infinitescroll({
  521. navSelector : '#page-nav',
  522. nextSelector : '#page-nav a',
  523. itemSelector : '#entry, #entry_photo',
  524. bufferPx : 2000,
  525. debug : false,
  526. errorCallback: function() {
  527. $('#infscr-loading').fadeOut('normal');
  528. }},
  529. function( newElements ) {
  530. var $newElems = $( newElements );
  531. $newElems.hide();
  532. $newElems.imagesLoaded(function(){
  533. $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
  534. });
  535. }); $('#content').show(500);
  536. });
  537. </script>
  538. {/block:indexpage}
  539.  
  540. <script type="text/javascript">
  541. <!--
  542.  
  543. // Disable Right Click Script
  544.  
  545. function IE(e)
  546. {
  547. if (navigator.appName == "Microsoft Internet Explorer" && (event.button == "2" || event.button == "3"))
  548. {
  549. return false;
  550. }
  551. }
  552. function NS(e)
  553. {
  554. if (document.layers || (document.getElementById && !document.all))
  555. {
  556. if (e.which == "2" || e.which == "3")
  557. {
  558. return false;
  559. }
  560. }
  561. }
  562. document.onmousedown=IE;document.onmouseup=NS;document.oncontextmenu=new Function("return false");
  563.  
  564. //-->
  565. </script>
  566.  
  567. </body>
  568. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement