API tools faq
paste
azurethemes

theme 19::radio

azurethemes
Jul 30th, 2016
817
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.36 KB | None | 0 0
raw download clone embed print report
  1. <!----
  2. @DADDYTHEMES
  3. theme 19: radio
  4. this theme was made by azure/daddythemes.
  5. dont steal or copy.
  6. --->
  7. <!--start html-->
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  9. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  10. <!--custom google fonts-->
  11. <script type="text/javascript">
  12. WebFontConfig = {
  13. google: { families: [ 'Roboto:400,500,700:latin' , 'Montserrat:400,700:latin' , 'Lato:300,700:latin', 'Raleway:400,700:latin' , 'Maven+Pro:400,900,500,700:latin', 'Karla:400,700:latin', 'Work+Sans:400,500,600,700:latin', 'Prompt:400,400i,500,500i,600,600i,700,700' , 'Yeseva+One::latin', 'Vidaloka::latin', ] }
  14. };
  15. (function() {
  16. var wf = document.createElement('script');
  17. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  18. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  19. wf.type = 'text/javascript';
  20. wf.async = 'true';
  21. var s = document.getElementsByTagName('script')[0];
  22. s.parentNode.insertBefore(wf, s);
  23. })(); </script>
  24. <!--tooltips-->
  25. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  26. <script>
  27. (function($){
  28. $(document).ready(function(){
  29. $("a[title]").style_my_tooltips({
  30. tip_follows_cursor:true,
  31. tip_delay_time:10,
  32. tip_fade_speed:900,
  33. attribute:"title"
  34. });
  35. });
  36. })(jQuery);
  37. </script>
  38. <!--back to top button-->
  39. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  40. <script>
  41. $(document).ready(function(){
  42.  
  43. // Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden.
  44. var back_to_top_button = ['<a href="#top" class="back-to-top"><i class="fa fa-arrow-up"></i></a>'].join("");
  45. $("body").append(back_to_top_button)
  46.  
  47. // Der Button wird ausgeblendet
  48. $(".back-to-top").hide();
  49.  
  50. // Funktion für das Scroll-Verhalten
  51. $(function () {
  52. $(window).scroll(function () {
  53. if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
  54. $('.back-to-top').fadeIn();
  55. } else {
  56. $('.back-to-top').fadeOut();
  57. }
  58. });
  59.  
  60. $('.back-to-top').click(function () { // Klick auf den Button
  61. $('body,html').animate({
  62. scrollTop: 0
  63. }, 800);
  64. return false;
  65. });
  66. });
  67.  
  68. });
  69. </script>
  70. <script>
  71.  
  72.  
  73. return check;
  74. }
  75.  
  76. function init() {
  77.  
  78. var menu = document.getElementById( 'bt-menu' ),
  79. trigger = menu.querySelector( 'a.bt-menu-trigger' ),
  80. // triggerPlay only for demo 6
  81. triggerPlay = document.querySelector( 'a.bt-menu-trigger-out' ),
  82. // event type (if mobile use touch events)
  83. eventtype = mobilecheck() ? 'touchstart' : 'click',
  84. resetMenu = function() {
  85. classie.remove( menu, 'bt-menu-open' );
  86. classie.add( menu, 'bt-menu-close' );
  87. },
  88. closeClickFn = function( ev ) {
  89. resetMenu();
  90. overlay.removeEventListener( eventtype, closeClickFn );
  91. };
  92.  
  93. var overlay = document.createElement('div');
  94. overlay.className = 'bt-overlay';
  95. menu.appendChild( overlay );
  96.  
  97. trigger.addEventListener( eventtype, function( ev ) {
  98. ev.stopPropagation();
  99. ev.preventDefault();
  100.  
  101. if( classie.has( menu, 'bt-menu-open' ) ) {
  102. resetMenu();
  103. }
  104. else {
  105. classie.remove( menu, 'bt-menu-close' );
  106. classie.add( menu, 'bt-menu-open' );
  107. overlay.addEventListener( eventtype, closeClickFn );
  108. }
  109. });
  110.  
  111. if( triggerPlay ) {
  112. triggerPlay.addEventListener( eventtype, function( ev ) {
  113. ev.stopPropagation();
  114. ev.preventDefault();
  115.  
  116. classie.remove( menu, 'bt-menu-close' );
  117. classie.add( menu, 'bt-menu-open' );
  118. overlay.addEventListener( eventtype, closeClickFn );
  119. });
  120. }
  121.  
  122. }
  123.  
  124. init();
  125.  
  126. })();
  127.  
  128. </script>
  129. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  130. <head>
  131. <title>{Title}</title>
  132. <link rel="shortcut icon" href="{Favicon}">
  133. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  134. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  135. <!--all colors-->
  136. <meta name="color:background" content="#ffffff"/>
  137. <meta name="color:text" content="#000000"/>
  138. <meta name="color:links" content="#000000"/>
  139. <meta name="color:border" content="#f6f6f6"/>
  140. <meta name="color:top bar" content="#f6f6f6"/>
  141. <meta name="color:posts" content="#f6f6f6">
  142. <meta name="color:scrollbar" content="#070707">
  143. <meta name="color:asks" content="#f6f6f6">
  144. <meta name="color:hover" content="#888888">
  145. <meta name="color:tooltip" content="#ffffff">
  146. <meta name="color:accent" content="#ffffff">
  147. <meta name="color:link accent" content="#ffffff">
  148. <!--images-->
  149. <meta name="image:icon" content=""/>
  150. <!--texts-->
  151. <meta name="text:title" content="You're driving me wild"/>
  152. <!--sidebar links-->
  153. <meta name="text:link one" content="Link one">
  154. <meta name="text:link two" content="Link two">
  155. <meta name="text:link three" content="Link three">
  156. <meta name="text:link four" content="Link four">
  157. <meta name="text:link one url" content="/">
  158. <meta name="text:link two url" content="/">
  159. <meta name="text:link three url" content="/">
  160. <meta name="text:link four url" content="/">
  161. <!--custom css-->
  162. <style type="text/css">
  163. /*tumblr controls*/
  164. .tmblr-iframe {
  165. top:0px!important;
  166. position:fixed!important;
  167. opacity:0.5;
  168. -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);
  169. z-index:99999999999999!important;
  170. white-space:nowrap;
  171. transition-duration: 0.3s;
  172. -moz-transition-duration: 0.3s;
  173. -webkit-transition-duration: 0.3s;
  174. -o-transition-duration: 0.3s;
  175. }
  176. /*scrollbar*/
  177. ::-webkit-scrollbar {
  178. width:6px;
  179. height:6px;
  180. background:{color:accent};
  181. }
  182. ::-webkit-scrollbar-thumb {
  183. background:{color:scrollbar};
  184. }
  185. /*tooltips*/
  186. #s-m-t-tooltip{
  187. margin:13px 10px 6px 10px;
  188. padding:6px;
  189. background-color:{color:tooltip};
  190. font-family: 'roboto', sans-serif;
  191. border:1px solid {color:border};
  192. font-weight:400;
  193. font-size:9px;
  194. text-transform:none;
  195. letter-spacing:1px;
  196. font-style:italic;
  197. color:{color:text};
  198. z-index:999999999999999999999999999999999999;
  199. transition:0.3s ease-in-out;
  200. -webkit-transition:0.3s ease-in-out;
  201. -moz-transition:0.3s ease-in-out;
  202. -ms-transition:0.3s ease-in-out;
  203. -o-transition:0.3s ease-in-out;
  204. }
  205. /*body basics*/
  206. body{
  207. background-color:{color:background};
  208. background-attachment: fixed;
  209. background-repeat: repeat;
  210. font-weight:none;
  211. font-family: 'roboto', sans-serif;
  212. font-size:10px;
  213. text-align:justify;
  214. color:{color:text};
  215. margin:0;
  216. }
  217. a{
  218. text-decoration:none;
  219. color:{color:links};
  220. -moz-transition-duration:0.5s;
  221. -webkit-transition-duration:0.5s;
  222. -o-transition-duration:0.5s;
  223. transition: all 0.3s ease-out;
  224. }
  225. a:hover{
  226. text-decoration:none;
  227. color:{color:hover};
  228. -moz-transition-duration:0.5s;
  229. -webkit-transition-duration:0.5s;
  230. -o-transition-duration:0.5s;
  231. transition: all 0.3s ease-out;
  232. }
  233. img {
  234. }
  235. blockquote {
  236. font-size:9px;
  237. width:auto;
  238. border-left:2px solid {color:border};
  239. text-align:left;
  240. padding:1px;
  241. font-weight:none;
  242. margin-top:15px;
  243. margin-left:-12px;
  244. padding-top:0.5px;
  245. padding-bottom:0.5px;
  246. font-size:11px;
  247. font-family: 'roboto', sans-serif;
  248. margin-right:20px;
  249. padding-left:15px;
  250. color:{color:text};
  251. }
  252. pre{
  253. font-size:9px;
  254. text-align:center;
  255. text-transform:none;
  256. font-family: 'Bitter', serif;
  257. font-weight:bold;
  258. line-height:9px;
  259. border-left:1px solid #eee;
  260. border-bottom:1px solid #eee;
  261. letter-spacing:2px;
  262. background-color:{color:posts};
  263. color:{color:text};
  264. padding:6px;
  265. }
  266. small{
  267. font-size:9px;
  268. font-family: 'calibri', sans-serif;
  269. }
  270. big{
  271. font-size:12px;
  272. font-family: 'calibri', sans-serif;
  273. font-weight:700;
  274. }
  275. sub{
  276. font-size:9px;
  277. letter-spacing:0px;
  278. font-weight:600;
  279. text-transform:none;
  280. font-family: 'arial', sans-serif;
  281. }
  282. h1 {
  283. font-size:15px;
  284. text-align:left;
  285. font-family: 'arial', sans-serif;
  286. letter-spacing:-1px;
  287. margin-left:-240px;
  288. text-transform:lowercase;
  289. font-weight:700;
  290. line-height:0px;
  291. color:{color:text};
  292. padding:7px;
  293. }
  294. h1 a{
  295. color:{color:text};
  296. text-align:left;
  297. }
  298. h2{
  299. color:{color:text};
  300. text-transform:uppercase;
  301. font-family: 'Montserrat', sans-serif;
  302. text-align:left;
  303. }
  304. b {
  305. font-weight:bold;
  306. font-family: 'arial', sans-serif;
  307. color:{color:text};
  308. }
  309. sh {
  310. color:{color:links};
  311. text-transform:uppercase;
  312. font-family: 'arial', sans-serif;
  313. font-size:13px
  314. font-weight:800;
  315. }
  316. am {
  317. color:{color:text};
  318. font-size:22px;
  319. padding:8px;
  320. padding-top:2px;
  321. text-transform:uppercase;
  322. font-family: 'roboto', sans-serif;
  323. letter-spacing:0px;
  324. font-weight:500;
  325. }
  326. n {
  327. font-weight:bold;
  328. letter-spacing:-1px;
  329. text-shadow: 1px 1px 1px #cccccc;
  330. font-size:12px;
  331. text-transform:uppercase;
  332. color:{color:text};
  333. }
  334. u {
  335. text-decoration:none;
  336. color:{color:text};
  337. padding:3px;
  338. border-bottom:1px solid {color:border};
  339. }
  340. /*sidebar*/
  341. #sb {
  342. position:fixed;
  343. margin-top:190px;
  344. margin-left:180px;
  345. background-color:transparent;
  346. z-index:9999999999999999;
  347. }
  348. #sbimage {
  349. z-index:-99999;
  350. }
  351. #sbimage img {
  352. width:50px;
  353. height:50px;
  354. left:273px;
  355. top:275px;
  356. position:fixed;
  357. padding:8px;
  358. background:{color:posts};
  359. border:1px solid {color:border};
  360. opacity:1;
  361. z-index:99999999;
  362. }
  363. #description {
  364. font-size:10px;
  365. top:343px;
  366. overflow:hidden;
  367. z-index:-9999999;
  368. position:fixed;
  369. letter-spacing:0px;
  370. left:353px;
  371. width:130px;
  372. background:{color:posts};
  373. text-align:justify;
  374. height:37px;
  375. border:1px solid {color:border};
  376. font-weight:400;
  377. padding:14px;
  378. line-height:14px;
  379. font-family: 'calibri', sans-serif;
  380. }
  381. /*titles*/
  382. #sbtitle3{
  383. width:148px;
  384. top:296px;
  385. height:10px;
  386. opacity:1;
  387. position:fixed;
  388. font-family: 'calibri', serif;
  389. letter-spacing:2px;
  390. text-align:left;
  391. overflow:hidden;
  392. font-weight:800;
  393. word-wrap:none;
  394. font-style:italic;
  395. color:{color:text};
  396. padding:1px;
  397. text-transform:lowercase;
  398. line-height:4px;
  399. font-size:8px;
  400. left:353px;
  401. z-index:99;
  402. }
  403. /*back to top button*/
  404. .back-to-top {
  405. position: fixed;
  406. color:{color:text};
  407. bottom:7px;
  408. text-transform:uppercase;
  409. left:13px;
  410. font-family: 'lato', sans-serif;
  411. font-size:9px;
  412. letter-spacing:0px;
  413. z-index:9999999999;
  414. font-weight:600;
  415. padding:10px;
  416. }
  417. /*jump pagination*/
  418. .pagination{
  419. font-family: 'roboto', sans-serif;
  420. margin-left:-190px;
  421. width:auto;
  422. padding-top:-10px;
  423. letter-spacing:2px;
  424. padding-bottom:20px;
  425. font-size:13px;
  426. text-align:center;
  427. }
  428. .pagination a{
  429. padding:5px;
  430. font-family: 'roboto', sans-serif;
  431. font-weight:600;
  432. bottom:10px;
  433. margin-left:5px;
  434. color:{color:text};
  435. }
  436. .pagination a:hover{
  437. color:{color:hover};
  438. -moz-transition-duration:0.5s;
  439. -webkit-transition-duration:0.5s;
  440. -o-transition-duration:0.5s;
  441. transition: all 0.3s ease-out;
  442. }
  443. /*post notes*/
  444. ol.notes {
  445. padding: 0px;
  446. margin: 25px 0px;
  447. font-family:'roboto',sans-serif;
  448. list-style-type: none;
  449. margin-top:-134px;
  450. background:{color:posts};
  451. margin-left:15px;
  452. width:440px;
  453. border: solid 1px {color:border};
  454. }
  455. ol.notes li.note {
  456. border-top: solid 1px {color:border};
  457. padding: 10px;
  458. }
  459. ol.notes li.note img.avatar {
  460. vertical-align: -10px;
  461. border-radius:100px;
  462. margin-left: 10px;
  463. padding:6px;
  464. width: 16px;
  465. height: 16px;
  466. }
  467. ol.notes li.note span.action {
  468. font-weight: 300;
  469. }
  470. ol.notes li.note .answer_content {
  471. font-weight: normal;
  472. }
  473. ol.notes li.note blockquote {
  474. border-color: {color:border};
  475. padding: 4px 10px;
  476. margin: 10px 0px 0px 25px;
  477. }
  478. ol.notes li.note blockquote a {
  479. text-decoration: none;
  480. }
  481. /*audio*/
  482. .audioartist {
  483. font-family:'roboto', sans-serif;
  484. font-size:10px;
  485. text-transform:lowercase;
  486. font-weight:600;
  487. }
  488. .audiotitle {
  489. font-family:'roboto', sans-serif;
  490. font-size:10px;
  491. text-transform:lowercase;
  492. font-weight:600;
  493. }
  494. .audioplayed {
  495. font-family:'roboto', sans-serif;
  496. font-size:10px;
  497. text-transform:lowercase;
  498. font-weight:600;
  499. }
  500. .audioplayr {
  501. width:400px;
  502. color:{color:text};
  503. background:{color:accent};
  504. }
  505. audioinfo {
  506. font-family:'roboto', sans-serif;
  507. font-size:10px;
  508. letter-spacing:2px;
  509. text-transform:lowercase;
  510. font-weight:300;
  511. }
  512. /*post styles*/
  513. .pcaption{
  514. font-family:'roboto', sans-serif;
  515. font-size:10px;
  516. margin-left:15px;
  517. letter-spacing:0px;
  518. text-transform:none;
  519. text-align:left;
  520. background:{color:posts};
  521. font-weight:400;
  522. }
  523. .pcaption a{
  524. font-size:10px;
  525. letter-spacing:0.5px;
  526. font-family:'raleway', sans-serif;
  527. text-transform:lowercase;
  528. font-weight:500;
  529. }
  530. .psets{
  531. width:100%;
  532. margin-top:-12px;
  533. }
  534. .vsets{
  535. width:100%;
  536. margin-top:-12px;
  537. }
  538. .qcaption{
  539. font-family:'Vidaloka', sans-serif;
  540. font-size:15px;
  541. margin-left:15px;
  542. letter-spacing:0px;
  543. text-align:justify;
  544. text-transform:none;
  545. color:{color:text};
  546. font-weight:200;
  547. }
  548. .qsource{
  549. font-size:12px;
  550. margin-left:30px;
  551. margin-top:12px;
  552. text-align:left;
  553. letter-spacing:0px;
  554. font-family:'calibri', sans-serif;
  555. text-transform:uppercase;
  556. font-style:italic;
  557. font-weight:300;
  558. }
  559. /*posts*/
  560. #entries {
  561. margin-left:605px;
  562. margin-top:50px;
  563. z-index:9999999999999999999999999;
  564. }
  565. #post {
  566. font-size:10px;
  567. width:400px;
  568. color:{color:text};
  569. background-color:{color:posts};
  570. text-align:justify;
  571. z-index:99999999999;
  572. border-left:1px solid {color:border};
  573. border-right:1px solid {color:border};
  574. border-top:1px solid {color:border};
  575. padding:20px;
  576. margin-left:15px;
  577. margin-bottom:130px;
  578. padding-bottom:0px;
  579. overflow:hidden;
  580. }
  581. #post img{
  582. max-width:100%;
  583. margin-top:-12px;
  584. height:auto;
  585. }
  586. /*questions and answers*/
  587. #asking {
  588. margin-left:20px;
  589. margin-top:-35px;
  590. }
  591. #askingimage {
  592. }
  593. #askingimage img {
  594. margin-left:10px;
  595. width:30px;
  596. height:30px;
  597. border-radius:100px;
  598. margin-top:0px;
  599. }
  600. #question {
  601. padding:20px;
  602. padding-left:14px;
  603. margin-top:-32px;
  604. margin-left:0px;
  605. width:359px;
  606. font-family: 'calibri', serif;
  607. color:{color:text};
  608. background-color:{color:asks};
  609. }
  610. #answer {
  611. font-size:9px;
  612. width:auto;
  613. text-align:left;
  614. padding:1px;
  615. font-weight:none;
  616. margin-top:5px;
  617. margin-left:-3px;
  618. font-size:10px;
  619. font-family: 'calibri', sans-serif;
  620. margin-right:20px;
  621. padding-left:15px;
  622. color:{color:text};
  623. }
  624. #asker{
  625. margin-top:-66px;
  626. padding:1px;
  627. font-weight:300;
  628. font-size:11px;
  629. z-index:9999999999;
  630. color:{color:text};
  631. opacity:1;
  632. margin-left:34px;
  633. letter-spacing:0px;
  634. font-family: 'roboto', sans-serif;
  635. text-transform:lowercase;
  636. }
  637. #askerurl{
  638. margin-top:-19px;
  639. padding:1px;
  640. font-weight:500;
  641. font-size:10px;
  642. padding:7px;
  643. line-height:14px;
  644. height:13px;
  645. width:465px;
  646. z-index:9999999999;
  647. color:{color:text};
  648. opacity:1;
  649. margin-left:36px;
  650. padding-bottom:11px;
  651. letter-spacing:0px;
  652. font-family: 'Montserrat', sans-serif;
  653. text-transform:lowercase;
  654. }
  655. /*post info*/
  656. #info {
  657. width:420px;
  658. text-align:left;
  659. font-family: 'calibri', sans-serif;
  660. text-transform:uppercase;
  661. margin-left:-21px;
  662. font-size:8px;
  663. margin-top:15px;
  664. padding-left:20px;
  665. padding-top:20px;
  666. padding-bottom:13px;
  667. opacity:1;
  668. overflow:hidden;
  669. font-weight:800;
  670. border:1px solid {color:border};
  671. line-height:20px;
  672. letter-spacing:1px;
  673. z-index:9999999999999999;
  674. color:{color:text};
  675. }
  676. #info a {
  677. text-align:left;
  678. font-weight:500;
  679. padding:2px;
  680. letter-spacing:0px;
  681. font-family: 'calibri', sans-serif;
  682. line-height:5px;
  683. color:{color:text};
  684. -moz-transition-duration:0.2s;
  685. -webkit-transition-duration:0.2s;
  686. -o-transition-duration:0.2s;
  687. transition: all 0.2s ease-out;
  688. }
  689. #info a:hover{
  690. color:{color:hover};
  691. -moz-transition-duration:0.2s;
  692. -webkit-transition-duration:0.2s;
  693. -o-transition-duration:0.2s;
  694. transition: all 0.2s ease-out;
  695. }
  696. #info date {
  697. font-size:10px;
  698. font-family: 'calibri', sans-serif;
  699. font-weight:bold;
  700. color:{color:link accent};
  701. }
  702. #info date:hover{
  703. color:{color:hover};
  704. -moz-transition-duration:0.2s;
  705. -webkit-transition-duration:0.2s;
  706. -o-transition-duration:0.2s;
  707. transition: all 0.2s ease-out;
  708. }
  709. /*sidebar links*/
  710. .links {
  711. width:158px;
  712. height:29px;
  713. overflow:hidden;
  714. cursor:pointer;
  715. border:1px solid {color:border};
  716. left:353px;
  717. opacity:1;
  718. background:{color:posts};
  719. z-index:9999;
  720. position:fixed;
  721. top:313px;
  722. text-align:left;
  723. }
  724. .links a {
  725. width:auto;
  726. height:15px;
  727. text-align:center;
  728. text-transform:uppercase;
  729. opacity:1;
  730. color:{color:links};
  731. z-index:99999;
  732. padding-left:8px;
  733. margin-top:-2px;
  734. line-height:34px;
  735. letter-spacing:0px;
  736. font-weight:600;
  737. font-family: 'calibri', serif;
  738. font-size:8px;
  739. display:inline-block;
  740. transition-duration: 0.3s;
  741. -moz-transition-duration: 0.3s;
  742. -webkit-transition-duration: 0.3s;
  743. -o-transition-duration: 0.3s;
  744. }
  745. .links a:hover{
  746. color:{color:hover};
  747. }
  748. /*credit (u better leave this here u goof)*/
  749. #credit a{
  750. position:fixed;
  751. font-size:11px;
  752. font-weight:800;
  753. height:15px;
  754. width:25px;
  755. opacity:1;
  756. right:10px;
  757. bottom:10px;
  758. padding:2px;
  759. letter-spacing:0px;
  760. padding-top:3px;
  761. line-height:11px;
  762. z-index:9999999999999999999999999999;
  763. font-style:italic;
  764. text-align:center;
  765. float:left;
  766. font-family: 'Yeseva One', cursive;
  767. color:{color:text};
  768. text-transform:uppercase;
  769. -moz-transition-duration:0.3s;
  770. -webkit-transition-duration:0.3s;
  771. -o-transition-duration:0.3s;
  772. transition: all 0.3s ease-out;
  773. }
  774. #credit a:hover{
  775. color:{color:hover};
  776. font-size:16px;
  777. -moz-transition-duration:0.3s;
  778. -webkit-transition-duration:0.3s;
  779. -o-transition-duration:0.3s;
  780. transition: all 0.3s ease-out;
  781. }
  782. .bt-menu {
  783. position: fixed;
  784. top: 0;
  785. left: 0;
  786. width: 100%;
  787. height: 0;
  788. border-width: 0px;
  789. border-style: solid;
  790. border-color: {color:posts};
  791. z-index:99999999999999999999999999999999;
  792. background-color: rgba(0,0,0,0);
  793. -webkit-backface-visibility: hidden;
  794. -webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
  795. transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
  796. }
  797. .bt-menu.bt-menu-open {
  798. height: 100%;
  799. border-width: 0px 0px 50px 100px;
  800. background-color: rgba(0,0,0,0.0);
  801. -webkit-transition: border-width 0.3s, background-color 0.3s;
  802. transition: border-width 0.3s, background-color 0.3s;
  803. }
  804. .bt-overlay {
  805. position: absolute;
  806. width: 100%;
  807. z-index:99999999999999999999999999999999;
  808. }
  809. .bt-menu-open .bt-overlay {
  810. height: 100%;
  811. z-index:99999999999999999999999999999999;
  812. }
  813. .bt-menu-trigger {
  814. position: fixed;
  815. top: 10px;
  816. left: 20px;
  817. z-index: 100;
  818. display: block;
  819. width: 15px;
  820. height: 30px;
  821. cursor: pointer;
  822. }
  823. .bt-menu-trigger span {
  824. position: absolute;
  825. top: 370px;
  826. left: 280px;
  827. display: block;
  828. width: 100%;
  829. height: 8%;
  830. background-color:{color:text};
  831. font-size: 0px;
  832. -webkit-touch-callout: none;
  833. -webkit-user-select: none;
  834. -khtml-user-select: none;
  835. -moz-user-select: none;
  836. -ms-user-select: none;
  837. user-select: none;
  838. -webkit-transition: background-color 0.3s;
  839. transition: background-color 0.3s;
  840. }
  841. .bt-menu-trigger span:before,
  842. .bt-menu-trigger span:after {
  843. position: absolute;
  844. left: 0;
  845. width: 100%;
  846. height: 100%;
  847. background-color:{color:text};
  848. content: '';
  849. -webkit-transition: -webkit-transform 0.3s;
  850. transition: transform 0.3s;
  851. }
  852. .bt-menu-trigger span:before {
  853. -webkit-transform: translateY(-250%);
  854. transform: translateY(-250%);
  855. }
  856. .bt-menu-trigger span:after {
  857. -webkit-transform: translateY(250%);
  858. transform: translateY(250%);
  859. }
  860. .bt-menu-open .bt-menu-trigger span:before {
  861. -webkit-transform: translateY(-300%);
  862. transform: translateY(-300%);
  863. }
  864. .bt-menu-open .bt-menu-trigger span:after {
  865. -webkit-transform: translateY(300%);
  866. transform: translateY(300%);
  867. }
  868. .bt-menu ul {
  869. position: fixed;
  870. margin: 0;
  871. padding: 0;
  872. list-style: none;
  873. }
  874. .bt-menu ul:first-of-type {
  875. top: 205px;
  876. left: 3px;
  877. }
  878. .bt-menu ul:nth-of-type(2) {
  879. right: 0;
  880. bottom: 0;
  881. }
  882. .bt-menu ul li,
  883. .bt-menu ul li a {
  884. display: block;
  885. }
  886. .bt-menu ul:nth-of-type(2) li {
  887. float: left;
  888. font-size: 0px;
  889. }
  890. .bt-menu ul li {
  891. visibility: hidden;
  892. opacity: 0;
  893. -webkit-transition: -webkit-transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
  894. transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
  895. }
  896. .bt-menu.bt-menu-open ul:first-of-type li,
  897. .bt-menu.bt-menu-open ul:nth-of-type(2) li {
  898. visibility: visible;
  899. opacity: 1;
  900. -webkit-transition: -webkit-transform 0.3s, opacity 0.3s 0.1s;
  901. transition: transform 0.3s, opacity 0.3s;
  902. }
  903. /* First menu */
  904. .bt-menu ul:first-of-type li {
  905. width: 150px;
  906. height: 50px;
  907. line-height: 50px;
  908. -webkit-transform: translate3d(-100%,50%,0);
  909. transform: translate3d(-100%,50%,0);
  910. }
  911. .bt-menu.bt-menu-open ul:first-of-type li {
  912. -webkit-transform: translate3d(0,0,0);
  913. transform: translate3d(0,0,0);
  914. }
  915. /* Second menu */
  916. .bt-menu ul:nth-of-type(2) li {
  917. width: 60px;
  918. height: 50px;
  919. line-height: 50px;
  920. -webkit-transform: scale(0);
  921. transform: scale(0);
  922. }
  923. .bt-menu.bt-menu-open ul:nth-of-type(2) li:first-child {
  924. -webkit-transition-delay: 0.1s;
  925. transition-delay: 0.1s;
  926. }
  927. .bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(2) {
  928. -webkit-transition-delay: 0.2s;
  929. transition-delay: 0.2s;
  930. }
  931. .bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(3) {
  932. -webkit-transition-delay: 0.3s;
  933. transition-delay: 0.3s;
  934. }
  935. .bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(4) {
  936. -webkit-transition-delay: 0.4s;
  937. transition-delay: 0.4s;
  938. }
  939. .bt-menu.bt-menu-open ul:nth-of-type(2) li {
  940. -webkit-transform: scale(1);
  941. transform: scale(1);
  942. }
  943. .bt-menu ul li a {
  944. display: block;
  945. outline: none;
  946. text-decoration: none;
  947. }
  948. .bt-menu ul:first-of-type li a {
  949. padding: 0 15px;
  950. color: {color:links};
  951. text-transform: uppercase;
  952. font-weight:800;
  953. font-family:'calibri' , sans-serif;
  954. letter-spacing: 1px;
  955. font-size:8px;
  956. -webkit-transition: color 0.2s;
  957. transition: color 0.2s;
  958. }
  959. .bt-menu ul:nth-of-type(2) li a {
  960. color: transparent;
  961. text-align: center;
  962. font-size: 0px;
  963. }
  964. .bt-menu ul li a:before {
  965. color: {color:links};
  966. font-size: 24px;
  967. -webkit-transition: color 0.2s;
  968. transition: color 0.2s;
  969. }
  970. .bt-menu ul:first-of-type li a:hover,
  971. .bt-menu ul:first-of-type li a:focus,
  972. .bt-menu ul li a:hover:before,
  973. .bt-menu ul li a:focus:before {
  974. color: {color:hover};
  975. }
  976. {CustomCSS}</style>
  977. </head>
  978. <body>
  979. <!--basics-->
  980. <div id="sidebar">
  981. <div id="sbimage"><img src="{image:icon}"></a></div>
  982. <div id="sbtitle3"><u>{text:title}</u></div>
  983. <div id="description">{description}</div>
  984. </div>
  985. <div class="links">
  986. <a href="/"title="refresh">01</a>
  987. <a href="/ask"title="ask">02</a>
  988. <a href="/archive"title="archive">03</a>
  989. <a href="/submit"title="submit">04</a>
  990. </div>
  991. </div>
  992. <body class="demo5">
  993. <nav id="bt-menu" class="bt-menu">
  994. <a href="#" class="bt-menu-trigger"><span>Menu</span></a>
  995. <ul>
  996. <li><a href="{text:link one url}"><i class="fa fa-pencil"></i> {text:link one}</a></li>
  997. <li><a href="{text:link two url}"><i class="fa fa-cog"></i> {text:link two}</a></li>
  998. <li><a href="{text:link three url}"><i class="fa fa-bookmark"></i> {text:link three}</a></li>
  999. <li><a href="{text:link four url}"><i class="fa fa-compass"></i> {text:link four}</a></li>
  1000. </ul>
  1001. </nav>
  1002. </div></div>
  1003. <!--posts and entries-->
  1004. <div id="entries">
  1005. {block:Posts}
  1006. <div id="post">
  1007. <!--texts-->
  1008. {block:Text}
  1009. {block:Title}<h1><center>{Title}</center></h1>{/block:Title}
  1010. {Body}
  1011. {/block:Text}
  1012. <!--question and answers-->
  1013. {block:Answer}
  1014. <div id="askingimage"><img src="{AskerPortraitURL-48}"/></div>
  1015. <div id="askerurl">{Asker} asked:</div>
  1016. <div id="question">{Question}</div>
  1017. <div id="answer">{Answer}</div>{/block:Answer}
  1018. <!--quotes-->
  1019. {block:Quote}
  1020. {block:Quote}
  1021. <div class="qcaption">{Quote}</div>
  1022. <div class="qsource">
  1023. {block:Source}- {Source}{/block:Source}
  1024. </div>
  1025. {/block:Quote}
  1026. <!--links-->
  1027. {block:Link}
  1028. <h2><center><a href="{URL}">{Name}</center></a></h2>
  1029. {block:Description}{Description}{/block:Description}
  1030. {/block:Link}
  1031. <!--chats-->
  1032. {block:Chat}
  1033. {block:Title}<h2>{Title}</h2>{/block:Title}
  1034. <ul class="convo">{block:Lines}<li class="line">{block:Label}<span class ="label">{Label}</span>{/block:Label}
  1035. {Line}</li>{/block:Lines}</ul>
  1036. {/block:Chat}
  1037. <!--photos-->
  1038. {block:Photo}
  1039. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="auto">{LinkCloseTag}
  1040. {block:Caption}<div class="pcaption">{Caption}</div>{/block:Caption}
  1041. {/block:Photo}
  1042. <!--photosets-->
  1043. {block:Photoset}
  1044. <div class="psets">{Photoset}</div>
  1045. {block:Caption}<div class="pcaption">{Caption}</div>{/block:Caption}
  1046. {/block:Photoset}
  1047. <!--videos-->
  1048. {block:Video}
  1049. <div class="vsets">{Video}</div>
  1050. {block:Caption}<div class="pcaption">{Caption}</div>{/block:Caption}
  1051. {/block:Video}
  1052. <!--audios-->
  1053. {block:Audio}<left>{block:AlbumArt}<img src="{AlbumArtURL}" width="60px" height="60px" align="left" style="margin-right:10px;" />{/block:AlbumArt}
  1054. {block:TrackName}<div class="audiotitle">Title: <audioinfo>{TrackName}</audioinfo><br/></div>{/block:TrackName}
  1055. {block:Artist}<div class="audioartist">Artist: <audioinfo>{Artist}</audioinfo><br/></div>{/block:Artist}
  1056. {/block:ExternalAudio}<div class="audioplayed">Played: <audioinfo>{PlayCount} times</audioinfo> </div>
  1057. </br>
  1058. <div class="audioplayr"style="background:{color:accent}">{AudioPlayer}</div>
  1059. {/block:Audio}
  1060. <!--info-->
  1061. <div id="info">
  1062. <div id="permalink">
  1063. <a href="{Permalink}"title="{TimeAgo}"><date>{Month} {DayOfMonth}{DayOfMonthSuffix}</date></a> {NoteCountWithLabel}
  1064. {block:RebloggedFrom}{block:ContentSource}
  1065. <font style="float:right;margin-right:20px"> <a href="{ReblogParentURL}" title="via: {ReblogParentName}"><i class="fa fa-chain"style="font-size:10px"></i></a> <a href="{SourceURL}"title="{ReblogRootName}"><i class="fa fa-copyright"style="font-size:10px"></i></a> <a href="{ReblogURL}" title="reblog"target="_blank" class="details"><i class="fa fa-retweet"style="font-size:10px"></i></a></font style>
  1066. {/block:ContentSource}
  1067. {/block:RebloggedFrom}
  1068. </div>
  1069. {/block:Date}
  1070. {block:HasTags} {block:Tags} <a href="{TagURL}"> #{Tag} </a> {/block:Tags}
  1071.  
  1072. {/block:HasTags}
  1073. </div></div>
  1074. {block:PostNotes} {PostNotes} {/block:PostNotes}
  1075. {/block:Posts}
  1076. {block:Pagination}
  1077. <div class="pagination"style="{color:title text}">
  1078. {block:PreviousPage}<a href="{PreviousPage}"title="previous page">BACK</a>{/block:PreviousPage}{block:JumpPagination length="4"}{block:CurrentPage}<span class="current_page"style="color:{color:accent};font-weight:600;padding:5px">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a class="jump_page"style="{color:text}" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}{block:NextPage}<a href="{NextPage}"title="next page">NEXT</a>{/block:NextPage}
  1079. {/block:Pagination}</div>
  1080. </div>
  1081. <!--credit(u better dont touch this here u goof)-->
  1082. <div id="credit">
  1083. <a href="http://pintient.com/2YIW"title="daddythemes">DA</a>
  1084. </div>
  1085. <script src="http://static.tumblr.com/zkwuipe/lHxnec4a0/classie.js"></script>
  1086. <script src="http://static.tumblr.com/zkwuipe/15Znec4bh/bordermenu.js"></script>
  1087. </html>
  1088. </body>
  1089. <!--end html-->
Add Comment
Please, Sign In to add comment
Public Pastes
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!