API tools faq
paste
azurethemes

theme no. 01

azurethemes
Feb 15th, 2016
1,296
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.83 KB | None | 0 0
raw download clone embed print report
  1. <!----
  2.  
  3.  
  4.  
  5. ☾ ● Espeon Themes ● ☽
  6. Theme No. 01 - Absol
  7. This theme and coding was created by espeon themes.
  8. Any distribution without permission is violating against the copyright.
  9. This theme was published for public use, but can not be claimed as own!
  10. © Espeon themes, 2016. All rights reserved.
  11.  
  12.  
  13. --->
  14. <!-----start html---->
  15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  16. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  17. <!-----custom google fonts---->
  18. <script type="text/javascript">
  19. WebFontConfig = {
  20. google: { families: [ 'Roboto:400,500,700:latin' , 'Roboto::latin' , 'Khand:400,600:latin' , 'Montserrat:400,700:latin' , 'Lato:300,700:latin', 'Raleway:400,700:latin', 'Oxygen:400,700:latin' , 'Hind:400,700:latin' , 'Karla:400,700:latin' , 'Open+Sans:400,700,600:latin' , 'Exo:400,700,600:latin','Roboto+Condensed:400,700:latin', 'Titillium+Web:400,600,700:latin', 'PT+Sans:400,700:latin', 'Droid+Sans::latin', ] }
  21. };
  22. (function() {
  23. var wf = document.createElement('script');
  24. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  25. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  26. wf.type = 'text/javascript';
  27. wf.async = 'true';
  28. var s = document.getElementsByTagName('script')[0];
  29. s.parentNode.insertBefore(wf, s);
  30. })(); </script>
  31. <!-----tooltips---->
  32. <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>
  33. <script>
  34. (function($){
  35. $(document).ready(function(){
  36. $("a[title]").style_my_tooltips({
  37. tip_follows_cursor:true,
  38. tip_delay_time:100,
  39. tip_fade_speed:500,
  40. attribute:"title"
  41. });
  42. });
  43. })(jQuery);
  44. </script>
  45. <!-----back to top button---->
  46. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  47. <script>
  48. $(document).ready(function(){
  49.  
  50. // Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden.
  51. var back_to_top_button = ['<a href="#top" class="back-to-top">back to top</a>'].join("");
  52. $("body").append(back_to_top_button)
  53.  
  54. // Der Button wird ausgeblendet
  55. $(".back-to-top").hide();
  56.  
  57. // Funktion für das Scroll-Verhalten
  58. $(function () {
  59. $(window).scroll(function () {
  60. if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
  61. $('.back-to-top').fadeIn();
  62. } else {
  63. $('.back-to-top').fadeOut();
  64. }
  65. });
  66.  
  67. $('.back-to-top').click(function () { // Klick auf den Button
  68. $('body,html').animate({
  69. scrollTop: 0
  70. }, 800);
  71. return false;
  72. });
  73. });
  74.  
  75. });
  76. </script>
  77. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  78. <script type="text/javascript"
  79. src="http://codysherman.com/tools/infinite-scrolling/code" ></script>
  80. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  81. <head>
  82. <title>{Title}</title>
  83. <link rel="shortcut icon" href="{Favicon}">
  84. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  85. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  86. <!-----all colors---->
  87. <meta name="color:background" content="#f5f5f5"/>
  88. <meta name="color:text" content="#000000"/>
  89. <meta name="color:links" content="#000000"/>
  90. <meta name="color:info" content="#000000"/>
  91. <meta name="color:posts" content="#ffffff">
  92. <meta name="color:scrollbar" content="#000000">
  93. <meta name="color:scrollbar background" content="#ffffff">
  94. <meta name="color:hover" content="#97c5e0">
  95. <meta name="color:accent" content="#97c5e0">
  96. <!-----images---->
  97. <meta name="image:background" content=""/>
  98. <meta name="image:header" content=""/>
  99. <!-----texts---->
  100. <meta name="text:title" content="Theme No. 01: Absol "/>
  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 five" content="link five">
  107. <meta name="text:link one url" content="/">
  108. <meta name="text:link two url" content="/">
  109. <meta name="text:link three url" content="/">
  110. <meta name="text:link four url" content="/">
  111. <meta name="text:link five url" content="/">
  112. <!-----custom css---->
  113. <style type="text/css">
  114. /*tumblr controls*/
  115. .tumblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop {
  116. top: 0px !important;
  117. right:0px !important;
  118. opacity:0.5;
  119. z-index:9999999999999999999999999999999999999999999999999999999999;
  120. position: fixed !important;
  121. }
  122. /*scrollbar*/
  123. ::-webkit-scrollbar-thumb{
  124. height:auto;
  125. background-color:{color:scrollbar};
  126. }
  127. ::-webkit-scrollbar{
  128. height:2px;
  129. width:5px;
  130. background-color:{color:scrollbar background};
  131. }
  132. /*tooltips*/
  133. #s-m-t-tooltip{
  134. margin:2px 4px 4px 15px;
  135. padding:8px;
  136. background-color:{color:text};
  137. font-family: 'roboto', sans-serif;
  138. border-radius:2px 2px 2px 2px;
  139. box-shadow:1px 1px 7px #ddd;
  140. font-weight:400;
  141. font-size:9px;
  142. text-transform:uppercase;
  143. letter-spacing:0px;
  144. color:{color:posts};
  145. z-index:999999999999999999999999999999999999;
  146. }
  147. /*body basics*/
  148. body{
  149. background-color:{color:background};
  150. background-image:url('{image:background}');
  151. background-attachment: fixed;
  152. background-repeat: repeat;
  153. font-weight:none;
  154. font-family: 'calibri', sans-serif;
  155. font-size:10px;
  156. text-align:justify;
  157. color:{color:text};
  158. margin:0;
  159. }
  160. a{
  161. text-decoration:none;
  162. color:{color:links};
  163. transition-duration: 0.1s;
  164. -moz-transition-duration: 0.1s;
  165. -webkit-transition-duration: 0.1s;
  166. -o-transition-duration: 0.1s;
  167. }
  168. a:hover{
  169. text-decoration:none;
  170. color:{color:accent};
  171. transition-duration: 0.1s;
  172. -moz-transition-duration: 0.1s;
  173. -webkit-transition-duration: 0.1s;
  174. -o-transition-duration: 0.1s;
  175. }
  176. img {
  177.  
  178. }
  179. blockquote {
  180. font-size:10px;
  181. max-width:545px;
  182. border-left:3px solid #eee;
  183. text-align:left;
  184. padding:1px;
  185. font-weight:none;
  186. margin-left:0px;
  187. padding-top:0.5px;
  188. padding-bottom:0.5px;
  189. font-size:10px;
  190. font-family: 'calibri', sans-serif;
  191. margin-right:30px;
  192. padding-left:15px;
  193. color:{color:text};
  194. }
  195. pre{
  196. font-size:9px;
  197. text-align:center;
  198. text-transform:none;
  199. font-family: 'Bitter', serif;
  200. font-weight:bold;
  201. line-height:9px;
  202. border-left:1px solid #eee;
  203. border-bottom:1px solid #eee;
  204. letter-spacing:2px;
  205. background-color:{color:posts};
  206. color:{color:text};
  207. padding:6px;
  208. }
  209. small{
  210. font-size:8px;
  211. }
  212. big{
  213. font-size:11px;
  214. }
  215. sub{
  216. font-size:7px;
  217. }
  218. h1 {
  219. font-size:11px;
  220. text-align:center;
  221. font-family: 'roboto', sans-serif;
  222. letter-spacing:0px;
  223. text-transform:uppercase;
  224. font-weight:700;
  225. line-height:17px;
  226. border-bottom:1px solid #eee;
  227. color:{color:text};
  228. padding:7px;
  229. }
  230. h1 a{
  231. color:{color:text};
  232. }
  233. h2{
  234. color:{color:text};
  235. text-transform:uppercase;
  236. font-family: 'Roboto', sans-serif;
  237. text-align:left;
  238. }
  239. b {
  240. font-weight:bold;
  241. padding:2px;
  242. font-family: 'Roboto', sans-serif;
  243. color:{color:text};
  244. }
  245. i {
  246. font-weight:italic;
  247. color:{color:text};
  248. }
  249. grouptitle {
  250. color:{color:text};
  251. text-transform:none;
  252. font-size:9px;
  253. font-family: 'Roboto', sans-serif;
  254. }
  255. tit {
  256. color:{color:accent};
  257. font-size:13px;
  258. text-transform:uppercase;
  259. font-family: 'roboto', sans-serif;
  260. letter-spacing:0px;
  261. font-weight:700;
  262. }
  263. n {
  264. font-weight:bold;
  265. letter-spacing:-1px;
  266. text-shadow: 1px 1px 1px #cccccc;
  267. font-size:12px;
  268. text-transform:uppercase;
  269. color:{color:text};
  270. }
  271. u {
  272. text-decoration:none;
  273. color:color:;{text};
  274. border-bottom:1px solid {color:text};
  275. }
  276. underline {
  277. text-decoration:none;
  278. color:color:;{text};
  279. border-bottom:1px solid {color:text};
  280. }
  281. /*header image*/
  282. #header {
  283. position:fixed;
  284. width:70px;
  285. margin-top:190px;
  286. padding:10px;
  287. height:70px;
  288. margin-left:180px;
  289. background-color:transparent;
  290. z-index:9999999999999999;
  291. }
  292. #headerimage {
  293. width 70px;
  294. z-index:-99999;
  295. }
  296. #headerimage img {
  297. width:930px;
  298. height:270px;
  299. border:1px solid #eee;
  300. margin-left:224px;
  301. top:0px;
  302. position:absolute;
  303. opacity:1;
  304. z-index:-9999999;
  305. }
  306. /*sidebar description*/
  307. #description {
  308. overflow:auto;
  309. position:fixed;
  310. text-align:left;
  311. top:331px;
  312. margin-left:237px;
  313. word-wrap: break-word;
  314. font-family: 'calibri', sans-serif;
  315. width:125px;
  316. height:auto;
  317. opacity:1;
  318. line-height:13px;
  319. background:{color:posts};
  320. font-weight:400;
  321. color:{color:text};
  322. letter-spacing:0px;
  323. font-size:11px;
  324. z-index:-9999999999;
  325. }
  326. #description::-webkit-scrollbar{
  327. width: 0px;
  328. }
  329. #description::-webkit-scrollbar-thumb{
  330. background:transparent;
  331. }
  332. #description::-webkit-scrollbar-track{
  333. background-color:transparent;
  334. }
  335. /*back to top button*/
  336. .back-to-top {
  337. position: fixed;
  338. color:{color:text};
  339. bottom:13px;
  340. text-transform:uppercase;
  341. background:{color:background};
  342. left:13px;
  343. font-family: 'calibri', sans-serif;
  344. font-size:8px;
  345. font-weight:700;
  346. padding:10px;
  347. }
  348. /*jump pagination*/
  349. .pagination{
  350. font-family: 'roboto', sans-serif;
  351. margin-left:-190px;
  352. width:auto;
  353. padding-top:-10px;
  354. padding-bottom:20px;
  355. font-size:13px;
  356. text-align:center;
  357. }
  358. .pagination a{
  359. padding:5px;
  360. font-family: 'roboto', sans-serif;
  361. font-weight:600;
  362. bottom:10px;
  363. margin-left:5px;
  364. color:{color:text};
  365. }
  366. .pagination a:hover{
  367. color:{color:hover};
  368. -moz-transition-duration:0.5s;
  369. -webkit-transition-duration:0.5s;
  370. -o-transition-duration:0.5s;
  371. transition: all 0.3s ease-out;
  372. }
  373. /*post notes*/
  374. ol.notes {
  375. padding: 0px;
  376. margin: 25px 0px;
  377. font-family:'Roboto',sans-serif;
  378. list-style-type: none;
  379. margin-top:-31px;
  380. background:{color:posts};
  381. margin-left:16px;
  382. width:560px;
  383. border-bottom: solid 1px #eee;
  384. }
  385. ol.notes li.note {
  386. border-top: solid 1px #eee;
  387. padding: 10px;
  388. }
  389. ol.notes li.note img.avatar {
  390. vertical-align: -2px;
  391. border-radius:100px;
  392. margin-right: 0px;
  393. width: 16px;
  394. height: 16px;
  395. }
  396. ol.notes li.note span.action {
  397. font-weight: 300;
  398. }
  399. ol.notes li.note .answer_content {
  400. font-weight: normal;
  401. }
  402. ol.notes li.note blockquote {
  403. border-color: #eee;
  404. padding: 4px 10px;
  405. margin: 10px 0px 0px 25px;
  406. }
  407. ol.notes li.note blockquote a {
  408. text-decoration: none;
  409. }
  410. /*audio*/
  411. .audioartist {
  412. font-family:'roboto', sans-serif;
  413. font-size:10px;
  414. text-transform:lowercase;
  415. font-weight:600;
  416. }
  417. .audiotitle {
  418. font-family:'roboto', sans-serif;
  419. font-size:10px;
  420. text-transform:lowercase;
  421. font-weight:600;
  422. }
  423. .audioplayed {
  424. font-family:'roboto', sans-serif;
  425. font-size:10px;
  426. text-transform:lowercase;
  427. font-weight:600;
  428. }
  429. .audioplayr {
  430. width:400px;
  431. color:{color:text};
  432. background:{color:accent};
  433. }
  434. audioinfo {
  435. font-family:'roboto', sans-serif;
  436. font-size:10px;
  437. letter-spacing:2px;
  438. text-transform:lowercase;
  439. font-weight:300;
  440. }
  441. /*posts*/
  442. #entries {
  443. margin-left:579px;
  444. margin-top:350px;
  445. overflow:hidden;
  446. }
  447. #post {
  448. font-size:10px;
  449. width:500px;
  450. color:{color:post text};
  451. border:1px solid #eee;
  452. background-color:{color:posts};
  453. text-align:justify;
  454. padding:30px;
  455. padding-top:20px;
  456. margin-left:15px;
  457. padding-bottom:0px;
  458. overflow:hidden;
  459. line-height:20px;
  460. margin-bottom:30px;
  461. }
  462. #post img{
  463. max-width:500px;
  464. height:auto;
  465. }
  466. /*questions and answers*/
  467. #asking {
  468. margin-left:20px;
  469. margin-top:-23px;
  470. }
  471. #question {
  472. padding:20px;
  473. padding-left:14px;
  474. margin-top:-28px;
  475. margin-left:-1px;
  476. font-size:9px;
  477. width:367px;
  478. color:{color:text};
  479. background:#eee;
  480. }
  481. #asker{
  482. margin-top:18px;
  483. padding:1px;
  484. font-weight:600;
  485. font-size:9px;
  486. z-index:9999999999;
  487. color:{color:text};
  488. font-style:italic;
  489. opacity:1;
  490. margin-left:12px;
  491. letter-spacing:0px;
  492. font-family: 'roboto', sans-serif;
  493. text-transform:lowercase;
  494. }
  495. /*post info*/
  496. #info {
  497. width:540px;
  498. height:13px;
  499. text-align:left;
  500. font-family: 'calibri', sans-serif;
  501. text-transform:uppercase;
  502. margin-left:-31px;
  503. font-size:8px;
  504. margin-top:18px;
  505. overflow:hidden;
  506. font-weight:700;
  507. font-style:none;
  508. letter-spacing:1px;
  509. border:1px solid #eee;
  510. z-index:9999999999999999;
  511. padding:10px;
  512. line-height:10px;
  513. color:{color:info};
  514. }
  515. #info a {
  516. text-align:center;
  517. font-weight:700;
  518. padding:5px;
  519. background:{color:posts};
  520. letter-spacing:1px;
  521. font-family: 'calibri', sans-serif;
  522. line-height:10px;
  523. color:{color:info};
  524. }
  525. #info a:hover{
  526. color:{color:accent};
  527. }
  528. #info top {
  529. padding:5px;
  530. background:{color:posts};
  531. }
  532. #info spare {
  533. padding:5px;
  534. }
  535. #permalinkk{
  536. text-align:left;
  537. margin-left:-32px;
  538. margin-top:-1px;
  539. font-weight:bold;
  540. width:561px;
  541. font-size:8px;
  542. text-transform:uppercase;
  543. border:1px solid #eee;
  544. font-weight:700;
  545. font-family: 'calibri', sans-serif;
  546. letter-spacing:0px;
  547. line-height:15px;
  548. color:{color:info};
  549. }
  550. #permalinkk a{
  551. color:{color:info};
  552. font-family: 'calibri', sans-serif;
  553. font-size:8px;
  554. margin-left:-3px;
  555. margin-top:-22px;
  556. text-transform:none;
  557. font-weight:700;
  558. padding:5px;
  559. }
  560. #permalink a:hover {
  561. color:{color:hover};
  562. }
  563. #permalinkk img{
  564. width:20px;
  565. height:20px;
  566. margin-top:6px;
  567. margin-left:14px;
  568. border-radius:100px;
  569. border:1px solid #eee;
  570. }
  571. #permalinkk #spark{
  572. margin-top:-23px;
  573. margin-left:44px;
  574. padding-bottom:17px;
  575. font-size:8px;
  576. color:{color:info};
  577. background:{color:posts};
  578. text-transform:uppercase;
  579. font-weight:700;
  580. font-family: 'calibri', sans-serif;
  581. }
  582. #permalinkk spark:hover {
  583. color:{color:hover};
  584. }
  585. /*post tags*/
  586. #tags {
  587. text-align:left;
  588. opacity:0;
  589. font-size:8px;
  590. font-family: 'calibri', sans-serif;
  591. margin-top:-41px;
  592. margin-left:250px;
  593. color:{color:info};
  594. padding:5px;
  595. font-weight:700;
  596. padding-bottom:10px;
  597. height:15px;
  598. width:450px;
  599. text-transform:uppercase;
  600. -webkit-transition: all 0.7s ease-in-out;
  601. -moz-transition: all 0.7s ease-in-out;
  602. -o-transition: all 0.7s ease-in-out;
  603. -ms-transition: all 0.7s ease-in-out;
  604. transition: all 0.7s ease-in-out;
  605. }
  606. #tags a {
  607. padding:5px;
  608. margin-top:-3px;
  609. color:{color:info};
  610. line-height:12px;
  611. letter-spacing:0px;
  612. font-weight:700;
  613. text-align:left;
  614. font-size:8px;
  615. font-family: 'calibri', sans-serif;
  616. display:inline-block;
  617. }
  618. #tags a:hover {
  619. -moz-transition-duration:0.3s;
  620. -webkit-transition-duration:0.3s;
  621. -o-transition-duration:0.3s;
  622. color:{color:hover};
  623. }
  624. #post:hover #tags {
  625. opacity:1;
  626. margin-left:60px;
  627. -webkit-transition: all 0.7s ease-in-out;
  628. -moz-transition: all 0.7s ease-in-out;
  629. -o-transition: all 0.7s ease-in-out;
  630. -ms-transition: all 0.7s ease-in-out;
  631. transition: all 0.7s ease-in-out;
  632. }
  633. /*sidebar*/
  634. #boxes {
  635. overflow:auto;
  636. position:absolute;
  637. text-align:left;
  638. margin-top:45px;
  639. margin-left:215px;
  640. text-transform:none;
  641. font-style:normal;
  642. font-family: 'Roboto', sans-serif;
  643. width:255px;
  644. height:100px;
  645. opacity:1;
  646. line-height:10px;
  647. font-weight:none;
  648. color:{color:text};
  649. background:{color:description};
  650. padding:17px;
  651. letter-spacing:0px;
  652. font-size:10px;
  653. transition-duration: 0.9s;
  654. -moz-transition-duration:0.9s;
  655. -webkit-transition-duration:0.9s;
  656. -o-transition-duration:0.9s;
  657. }
  658. .tit {
  659. font-size:12px;
  660. text-transform:uppercase;
  661. margin-bottom:15px;
  662. letter-spacing:1px;
  663. font-weight:700;
  664. width:286px;
  665. margin-left:-21px;
  666. font-style:italic;
  667. margin-top:-21px;
  668. text-align:left;
  669. border:1px solid #eee;
  670. background:{color:posts};
  671. font-family: 'calibri', sans-serif;
  672. color:{color:text};
  673. padding:12px;
  674. }
  675. .sidebox {
  676. position:absolute;
  677. background:{color:posts};
  678. border:1px solid #eee;
  679. width:310px;
  680. top:350px;
  681. margin-left:224px;
  682. z-index:999;
  683. }
  684. .box {
  685. padding:20px;
  686. }
  687. #description {
  688. margin:5px;
  689. text-align:justify;
  690. }
  691. .members {
  692. margin:5px;
  693. font-size:10px;
  694. text-transform:uppercase;
  695. text-align:justify;
  696. }
  697. #description1 {
  698. margin:5px;
  699. font-size:10px;
  700. padding-top:8px;
  701. font-weight:500;
  702. padding:15px;
  703. line-height:14px;
  704. font-family:'calibri', sans-serif;
  705. }
  706. #sidebarr {
  707. margin:5px;
  708. text-align:justify;
  709. }
  710. #dates {
  711. z-index:9999999999;
  712. padding:22px;
  713. text-align:left;
  714. font-size:10px;
  715. font-weight:400;
  716. line-height:52px;
  717. font-family:'calibri', sans-serif;
  718. margin-left:-15px;
  719. margin-top:0px;
  720. width:282px;
  721. }
  722. #dates date {
  723. font-size:9px;
  724. text-align:center;
  725. width:auto;
  726. height:5px;
  727. font-weight:none;
  728. font-weight:500;
  729. border:1px solid #eee;
  730. border-top:1px solid {color:accent};
  731. font-family: 'calibri', sans-serif;
  732. letter-spacing:2px;
  733. color:{color:text};
  734. padding:13px;
  735. }
  736. #dates dateu {
  737. font-size:9px;
  738. text-align:center;
  739. width:auto;
  740. height:4px;
  741. font-weight:500;
  742. text-transform:none;
  743. border-bottom:1px solid #eee;
  744. font-family: 'calibri', sans-serif;
  745. letter-spacing:0px;
  746. color:{color:text};
  747. padding:13px;
  748. }
  749. .aboutt {
  750. margin:5px;
  751. font-size:10px;
  752. padding-top:8px;
  753. font-weight:500;
  754. padding:15px;
  755. line-height:14px;
  756. font-family:'calibri', sans-serif;
  757. }
  758. #projects {
  759. text-align:left;
  760. margin:5px;
  761. margin-top:30px;
  762. font-size:10px;
  763. letter-spacing:0px;
  764. }
  765. #projects img {
  766. border:1px solid #eee;
  767. width:70px;
  768. height:70px;
  769. border-radius:5px 5px 5px 5px;
  770. float:left;
  771. margin-right:10px;
  772. }
  773. .navlinks {
  774. z-index:9999999999;
  775. padding:22px;
  776. text-align:justify;
  777. font-size:10px;
  778. font-weight:500;
  779. line-height:12px;
  780. font-family:'roboto', sans-serif;
  781. margin-left:5px;
  782. margin-top:0px;
  783. width:195px;
  784. }
  785. .navlinks a{
  786. margin:5px;
  787. width:190px;
  788. height:25px;
  789. margin-bottom:2px;
  790. text-align:left;
  791. padding-bottom:1px;
  792. padding:6px;
  793. line-height:33px;
  794. color:{color:text};
  795. border-bottom:1px solid #eee;
  796. font-style:none;
  797. z-index:99999;
  798. font-weight:300;
  799. font-family: 'kanit', sans-serif;
  800. letter-spacing:1px;
  801. font-size:9px;
  802. text-transform:uppercase;
  803. text-decoration:none;
  804. display:inline-block;
  805. }
  806. .navlinks a:hover {
  807. padding-left:15px;
  808. width:181px;
  809. color:{color:hover};
  810. -webkit-transition: all 0.3s ease-in-out;
  811. -moz-transition: all 0.3s ease-in-out;
  812. -o-transition: all 0.3s ease-in-out;
  813. -ms-transition: all 0.3s ease-in-out;
  814. transition: all 0.3s ease-in-out;
  815. }
  816. /*credit (u better leave this here u goof)*/
  817. #credit{
  818. position:fixed;
  819. font-size:8px;
  820. font-weight:700;
  821. padding-bottom:5px;
  822. padding-top:5px;
  823. height:20px;
  824. width:auto;
  825. opacity:1;
  826. padding-left:5px;
  827. padding-right:5px;
  828. background:transparent;
  829. right:13px;
  830. bottom:13px;
  831. letter-spacing:0px;
  832. line-height:22px;
  833. padding:3px;
  834. text-align:center;
  835. float:left;
  836. font-family: 'calibri', sans-serif;
  837. color:{color:text};
  838. text-transform:uppercase;
  839. }
  840. #credit:hover{
  841. background:{color:posts};
  842. }
  843. /*links*/
  844. .toppp {
  845. top:270px;
  846. position:absolute;
  847. margin-left:224px;
  848. z-index:9999999999999999;
  849. background:{color:posts};
  850. width:930px;
  851. border:1px solid #eee;
  852. }
  853. .sticky{
  854. position:fixed;
  855. width:930px;
  856. top:0px;
  857. margin-left:224px;
  858. background:{color:posts};
  859. border:1px solid #eee;
  860. z-index:9999;
  861. }
  862. .sticky #navi{
  863. width:930px;
  864. text-align:center;
  865. background:white;
  866. color:white;
  867. -webkit-transition: all 0.3s ease-in-out;
  868. -moz-transition: all 0.3s ease-in-out;
  869. -o-transition: all 0.3s ease-in-out;
  870. -ms-transition: all 0.3s ease-in-out;
  871. transition: all 0.3s ease-in-out;
  872. }
  873. #navi{
  874. margin:auto;
  875. font-size:8px;
  876. height:40px;
  877. letter-spacing:1px;
  878. font-weight:700;
  879. color:white;
  880. width:900px;
  881. font-style:none;
  882. text-align:center;
  883. -webkit-transition: all 0.3s ease-in-out;
  884. -moz-transition: all 0.3s ease-in-out;
  885. -o-transition: all 0.3s ease-in-out;
  886. -ms-transition: all 0.3s ease-in-out;
  887. transition: all 0.3s ease-in-out;
  888. }
  889. #navi a{
  890. display:inline-block;
  891. color:{color:text};
  892. padding:18px 0px 16px 0px;
  893. margin:0px 20px 0px 20px;
  894. font-weight:700;
  895. margin-top:-1px;
  896. line-height:6px;
  897. font-style:none;
  898. border-bottom:1px solid transparent;
  899. border-top:1px solid transparent;
  900. font-family: 'calibri', sans-serif;
  901. text-transform:uppercase;
  902. }
  903. #navi a:hover{
  904. border-bottom:1px solid {color:hover};
  905. border-top:1px solid {color:hover};
  906. color:{color:hover};
  907. }
  908. /*search box*/
  909. .search {
  910. text-align:left;
  911. line-height:100%;
  912. position:absolute;
  913. background:none;
  914. margin-top:5px;
  915. margin-left:180px;
  916. }
  917. .search input{
  918. color:black;
  919. position:absolute;
  920. font-family:'calibri', sans-serif;
  921. font-size:8px;
  922. border:0px;
  923. font-weight:700;
  924. text-transform:uppercase;
  925. letter-spacing:1px;
  926. border-bottom:1px solid #eee;
  927. padding:3px 8px;
  928. text-align:left;
  929. background:none;
  930. margin-left:-125px;
  931. width:180px;
  932. height:30px;
  933. outline:none;
  934. }
  935. input.sbutton{
  936. outline:none;
  937. cursor:help;
  938. font-family:'icomoon';
  939. padding:10px;
  940. margin-left:-165px;
  941. margin-top:2px;
  942. color:black;
  943. font-size:12px;
  944. text-transform:uppercase;
  945. border-bottom:1px solid #eee;
  946. background:none;
  947. font-weight:normal;
  948. width:40px;
  949. height:35px;
  950. outline:none;
  951. }
  952. @font-face {
  953. font-family:'icomoon';
  954. src:url('https://dl.dropboxusercontent.com/s/2irmmmxhhoz2w7h/icomoon.ttf');
  955. font-style:normal;
  956. font-weight:normal;
  957. }
  958. ::-webkit-input-placeholder {
  959. color:black;text-transform:uppercase;opacity:0.5;letter-spacing:1px;
  960. }
  961. ::-moz-input-placeholder {
  962. color:black;text-transform:uppercase;opacity:0.5;letter-spacing:1px;
  963. }
  964. ::-o-input-placeholder {
  965. color:black;text-transform:uppercase;opacity:0.5;letter-spacing:1px;
  966. }
  967. ::-ms-input-placeholder {
  968. color:black;text-transform:uppercase;opacity:15;letter-spacing:1px;
  969. }
  970. {CustomCSS}</style>
  971. </head>
  972. <body>
  973. <!-----basics---->
  974. <div id="sidebar">
  975. <div id="headerimage"><img src="{image:header}"></a></div>
  976. </div>
  977. </div>
  978. <!-----top bar links---->
  979. <div class="toppp">
  980. <div id="navi">
  981. <a href="/">Index</a>
  982. <a href="/ask">Contact</a>
  983. <a href="{text:link one url}">{text:link one}</a>
  984. <tit>{text:title}</tit>
  985. <a href="{text:link two url}">{text:link two}</a>
  986. <a href="{text:link three url}">{text:link three}</a>
  987. <a href="{text:link four url}">{text:link four}</a>
  988. </div>
  989. </div>
  990. <!---- Sticky Position (Bar) with CSS or jQuery by http://www.hongkiat.com/ --->
  991.  
  992. <script>
  993. var header = document.querySelector('.toppp');
  994. var origOffsetY = header.offsetTop;
  995.  
  996. function onScroll(e) {
  997. window.scrollY >= origOffsetY ? header.classList.add('sticky') :
  998. header.classList.remove('sticky');
  999. }
  1000.  
  1001. document.addEventListener('scroll', onScroll);
  1002. </script>
  1003. <!-----sidebar---->
  1004. <div class="sidebox">
  1005. <!-----description---->
  1006. <div class="box">
  1007. <div class="tit"style=" z-index:999999999;">Home</div>
  1008. <div id="description1">{description}</div>
  1009. <div class="search">
  1010. <form action="/search" method="get">
  1011. <input type="text" name="q" value="" placeholder="Search {name}" />
  1012. <input type="submit" value="&#xe601;" class="sbutton" />
  1013. </form></div></br></br></br>
  1014. </div>
  1015. <!-----updates---->
  1016. <div class="box">
  1017. <div class="tit">Updates</div>
  1018. <div class="aboutt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  1019. Lorem ipsum dolor sit amet.
  1020. Consectetuer adipiscing elit.
  1021. Nam at tortor quis ipsum tempor aliquet.
  1022. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.</a>
  1023. </div></div>
  1024. <!-----projects or albums---->
  1025. <div class="box">
  1026. <div class="tit">Albums</div>
  1027. <div id="projects"><img src="https://40.media.tumblr.com/d43ef707e6651fa2c632b84265521285/tumblr_ny80wbtVNe1u9o0yqo1_100.jpg">
  1028. <ul>
  1029. <b>Album name</b><br>
  1030. <b>Producer:</b> Name here<br>
  1031. <b>Year:</b> Year here<br>
  1032. <b>Tracks:</b> Tracks amount here<br>
  1033. <b>Label:</b> Label here
  1034. </ul>
  1035. </br></br>
  1036. <img src="https://40.media.tumblr.com/d43ef707e6651fa2c632b84265521285/tumblr_ny80wbtVNe1u9o0yqo1_100.jpg">
  1037. <ul>
  1038. <b>Album name</b><br>
  1039. <b>Producer:</b> Name here<br>
  1040. <b>Year:</b> Year here<br>
  1041. <b>Tracks:</b> Tracks amount here<br>
  1042. <b>Label:</b> Label here
  1043. </ul>
  1044. </div>
  1045. </div>
  1046. <!-----tour or event dates---->
  1047. <div class="box">
  1048. <div class="tit">Upcoming Events</div>
  1049. <div id="dates">
  1050. <date>DATE</date><dateu>City here</dateu>
  1051. </br>
  1052. <date>DATE</date><dateu>City here</dateu>
  1053. </br>
  1054. <date>DATE</date><dateu>City here</dateu>
  1055. </br>
  1056. <date>DATE</date><dateu>City here</dateu>
  1057. </br>
  1058. <date>DATE</date><dateu>City here</dateu>
  1059. </br>
  1060. </div></div>
  1061. <!-----social media links---->
  1062. <div class="box">
  1063. <div class="tit">navigation</div>
  1064. <div class="navlinks">
  1065. <div id="all">
  1066. <a href="/"title="text">navi link</a>
  1067. <a href="/" title="text">navi link</a>
  1068. <a href="/"title="text">navi link</a>
  1069. <a href="/"title="text">navi link</a>
  1070. <a href="/"title="text">navi link</a>
  1071. </div>
  1072. </div>
  1073. </div>
  1074. <!-----blog members---->
  1075. <div class="box">
  1076. <div class="tit">Blog members</div>
  1077. <div class="members">
  1078. {block:GroupMembers}
  1079. <table style="margin-top:0px;">
  1080. {block:GroupMember}
  1081. <tr>
  1082. <td style="width:40px;">
  1083. <img src="{GroupMemberPortraitURL-128}" width="40px;" height="auto;" style="margin-right: 10px;border:solid 1px #ddd;border-radius:5px"> </td>
  1084. <td style="height:auto;">
  1085. <a href="{GroupMemberURL}" title="{GroupMemberTitle}"style="font-family: 'arial', sans-serif;margin-top:0px;font-weight:bold;text-transform:uppercase;font-size:8px;letter-spacing:0px;text-decoration:underline">{GroupMemberName}</a><br><grouptitle>{GroupMemberTitle}</grouptitle></div>
  1086. </tr>
  1087. {/block:GroupMember}
  1088. </table>
  1089. {/block:GroupMembers}
  1090. </div></div>
  1091. <!-----disclaimer---->
  1092. <div class="box">
  1093. <div class="tit">disclaimer</div>
  1094. <div class="aboutt">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  1095. Lorem ipsum dolor sit amet.
  1096. Consectetuer adipiscing elit.
  1097. Nam at tortor quis ipsum tempor aliquet.
  1098. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.</a>
  1099. </div></div>
  1100. <!-----blog info---->
  1101. <div class="box">
  1102. <div class="tit">Blog info</div>
  1103. <div class="aboutt">
  1104. <b>Blog created by:</b> Name here
  1105. </br>
  1106. <b>Blog established:</b> Date here
  1107. </br>
  1108. <b>Graphics by:</b> Name here
  1109. </br>
  1110. <b>Theme made by:</b> Azure (Espeon Themes)
  1111. </div>
  1112. </div>
  1113. </div>
  1114. </div>
  1115. <!-----posts and entries---->
  1116. <div id="entries">
  1117. {block:Posts}
  1118. <div id="post"
  1119. <div id="post">
  1120. <!----texts---->
  1121. {block:Text}
  1122. {block:Title}<h1><center>{Title}</center></h1>{/block:Title}
  1123. {Body}
  1124. {/block:Text}
  1125. <!-----question and answers---->
  1126. {block:Answer}
  1127. <div id="asker">{Asker} asked:</div>
  1128. <div id="question">{Question}</div>
  1129. {Answer}{/block:Answer}
  1130. <!-----quotes---->
  1131. {block:Quote}
  1132. {block:Quote}
  1133. <h2>{Quote}</h2>
  1134. <div align="right">
  1135. {block:Source}<h1>-{Source}</h1>{/block:Source}
  1136. </div>
  1137. {/block:Quote}
  1138. <!-----links---->
  1139. {block:Link}
  1140. <h2><center><a href="{URL}">{Name}</center></a></h2>
  1141. {block:Description}{Description}{/block:Description}
  1142. {/block:Link}
  1143. <!-----chats---->
  1144. {block:Chat}
  1145. {block:Title}<h2>{Title}</h2>{/block:Title}
  1146. <ul class="convo">{block:Lines}<li class="line">{block:Label}<span class ="label">{Label}</span>{/block:Label}
  1147. {Line}</li>{/block:Lines}</ul>
  1148. {/block:Chat}
  1149. <!-----photos---->
  1150. {block:Photo}
  1151. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="auto">{LinkCloseTag}
  1152. {block:Caption}{Caption}{/block:Caption}
  1153. {/block:Photo}
  1154. <!-----photosets---->
  1155. {block:Photoset}
  1156. {Photoset-500}
  1157. {block:Caption}{Caption}{/block:Caption}
  1158. {/block:Photoset}
  1159. <!-----videos---->
  1160. {block:Video}
  1161. {Video-500}
  1162. {block:Caption}{Caption}{/block:Caption}
  1163. {/block:Video}
  1164. <!-----audios---->
  1165. {block:Audio}<left>{block:AlbumArt}<img src="{AlbumArtURL}" width="60px" height="60px" align="left" style="margin-right:10px" />{/block:AlbumArt}
  1166. {block:TrackName}<div class="audiotitle">Title: <audioinfo>{TrackName}</audioinfo><br/></div>{/block:TrackName}
  1167. {block:Artist}<div class="audioartist">Artist: <audioinfo>{Artist}</audioinfo><br/></div>{/block:Artist}
  1168. {/block:ExternalAudio}<div class="audioplayed">Played: <audioinfo>{PlayCount} times</audioinfo> </div>
  1169. </br>
  1170. <div class="audioplayr"style="background:{color:accent}">{AudioPlayer}</div>
  1171. {/block:Audio}
  1172. <!-----info---->
  1173. <div id="borderbottom"></div>
  1174. <div id="info">
  1175. <div id="permalink">
  1176. <top><a href="{Permalink}">
  1177. {DayOfMonth} {ShortMonth} {ShortYear}</top></a><top>{NoteCountWithLabel}</top>
  1178. <font style="float:right;margin-left:-2px"><top><a href="{ReblogURL}" title="reblog"target="_blank" class="details"><i class="fa fa-repeat"style="color:{color:info}"></i></a></top></font style>
  1179. {block:RebloggedFrom}
  1180. {/block:RebloggedFrom}
  1181. </a></div></div>
  1182. {block:Date}
  1183. <div id="permalinkk">
  1184. {block:RebloggedFrom}
  1185. {block:ContentSource}<top><a href="{BlogURL}"title="{Title}"><img src="{PortraitURL-128}"></a> <div id="spark"><a href="{ReblogParentURL}" ><a href="{ReblogParentURL}" title="{ReblogParentName}">VIA</a>· <a href="{SourceURL}"title="{ReblogRootName}">SRC</top></a></div>
  1186. {/block:ContentSource}
  1187. {/block:RebloggedFrom}
  1188. </div>
  1189. {/block:Date}
  1190. {block:HasTags}<div id="tags"> {block:Tags} <a href="{TagURL}"> #{Tag} </a> {/block:Tags}
  1191. </div>
  1192. {/block:HasTags}
  1193. </div>
  1194. {block:PostNotes} {PostNotes} {/block:PostNotes}
  1195.  
  1196. {/block:Posts}
  1197. {block:Pagination}
  1198. <div class="pagination"style="{color:title text}">
  1199. {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}
  1200. {/block:Pagination}</div>
  1201. </div>
  1202. <!-----credit (u better dont touch this here u goof)---->
  1203. <div id="credit">
  1204. <a href="http://pintient.com/2YIW"title="espeon themes"style="color:{color:text}">© Espeon</a>
  1205. </div>
  1206. </html>
  1207. </body>
  1208. <!-----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!