API tools faq
paste
Advertisement
paigeh987

Theme 24 - neonbike themes

paigeh987
Mar 31st, 2015
8,454
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.00 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head><title>{Title}</title>
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  9.  
  10. <!----
  11.  
  12. Theme 24 by Paige @ neonbikethemes.tumblr.com
  13. last updated 08.23.17
  14.  
  15. Rules:
  16.  
  17. - Do not steal code or design
  18. - Edit as much as you want but don't remove credit!
  19. - Like/reblog the post
  20.  
  21. Thanks!
  22.  
  23. --->
  24.  
  25.  
  26. <meta name="color:Background" content="#f8f8f8"/>
  27. <meta name="color:Title" content="#ffffff"/>
  28. <meta name="color:Title bg" content="#c6c6c6"/>
  29. <meta name="color:Header" content="#eaeaea"/>
  30. <meta name="color:Posts" content="#ffffff"/>
  31. <meta name="color:Text" content="#848484"/>
  32. <meta name="color:Link" content="#b8b8b8"/>
  33. <meta name="color:Link hover" content="#dadada"/>
  34. <meta name="color:Text block" content="#f3f3f3"/>
  35.  
  36. <meta name="image:Background" content=""/>
  37. <meta name="image:Icon" content=""/>
  38.  
  39. <meta name="select:Font" content="'Inconsolata'" title="Inconsolata"/>
  40. <meta name="select:Font" content="helvetica" title="Helvetica"/>
  41. <meta name="select:Font" content="arial" title="Arial"/>
  42. <meta name="select:Font" content="'Lora'" title="Lora"/>
  43. <meta name="select:Font" content="'Montserrat'" title="Montserrat"/>
  44. <meta name="select:Font" content="'Ubuntu Condensed'" title="Ubuntu Condensed"/>
  45.  
  46. <meta name="select:Font Size" content="10px" title="10px"/>
  47. <meta name="select:Font Size" content="11px" title="11px"/>
  48. <meta name="select:Font Size" content="12px" title="12px"/>
  49. <meta name="select:Font Size" content="13px" title="13px"/>
  50.  
  51. <meta name="select:Columns" content="1" title="One"/>
  52. <meta name="select:Columns" content="2" title="Two"/>
  53. <meta name="select:Columns" content="3" title="Three"/>
  54.  
  55. <meta name="text:Post Width" content="400" />
  56. <meta name="text:Link1" content="" />
  57. <meta name="text:Link1 Title" content="" />
  58. <meta name="text:Link2" content="" />
  59. <meta name="text:Link2 Title" content="" />
  60. <meta name="text:Link3" content="" />
  61. <meta name="text:Link3 Title" content="" />
  62. <meta name="text:Link4" content="" />
  63. <meta name="text:Link4 Title" content="" />
  64. <meta name="text:Link5" content="" />
  65. <meta name="text:Link5 Title" content="" />
  66. <meta name="text:Link6" content="" />
  67. <meta name="text:Link6 Title" content="" />
  68.  
  69. <meta name="if:Show icon" content="1" />
  70. <meta name="if:Show description" content="1" />
  71. <meta name="if:Hide captions" content="1" />
  72. <meta name="if:Show notes" content="0" />
  73. <meta name="if:Grayscale posts" content="0" />
  74. <meta name="if:Faded posts" content="0" />
  75. <meta name="if:Hover tags" content="0" />
  76. <meta name="if:Full size bg" content="0" />
  77.  
  78.  
  79. <!-- MASONRY SCRIPT -->
  80.  
  81. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded -->
  82. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  83. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  84.  
  85. <script type="text/javascript">
  86. $(window).load(function(){
  87. var $wall = $('#container');
  88. $wall.imagesLoaded(function(){
  89. $wall.masonry({
  90. itemSelector: 'article',
  91. isAnimated : true
  92. });
  93. });
  94. $wall.infinitescroll({
  95. navSelector : "div#navigation",
  96. nextSelector : "div#navigation a#nextPage",
  97. itemSelector : 'article',
  98. loadingImg : "",
  99. loadingText : " ",
  100. donetext : " ",
  101. extraScrollPx : 0,
  102. bufferPx : 10000,
  103. debug : false,
  104. errorCallback: function() {
  105. }},
  106. function( newElements ) {
  107. var $newElems = $( newElements );
  108. $newElems.hide();
  109. $newElems.imagesLoaded(function(){
  110. $wall.masonry( '', $newElems, {isAnimated: true, animationOptions: {duration: 250, easing: 'linear', queue: false}}, function(){$newElems.fadeIn('slow');} );
  111. });
  112. }); $('#container').show(500);
  113. });
  114. </script>
  115.  
  116. <!-- TOOLTIP CODE -->
  117.  
  118. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  119. <script>
  120. (function($){
  121. $(document).ready(function(){
  122. $("a[title]").style_my_tooltips({
  123. tip_follows_cursor:true,
  124. tip_delay_time:00,
  125. tip_fade_speed:900,
  126. attribute:"title"
  127. });
  128. });
  129. })(jQuery);
  130. </script>
  131.  
  132. <!-- FONT SCRIPTS -->
  133.  
  134. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  135.  
  136. <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic|Ubuntu+Condensed|Inconsolata:400,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
  137.  
  138. <script type="text/javascript">
  139. WebFontConfig = {
  140. google: { families: [ 'Lora:400,700,400italic,700italic:latin', 'Ubuntu+Condensed::latin', 'Inconsolata:400,700:latin', 'Montserrat:400,700:latin' ] }
  141. };
  142. (function() {
  143. var wf = document.createElement('script');
  144. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  145. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  146. wf.type = 'text/javascript';
  147. wf.async = 'true';
  148. var s = document.getElementsByTagName('script')[0];
  149. s.parentNode.insertBefore(wf, s);
  150. })(); </script>
  151.  
  152.  
  153. <style type="text/css">
  154.  
  155. ::-webkit-scrollbar {
  156. width: 8px;height: 0px;
  157. }
  158. ::-webkit-scrollbar-button:start:decrement,
  159. ::-webkit-scrollbar-button:end:increment {
  160. height: 0px;
  161. display: block;
  162. background-color: transparent;
  163. }
  164. ::-webkit-scrollbar-track-piece {
  165. background-color: transparent;
  166.  
  167. }
  168. ::-webkit-scrollbar-thumb:vertical {
  169. height: 3px;
  170. background-color: {color:link};
  171.  
  172. }
  173.  
  174. #s-m-t-tooltip {
  175. max-width:300px;
  176. padding:5px;
  177. padding-left:8px;
  178. padding-right:8px;
  179. background:{color:posts};
  180. margin:10px 0px 0px 10px;
  181. font-family:{select:font}, helvetica;
  182. font-size:{select:font size};
  183. z-index:9999999999999999;
  184. }
  185.  
  186.  
  187. /* ----------------------------- GENERAL -------------------------- */
  188.  
  189. @import url(http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic|Ubuntu+Condensed|Inconsolata:400,700|Montserrat:400,700);
  190.  
  191. body {
  192. margin: 0;
  193. background:url('{image:background}');
  194. {block:Iffullsizebg}
  195. background-repeat:no-repeat;
  196. background-size:cover;
  197. {/block:Iffullsizebg}
  198. {block:Ifnotfullsizebg}
  199. background-repeat:repeat;
  200. {/block:Ifnotfullsizebg}
  201. background-color:{color:background};
  202. background-attachment: fixed;
  203. word-wrap: break-word;
  204. color:{color:text};
  205. font-family:{select:Font};
  206. font-size:{select:font size};
  207. line-height:160%;
  208. }
  209.  
  210. pre {
  211. white-space: pre-wrap;
  212. white-space: -moz-pre-wrap;
  213. white-space: -pre-wrap;
  214. white-space: -o-pre-wrap;
  215. word-wrap: break-word;
  216. }
  217.  
  218. a {
  219. color:{color:link};
  220. text-decoration: none;
  221. -webkit-transition: all .2s ease-in-out;
  222. -moz-transition: all .2s ease-in-out;
  223. -o-transition: all .2s ease-in-out;
  224. -ms-transition: all .2s ease-in-out;
  225. transition: all .2s ease-in-out;
  226. }
  227.  
  228. a:hover {
  229. color:{color:Link hover};
  230. -webkit-transition: all .2s ease-in-out;
  231. -moz-transition: all .2s ease-in-out;
  232. -o-transition: all .2s ease-in-out;
  233. -ms-transition: all .2s ease-in-out;
  234. transition: all .2s ease-in-out;
  235. }
  236.  
  237. img {
  238. margin-bottom:-4px;
  239. max-width:100%;
  240. }
  241.  
  242. .image{
  243. padding:15px;
  244. min-width:200px;
  245. max-width:700px;
  246. background:{color:posts};
  247. {block:Ifgrayscaleposts}
  248. -webkit-filter: grayscale(100%);
  249. {/block:Ifgrayscaleposts}
  250. {block:Iffadedposts}
  251. -webkit-filter: grayscale(40%);
  252. {/block:Iffadedposts}
  253. -webkit-transition: all .4s;
  254. -moz-transition: all .4s;
  255. -o-transition: all .4s;
  256. -ms-transition: all .4s;
  257. transition: all .4s;
  258. }
  259.  
  260. .image img{
  261. width:100%;
  262. }
  263.  
  264. blockquote {
  265. padding-left:15px;
  266. padding-top:5px;
  267. padding-bottom:5px;
  268. border-left:4px solid {color:text block};
  269. margin:5px;
  270. }
  271.  
  272. blockquote blockquote{
  273. padding-left:15px;
  274. padding-top:5px;
  275. padding-bottom:5px;
  276. border-left:4px solid {color:text block};
  277. margin:5px;
  278. }
  279.  
  280. h1 {
  281. font-size:12px;
  282. text-transform:uppercase;
  283. font-weight:lighter;
  284. letter-spacing:2px;
  285. background:{color:background};
  286.  
  287. padding:10px;
  288. margin-top:0px;
  289. text-align:center;
  290. }
  291.  
  292. b, strong {
  293. color:{color:bold};
  294. font-weight:bold;
  295. }
  296.  
  297. i, em {
  298. color:{color:text};
  299. }
  300.  
  301. p {
  302. margin-top:0px;
  303. margin-bottom:8px;
  304. }
  305.  
  306. iframe.tmblr-iframe, .tmblr-iframe, #tumblr_controls, tmblr-iframe tmblr-iframe--desktop-logged-in-controls, .iframe-controls--desktop {
  307. top:50px !important;
  308. right:3px !important;
  309. position:fixed !important;
  310. margin-top:0px !important;
  311. margin-right:0px !important;
  312. opacity:0.6 !important;
  313. z-index:9999999 !important;
  314. filter: invert(0.8);
  315. -webkit-filter: invert(0.8);
  316. -moz-filter: invert(0.8);
  317. -o-filter: invert(0.8);
  318. -ms-filter: invert(0.8);
  319. }
  320. .tmblr-iframe:hover, #tumblr_controls:hover{
  321. opacity:0.9;
  322. }
  323.  
  324. /* ----------------------------- POSTS --------------------------- */
  325.  
  326. #container {
  327. position:relative;
  328. margin-left:auto;
  329. margin-right:auto;
  330. margin-top:120px;
  331. margin-bottom:100px;
  332. {block:IndexPage}
  333. width:calc(({text:post width}px + 110px) * {select:columns});
  334. {/block:IndexPage}
  335. {block:PermalinkPage}
  336. width:calc({text:post width}px + 30px);
  337. {/block:PermalinkPage}
  338. max-width:100%;
  339. }
  340.  
  341. article{
  342. float:left;
  343. {block:IndexPage}
  344. margin-bottom:90px;
  345. margin-left:40px;
  346. margin-right:40px;
  347. {/block:IndexPage}
  348. width:calc({text:post width}px + 30px);
  349. max-width:730px;
  350. min-width:230px;
  351. {block:PermalinkPage}
  352. min-width:300px;
  353. {/block:PermalinkPage}
  354. height:auto;
  355. }
  356.  
  357. article:hover .image{
  358. {block:Iffadedposts}
  359. -webkit-filter: grayscale(0%);
  360. {/block:Iffadedposts}
  361. {block:Ifgrayscaleposts}
  362. -webkit-filter: grayscale(0%);
  363. {/block:Ifgrayscaleposts}
  364. -webkit-transition: all .4s;
  365. -moz-transition: all .4s;
  366. -o-transition: all .4s;
  367. -ms-transition: all .4s;
  368. transition: all .4s;
  369. }
  370.  
  371. .caption{
  372. background:{color:posts};
  373. padding:15px;
  374. padding-bottom:10px;
  375. padding-top:10px;
  376. {block:PermalinkPage}
  377. margin-bottom:10px;
  378. {/block:PermalinkPage}
  379. margin-top:10px;
  380. }
  381.  
  382. .caption img{
  383. margin-bottom:2px;
  384. }
  385.  
  386. #header{
  387. position:fixed;
  388. width:100%;
  389. left:0;
  390. top:0px;
  391. height:50px;
  392. z-index:9999;
  393. background:{color:header};
  394. text-align:right;
  395. }
  396.  
  397.  
  398. /* ----------------------------- TOPBAR -------------------------- */
  399.  
  400. .sbimage{
  401. position:fixed;
  402. float:left;
  403. }
  404.  
  405. .sbimage img{
  406. margin-bottom:-5px;
  407. height:50px;
  408. width:50px;
  409. }
  410.  
  411. #blogtitle {
  412. position:fixed;
  413. float:left;
  414. background:{color:title bg};
  415. color:{color:title};
  416. padding:15px;
  417. padding-left:25px;
  418. padding-right:25px;
  419. height:20px;
  420. {block:Ifshowicon}
  421. margin-left:50px;
  422. {block:Ifshowicon}
  423. letter-spacing:4px;
  424. font-size:14px;
  425. font-weight:bold;
  426. text-transform:uppercase;
  427. -webkit-transition: all .4s;
  428. -moz-transition: all .4s;
  429. -o-transition: all .4s;
  430. -ms-transition: all .4s;
  431. transition: all .4s;
  432. }
  433.  
  434. #description{
  435. position:relative;
  436. width:350px;
  437. margin-left:auto;
  438. margin-right:auto;
  439. padding:20px;
  440. padding-left:30px;
  441. padding-right:30px;
  442. background:{color:posts};
  443. border-bottom:5px solid {color:title bg};
  444. font-style:italic;
  445. line-height:160%;
  446. text-align:left;
  447. -webkit-transition: all .4s;
  448. -moz-transition: all .4s;
  449. -o-transition: all .4s;
  450. -ms-transition: all .4s;
  451. transition: all .4s;
  452. z-index:99999;
  453. }
  454.  
  455. .toplinks{
  456. position:relative;
  457. display:inline-block;
  458. margin-top:10px;
  459. margin-right:10px;
  460. }
  461.  
  462. .toplink{
  463. position:relative;
  464. display:inline-block;
  465. margin-right:4px;
  466. margin-left:4px;
  467. background:{color:posts};
  468. border:0px solid {color:border};
  469. letter-spacing:1px;
  470. padding:8px;
  471. padding-top:3px;
  472. padding-bottom:3px;
  473. font-size:10px;
  474. text-transform:uppercase;
  475. text-align:center;
  476. -webkit-transition: all .4s;
  477. -moz-transition: all .4s;
  478. -o-transition: all .4s;
  479. -ms-transition: all .4s;
  480. transition: all .4s;
  481. }
  482.  
  483. .toplink:hover{
  484. background:{color:text block};
  485. -webkit-transition: all .4s;
  486. -moz-transition: all .4s;
  487. -o-transition: all .4s;
  488. -ms-transition: all .4s;
  489. transition: all .4s;
  490. }
  491.  
  492. .bottombar{
  493. position:fixed;
  494. width:100%;
  495. height:50px;
  496. background:{color:header};
  497. bottom:0px;
  498. left:0px;
  499. z-index:9999999;
  500. }
  501.  
  502.  
  503.  
  504. /* -------------------------- PAGINATION ---------------------- */
  505.  
  506. .pagination{
  507. display:none;
  508. }
  509.  
  510. #nav {
  511. position:fixed;
  512. z-index:9999999;
  513. right:0px;
  514. bottom:3px;
  515. font-size:10px;
  516. text-align:right;
  517. padding:10px;
  518. color:{color:link};
  519. }
  520.  
  521. .navbutton{
  522. position:relative;
  523. display:inline-block;
  524. border:0px solid {color:border};
  525. background:{color:posts};
  526. margin-right:10px;
  527. padding:4px;
  528. padding-left:8px;
  529. padding-right:8px;
  530. text-transform:uppercase;
  531. letter-spacing:2px;
  532. -webkit-transition: all .4s;
  533. -moz-transition: all .4s;
  534. -o-transition: all .4s;
  535. -ms-transition: all .4s;
  536. transition: all .4s;
  537. z-index:999999;
  538. }
  539.  
  540. .navbutton:hover{
  541. background:{color:text block};
  542. -webkit-transition: all .4s;
  543. -moz-transition: all .4s;
  544. -o-transition: all .4s;
  545. -ms-transition: all .4s;
  546. transition: all .4s;
  547. }
  548.  
  549. #infscr-loading { display:none !important; }
  550.  
  551. /* ------------------------------ POSTS ----------------------------- */
  552.  
  553. .info{
  554. position:relative;
  555. float:left;
  556. font-size:9px;
  557. color:{color:link};
  558. text-transform:uppercase;
  559. letter-spacing:2px;
  560. padding:8px;
  561. padding-left:15px;
  562. padding-right:15px;
  563. margin-top:-32px;
  564. background:{color:posts};
  565. }
  566.  
  567. .info:hover{
  568. {block:IndexPage}
  569. background:{color:text block};
  570. color:{color:Link hover};
  571. {/block:IndexPage}
  572. -webkit-transition: all .4s;
  573. -moz-transition: all .4s;
  574. -o-transition: all .4s;
  575. -ms-transition: all .4s;
  576. transition: all .4s;
  577. }
  578.  
  579. article:hover .tags{
  580. {block:Ifhovertags}
  581. opacity:1;
  582. {/block:Ifhovertags}
  583. -webkit-transition: all .4s;
  584. -moz-transition: all .4s;
  585. -o-transition: all .4s;
  586. -ms-transition: all .4s;
  587. transition: all .4s;
  588. }
  589.  
  590. /* TAGS */
  591.  
  592. .tags{
  593. position:relative;
  594. {block:Ifhovertags}
  595. {block:IndexPage}
  596. opacity:0;
  597. {/block:IndexPage}
  598. {/block:Ifhovertags}
  599. padding:7px;
  600. padding-top:10px;
  601. text-align:right;
  602. -webkit-transition: all .4s;
  603. -moz-transition: all .4s;
  604. -o-transition: all .4s;
  605. -ms-transition: all .4s;
  606. transition: all .4s;
  607. }
  608.  
  609. .tag{
  610. position:relative;
  611. display:inline-block;
  612. padding:3px;
  613. padding-left:7px;
  614. padding-right:7px;
  615. margin-right:6px;
  616. margin-bottom:7px;
  617. color:{color:link};
  618. background:{color:posts};
  619. text-transform:lowercase;
  620. font-size:9px;
  621. letter-spacing:1px;
  622. -webkit-transition: all .2s ease-in-out;
  623. -moz-transition: all .2s ease-in-out;
  624. -o-transition: all .2s ease-in-out;
  625. -ms-transition: all .2s ease-in-out;
  626. transition: all .2s ease-in-out;
  627. }
  628.  
  629. .tag:hover{
  630. color:{color:link hover};
  631. background:{color:text block};
  632. -webkit-transition: all .2s ease-in-out;
  633. -moz-transition: all .2s ease-in-out;
  634. -o-transition: all .2s ease-in-out;
  635. -ms-transition: all .2s ease-in-out;
  636. transition: all .2s ease-in-out;
  637. }
  638.  
  639. /* --------------------------- POST TYPES -------------------------- */
  640.  
  641. /* TEXT */
  642.  
  643. .posttitle{
  644. margin-bottom:10px;
  645. padding:15px;
  646. text-transform:uppercase;
  647. letter-spacing:2px;
  648. background:{color:posts};
  649. }
  650.  
  651. .text{
  652. padding:20px;
  653. background:{color:posts};
  654. margin-bottom:0px;
  655. }
  656.  
  657. /* QUESTIONS */
  658.  
  659. .questionbox{
  660. margin-bottom:10px;
  661. padding:15px;
  662. background:{color:posts};
  663. }
  664.  
  665. #questions {
  666. background-color: {color:text block};
  667. padding:5px;
  668. min-height:35px;
  669. margin-top: 5px;
  670. margin-bottom:5px;
  671. text-align:left;
  672. }
  673.  
  674. #answer {
  675. text-transform:lowercase;
  676. background:{color:posts};
  677. padding:15px;
  678. padding-left:20px;
  679. }
  680.  
  681. .askerimg{
  682. position:relative;
  683. float:left;
  684. margin-right:8px;
  685. margin-top:2px;
  686. margin-bottom:5px;
  687. margin-left:3px;
  688. }
  689.  
  690. /* AUDIO */
  691.  
  692. .audio{
  693. padding:15px;
  694. background:{color:posts};
  695. height:calc({text:post width}px);
  696. min-width:200px;
  697. min-height:200px;
  698. max-width:700px;
  699. max-height:700px;
  700. }
  701.  
  702. .songart{
  703. float:left;
  704. }
  705.  
  706. .songart img{
  707. width:calc({text:post width}px);
  708. height:calc({text:post width}px);
  709. min-width:200px;
  710. min-height:200px;
  711. max-width:700px;
  712. max-height:700px;
  713. }
  714.  
  715. .songinfo{
  716. position:absolute;
  717. text-align:right;
  718. text-align:text-bottom;
  719. height:calc({text:post width}px);
  720. width:calc({text:post width}px);
  721. min-width:200px;
  722. min-height:200px;
  723. max-width:700px;
  724. max-height:700px;
  725. }
  726.  
  727. .songinfobutton{
  728. position:relative;
  729. display:inline-block;
  730. line-height:100%;
  731. padding:6px;
  732. padding-left:10px;
  733. padding:right:10px;
  734. margin-top:10px;
  735. margin-right:6px;
  736. background:{color:text block};
  737. }
  738.  
  739. .playbutton{
  740. position:absolute;
  741. z-index:999;
  742. margin-top:calc(({text:post width}px) - 55px);
  743. margin-left:15px;
  744. width:30px;
  745. height:30px;
  746. border:6px solid #fff;
  747. background:#fff;
  748. overflow:hidden;
  749. opacity:.6;
  750. -webkit-transition: all .4s;
  751. -moz-transition: all .4s;
  752. -o-transition: all .4s;
  753. -ms-transition: all .4s;
  754. transition: all .4s;
  755. }
  756.  
  757. .audio:hover .playbutton{
  758. opacity:1;
  759. -webkit-transition: all .4s;
  760. -moz-transition: all .4s;
  761. -o-transition: all .4s;
  762. -ms-transition: all .4s;
  763. transition: all .4s;
  764. }
  765.  
  766. .tumblr_audio_player {
  767. height: 30px;
  768. margin-bottom:0px;
  769. }
  770.  
  771. /* LINKS */
  772.  
  773. .linktitle{
  774. margin:-10px;
  775. padding:10px;
  776. margin-bottom:15px;
  777. text-transform:uppercase;
  778. letter-spacing:2px;
  779. text-align:center;
  780. background:{color:posts};
  781. }
  782.  
  783. .linksymbol{
  784. float:right;
  785. background:{color:text block};
  786. padding:10px;
  787. font-size:11px;
  788. }
  789.  
  790. .linktitlebox{
  791. background:{color:text block};
  792. padding:10px;
  793. padding-left:15px;
  794. text-align:left;
  795. margin-right:45px;
  796. }
  797.  
  798. /* QUOTES */
  799.  
  800. .quote{
  801. text-transform:uppercase;
  802. font-weight:lighter;
  803. letter-spacing:1px;
  804. line-height:200%;
  805. padding:20px;
  806. text-align:left;
  807. font-style:italic;
  808. }
  809.  
  810. .quotesource{
  811. padding:10px;
  812. padding-right:14px;
  813. text-align:right;
  814. background:{color:text block};
  815. }
  816.  
  817. /* CHAT */
  818.  
  819. .chatline{
  820. background:{color:text block};
  821. padding:5px;
  822. margin-bottom:4px;
  823. }
  824.  
  825. /* VIDEO */
  826.  
  827. .video{
  828. position: relative;
  829. padding-bottom: 56.25%; /* 16:9 */
  830. padding-top: 25px;
  831. height: 0;
  832. }
  833.  
  834. .video iframe{
  835. position: absolute;
  836. top: 0;
  837. left: 0;
  838. width: 100%;
  839. height: 100%;
  840. }
  841.  
  842. /* ---------------------------- POST NOTES -------------------------- */
  843.  
  844. ol.notes {
  845. text-align:left;
  846. list-style-type: none;
  847. }
  848.  
  849. ol.notes li.note{
  850. padding:5px;
  851. padding-left:8px;
  852. margin-bottom:3px;
  853. background:{color:text block};
  854. margin-left:-40px;
  855.  
  856. }
  857.  
  858. .pagenotes {
  859. position:relative;
  860. float:left;
  861. text-align:left;
  862. padding:10px;
  863. padding-left:20px;
  864. padding-right:15px;
  865. background:{color:posts};
  866. text-transform:lowercase;
  867. margin-bottom:50px;
  868. max-height:300px;
  869. width:calc(100% - 35px);
  870. overflow:scroll;
  871. }
  872.  
  873. div.pagenotes::-webkit-scrollbar {
  874. width: 4px;height: 0px;
  875. }
  876. div.pagenotes::-webkit-scrollbar-button:start:decrement,
  877. ::-webkit-scrollbar-button:end:increment {
  878. height: 0px;
  879. display: block;
  880. background-color: transparent;
  881. }
  882. div.pagenotes::-webkit-scrollbar-track-piece {
  883. background-color: transparent;
  884.  
  885. }
  886. div.pagenotes::-webkit-scrollbar-thumb:vertical {
  887. height: 3px;
  888. background-color: {color:link};
  889. }
  890.  
  891. .pagenotes img{
  892. display:none;
  893. }
  894.  
  895. /* ------------ CREDIT : DO NOT REMOVE OR CHANGE THANKS -------------- */
  896.  
  897. #cred {
  898. position:fixed;
  899. bottom:15px;
  900. left:15px;
  901. font-size:10px;
  902. letter-spacing:1px;
  903. text-transform:uppercase;
  904. padding: 1px 6px 1px 6px;
  905. background:{color:posts};
  906. border:0px solid {color:border};
  907. z-index:99999999;
  908. }
  909.  
  910. {CustomCSS}</style></head><body>
  911.  
  912. <div id="header">
  913. {block:Ifshowicon}
  914. <div class="sbimage"><img src="{image:icon}"></div>
  915. {/block:Ifshowicon}
  916. <a href="/"><div id="blogtitle">{Title}</div></a>
  917. <div class="toplinks">
  918. {block:ifLink1}
  919. <a href="{text:Link1}">
  920. <div class="toplink">{text:Link1 Title}</div></a>
  921. {/block:ifLink1}
  922. {block:ifLink2}
  923. <a href="{text:Link2}">
  924. <div class="toplink">{text:Link2 Title}</div></a>
  925. {/block:ifLink2}
  926. {block:ifLink3}
  927. <a href="{text:Link3}">
  928. <div class="toplink">{text:Link3 Title}</div></a>
  929. {/block:ifLink3}
  930. {block:ifLink4}
  931. <a href="{text:Link4}">
  932. <div class="toplink">{text:Link4 Title}</div></a>
  933. {/block:ifLink4}
  934. {block:ifLink5}
  935. <a href="{text:Link5}">
  936. <div class="toplink">{text:Link5 Title}</div></a>
  937. {/block:ifLink5}
  938. {block:ifLink6}
  939. <a href="{text:Link6}">
  940. <div class="toplink">{text:Link6 Title}</div></a>
  941. {/block:ifLink6}
  942. {block:Ifpopupbox}
  943. <a href="#?w=500" rel="box1" class="poplight">
  944. <div class="toplink">{text:Popup Link}</div></a>
  945. {/block:Ifpopupbox}
  946. </div>
  947. </div>
  948. <div class="bottombar"></div>
  949.  
  950. {block:Ifshowdescription}
  951. {block:IndexPage}
  952. <div id="description">
  953. <p>{Description}<p>
  954. </div>
  955. {/block:IndexPage}
  956. {/block:Ifshowdescription}
  957.  
  958. {block:IndexPage}<div class="column navigation" id="navigation">
  959. {block:Pagination}
  960. {block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
  961. {block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}{/block:Pagination}
  962. </div>{/block:IndexPage}
  963.  
  964. <div id="container">
  965.  
  966. <!--Pagination: previous/next page links-->
  967. <div class="pagination">
  968. {block:IndexPage}<div class="column navigation" id="navigation">
  969. {block:Pagination}
  970. {block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
  971. {block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}{/block:Pagination}
  972. </div>{/block:IndexPage}
  973. </div>
  974.  
  975. {block:Pagination}
  976. <div id="nav">
  977. {block:PreviousPage}
  978. <a href="{PreviousPage}"><div class="navbutton">Prev</div></a>
  979. {/block:PreviousPage}
  980. {block:NextPage}
  981. <a href="{NextPage}"><div class="navbutton" id="nextpage">Next</div></a>
  982. {/block:NextPage}
  983. </div>
  984. {/block:Pagination}
  985.  
  986. <!---->
  987.  
  988.  
  989. {block:Posts}
  990. <article>
  991.  
  992. {block:Date}
  993. <a href="{Permalink}">
  994. <div class="info">
  995. {TimeAgo}
  996. {block:Ifshownotes}
  997. / {NoteCountWithLabel}
  998. {/block:Ifshownotes}
  999. {block:Ifnotshownotes}
  1000. {block:PermalinkPage}
  1001. / {NoteCountWithLabel}
  1002. {/block:PermalinkPage}
  1003. {/block:Ifnotshownotes}
  1004. {block:PermalinkPage}
  1005. {block:RebloggedFrom}
  1006. / <a href="{ReblogParentURL}">Via</a>
  1007. {/block:RebloggedFrom}
  1008. {block:ContentSource}
  1009. / <a href="{SourceURL}">Source</a>
  1010. {/block:ContentSource}
  1011. {/block:PermalinkPage}
  1012. </div>
  1013. </a>
  1014. {/block:Date}
  1015.  
  1016. {block:Text}
  1017. {block:Title}
  1018. <div class="posttitle">
  1019. <div class="linksymbol"><i class="fa fa-file-text-o"></i></div>
  1020. <div class="linktitlebox">{Title}</div>
  1021. </div>
  1022. {/block:Title}
  1023. <div class="text">
  1024. {Body}
  1025. </div>
  1026. {/block:Text}
  1027.  
  1028. {block:Photo}
  1029. <div class="image">
  1030. {LinkOpenTag}
  1031. <img src="{PhotoURL-HighRes}">
  1032. {LinkCloseTag}
  1033. </div>
  1034. {block:Ifhidecaptions}
  1035. {block:permalink}
  1036. {block:Caption}
  1037. <div class="caption">{Caption}</div>
  1038. {/block:Caption}
  1039. {/block:permalink}
  1040. {/block:Ifhidecaptions}
  1041. {block:Ifnothidecaptions}
  1042. {block:Caption}
  1043. <div class="caption">{Caption}</div>
  1044. {/block:Caption}
  1045. {/block:Ifnothidecaptions}
  1046. {/block:Photo}
  1047.  
  1048. {block:Photoset}
  1049. <div class="image">
  1050. {Photoset}
  1051. </div>
  1052. {block:Ifhidecaptions}
  1053. {block:permalink}
  1054. {block:Caption}
  1055. <div class="caption">{Caption}</div>
  1056. {/block:Caption}
  1057. {/block:permalink}
  1058. {/block:Ifhidecaptions}
  1059. {block:Ifnothidecaptions}
  1060. {block:Caption}
  1061. <div class="caption">{Caption}</div>
  1062. {/block:Caption}
  1063. {/block:Ifnothidecaptions}
  1064. {/block:Photoset}
  1065.  
  1066. {block:Quote}
  1067. <div class="text">
  1068. <div class="quote">
  1069. <i class="fa fa-quote-left"></i>
  1070. {Quote}
  1071. <i class="fa fa-quote-right"></i>
  1072. </div>
  1073. <div class="quotesource">
  1074. {block:Source}—{Source}{/block:Source}
  1075. </div>
  1076. </div>
  1077. {/block:Quote}
  1078.  
  1079. {block:Link}
  1080. <div class="posttitle">
  1081. <a href="{URL}" {Target}>
  1082. <div class="linksymbol"><i class="fa fa-link"></i></div>
  1083. <div class="linktitlebox">{Name}</div>
  1084. </a>
  1085. </div>
  1086. <div class="text">
  1087. {block:Description}
  1088. {Description}
  1089. {/block:Description}
  1090. </div>
  1091. {/block:Link}
  1092.  
  1093. {block:Chat}
  1094. {block:Title}
  1095. <div class="posttitle">
  1096. <div class="linksymbol"><i class="fa fa-comments-o"></i></div>
  1097. <div class="linktitlebox">{Title}</div>
  1098. </div>
  1099. {/block:Title}
  1100. <div class="text">
  1101. {block:Lines}
  1102. <div class="chatline">
  1103. {block:Label}<b>{Label}</b>{/block:Label}
  1104. {Line}
  1105. </div>
  1106. {/block:Lines}
  1107. </div>
  1108. {/block:Chat}
  1109.  
  1110. {block:Audio}
  1111. <div class="audio">
  1112. <div class="songart">
  1113. <div class="playbutton">
  1114. {AudioPlayerWhite}
  1115. </div>
  1116. {block:AlbumArt}
  1117. <img src="{AlbumArtURL}">
  1118. {/block:AlbumArt}
  1119. </div>
  1120. <div class="songinfo">
  1121. <div class="songinfobutton">
  1122. {block:TrackName}{TrackName}{/block:TrackName}
  1123. </div>
  1124. <br><div class="songinfobutton">
  1125. {block:Artist}{Artist}{/block:Artist}
  1126. </div>
  1127. <br>
  1128. </div>
  1129. </div>
  1130. {block:Ifhidecaptions}
  1131. {block:permalink}
  1132. {block:Caption}
  1133. <div class="caption">{Caption}</div>
  1134. {/block:Caption}
  1135. {/block:permalink}
  1136. {/block:Ifhidecaptions}
  1137. {block:Ifnothidecaptions}
  1138. {block:Caption}
  1139. <div class="caption">{Caption}</div>
  1140. {/block:Caption}
  1141. {/block:Ifnothidecaptions}
  1142. {/block:Audio}
  1143.  
  1144. {block:Video}
  1145. <div class="image">
  1146. <div class="video">{Video-500}</div>
  1147. </div>
  1148. {block:Ifhidecaptions}
  1149. {block:permalink}
  1150. {block:Caption}
  1151. <div class="caption">{Caption}</div>
  1152. {/block:Caption}
  1153. {/block:permalink}
  1154. {/block:Ifhidecaptions}
  1155. {block:Ifnothidecaptions}
  1156. {block:Caption}
  1157. <div class="caption">{Caption}</div>
  1158. {/block:Caption}
  1159. {/block:Ifnothidecaptions}
  1160. {/block:Video}
  1161.  
  1162. {block:Answer}
  1163. <div class="questionbox">
  1164. <div id="questions">
  1165. <div class="askerimg"><img src="{AskerPortraitURL-30}"></div>
  1166. <b><span style="text-transform:uppercase;">{Asker}</span></b>: {Question}</div>
  1167. </div>
  1168. <div id="answer">{Answer}</div>{/block:answer}
  1169.  
  1170.  
  1171.  
  1172. <!-- POST INFO -->
  1173. {block:HasTags}
  1174. <div class="tags">
  1175. {block:Tags}
  1176. <a href="{TagURL}">
  1177. <div class="tag">{Tag}</div></a>
  1178. {/block:Tags}
  1179. </div>
  1180. {/block:HasTags}
  1181.  
  1182. {block:PostNotes}
  1183. <div class="pagenotes">{PostNotes-16}</div>
  1184. {/block:PostNotes}
  1185.  
  1186. </article>
  1187.  
  1188. {/block:Posts}</div></div>
  1189.  
  1190.  
  1191. <a href="http://neonbikethemes.tumblr.com" title="Neonbike Themes"><div id="cred">NB</div></a>
  1192.  
  1193.  
  1194. </body></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!