API tools faq
paste
azurethemes

hydra 3d - theme 25

azurethemes
Nov 6th, 2016
1,991
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.24 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2. @1204px // prev. daddythemes
  3. theme 25: hydra 3d
  4. this theme was made by azure/1204px.
  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. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i|Montserrat:400,700|Raleway:400,500,600,700,800|Roboto+Condensed:400,700|Roboto:300i,400,400i,500,500i,700,700i|Josefin+Sans:700|Muli:400|Cabin:400,500,600|Catamaran:400,500,600|Poppins:400,500,600|Rubik:400,500|Source+Sans+Pro:400,600,700|Cantarell:400,700|Chivo|Doppio+One|Overlock:700" rel="stylesheet">
  12. <!--tooltips-->
  13. <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>
  14. <script>
  15. (function($){
  16. $(document).ready(function(){
  17. $("a[title]").style_my_tooltips({
  18. tip_follows_cursor:true,
  19. tip_delay_time:10,
  20. tip_fade_speed:900,
  21. attribute:"title"
  22. });
  23. });
  24. })(jQuery);
  25. </script>
  26. <!--back to top button-->
  27. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  28. <script>
  29. $(document).ready(function(){
  30.  
  31. // Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden.
  32. var back_to_top_button = ['<a href="#top" class="back-to-top"><i class="fa fa-arrow-up"></i></a>'].join("");
  33. $("body").append(back_to_top_button)
  34.  
  35. // Der Button wird ausgeblendet
  36. $(".back-to-top").hide();
  37.  
  38. // Funktion für das Scroll-Verhalten
  39. $(function () {
  40. $(window).scroll(function () {
  41. if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
  42. $('.back-to-top').fadeIn();
  43. } else {
  44. $('.back-to-top').fadeOut();
  45. }
  46. });
  47.  
  48. $('.back-to-top').click(function () { // Klick auf den Button
  49. $('body,html').animate({
  50. scrollTop: 0
  51. }, 800);
  52. return false;
  53. });
  54. });
  55.  
  56. });
  57. </script>
  58. <!--minimalist fonts-->
  59. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  60. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
  61. <link rel="stylesheet" href="path/to/material-design-iconic-font/css/material-design-iconic-font.min.css">
  62. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  63. <head>
  64. <title>{Title}</title>
  65. <link rel="shortcut icon" href="{Favicon}">
  66. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  67. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  68. <!--all colors-->
  69. <meta name="color:background" content="#f6f6f6"/>
  70. <meta name="color:posts" content="#ffffff">
  71. <meta name="color:top bar" content="#ffffff"/>
  72. <meta name="color:text" content="#888888"/>
  73. <meta name="color:links" content="#888888"/>
  74. <meta name="color:text accent" content="#ffffff"/>
  75. <meta name="color:accent" content="#dcbbb2">
  76. <meta name="color:link accent" content="#222222">
  77. <meta name="color:hover" content="#000000">
  78. <meta name="color:asks" content="#f6f6f6">
  79. <meta name="color:border" content="#eeeeee"/>
  80. <meta name="color:scrollbar" content="#070707">
  81. <meta name="color:tooltip" content="#ffffff">
  82. <meta name="color:search" content="#ffffff">
  83. <!--images-->
  84. <meta name="image:header" content=""/>
  85. <meta name="image:icon" content=""/>
  86. <!--texts-->
  87. <meta name="text:small title" content="Brand new"/>
  88. <!--sidebar links-->
  89. <meta name="text:link one" content=" Link one">
  90. <meta name="text:link two" content="Link two">
  91. <meta name="text:link three" content="Link three">
  92. <meta name="text:link one url" content="/">
  93. <meta name="text:link two url" content="/">
  94. <meta name="text:link three url" content="/">
  95. <!--custom css-->
  96. <style type="text/css">
  97. /*tumblr controls*/
  98. .tmblr-iframe {
  99. top:0px!important;
  100. position:fixed!important;
  101. opacity:0.5;
  102. transform-origin:right;
  103. z-index:99999999999999!important;
  104. -webkit-filter: invert(100%);
  105. -moz-filter: invert(100%);
  106. -o-filter: invert(100%);
  107. -ms-filter: invert(100%);
  108. filter: invert(100%);
  109. white-space:nowrap;
  110. transition-duration: 0.3s;
  111. -moz-transition-duration: 0.3s;
  112. -webkit-transition-duration: 0.3s;
  113. -o-transition-duration: 0.3s;
  114. }
  115. /*scrollbar*/
  116. ::-webkit-scrollbar {
  117. width:6px;
  118. height:6px;
  119. background:{color:background};
  120. }
  121. ::-webkit-scrollbar-thumb {
  122. background:{color:scrollbar};
  123. }
  124. /*tooltips*/
  125. #s-m-t-tooltip{
  126. margin:13px 10px 6px 10px;
  127. padding:6px;
  128. background-color:{color:tooltip};
  129. font-family: 'Source Sans Pro', sans-serif;
  130. border:1px solid {color:border};
  131. font-weight:400;
  132. font-size:9px;
  133. text-transform:uppercase;
  134. letter-spacing:0px;
  135. color:{color:text};
  136. z-index:999999999999999999999999999999999999;
  137. transition:0.3s ease-in-out;
  138. -webkit-transition:0.3s ease-in-out;
  139. -moz-transition:0.3s ease-in-out;
  140. -ms-transition:0.3s ease-in-out;
  141. -o-transition:0.3s ease-in-out;
  142. }
  143. /*body basics*/
  144. body{
  145. background-color:{color:background};
  146. background-attachment: fixed;
  147. background-repeat: repeat;
  148. font-weight:none;
  149. font-family: 'roboto', sans-serif;
  150. font-size:10px;
  151. text-align:justify;
  152. color:{color:text};
  153. margin:0;
  154. }
  155. a{
  156. text-decoration:none;
  157. color:{color:links};
  158. -moz-transition-duration:0.5s;
  159. -webkit-transition-duration:0.5s;
  160. -o-transition-duration:0.5s;
  161. transition: all 0.3s ease-out;
  162. }
  163. a:hover{
  164. text-decoration:none;
  165. color:{color:hover};
  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. img {
  172. }
  173. blockquote {
  174. font-size:9px;
  175. width:auto;
  176. border-left:1px solid {color:border};
  177. text-align:left;
  178. padding:1px;
  179. font-weight:none;
  180. margin-top:11px;
  181. margin-left:20px;
  182. padding-top:0.5px;
  183. padding-bottom:0.5px;
  184. font-size:11px;
  185. font-family: 'Source Sans Pro', sans-serif;
  186. margin-right:20px;
  187. padding-left:15px;
  188. color:{color:text};
  189. }
  190. pre{
  191. font-size:9px;
  192. text-align:center;
  193. text-transform:none;
  194. font-family: 'Bitter', serif;
  195. font-weight:bold;
  196. line-height:9px;
  197. border-left:1px solid #eee;
  198. border-bottom:1px solid #eee;
  199. letter-spacing:2px;
  200. background-color:{color:posts};
  201. color:{color:text};
  202. padding:6px;
  203. }
  204. small{
  205. font-size:9px;
  206. font-family: 'calibri', sans-serif;
  207. }
  208. big{
  209. font-size:12px;
  210. font-family: 'calibri', sans-serif;
  211. font-weight:700;
  212. }
  213. sub{
  214. font-size:8px;
  215. letter-spacing:6px;
  216. font-weight:800;
  217. text-transform:uppercase;
  218. font-family: 'calibri', sans-serif;
  219. }
  220. h1 {
  221. font-size:15px;
  222. text-align:left;
  223. font-family: 'arial', sans-serif;
  224. letter-spacing:-1px;
  225. margin-left:-190px;
  226. text-transform:lowercase;
  227. font-weight:700;
  228. line-height:0px;
  229. color:{color:text};
  230. padding:7px;
  231. }
  232. h1 a{
  233. color:{color:text};
  234. text-align:left;
  235. }
  236. h2{
  237. color:{color:text};
  238. text-transform:uppercase;
  239. font-family: 'Montserrat', sans-serif;
  240. text-align:left;
  241. }
  242. b {
  243. font-weight:800;
  244. font-family: 'roboto', sans-serif;
  245. color:{color:text};
  246. }
  247. sh {
  248. color:{color:links};
  249. text-transform:uppercase;
  250. font-family: 'arial', sans-serif;
  251. font-size:13px
  252. font-weight:800;
  253. }
  254. am {
  255. color:{color:text};
  256. font-size:22px;
  257. padding:8px;
  258. padding-top:2px;
  259. text-transform:uppercase;
  260. font-family: 'roboto', sans-serif;
  261. letter-spacing:0px;
  262. font-weight:500;
  263. }
  264. t {
  265. font-weight:bold;
  266. letter-spacing:0px;
  267. font-size:45px;
  268. font-style:italic;
  269. font-family: 'times new roman', sans-serif;
  270. text-transform:uppercase;
  271. color:{color:text};
  272. }
  273. u {
  274. text-decoration:none;
  275. color:{color:text};
  276. padding:3px;
  277. border-bottom:1px solid {color:border};
  278. }
  279. /*back to top button*/
  280. .back-to-top {
  281. position: fixed;
  282. color:{color:text};
  283. bottom:10px;
  284. text-transform:uppercase;
  285. left:10px;
  286. font-family: 'calibri', sans-serif;
  287. font-size:8px;
  288. letter-spacing:3px;
  289. z-index:9999999999;
  290. font-weight:600;
  291. padding:10px;
  292. }
  293. /*jump pagination*/
  294. .pagination{
  295. font-family: 'roboto', sans-serif;
  296. margin-left:-190px;
  297. width:auto;
  298. padding-top:-10px;
  299. letter-spacing:2px;
  300. padding-bottom:20px;
  301. font-size:13px;
  302. text-align:center;
  303. }
  304. .pagination a{
  305. padding:5px;
  306. font-family: 'roboto', sans-serif;
  307. font-weight:600;
  308. bottom:10px;
  309. margin-left:5px;
  310. color:{color:text};
  311. }
  312. .pagination a:hover{
  313. color:{color:hover};
  314. -moz-transition-duration:0.5s;
  315. -webkit-transition-duration:0.5s;
  316. -o-transition-duration:0.5s;
  317. transition: all 0.3s ease-out;
  318. }
  319. /*post notes*/
  320. ol.notes {
  321. padding: 0px;
  322. margin: 25px 0px;
  323. font-family:'roboto',sans-serif;
  324. list-style-type: none;
  325. margin-top:-60px;
  326. background:{color:posts};
  327. margin-left:15px;
  328. width:500px;
  329. border: solid 1px {color:border};
  330. }
  331. ol.notes li.note {
  332. border-top: solid 1px {color:border};
  333. padding: 10px;
  334. }
  335. ol.notes li.note img.avatar {
  336. vertical-align: -10px;
  337. border-radius:100px;
  338. margin-left: 10px;
  339. padding:6px;
  340. width: 16px;
  341. height: 16px;
  342. }
  343. ol.notes li.note span.action {
  344. font-weight: 300;
  345. }
  346. ol.notes li.note .answer_content {
  347. font-weight: normal;
  348. }
  349. ol.notes li.note blockquote {
  350. border-color: {color:border};
  351. padding: 4px 10px;
  352. margin: 10px 0px 0px 25px;
  353. }
  354. ol.notes li.note blockquote a {
  355. text-decoration: none;
  356. }
  357. /*like button*/
  358. .buttons a {
  359. position:relative;
  360. display:inline-block;
  361. padding:3px;
  362. }
  363. .custom-like-button {
  364. position: relative;
  365. display: inline-block;
  366. width: 12px;
  367. height: 12px;
  368. cursor: pointer;
  369. }
  370. .like_button {
  371. position: absolute;
  372. top: 0px;
  373. left: -2px;
  374. right: 0;
  375. bottom: -1px;
  376. width: 12px;
  377. height: 12px;
  378. opacity: 0;
  379. z-index: 10;
  380. }
  381. .like_button iframe {
  382. width: 100% !important;
  383. height: 100% !important;
  384. }
  385. .our_button {
  386. position: absolute;
  387. top: 1.5px;
  388. left: 0;
  389. right: 0;
  390. bottom: 0;
  391. width: 100%;
  392. height: 100%;
  393. z-index: 1;
  394. -webkit-transition:all 0.6s ease-in-out;/*chrome-safari*/
  395. -o-transition:all 0.6s ease-in-out;/*opera*/
  396. -moz-transition:all 0.6s ease-in-out;/*mozilla firefox*/
  397. -ms-transition:all 0.6s ease-in-out;/*ie*/
  398. transition:all 0.6s ease-in-out;/*w3c*/
  399. }
  400. .like_button:hover + .our_button {
  401. color: {color:link hover};
  402. }
  403. .like_button.liked + .our_button {
  404. color: red;
  405. }
  406. /*audio*/
  407. .audioartist {
  408. font-family:'roboto', sans-serif;
  409. font-size:10px;
  410. text-transform:lowercase;
  411. font-weight:600;
  412. }
  413. .audiotitle {
  414. font-family:'roboto', sans-serif;
  415. font-size:10px;
  416. text-transform:lowercase;
  417. font-weight:600;
  418. }
  419. .audioplayed {
  420. font-family:'roboto', sans-serif;
  421. font-size:10px;
  422. text-transform:lowercase;
  423. font-weight:600;
  424. }
  425. .audioplayr {
  426. width:400px;
  427. color:{color:text};
  428. background:{color:accent};
  429. }
  430. audioinfo {
  431. font-family:'roboto', sans-serif;
  432. font-size:10px;
  433. letter-spacing:2px;
  434. text-transform:lowercase;
  435. font-weight:300;
  436. }
  437. /*post styles*/
  438. .pcaption{
  439. font-family:'roboto', sans-serif;
  440. font-size:10px;
  441. margin-left:10px;
  442. letter-spacing:0px;
  443. text-transform:none;
  444. text-align:left;
  445. background:{color:posts};
  446. font-weight:400;
  447. }
  448. .pcaption a{
  449. font-family:'roboto', sans-serif;
  450. font-size:10px;
  451. margin-left:0px;
  452. letter-spacing:0px;
  453. text-transform:none;
  454. text-align:left;
  455. font-weight:400;
  456. }
  457. .psets{
  458. width:100%;
  459. margin-top:-24px;
  460. margin-left:1.5px;
  461. }
  462. .vsets{
  463. width:100%;
  464. margin-top:-12px;
  465. }
  466. .ppost{
  467. width:100%;
  468. margin-top:-12px;
  469. }
  470. .qcaption{
  471. font-family:'Vidaloka', sans-serif;
  472. font-size:15px;
  473. margin-left:15px;
  474. letter-spacing:0px;
  475. text-align:justify;
  476. text-transform:none;
  477. color:{color:text};
  478. font-weight:200;
  479. }
  480. .qsource{
  481. font-size:12px;
  482. margin-left:30px;
  483. margin-top:12px;
  484. text-align:left;
  485. letter-spacing:0px;
  486. font-family:'calibri', sans-serif;
  487. text-transform:uppercase;
  488. font-style:italic;
  489. font-weight:300;
  490. }
  491. /*posts*/
  492. #entries {
  493. margin-left:500px;
  494. margin-top:330px;
  495. z-index:99999999999;
  496. }
  497. #post {
  498. font-size:10px;
  499. width:500px;
  500. color:{color:text};
  501. background-color:{color:posts};
  502. border:1px solid {color:border};
  503. text-align:justify;
  504. z-index:9999;
  505. padding:0px;
  506. border-radius:3px;
  507. margin-left:15px;
  508. margin-bottom:20px;
  509. padding-bottom:0px;
  510. overflow:hidden;
  511. }
  512. #post img{
  513. max-width:100%;
  514. margin-top:-12px;
  515. height:auto;
  516. }
  517. /*questions and answers*/
  518. #asking {
  519. margin-left:40px;
  520. margin-top:-35px;
  521. }
  522. #askingimage {
  523. }
  524. #askingimage img {
  525. margin-left:23px;
  526. width:35px;
  527. height:35px;
  528. border:1px solid {color:border};
  529. border-radius:3px;
  530. margin-top:-7px;
  531. }
  532. #question {
  533. padding:25px;
  534. padding-left:62px;
  535. margin-top:-24px;
  536. padding-top:32px;
  537. margin-left:20px;
  538. width:467px;
  539. text-transform:none;
  540. border-radius:3px;
  541. font-family: 'calibri', serif;
  542. color:{color:text};
  543. background-color:{color:asks};
  544. }
  545. #asker{
  546. margin-top:-39px;
  547. padding:20px;
  548. font-weight:300;
  549. width:365px;
  550. font-size:11px;
  551. z-index:9999999999;
  552. color:{color:text};
  553. opacity:1;
  554. background:{color:asks};
  555. border:1px solid {color:border};
  556. border-radius:2px;
  557. margin-left:70px;
  558. letter-spacing:0px;
  559. font-family: 'roboto', sans-serif;
  560. text-transform:none;
  561. }
  562. askerurl{
  563. font-weight:bold;
  564. font-family: 'montserrat', sans-serif;
  565. }
  566. /*post info*/
  567. #info {
  568. width:530px;
  569. text-align:left;
  570. font-family: 'Source Sans Pro', sans-serif;
  571. text-transform:lowercase;
  572. margin-left:-40px;
  573. font-size:9px;
  574. margin-top:-5px;
  575. padding-left:60px;
  576. padding-top:17px;
  577. padding-bottom:13px;
  578. opacity:1;
  579. overflow:hidden;
  580. font-weight:600;
  581. line-height:14px;
  582. letter-spacing:0px;
  583. border-top:1px solid {color:border};
  584. background:{color:posts};
  585. z-index:9999999999999999;
  586. color:{color:links};
  587. }
  588. #info a {
  589. text-align:center;
  590. font-weight:600;
  591. padding:2px;
  592. font-size:9px;
  593. letter-spacing:0px;
  594. font-family: 'Source Sans Pro', sans-serif;
  595. text-transform:lowercase;
  596. line-height:5px;
  597. color:{color:links};
  598. -moz-transition-duration:0.2s;
  599. -webkit-transition-duration:0.2s;
  600. -o-transition-duration:0.2s;
  601. transition: all 0.2s ease-out;
  602. }
  603. #info a:hover{
  604. color:{color:hover};
  605. -moz-transition-duration:0.2s;
  606. -webkit-transition-duration:0.2s;
  607. -o-transition-duration:0.2s;
  608. transition: all 0.2s ease-out;
  609. }
  610. #info date {
  611. font-size:11px;
  612. letter-spacing:0px;
  613. text-transform:uppercase;
  614. font-family: 'Source Sans Pro', sans-serif;
  615. font-weight:500;
  616. color:{color:link accent};
  617. -moz-transition-duration:0.2s;
  618. -webkit-transition-duration:0.2s;
  619. -o-transition-duration:0.2s;
  620. transition: all 0.2s ease-out;
  621. }
  622. #info tagged {
  623. font-family: 'Source Sans Pro', sans-serif;
  624. text-transform:uppercase;
  625. font-size:9px;
  626. letter-spacing:0px;
  627. font-weight:500;
  628. }
  629. #info date:hover{
  630. color:{color:hover};
  631. -moz-transition-duration:0.2s;
  632. -webkit-transition-duration:0.2s;
  633. -o-transition-duration:0.2s;
  634. transition: all 0.2s ease-out;
  635. }
  636. #infot {
  637. width:500px;
  638. text-align:left;
  639. font-family: 'source sans pro', sans-serif;
  640. text-transform:uppercase;
  641. margin-left:0px;
  642. font-size:9px;
  643. margin-top:15px;
  644. padding-left:20px;
  645. padding-top:15px;
  646. padding-bottom:16px;
  647. margin-bottom:24px;
  648. opacity:1;
  649. overflow:hidden;
  650. font-weight:500;
  651. border-bottom:1px solid {color:border};
  652. line-height:0px;
  653. letter-spacing:1px;
  654. background:{color:top bar};
  655. z-index:9999999999999999;
  656. color:{color:info};
  657. }
  658. #infot img {
  659. width:23px;
  660. height:23px;
  661. border-radius:100px;
  662. }
  663. #infot #nname {
  664. text-align:left;
  665. font-weight:500;
  666. padding:2px;
  667. font-size:9px;
  668. letter-spacing:0px;
  669. margin-left:28px;
  670. margin-top:-22px;
  671. font-family: 'Source Sans Pro', sans-serif;
  672. line-height:10px;
  673. color:{color:info};
  674. -moz-transition-duration:0.2s;
  675. -webkit-transition-duration:0.2s;
  676. -o-transition-duration:0.2s;
  677. transition: all 0.2s ease-out;
  678. }
  679. #infot posted {
  680. text-align:left;
  681. font-weight:500;
  682. padding:2px;
  683. font-size:9px;
  684. letter-spacing:0px;
  685. margin-top:-12px;
  686. font-family: 'Source Sans Pro', sans-serif;
  687. line-height:0px;
  688. color:{color:info};
  689. }
  690. #infot a{
  691. text-align:left;
  692. font-weight:500;
  693. padding:2px;
  694. font-size:9px;
  695. letter-spacing:0px;
  696. margin-left:0px;
  697. margin-top:-22px;
  698. font-family: 'Source Sans Pro', sans-serif;
  699. line-height:0px;
  700. color:{color:info};
  701. -moz-transition-duration:0.2s;
  702. -webkit-transition-duration:0.2s;
  703. -o-transition-duration:0.2s;
  704. transition: all 0.2s ease-out;
  705. }
  706. /*top navigation*/
  707. .topbar {
  708. width:100%;
  709. top:40px;
  710. position:absolute;
  711. z-index:9999;
  712. }
  713. .sticky{
  714. width:705px;
  715. top:-55px;
  716. z-index:99999999999;
  717. position:fixed;
  718. }
  719. .sticky #navi{
  720. width:705px;
  721. height:45px;
  722. margin-top:50px;
  723. margin-left:300px;
  724. text-align:center;
  725. line-height:15px;
  726. background:{color:top bar};
  727. -webkit-transition: all 0.4s ease-in-out;
  728. -moz-transition: all 0.4s ease-in-out;
  729. -o-transition: all 0.4s ease-in-out;
  730. -ms-transition: all 0.4s ease-in-out;
  731. transition: all 0.4s ease-in-out;
  732. }
  733. .sticky #sidebox {
  734. margin-top:20px;
  735. margin-left:310px;
  736. position:fixed;
  737. -webkit-transition: all 0.4s ease-in-out;
  738. -moz-transition: all 0.4s ease-in-out;
  739. -o-transition: all 0.4s ease-in-out;
  740. -ms-transition: all 0.4s ease-in-out;
  741. transition: all 0.4s ease-in-out;
  742. }
  743. #navi{
  744. margin:auto;
  745. font-size:10px;
  746. border-radius:3px;
  747. letter-spacing:0px;
  748. border:1px solid {color:border};
  749. font-weight:300;
  750. z-index:9999;
  751. background:{color:posts};
  752. padding:5px;
  753. width:705px;
  754. height:45px;
  755. margin-left:300px;
  756. font-style:none;
  757. text-align:center;
  758. -webkit-transition: all 0.3s ease-in-out;
  759. -moz-transition: all 0.3s ease-in-out;
  760. -o-transition: all 0.3s ease-in-out;
  761. -ms-transition: all 0.3s ease-in-out;
  762. transition: all 0.3s ease-in-out;
  763. }
  764. #navi a{
  765. display:inline-block;
  766. color:{color:links};
  767. padding:4px 0px 4px 0px;
  768. margin:2px 4px 0px 5px;
  769. padding:6px;
  770. width:15px;
  771. height:15px;
  772. border-radius:3px 3px 3px 3px;
  773. background:transparent;
  774. border:1px solid transparent;
  775. font-weight:400;
  776. margin-bottom:7px;
  777. text-align:center;
  778. line-height:15px;
  779. font-style:none;
  780. border:1px solid transparent;
  781. font-family: 'Source Sans Pro', sans-serif;
  782. text-transform:uppercase;
  783. -webkit-transition: all 0.4s ease-in-out;
  784. -moz-transition: all 0.4s ease-in-out;
  785. -o-transition: all 0.4s ease-in-out;
  786. -ms-transition: all 0.4s ease-in-out;
  787. transition: all 0.4s ease-in-out;
  788. }
  789. #navi a:hover{
  790. color:{color:hover};
  791. padding:6px;
  792. border-radius:3px;
  793. background:{color:search};
  794. border:1px solid {color:border};
  795. -webkit-transition: all 0.4s ease-in-out;
  796. -moz-transition: all 0.4s ease-in-out;
  797. -o-transition: all 0.4s ease-in-out;
  798. -ms-transition: all 0.4s ease-in-out;
  799. transition: all 0.4s ease-in-out;
  800. }
  801. #navi .firstlink a{
  802. font-weight:500;
  803. color:{color:links};
  804. padding:6px;
  805. height:15px;
  806. width:15px;
  807. border-radius:3px;
  808. background:{color:search};
  809. border:1px solid {color:border};
  810. }
  811. #navi #iconss {
  812. margin-left:-93px;
  813. margin-top:8px;
  814. }
  815. /*titles*/
  816. #stickytitle{
  817. margin-top:4px;
  818. width:100px;
  819. height:15px;
  820. opacity:1;
  821. position:absolute;
  822. font-family: 'rubik', sans-serif;
  823. letter-spacing:0px;
  824. text-align:left;
  825. overflow:hidden;
  826. font-weight:500;
  827. word-wrap:none;
  828. color:{color:text};
  829. text-transform:uppercase;
  830. line-height:15px;
  831. font-size:10px;
  832. margin-left:51px;
  833. z-index:9999999;
  834. }
  835. #userr {
  836. position:fixed;
  837. margin-top:190px;
  838. margin-left:180px;
  839. background:{color:top bar};
  840. z-index:9999999999999999;
  841. }
  842. #userrimage {
  843. z-index:-99999;
  844. }
  845. #userrimage img {
  846. width:35px;
  847. height:35px;
  848. left:313px;
  849. margin-top:6px;
  850. position:absolute;
  851. background:{color:top bar};
  852. border-radius:3px;
  853. opacity:1;
  854. z-index:99999999;
  855. -webkit-transition: all 0.4s ease-in-out;
  856. -moz-transition: all 0.4s ease-in-out;
  857. -o-transition: all 0.4s ease-in-out;
  858. -ms-transition: all 0.4s ease-in-out;
  859. transition: all 0.4s ease-in-out;
  860. }
  861. /*sidebar image*/
  862. #sb {
  863. position:fixed;
  864. border-radius:3px;
  865. margin-top:190px;
  866. background:{color:posts};
  867. margin-left:180px;
  868. z-index:9999999999999999;
  869. }
  870. #sbimage {
  871. border-radius:3px;
  872. background:{color:posts};
  873. }
  874. #sbimage img {
  875. width:60px;
  876. height:60px;
  877. left:363px;
  878. padding:6px;
  879. background:{color:posts};
  880. top:105px;
  881. border:1px solid {color:posts};
  882. border-radius:100px;
  883. position:fixed;
  884. opacity:1;
  885. z-index:-99999;
  886. }
  887. #header {
  888. position:fixed;
  889. border-radius:3px;
  890. margin-top:190px;
  891. background:{color:posts};
  892. margin-left:180px;
  893. z-index:9999999999999999;
  894. }
  895. #headerimage {
  896. border-radius:3px;
  897. background:{color:posts};
  898. }
  899. #headerimage img {
  900. width:715px;
  901. height:212px;
  902. left:300px;
  903. background:{color:posts};
  904. top:105px;
  905. border-radius:3px 3px 3px 3px;
  906. position:absolute;
  907. border:1px solid {color:border};
  908. opacity:1;
  909. z-index:99999;
  910. }
  911. /*search box*/
  912. .search {
  913. text-align:left;
  914. line-height:55px;
  915. position:absolute;
  916. margin-top:18px;
  917. opacity:1;
  918. z-index:99999999999999999999999;
  919. margin-left:173px;
  920. }
  921. .search input{
  922. color:black;
  923. position:absolute;
  924. font-family: 'Source Sans Pro', sans-serif;
  925. font-size:8px;
  926. border:0px;
  927. text-transform:uppercase;
  928. letter-spacing:1px;
  929. opacity:1;
  930. font-weight:600;
  931. padding:3px 8px;
  932. background:{color:search};
  933. text-align:left;
  934. border:1px solid {color:border};
  935. color:{color:text};
  936. border-radius:3px;
  937. margin-left:-125px;
  938. width:103px;
  939. padding-left:34px;
  940. height:16px;
  941. outline:none;
  942. }
  943. input.sbutton{
  944. border:1px solid {color:border};
  945. cursor:help;
  946. font-family:'icomoon';
  947. padding:10px;
  948. line-height:5px;
  949. padding-left:6px;
  950. margin-left:-125px;
  951. opacity:1;
  952. background:{color:posts};
  953. margin-top:0px;
  954. color:{color:text};
  955. font-size:9px;
  956. text-transform:uppercase;
  957. font-weight:normal;
  958. width:23px;
  959. height:24px;
  960. }
  961. @font-face {
  962. font-family:'icomoon';
  963. src:url('https://dl.dropboxusercontent.com/s/2irmmmxhhoz2w7h/icomoon.ttf');
  964. font-style:normal;
  965. font-weight:normal;
  966. }
  967. ::-webkit-input-placeholder {
  968. color:black;text-transform:uppercase;opacity:0.5;letter-spacing:1px;
  969. }
  970. ::-moz-input-placeholder {
  971. color:black;text-transform:uppercase;opacity:0.5;letter-spacing:1px;
  972. }
  973. ::-o-input-placeholder {
  974. color:black;text-transform:uppercase;opacity:0.5;letter-spacing:1px;
  975. }
  976. ::-ms-input-placeholder {
  977. color:black;text-transform:uppercase;opacity:0.5;letter-spacing:1px;
  978. }
  979. /*credit (u better leave this here u goof)*/
  980. #credit a{
  981. position:fixed;
  982. font-size:9px;
  983. font-weight:800;
  984. height:15px;
  985. width:25px;
  986. opacity:1;
  987. right:15px;
  988. bottom:5px;
  989. padding:2px;
  990. letter-spacing:0px;
  991. padding-top:3px;
  992. line-height:11px;
  993. z-index:9999999999999999999999999999;
  994. text-align:center;
  995. float:left;
  996. font-family: 'montserrat', cursive;
  997. color:{color:text};
  998. text-transform:lowercase;
  999. -moz-transition-duration:0.3s;
  1000. -webkit-transition-duration:0.3s;
  1001. -o-transition-duration:0.3s;
  1002. transition: all 0.3s ease-out;
  1003. }
  1004. #credit a:hover{
  1005. color:{color:hover};
  1006. -moz-transition-duration:0.3s;
  1007. -webkit-transition-duration:0.3s;
  1008. -o-transition-duration:0.3s;
  1009. transition: all 0.3s ease-out;
  1010. }
  1011. /*sidebar*/
  1012. #description {
  1013. font-size:11px;
  1014. top:180px;
  1015. padding-top:8px;
  1016. text-align:center;
  1017. color:{color:text};
  1018. z-index:-999999;
  1019. background:{color:posts};
  1020. text-transform:uppercase;
  1021. left:326px;
  1022. position:fixed;
  1023. width:120px;
  1024. border-radius:0px 0px 3px 3px;
  1025. font-weight:400;
  1026. padding:15px;
  1027. line-height:14px;
  1028. font-family: 'Source Sans Pro', sans-serif;
  1029. }
  1030. /*sidebar*/
  1031. .sidebar-title {
  1032. font-size:12px;
  1033. text-transform:uppercase;
  1034. letter-spacing:-1px;
  1035. padding-top:5px;
  1036. line-height:32px;
  1037. font-weight:700;
  1038. width:185px;
  1039. padding-left:16px;
  1040. padding-top:10px;
  1041. height:40px;
  1042. z-index:99999;
  1043. margin-left:-21px;
  1044. margin-bottom:10px;
  1045. background:{color:accent};
  1046. border-top:1px solid {color:border};
  1047. border-left:1px solid {color:border};
  1048. border-right:1px solid {color:border};
  1049. border-radius:3px;
  1050. margin-top:-21px;
  1051. text-align:left;
  1052. font-family: 'cantarell', sans-serif;
  1053. color:{color:text};
  1054. }
  1055. #sidebox {
  1056. position:absolute;
  1057. width:200px;
  1058. margin-top:244px;
  1059. margin-left:310px;
  1060. z-index:999;
  1061. -webkit-transition: all 0.4s ease-in-out;
  1062. -moz-transition: all 0.4s ease-in-out;
  1063. -o-transition: all 0.4s ease-in-out;
  1064. -ms-transition: all 0.4s ease-in-out;
  1065. transition: all 0.4s ease-in-out;
  1066. }
  1067. .box {
  1068. padding:10px;
  1069. }
  1070. #description1 {
  1071. margin:5px;
  1072. font-size:10px;
  1073. margin-top:-18px;
  1074. padding-top:8px;
  1075. z-index:-999999;
  1076. text-transform:uppercase;
  1077. background:{color:posts};
  1078. border-left:1px solid {color:border};
  1079. border-right:1px solid {color:border};
  1080. border-bottom:1px solid {color:border};
  1081. margin-left:-21px;
  1082. width:171px;
  1083. border-radius:0px 0px 3px 3px;
  1084. font-weight:400;
  1085. padding:15px;
  1086. text-align:center;
  1087. line-height:14px;
  1088. font-family: 'source sans pro', sans-serif;
  1089. }
  1090. #description1 h5 {
  1091. font-family: 'muli', sans-serif;
  1092. font-size:12px;
  1093. font-weight:500;
  1094. }
  1095. .navlinks {
  1096. z-index:9999999999;
  1097. padding:15px;
  1098. text-align:justify;
  1099. font-size:10px;
  1100. font-weight:500;
  1101. background:{color:posts};
  1102. line-height:12px;
  1103. border-radius:0px 0px 3px 3px;
  1104. border-left:1px solid {color:border};
  1105. border-right:1px solid {color:border};
  1106. border-bottom:1px solid {color:border};
  1107. font-family:'roboto', sans-serif;
  1108. margin-left:-21px;
  1109. margin-top:-16px;
  1110. margin-bottom:5px;
  1111. width:171px;
  1112. }
  1113. .navlinks a{
  1114. margin:5px;
  1115. width:140px;
  1116. height:15px;
  1117. margin-bottom:0px;
  1118. text-align:left;
  1119. padding-bottom:2px;
  1120. padding:6px;
  1121. line-height:13px;
  1122. color:{color:text};
  1123. border-bottom:1px dashed {color:border};
  1124. z-index:99999;
  1125. font-weight:400;
  1126. font-family: 'source sans pro', sans-serif;
  1127. letter-spacing:1px;
  1128. font-size:9px;
  1129. text-transform:uppercase;
  1130. text-decoration:none;
  1131. display:inline-block;
  1132. }
  1133. .navlinks a:hover {
  1134. color:{color:hover};
  1135. border-bottom:1px dashed {color:hover};
  1136. -webkit-transition: all 0.3s ease-in-out;
  1137. -moz-transition: all 0.3s ease-in-out;
  1138. -o-transition: all 0.3s ease-in-out;
  1139. -ms-transition: all 0.3s ease-in-out;
  1140. transition: all 0.3s ease-in-out;
  1141. }
  1142. {CustomCSS}</style>
  1143. </head>
  1144. <body>
  1145. <div id="headerimage"><img src="{image:header}"></div>
  1146. <!--basics-->
  1147. <!--top bar links-->
  1148. <div class="topbar">
  1149. <div id="navi">
  1150. <div class="search">
  1151. <form action="/search" method="get">
  1152. <input type="text" name="q" value="" placeholder="Search blog" />
  1153. <input type="submit" value="&#xe601;" class="sbutton" />
  1154. </form></div>
  1155. <div id="stickytitle"><i class="zmdi zmdi-chevron-right"></i> {text:small title}</div>
  1156. <div id="userrimage"><img src="{PortraitURL-128}"></a></div>
  1157. <div id="iconss">
  1158. <span class="firstlink"><a href="/"title="home">01.</a></span>
  1159. <a href="/ask"title="askbox">02.</a>
  1160. <a href="{text:link one url}"title="{text:link one}">03.</a>
  1161. <a href="{text:link two url}"title="{text:link two}">04.</a>
  1162. <a href="{text:link three url}"title="{text:link three}">05.</a></div></div>
  1163. <!--sidebar-->
  1164. <div id="sidebox">
  1165. <!--description // will appear automatically. dont edit this here -->
  1166. <div class="box">
  1167. <div class="sidebar-title"style="background:{color:accent};height:65px">
  1168. </div>
  1169. <div id="description1"><img src="{image:icon}"style="width:60px;height:60px;border-radius:100px;border:1px solid {color:posts};background:{color:posts};padding:8px;margin-left:0px;margin-top:-42px"></br></br> {description}</div>
  1170. </div>
  1171. <!--navigation // to add more links, just copy and paste the "<a href="/">navi link</a> as much as you want.-->
  1172. <div class="box">
  1173. <div class="sidebar-title"style="margin-bottom:15px;margin-left:-21px">
  1174. <f>Navigation</f>
  1175. </div>
  1176. <div class="navlinks">
  1177. <div id="all">
  1178. <a href="/">navi link</a>
  1179. <a href="/">navi link</a>
  1180. <a href="/">navi link</a>
  1181. <a href="/">navi link</a>
  1182. <a href="/">navi link</a>
  1183. </div>
  1184. </div>
  1185. </div>
  1186. </div>
  1187. </div>
  1188. </div>
  1189. </div>
  1190. <script>
  1191. var header = document.querySelector('.topbar');
  1192. var origOffsetY = header.offsetTop;
  1193.  
  1194. function onScroll(e) {
  1195. window.scrollY >= origOffsetY ? header.classList.add('sticky') :
  1196. header.classList.remove('sticky');
  1197. }
  1198.  
  1199. document.addEventListener('scroll', onScroll);
  1200. </script>
  1201. <!--posts and entries-->
  1202. <div id="entries">
  1203. {block:Posts}
  1204. <div id="post">
  1205. <div id="infot">
  1206. <div id="permalink">
  1207. <img src="{PortraitURL-128}"></a><div id="nname"><posted>posted</posted> {TimeAgo}</br> <i class="zmdi zmdi-star"></i>
  1208. {NoteCountWithLabel}
  1209. </div></a>
  1210. {block:RebloggedFrom}{block:ContentSource}
  1211. <font style="float:right;margin-right:35px;margin-top:-15px;font-weight:500"> <a href="{ReblogParentURL}" title="{ReblogParentName}"><posted><i class="zmdi zmdi-rotate-right"></i> Via</posted></a> | <a href="{SourceURL}"title="{ReblogRootName}"><posted> <i class="zmdi zmdi-pin"></i> Source</posted></a></font style>
  1212. {/block:ContentSource}
  1213. {/block:RebloggedFrom}
  1214. </div>
  1215. {/block:Date}
  1216. </div>
  1217. <!--texts-->
  1218. {block:Text}
  1219. {block:Title}<h1><center>{Title}</center></h1>{/block:Title}
  1220. {Body}
  1221. {/block:Text}
  1222. <!--question and answers-->
  1223. {block:Answer}
  1224. <div id="askingimage"><img src="{AskerPortraitURL-48}"/></div>
  1225. <div id="asker"><askerurl>{Asker} asked:</askerurl> {Question}</div>
  1226. {Answer}{/block:Answer}
  1227. <!--quotes-->
  1228. {block:Quote}
  1229. {block:Quote}
  1230. <div class="qcaption">{Quote}</div>
  1231. <div class="qsource">
  1232. {block:Source}- {Source}{/block:Source}
  1233. </div>
  1234. {/block:Quote}
  1235. <!--links-->
  1236. {block:Link}
  1237. <h2><center><a href="{URL}">{Name}</center></a></h2>
  1238. {block:Description}{Description}{/block:Description}
  1239. {/block:Link}
  1240. <!--chats-->
  1241. {block:Chat}
  1242. {block:Title}<h2>{Title}</h2>{/block:Title}
  1243. <ul class="convo">{block:Lines}<li class="line">{block:Label}<span class ="label">{Label}</span>{/block:Label}
  1244. {Line}</li>{/block:Lines}</ul>
  1245. {/block:Chat}
  1246. <!--photos-->
  1247. {block:Photo}
  1248. {LinkOpenTag}<div class="ppost"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width="100%">{LinkCloseTag}</div>
  1249. {block:Caption}<div class="pcaption">{Caption}</div>{/block:Caption}
  1250. {/block:Photo}
  1251. <!--photosets-->
  1252. {block:Photoset}
  1253. <div class="psets">{Photoset}</div>
  1254. {block:Caption}<div class="pcaption">{Caption}</div>{/block:Caption}
  1255. {/block:Photoset}
  1256. <!--videos-->
  1257. {block:Video}
  1258. <div class="vsets">{Video-500}</div>
  1259. {block:Caption}<div class="pcaption">{Caption}</div>{/block:Caption}
  1260. {/block:Video}
  1261. <!--audios-->
  1262. {block:Audio}<left>{block:AlbumArt}<img src="{AlbumArtURL}" width="60px" height="60px" align="left" style="margin-right:10px;" />{/block:AlbumArt}
  1263. {block:TrackName}<div class="audiotitle">Title: <audioinfo>{TrackName}</audioinfo><br/></div>{/block:TrackName}
  1264. {block:Artist}<div class="audioartist">Artist: <audioinfo>{Artist}</audioinfo><br/></div>{/block:Artist}
  1265. {/block:ExternalAudio}<div class="audioplayed">Played: <audioinfo>{PlayCount} times</audioinfo> </div>
  1266. </br>
  1267. <div class="audioplayr"style="background:{color:accent}">{AudioPlayer}</div>
  1268. {/block:Audio}
  1269. <!--info-->
  1270. <div id="info">
  1271. <div id="permalink">
  1272. <a href="{Permalink}"title="{TimeAgo}"><date>{DayOfMonth}. {Month} {Year}</date></a>
  1273. <font style="float:right;margin-right:70px"> <a href="{ReblogURL}" title="reblog"target="_blank" class="details"><i class="zmdi zmdi-refresh-alt"style="font-size:14px;margin-top:-25px"></i>
  1274. </a><div class="custom-like-button">{LikeButton}<span class="our_button"><i class="zmdi zmdi-favorite-outline"style="font-size:13px;margin-top:-7px"></i></span></div></font style>
  1275. </div>
  1276. {/block:Date}
  1277. {block:HasTags}<tagged>Tagged with: {block:Tags} <a href="{TagURL}"> <tagged>#{Tag}</tagged> </a> {/block:Tags}
  1278.  
  1279. {/block:HasTags}
  1280. </div></div>
  1281. {block:PostNotes} {PostNotes} {/block:PostNotes}
  1282. {/block:Posts}
  1283. {block:Pagination}
  1284. <div class="pagination"style="{color:title text}">
  1285. {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}
  1286. {/block:Pagination}</div>
  1287. </div>
  1288. <!--credit(u better dont touch this here u goof)-->
  1289. <div id="credit">
  1290. <a href="http://ceesty.com/qNgV4R"title="theme credit">Code by 1204px</a>
  1291. </div>
  1292. </html>
  1293. </body>
  1294. <!--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!