API tools faq
paste
Advertisement
paigeh987

Theme 18 (all-in-one version) - neonbike themes

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