API tools faq
paste
azurethemes

06::blue

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