API tools faq
paste
Advertisement
paigeh987

Theme 11 - neonbike themes

paigeh987
Feb 2nd, 2014
559
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.90 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. Theme #11 by Paige @ neonbikethemes.tumblr.com
  8. Please DO NOT COPY ANY PARTS OF THIS CODE and claim them as your own!
  9.  
  10. Do not remove the credit. thanks!
  11.  
  12. -->
  13.  
  14. <meta name="color:Background" content="#faf9f9" />
  15. <meta name="color:links" content="#e2b7a4" />
  16. <meta name="color:hover" content="#fba56a" />
  17. <meta name="color:text" content="#a89083" />
  18. <meta name="color:Border" content="#ecdfcd" />
  19. <meta name="color:accent" content="#ffede2" />
  20. <meta name="color:title" content="#f07144" />
  21. <meta name="color:navbar bg" content="#ffc8a7" />
  22. <meta name="color:sidebar text" content="#e2bea9" />
  23. <meta name="color:Posts" content="#ffffff" />
  24. <meta name="color:scrollbar" content="#f1a387" />
  25. <meta name="color:scrollbar bg" content="#f4dfd6" />
  26.  
  27. <meta name="text:LinkA" content=""/>
  28. <meta name="text:LinkA url" content=""/>
  29. <meta name="text:LinkB" content=""/>
  30. <meta name="text:LinkB url" content=""/>
  31. <meta name="text:LinkC" content=""/>
  32. <meta name="text:LinkC url" content=""/>
  33. <meta name="text:LinkD" content=""/>
  34. <meta name="text:LinkD url" content=""/>
  35. <meta name="text:LinkE" content=""/>
  36. <meta name="text:LinkE url" content=""/>
  37.  
  38. <meta name="if:hide captions" content="1"/>
  39.  
  40. <meta name="image:background" content="" />
  41. <meta name="image:pattern" content="" />
  42. <meta name="image:sidebar" content="" />
  43.  
  44.  
  45. {block:Description}
  46. <meta name="description" content="{MetaDescription}" />
  47. {/block:Description}
  48. <meta charset="utf-8">
  49. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  50. <title>{block:TagPage}{Tag} posts - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
  51. <link rel="shortcut icon" href="{Favicon}">
  52. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  53. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  54.  
  55.  
  56. <!-- -------------------------- SM TOOLTIP ------------------------- -->
  57.  
  58. <script>
  59. window.onload = function () {
  60. document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' );
  61. document.addEventListener( 'click', function ( event ) {
  62. var myLike = event.target;
  63. if( myLike.className.indexOf( 'my-like' ) > -1 ) {
  64. var frame = document.getElementById( 'my-like-frame' ),
  65. liked = ( myLike.className == 'my-liked' ),
  66. command = liked ? 'unlike' : 'like',
  67. reblog = myLike.getAttribute( 'data-reblog' ),
  68. id = myLike.getAttribute( 'data-id' ),
  69. oauth = reblog.slice( -8 );
  70. frame.src = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
  71. liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
  72. };
  73. }, false );
  74. };
  75. </script>
  76.  
  77. <!-- jquery --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  78. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  79. <script>
  80. (function($){
  81. $(document).ready(function(){
  82. $("a[title]").style_my_tooltips({
  83. tip_follows_cursor:true,
  84. tip_delay_time:10,
  85. tip_fade_speed:10,
  86. attribute:"title"
  87. });
  88. });
  89. })(jQuery);
  90. </script>
  91.  
  92.  
  93.  
  94.  
  95. <style type="text/css">
  96.  
  97. /* ------------------------------ FONTS --------------------------- */
  98.  
  99. @font-face{font-family:Just Realize;src:url(http://static.tumblr.com/sghs9ih/2tFlu5il8/justrealize.ttf);}
  100.  
  101. @font-face {font-family:Always a Good Time; src: url(http://static.tumblr.com/9wzbixa/PUwmj3iyh/kgalwaysagoodtime.ttf);}
  102.  
  103.  
  104. /* ---------------------------- SCROLLBAR -------------------------- */
  105.  
  106. ::-webkit-scrollbar {
  107. width: 3px;height: 0px;}
  108. ::-webkit-scrollbar-button:start:decrement,
  109. ::-webkit-scrollbar-button:end:increment {
  110. height: 3px;display: block;background-color: {color:scrollbar bg};}
  111. ::-webkit-scrollbar-track-piece {
  112. background-color: {color:scrollbar bg};}
  113. ::-webkit-scrollbar-thumb:vertical {
  114. height: 1px;background-color: {color:scrollbar};border-top:0px solid {color:scrollbar};border-bottom:0px solid {color:scrollbar};}
  115.  
  116.  
  117. /* ---------------------------- TOOLTIP ----------------------------- */
  118.  
  119. #s-m-t-tooltip {
  120. max-width:150px;
  121. background:{color:accent};
  122. border: 1px solid {color:border};
  123. border-radius:3px;
  124. padding: 3px;
  125. margin-top:-10px;
  126. margin-left:15px;
  127. text-transform:lowercase;
  128. font-family:lucida console;
  129. font-size:9px;
  130. color:{color:text};
  131. -webkit-transition:all 1s;
  132. -moz-transition:all 1s;
  133. -ms-transition:all 1s;
  134. -o-transition:all 1s;
  135. transition:all 1s;
  136. z-index:9999999999;
  137. }
  138.  
  139.  
  140. /* ---------------------------- GENERAL ----------------------------- */
  141.  
  142. ::selection {
  143. color:{color:text};;
  144. background:{color:accent}
  145. }
  146. ::-moz-selection {
  147. color:{color:text};
  148. background:{color:accent};
  149. }
  150.  
  151.  
  152. #content {
  153. width: 800px;
  154. position:fixed;
  155. top:30px;
  156. left:430px;
  157. height:100%;
  158. width:70%;
  159. max-width:1000px;
  160. }
  161.  
  162. body {
  163. background: {color:background} url('{image:background}');
  164. background-attachment: fixed;
  165. color: {color:text};
  166. font-family: lucida console;
  167. font-size: 11px;
  168. margin: 0;
  169. padding: 0;
  170. }
  171. a {
  172. color: {color:links};
  173. text-decoration: none;
  174. }
  175.  
  176. h1{
  177. font-size:14px;
  178. font-weight:bold;
  179. text-transform:uppercase;
  180. }
  181.  
  182. blockquote {
  183. background: {color:posts};
  184. border-left: 2px dotted {color:accent};
  185. margin: 0;
  186. padding: 5px;
  187. margin-right:10px;
  188. }
  189. iframe, img, embed, object, video {
  190. max-width: 100%;
  191. }
  192. img {
  193. height: auto;
  194. width: auto;
  195. }
  196.  
  197. /*Article*/
  198. #article {
  199. background: {color:posts};
  200. margin-left:10px;
  201. margin-top:10px;
  202. padding: 10px;
  203. width: 250px;
  204. border:1px solid {color:border};
  205. border-radius:3px;
  206. overflow:hidden;
  207. }
  208. .chat span {
  209. float: left;
  210. margin-right: 1%;
  211. }
  212.  
  213. #credit{
  214. position:fixed;
  215. bottom:5px;
  216. left:5px;
  217. font-size:10px;
  218. letter-spacing:1px;
  219. font-family:helvetica, serif;
  220. background: #f5f5f5;
  221. padding:4px;
  222. }
  223.  
  224. #credit a{
  225. color:#a0a0a0;
  226. }
  227.  
  228. /* ------------------------------- SIDEBAR -------------------------- */
  229.  
  230. #sidebar {
  231. position:fixed;
  232. background: transparent;
  233. padding: 10px;
  234. border: none;
  235. border-radius:3px;
  236. color: {color:sidebar text};
  237. width: 150px;
  238. margin-top: 180px;
  239. margin-left:250px;
  240. }
  241. #sidebar a {
  242. color: {color:links};
  243. }
  244. nav li {
  245. display: inline;
  246. }
  247.  
  248. #blogtitle{
  249. margin-top:10px;
  250. margin-bottom:7px;
  251. margin-left:-10px;
  252. margin-right:-10px;
  253. text-align:center;
  254. font-family:Always A Good Time, Lucida console;
  255. font-size:18px;
  256. color:{color:title};
  257. text-transform:lowercase;
  258. line-height:120%;
  259. }
  260. #blogtitle a{
  261. color:{color:title};
  262. }
  263.  
  264. #blogtitle a: hover{
  265. color:{color:hover};
  266. }
  267.  
  268. #blogdesc{
  269. margin-top:10px;
  270. max-height:250px;
  271. overflow:scroll;
  272. font-size:9px;
  273. text-align:justify;
  274. text-justify:inter-word;
  275. border:1px solid {color:border};
  276. padding:15px;
  277. background: {color:background} url('{image:pattern}');
  278. border-radius:3px;
  279.  
  280. }
  281.  
  282. #bloglinks{
  283. margin-top:10px;
  284. text-align:center;
  285. margin-bottom:0px;
  286. }
  287.  
  288. .bloglink{
  289. color:{color:link};
  290. background:{color:accent};
  291. padding-left:5px;
  292. padding-right:5px;
  293. -webkit-transition: color .3s;
  294. -webkit-transition: background .3s;
  295. position:relative;
  296. display:inline-block;
  297. font-size:9px;
  298. }
  299.  
  300. .bloglink:hover{
  301. background:{color:accent};
  302. color:{color:text};
  303. -webkit-transition: color .3s;
  304. -webkit-transition: background .3s;
  305. }
  306.  
  307. #sidebarimg{
  308. text-align:center;
  309. margin-top:0px;
  310. margin-bottom:0px;
  311. background:{color:background};
  312. border-radius:150px;
  313. }
  314.  
  315. #sidebarimg img{
  316. border-radius:150px;
  317. height:120px;
  318. width:120px;
  319. padding:10px;
  320. border:1px solid {color:border};
  321.  
  322. }
  323.  
  324. /* ------------------------- PAGINATION --------------------------- */
  325.  
  326. #pagination{
  327. background:transparent;
  328. padding-left:5px;
  329. padding-right:5px;
  330. font-size:16px;
  331. text-align:center;
  332. width:140px;
  333. height:16px;
  334. margin-top:5px;
  335. }
  336.  
  337.  
  338.  
  339. /* -------------------- POST INFO AND NOTES ------------------------ */
  340.  
  341. #postinfo{
  342. border:1px solid {color:border};
  343. padding:5px;
  344. background: {color:background} url('{image:pattern}');
  345. border-radius:3px;
  346. margin-top:8px;
  347. font-size:10px;
  348. }
  349.  
  350. #tags{
  351. border:1px solid {color:border};
  352. padding:5px;
  353. background: {color:background} url('{image:pattern}');
  354. border-radius:3px;
  355. margin-top:8px;
  356. font-size:9px;
  357. }
  358.  
  359.  
  360. /*Tags and notes*/
  361.  
  362.  
  363. .chat ul {
  364. list-style: none;
  365. list-style-image: none;
  366. margin: 0;
  367. padding: 0;
  368. }
  369.  
  370. .notes {
  371.  
  372. border:1px solid {color:border};
  373. padding:5px;
  374. background: {color:background} url('{image:pattern}');
  375. border-radius:3px;
  376. margin-top:8px;
  377. font-size:9px;
  378. max-height:150px;
  379. overflow:scroll;
  380. }
  381.  
  382. /* -------------------------- AUDIO POSTS ---------------------------- */
  383.  
  384. .tumblr_audio_player {
  385. height: 50px;
  386. width: 100%;
  387. border:{color:accent} solid 1px;
  388. border-radius:3px;
  389. font-family:Lucida console;
  390. }
  391.  
  392. /* -------------------------- NAV BAR -------------------------------- */
  393.  
  394. #navbar{
  395. width:150px;
  396. background: {color:navbar bg};
  397. color:{color:text};
  398. border:none;
  399. border-radius:2px;
  400. font-family:lucida console;
  401. padding:2px;
  402. text-transform:lowercase;
  403. }
  404.  
  405. /*Custom CSS*/
  406. {CustomCSS}
  407. </style>
  408. </head>
  409. <body>
  410. <!--Sidebar/sidebar-->
  411. <div id="sidebar">
  412. <!--Details: portrait (optional), title and description-->
  413. <div id="header">
  414. <div id="sidebarimg"><img src="{image:sidebar}"></div>
  415. <div id="blogtitle">
  416. {Title}
  417. </div>
  418. <div id="blognavi">
  419. <select onchange='location=this.options[this.selectedIndex].value;' id="navbar">
  420.  
  421. <option>Navigation</option>
  422. {block:IflinkA}
  423. <option value="{text:linkA url}">{text:linkA}</option>
  424. {/block:IflinkA}
  425. {block:IflinkB}
  426. <option value="{text:linkB url}">{text:linkB}</option>
  427. {/block:IflinkB}
  428. {block:IflinkC}
  429. <option value="{text:linkC url}">{text:linkC}</option>
  430. {/block:IflinkC}
  431. {block:IflinkD}
  432. <option value="{text:linkD url}">{text:linkD}</option>
  433. {/block:IflinkD}
  434. {block:IflinkE}
  435. <option value="{text:linkE url}">{text:linkE}</option>
  436. {/block:IflinkE}
  437. </div>
  438.  
  439. </select>
  440. </div>
  441. {block:Description}
  442. <div id="blogdesc">{Description}</div>
  443. {block:Description}
  444. <div id="bloglinks">
  445. <div class="bloglink"><a href="/">home</a></div>
  446. <div class="bloglink"><a href="/ask">ask</a></div>
  447. <div class="bloglink"><a href="/archive">archive</a></div>
  448. </div>
  449. </div>
  450. <div id="pagination">
  451. {block:Pagination}<div id="pagi">
  452. {block:PreviousPage}<a href="{PreviousPage}"> ←</a>&nbsp;&nbsp;{/block:PreviousPage}
  453. {block:JumpPagination length="3"}
  454. {block:CurrentPage}{/block:CurrentPage}
  455. {block:JumpPage}{/block:JumpPage}
  456. {/block:JumpPagination}
  457. {block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}
  458. </div>{/block:Pagination}
  459. </div></div>
  460. </div>
  461. </div></div></div>
  462.  
  463. <!--Content holder-->
  464. <div id="content">
  465. {block:Posts}
  466. <div id="article">
  467.  
  468. <!--Unique code for each post type-->
  469. {block:Text}
  470. <div class="text">
  471. {block:Title}<h1 class="title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  472. {Body}
  473. {/block:Text}
  474.  
  475. {block:Photo}
  476. <div class="photo">
  477. {LinkOpenTag}<img src="{PhotoURL-250}" alt="{PhotoAlt}" />{LinkCloseTag}
  478. {block:Ifhidecaptions}{/block:Ifhidecaptions}
  479. {block:Ifnothidecaptions}{block:Caption}{Caption}{/block:Caption}{/block:Ifnothidecaptions}
  480. {/block:Photo}
  481.  
  482. {block:Photoset}
  483. <div class="photoset">
  484. {block:IndexPage}{Photoset-250}{/block:IndexPage}
  485. {block:PermalinkPage}{Photoset-700}{/block:PermalinkPage}
  486. {block:Ifhidecaptions}{/block:Ifhidecaptions}
  487. {block:Ifnothidecaptions}{block:Caption}{Caption}{/block:Caption}{/block:Ifnothidecaptions}
  488. {/block:Photoset}
  489.  
  490. {block:Quote}
  491. <div class="quote">
  492. <blockquote>{Quote}</blockquote>
  493. {block:Source}<cite> {Source} </cite>{/block:Source}
  494. {/block:Quote}
  495.  
  496. {block:Link}
  497. <div class="link">
  498. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  499. {block:Description}{Description}{/block:Description}
  500. {/block:Link}
  501.  
  502. {block:Chat}
  503. <div class="chat">
  504. <ul>
  505. {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  506. </ul>
  507. {/block:Chat}
  508.  
  509. {block:Audio}
  510. <div class="audio">
  511. {block:TrackName}<h1 class="title"><a href="{Permalink}">{TrackName}</a></h1>{/block:TrackName}
  512. <div class="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}</div>
  513. <div class="player">{AudioPlayerWhite}</div>
  514. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  515. {block:Ifhidecaptions}{/block:Ifhidecaptions}
  516. {block:Ifnothidecaptions}{block:Caption}{Caption}{/block:Caption}{/block:Ifnothidecaptions}
  517. {/block:Audio}
  518.  
  519. {block:Video}
  520. <div class="video">
  521. <div class="video-player">{Video-250}</div>
  522. {block:Ifhidecaptions}{/block:Ifhidecaptions}
  523. {block:Ifnothidecaptions}{block:Caption}{Caption}{/block:Caption}{/block:Ifnothidecaptions}
  524. {/block:Video}
  525.  
  526. {block:Answer}
  527. <div class="answer">
  528. <h1 class="title">{Question}</h1>
  529. <div class="user"><img src="{AskerPortraitURL-96}"/><p>{Asker}</p></div>
  530. {Answer}
  531. {/block:Answer}
  532. </div>
  533.  
  534. <div id="postinfo">
  535. <a href="{permalink}" title="{timeago}">{block:Date} {MonthNumberWithZero}.{DayOfMonth}.{ShortYear} {/block:Date}</a> {block:NoteCount} <a href="{Permalink}" title="{NoteCountWithLabel}"/> / ♥</a>{/block:NoteCount} <a href="{SourceURL}}" > / source</a>
  536. <a href="{ReblogParentURL}"> / via</a>
  537. <a href="{ReblogURL}" target="_blank" >/ reblog</a>
  538. </div>
  539.  
  540. {block:HasTags}
  541. <div id="tags">
  542. {block:Tags}<a href="{TagURL}">#{Tag}, </a>{/block:Tags}</div>
  543. {/block:HasTags}
  544. <div class="note">
  545. {block:PostNotes}{PostNotes}{/block:PostNotes}
  546. </div>
  547. </div>
  548.  
  549. </article>
  550. {/block:Posts}
  551. <!--Close of article-->
  552. </div>
  553.  
  554.  
  555.  
  556.  
  557. <!--Pagination: previous/next page links-->
  558.  
  559. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  560. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  561. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  562.  
  563. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  564. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  565.  
  566. <!--Code for infinite scroll and grid layout-->
  567. <script>
  568. (function() {
  569. var $tumblelog = $('#content');
  570.  
  571. $tumblelog.infinitescroll({
  572. navSelector : ".pagination",
  573. nextSelector : ".pagination a:first",
  574. itemSelector : "article",
  575. bufferPx : 50,
  576. done : "",
  577. loading: {
  578. img : "",
  579. msgText: ""
  580. },
  581. },
  582. function( newElements ) {
  583. var $newElems = $( newElements ).css({ opacity: 0 });
  584. $newElems.imagesLoaded(function(){
  585. $newElems.animate({ opacity: 1 });
  586. $tumblelog.masonry( 'appended', $newElems);
  587. });
  588. }
  589. );
  590.  
  591. $tumblelog.imagesLoaded( function(){
  592. $tumblelog.masonry({
  593. columnWidth: function( containerWidth ) {
  594. return containerWidth / 100;
  595. }
  596. });
  597. });
  598. })();
  599. </script>
  600.  
  601. <div id="credit"><a href="http://neonbikethemes.tumblr.com/" title="neonbike themes">N</a></center></div>
  602.  
  603.  
  604.  
  605. </body>
  606. </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!