API tools faq
paste
Advertisement
cornetespoir

Noelle Theme

cornetespoir
Dec 16th, 2018
2,056
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.01 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. // [Theme]
  4.  
  5. Noelle
  6.  
  7. by eggdesigns.co //
  8.  
  9. + basic html and css knowledge is required to customize this theme
  10. + feel free to edit and custom the theme to your liking,
  11. but don't redistribute, use as a base, or claim as your own
  12. + please do not move or remove the credit
  13.  
  14. Credits
  15. + icon font by themehive.co
  16. + CSS Tooltips https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346
  17.  
  18. Version 1.0
  19.  
  20. -->
  21.  
  22. <!DOCTYPE html>
  23.  
  24. <html>
  25.  
  26. <head>
  27.  
  28. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  29. <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
  30. <link href="https://fonts.googleapis.com/css?family=Lora:400,700i|Barlow" rel="stylesheet">
  31.  
  32. <script src="//dl.dropbox.com/s/whfh5jye6fmsf1g/c.js">
  33. </script>
  34. <script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.4.2/css-doodle.min.js"></script>
  35. <script>
  36. $(document).ready(function(){
  37. $('#more, #close').click(function(){
  38. $('.menu').toggleClass('open');
  39. });
  40. });
  41. </script>
  42. <title>{Title}</title>
  43. <link rel="shortcut icon" href="{favicon}">
  44. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  45. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  46. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  47.  
  48.  
  49. <!-- image options -->
  50. <meta name="image:background" content="" />
  51. <meta name="image:sidebar" content="https://66.media.tumblr.com/53bf9c05c4aeb84b529765604402c67a/tumblr_nvyhjnRLoE1tzfko6o9_1280.jpg" />
  52. <meta name="image:header" content="https://66.media.tumblr.com/b0b976278b72e5d4b49cbbc854391856/tumblr_p0lxa4cWre1v7utpzo1_1280.jpg" />
  53.  
  54. <!-- color options -->
  55. <meta name="color:background" content="#f5f5f5" />
  56. <meta name="color:posts" content="#fff" />
  57. <meta name="color:text" content="#000" />
  58. <meta name="color:links" content="#cc3434" />
  59. <meta name="color:link hover" content="#beefed" />
  60. <meta name="color:bold" content="#7a7a7a" />
  61. <meta name="color:italic" content="#bbb" />
  62. <meta name="color:usernames" content="#a85060" />
  63. <meta name="color:scrollbar" content="#7a7a7a" />
  64. <meta name="color:selection" content="#fff" />
  65. <meta name="color:selection bg" content="#7b7b7b" />
  66. <meta name="color:speechbubble" content="#992727" />
  67. <meta name="color:speechbubble text" content="#fff" />
  68. <meta name="color:quote post" content="#cc3434" />
  69. <meta name="color:quote post text" content="#fff" />
  70. <meta name="color:quote post link" content="#222" />
  71. <meta name="color:audio post" content="#cc3434" />
  72. <meta name="color:audio post text" content="" />
  73. <meta name="color:link post" content="#cc3434" />
  74. <meta name="color:link post link" content="#fff" />
  75. <meta name="color:current page" content="#fff" />
  76. <meta name="color:current page text" content="#444" />
  77. <meta name="color:pagination text" content="#fff" />
  78. <meta name="color:jump page" content="#cc3434" />
  79.  
  80. <!-- text options -->
  81. <meta name="text:tag symbol" content="#" />
  82. <meta name="text:asked" content="shouted" />
  83. <meta name="text:current" content="star-o" />
  84.  
  85.  
  86. <!-- other options -->
  87. <meta name="if:full background" content="" />
  88.  
  89. <style type="text/css">
  90.  
  91.  
  92. /**
  93.  
  94. CSS editing directory
  95.  
  96. Labeled sections for easier navigating
  97.  
  98. 01. Controls - tumblr controls, selection, and scrollbar
  99. 02. General - body, links, headings, etc
  100. 03. Sidebar - sidbear, description, icon
  101. 04. Tabs - tab links and content styling
  102. 05. Posts - container, posts, post styles
  103. 06. Blogroll - follower icons and container
  104.  
  105. **/
  106.  
  107. /* ------------
  108.  
  109. 01. Controls
  110.  
  111. ------------ */
  112.  
  113.  
  114.  
  115. /* Scrollbar + Selection */
  116.  
  117. ::-webkit-scrollbar {
  118. width: 18px;
  119. height:6px;
  120. }
  121.  
  122. ::-webkit-scrollbar-button {
  123. width: 0px;
  124. height: 0px;
  125. }
  126. ::-webkit-scrollbar-thumb {
  127. background:{color:links};
  128. border:6px solid #f8f8f8;
  129. border-top:4px solid #f8f8f8;
  130. border-bottom:4px solid #f8f8f8;
  131. cursor:pointer;
  132. border-radius: 8px;
  133. }
  134. ::-webkit-scrollbar-track {
  135. background:#dfdfdf;
  136. border: 8px solid #f8f8f8;
  137. border-top:12px solid #f8f8f8;
  138. border-bottom:12px solid #f8f8f8;
  139.  
  140. }
  141.  
  142. ::-moz-selection {background:{color:selection bg};color:{color:selection}}
  143. ::selection {background:{color:selection bg};color:{color:selection};}
  144.  
  145. /* ------------
  146.  
  147. 02. General
  148.  
  149. ------------ */
  150.  
  151. * {
  152. box-sizing:border-box;
  153. }
  154.  
  155. :before, :after {
  156. content:'';
  157. }
  158. body {
  159. background:{color:background} url({image:background})
  160. {block:iffullbackground} no-repeat center center fixed;
  161. background-size: cover; {/block:iffullbackground};
  162. background-attachment:fixed;
  163. color:{color:text};
  164. font-family:Barlow;
  165. font-size: 16.2px;
  166. transition:.6s;
  167. word-wrap:break-word;
  168. line-height:160%;
  169. overflow-x:hidden;
  170. }
  171.  
  172.  
  173. body.nightmode {
  174. background:#111;
  175. color:#fff;
  176. }
  177.  
  178. body.nightmode article {
  179. background:#222;
  180. }
  181.  
  182. body.nightmode a {
  183. }
  184.  
  185. body.nightmode .info {
  186. border-color:{color:links};
  187. }
  188.  
  189. body.nightmode aside div, body.nightmode aside li, body.nightmode aside img {
  190. border-color:transparent;
  191. }
  192.  
  193. body.nightmode .info a {
  194. color:#eee;
  195. }
  196.  
  197.  
  198. a {
  199. text-decoration: none;
  200. color:{color:links};
  201. transition:.5s;
  202.  
  203. }
  204.  
  205. a:hover {
  206. color:{color:link hover};
  207. transition:.5s;
  208. }
  209.  
  210. h1 {
  211. text-align:center;
  212. padding:20px;
  213. font-family: Lora;
  214. letter-spacing:2px;
  215. font-style:italic;}
  216.  
  217. h2 {
  218. text-align:center;
  219. padding:20px;
  220. font-family: Lora;
  221. font-weight:normal;
  222. font-style:italic;}
  223.  
  224. b {color:{color:bold}; font-weight:bold; }
  225. i {color:{color:italic}; font-style:italic;}
  226.  
  227.  
  228. /* ------------
  229.  
  230. 03. Sidebar
  231.  
  232. ------------ */
  233.  
  234. aside {
  235. position:fixed;
  236. height:100vh;
  237. left:0px;
  238. box-shadow:4px 0px 60px rgba(0,0,0,.08);
  239. top:0px;
  240. width:14%;
  241. max-width:180px;
  242. background-size:cover;
  243. background:url({image:sidebar}) fixed;
  244.  
  245.  
  246. }
  247.  
  248. .sidebar {
  249. position:absolute;
  250. z-index:2;
  251. width:100%;
  252. height:100%;
  253. display:flex;
  254. align-items:center;
  255. flex-wrap:wrap;
  256. justify-content:center;
  257. color:white;
  258. font-size:2em;
  259. }
  260.  
  261. .avatar {
  262. align-self:flex-start;
  263.  
  264. width:100%;
  265.  
  266. }
  267.  
  268. .avatar img {
  269. display:block;
  270. margin-left:auto;
  271. margin-right:auto;
  272. width:56%;
  273. box-shadow:4px 4px 40px rgba(0,0,0,.34);
  274. border-radius:4px;
  275. margin-top:30px;
  276. transition:.6s;
  277. }
  278.  
  279. .avatar img:hover {
  280. box-shadow:0 0 0 0 transparent;
  281. }
  282.  
  283. .sidetext {
  284. transform:rotate(-90deg);
  285. letter-spacing:14px;
  286. font-family:Lora;
  287. }
  288.  
  289. aside:before {
  290. width:100%;
  291. height:100%;
  292. background:rgba(0,0,0,.16);
  293. position:absolute;
  294. }
  295.  
  296.  
  297.  
  298.  
  299. nav li {
  300. display:inline-block;
  301. list-style:none;
  302. padding:20px;
  303. }
  304.  
  305. .cont {
  306. display:flex;
  307. border-top:1px solid #eee;
  308. padding:20px;
  309. position:relative;
  310. overflow:hidden;
  311. }
  312.  
  313. .menu {
  314. position:absolute;
  315. width:100%;
  316. margin-top:-100%;
  317. height:100%;
  318. transition:.6s;
  319. background:white;
  320. }
  321.  
  322. .menu li {
  323. display:inline-block;
  324. padding:10px;
  325. width:26%;
  326. margin:10px;
  327. border-bottom:1px solid #eee;
  328. }
  329.  
  330. #close {
  331. position:absolute;
  332. right:50px;
  333. border:2px solid {color:links};
  334. border-radius:100%;
  335. padding:8px;
  336. cursor:pointer;
  337.  
  338.  
  339. }
  340.  
  341.  
  342.  
  343. #more {
  344. border:2px solid {color:links};
  345. border-radius:3.4px;
  346. padding:6px 12px;
  347. cursor:pointer;
  348. }
  349. #more:hover, #close:hover {
  350. color:white;
  351. background:{color:links};
  352. }
  353.  
  354. .menu.open {
  355. margin-top:0;
  356. }
  357. .bio, .image {
  358. width:50%;
  359. }
  360.  
  361. .bio {
  362.  
  363. padding:24px;
  364. }
  365. .bio b {
  366. font-family:lora;
  367. font-size:1.4em;
  368. font-style:italic;
  369. }
  370. /* ------------
  371.  
  372. 05. Posts
  373.  
  374. ------------ */
  375.  
  376.  
  377. .container{
  378. width:60%;
  379. margin:150px auto;
  380.  
  381. }
  382.  
  383. .posts, ol.notes {
  384. width:100%;
  385. max-width:700px;
  386. margin:150px auto 100px 14%;
  387. background:{color:posts};
  388. transition:.5s;
  389. box-shadow:2px 2px 30px rgba(0,0,0,.04);
  390. border-radius:8px;
  391. {block:permalinkpage}
  392. max-width:800px;
  393. {/block:permalinkpage}
  394.  
  395.  
  396. }
  397.  
  398. ol.notes {
  399. line-height:220%;
  400. }
  401.  
  402. .posts img, .posts iframe {
  403. display:block;
  404. }
  405.  
  406. ol.notes img {
  407. width:16px;
  408. }
  409.  
  410.  
  411. /* Usernames */
  412.  
  413. .user, .deactivated, .tumblelog, ol.notes .like .action a {
  414. margin:6px;
  415. margin-left:20px;
  416. padding:4px;
  417. font-family: 'Barlow Semi Condensed', sans-serif;
  418. border-radius:4px;
  419. border:none;
  420. position:relative;
  421. background:rgba({RGBcolor:usernames}, .12)
  422. }
  423.  
  424. .user:after, .deactivated:after, .tumblelog:after, ol.notes .like .action a:after
  425. {
  426. content: '';
  427. position: absolute;
  428. border-style: solid;
  429. border-width: 8px 13px 8px 0;
  430. border-color: transparent rgba({RGBcolor:usernames}, .12); /* keep same color as bubble */
  431. display: block;
  432. width: 0;
  433. z-index: 1;
  434. left: -13px;
  435. top: 6px;
  436. }
  437.  
  438. .caption, .info {
  439. padding:20px;
  440. }
  441.  
  442. .quote {
  443. background:{color:quote post};
  444. color:{color:quote post text};
  445. }
  446.  
  447. .quote a {
  448. color:{color:quote post link};
  449. }
  450. /* chat posts */
  451.  
  452. .chat {
  453. padding:5px;
  454. line-height:150%;
  455. }
  456.  
  457. .chat:nth-of-type(odd) {
  458. background:{color:links};
  459. color:{color:posts};
  460. -webkit-transition:.5s;
  461. transition:.5s; }
  462.  
  463. .chat:nth-of-type(odd) b {
  464. color:{color:posts};
  465. -webkit-transition:.5s;
  466. transition:.5s; }
  467.  
  468. .chat:nth-of-type(even) {
  469. background:{color:posts};
  470. color:{color:links};
  471. -webkit-transition:.5s;
  472. transition:.5s; }
  473. .chat:nth-of-type(even) b{
  474. color:{color:links};
  475. -webkit-transition:.5s;
  476. transition:.5s; }
  477.  
  478. /* audio posts */
  479.  
  480. .audiopost {
  481. width:100%;
  482. height:120px;
  483. border-radius:6px;
  484. overflow:hidden;
  485.  
  486. }
  487.  
  488. #albumart{
  489. z-index:2;
  490. width:120px;
  491. float:left;
  492. height:120px;
  493. }
  494.  
  495. .playerbox {
  496. float:left;
  497. }
  498.  
  499.  
  500. #albumart img{
  501. width:120px;
  502. height:120px;
  503. float:left;
  504. border-width:0px; transition:.6s;
  505. }
  506.  
  507.  
  508. .player {
  509. width:30px;
  510. overflow:hidden;
  511. height:40px;
  512. transform:scale(1.2);
  513. border-radius:100%;
  514. top:8px;
  515. bottom:10px;
  516. left:4px;
  517. padding:8px;
  518. padding-top:6px;
  519. padding-left:8px;
  520. padding-bottom:0px;
  521. border-radius:100%;
  522. position:absolute;
  523.  
  524. }
  525.  
  526.  
  527. .playercon {
  528. width:56px;
  529. height:56px;
  530. border-radius:100%;
  531. left:0px;
  532. background:#f3f3f3;
  533. top:32px;
  534. position:relative;
  535.  
  536. }
  537.  
  538.  
  539. .infobox {
  540. float:left top;
  541. margin-left:110px;
  542. background-color:{color:audio post};
  543. padding:14px;
  544. height:120px;
  545. padding-left:20px;
  546. color:{color:audio post text};
  547. }
  548.  
  549. .track {
  550.  
  551. font-size:1em;
  552. letter-spacing:2px;
  553. padding:2px;
  554. font-weight:bold;
  555. transition:.6s;
  556. }
  557. .artist {
  558. letter-spacing:2px;
  559. padding:2px;
  560. font-size:.92em;
  561. }
  562.  
  563. .album {
  564. font-size:1em;;
  565.  
  566. }
  567.  
  568. .playcount {
  569. font-size:9px;
  570. text-transform:uppercase;
  571. letter-spacing:3px;
  572. }
  573. .th-right-direction {
  574. transition:.2s;
  575. }
  576. .biglink:hover .th-right-direction {
  577. margin-left:6px;
  578. transition:.2s;
  579. }
  580.  
  581. /* ask posts */
  582.  
  583. .speechbubble {
  584. width:80%;
  585. margin:20px;position: relative;
  586. background:{color:speechbubble};
  587. left:70px;
  588. color:{color:speechbubble text};
  589. margin: 20px 0;
  590. padding:10px;
  591. text-align:left;
  592. border-radius:10px;
  593. box-shadow: 0px 0 1px rgba(0,0,0,0);
  594. }
  595.  
  596. .speechbubble a {
  597. color:{color:speechbubble text};
  598. }
  599. .speechbubble:after {
  600. position: absolute;
  601. content: "";
  602. border-color: {color:speechbubble} transparent transparent transparent;
  603. border-style: solid;
  604. border-width: 15px 15px 0px;
  605. height:0;
  606. width:0;
  607. position:absolute;
  608. left:-15px;
  609. top:10px;
  610. }
  611.  
  612. /* post info */
  613.  
  614. .info {
  615. z-index:999;
  616. border-top:1px solid #eee;
  617. }
  618.  
  619.  
  620. .notec {
  621. position:absolute;
  622. width:calc(100% - 50px);
  623. top:0px;
  624. left:0px;
  625. margin-left:50px;
  626. height:100%;
  627. }
  628.  
  629. .notec a {
  630. position:absolute;
  631. right:0px;
  632. top:25%;
  633. padding:2px 10px;
  634. background:{color:posts};
  635. }
  636.  
  637. .notec:before {
  638. width:100%;
  639. left:0px;
  640. height:2px;
  641. border-radius:10px;
  642. background:linear-gradient(to left, {color:accent 3}, {color:accent 2}, {color:accent 4});
  643. content:'';
  644. top:50%;
  645. bottom:50%;
  646. position:absolute;
  647. }
  648.  
  649. .topinfo .th {
  650. padding:10px;
  651. border-radius:100%;
  652. background:{color:accent 1};
  653. }
  654.  
  655. /* pagination */
  656.  
  657. #pagination {
  658. margin: 100px auto 100px 250px;
  659. left: 0;
  660. right: 0;
  661.  
  662. z-index:99999;
  663. text-align: center;
  664. position: relative;
  665.  
  666. width:calc(100% - 250px);
  667.  
  668. display:block;
  669.  
  670. }
  671.  
  672.  
  673. #pagination a, .jump_page, .current_page {
  674. margin: 0 4px;
  675. display: inline-block;
  676. width: 40px;
  677. height: 40px;
  678. text-align: center;
  679. background: {color:jump page};
  680. border-radius: 100%;
  681. color:{color:pagination text};
  682. line-height: 42px;
  683.  
  684. }
  685.  
  686. .currentpage {
  687. background: {color:jump page};
  688. color:{color:pagination text};
  689. padding:10px;
  690. margin:10px;
  691. border-radius:30px;
  692. }
  693.  
  694. .current_page {
  695. background: {color:current page};
  696. color:{color:current page text};
  697. }
  698.  
  699.  
  700. /* ------------
  701.  
  702. 06. Blogroll
  703.  
  704. ------------ */
  705.  
  706. #content {
  707. margin:0 auto;
  708. width:100%;
  709. }
  710.  
  711. /** ICONS **/
  712. #content img{
  713. margin-left:10px;
  714. width:50px;
  715. padding:4px;
  716. }
  717.  
  718.  
  719. @media (min-width:1225px){
  720.  
  721.  
  722. .posts, ol.notes {
  723. margin-left:180px;
  724. }
  725.  
  726. }
  727.  
  728. @media (max-width:900px){
  729.  
  730. aside {
  731. display:none;
  732.  
  733. }
  734. .container {
  735. transform:translate(0,0);
  736. margin:60px auto;
  737.  
  738. }
  739.  
  740. .posts {
  741. margin:100px auto 20px auto;
  742. }
  743.  
  744. }
  745.  
  746.  
  747.  
  748.  
  749. @media (max-width:700px){
  750.  
  751. .container {
  752. margin:50px auto;
  753. width:100%;
  754. }
  755. .posts {
  756. width:80%;
  757. }
  758. .posts:before {
  759. display:none;
  760. }
  761.  
  762. ul.tabs {
  763. top:0px!important;
  764. margin-top:0px;
  765. margin:auto;
  766. text-align:center;
  767. width:100%;
  768. right:0px;
  769. background:white;
  770. transform:translate(0%, 0);
  771. padding:0;
  772. z-index:9999999;
  773. position:fixed;
  774. }
  775.  
  776. ul.tabs li {
  777. margin-top:10px;
  778. margin-left:20px;
  779.  
  780. }
  781.  
  782. .sidecon:before {
  783. display:none;
  784. }
  785.  
  786. ul.tabs li:after,
  787. ul.tabs li.current:after {
  788. display:none;
  789. }
  790.  
  791. }
  792.  
  793.  
  794. @media (max-width:400px){
  795.  
  796. .posts {
  797. width:90%!important;
  798.  
  799. }
  800.  
  801.  
  802.  
  803. }
  804.  
  805.  
  806. #egg {
  807. right:10px; bottom:10px;
  808. position:fixed;
  809. display:block;
  810. width: 14px; height: 18px;
  811. background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  812. border:1px solid #aaa;
  813. z-index:4;
  814. transform:scale(1.02);
  815. }
  816. #egg:hover { animation-name: egg;
  817. animation-duration: 1s;
  818. animation-iteration-count: infinite;}
  819. @keyframes egg{
  820. 0%{}
  821. 10%{transform:rotate(20deg) scale(1.12)}
  822. 80%{transform:rotate(-20deg)}
  823. 100%{}
  824. }
  825.  
  826. [tooltip] {
  827. position: relative;
  828. z-index: 9;
  829. cursor: pointer;
  830. }
  831.  
  832. /* Hide the tooltip content by default */
  833. [tooltip]:before,
  834. [tooltip]:after {
  835. visibility: hidden;
  836. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  837. filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  838. opacity: 0;
  839. pointer-events: none;
  840. }
  841.  
  842. /* Position tooltip above the element */
  843. [tooltip]:before {
  844. position: absolute;
  845. bottom: 154%;
  846. left: 50%;
  847. margin-bottom: 4px;
  848. margin-left: -40px;
  849. padding: 6px;
  850. width: 80px;
  851. -webkit-border-radius: 3px;
  852. -moz-border-radius: 3px;
  853. border-radius: 3px;
  854. background-color: #333;
  855. color: #fff;
  856. content: attr(tooltip);
  857. text-align: center;
  858. font-size: 14px;
  859. line-height: 1.2;
  860. }
  861.  
  862.  
  863. aside [tooltip]:before, aside [tooltip]:after {
  864. bottom:100%;
  865. }
  866.  
  867. /* Triangle hack to make tooltip look like a speech bubble */
  868. [tooltip]:after {
  869. position: absolute;
  870. bottom: 154%;
  871. left: 50%;
  872. margin-left: -4px;
  873. width: 0;
  874. border-top: 6px solid #333;
  875. border-right: 6px solid transparent;
  876. border-left: 5px solid transparent;
  877. content: " ";
  878. font-size: 0;
  879. line-height: 0;
  880. }
  881.  
  882. /* Show tooltip content on hover */
  883. [tooltip]:hover:before,
  884. [tooltip]:hover:after {
  885. visibility: visible;
  886. transition:.6s;
  887. -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  888. filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  889. opacity: 1;
  890. }
  891.  
  892. {CustomCSS}
  893. </style>
  894. </head>
  895.  
  896. <body>
  897.  
  898.  
  899. <main class="container">
  900.  
  901. <aside>
  902. <div class="sidebar">
  903. <div class="avatar">
  904. <img src="{PortraitURL-128}">
  905. </div>
  906. <div class="sidetext">{Title}</div>
  907. </div>
  908. </aside>
  909.  
  910.  
  911.  
  912. <nav class="posts">
  913. <li> <a href="/">Home</a> </li>
  914. {block:askenabled}
  915. <li> <a href="/ask">Ask</a> </li>
  916. {/block:askenabled}
  917. {block:submissionsenabled}
  918. <li> <a href="/submit">Submit</a> </li>
  919. {/block:submissionsenabled}
  920. <li> <a href="/archive">Archive</a> </li>
  921.  
  922. <div class="cont">
  923. <div class="menu">
  924. <span id="close" class="th th-cross"></span>
  925. {block:haspages}
  926. {block:pages}
  927. <li><a href="{URL}">
  928. {label}
  929. </a>
  930. </li>
  931. {/block:pages}
  932. {/block:haspages}
  933. </div>
  934. <div class="bio">
  935. <b>About {name}</b>
  936. <p>{Description}</p>
  937. <p><a id="more">Explore</a>
  938. </div>
  939. <div class="image" style="background:url({image:header}); background-size:cover;">
  940.  
  941. </div>
  942. </div>
  943. </nav>
  944.  
  945. {block:Posts}<article class="posts">
  946.  
  947.  
  948. <!-- {block:NoRebloggedFrom}
  949. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  950. {/block:NoRebloggedFrom} -->
  951. {block:ContentSource}
  952. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  953. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  954. {/block:SourceLogo}
  955. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  956. {/block:ContentSource}
  957. {block:Text}
  958.  
  959. {block:Title}
  960. <h2><a href="{Permalink}">{Title}</a></h2>
  961. {/block:Title}
  962.  
  963. <div class="caption">{block:NotReblog}
  964. <figcaption>
  965. {Body}
  966. </figcaption>
  967. {/block:NotReblog}
  968.  
  969. {block:RebloggedFrom}
  970. <div class="reblog-list">
  971. {block:Reblogs}
  972. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  973. <div class="reblog-header">
  974.  
  975. {block:IsActive}
  976. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  977. <img src="{PortraitURL-64}" style="width:24px; float:left">
  978. </a>
  979. {/block:IsActive}
  980.  
  981. {block:IsDeactivated}
  982. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  983. <img src="{PortraitURL-64}" style="width:24px; float:left">
  984. </span>
  985. {/block:IsDeactivated}
  986.  
  987. {block:IsActive}
  988. <a target="_blank" href="{Permalink}" class="user"> {Username}</a>
  989. {/block:IsActive}
  990.  
  991. {block:IsDeactivated}
  992. <span class="inactive deactivated">{Username}</span>
  993. {/block:IsDeactivated}
  994.  
  995. </div>
  996. <div class="reblog-content">
  997. {Body}
  998. </div>
  999. </div>
  1000. {/block:Reblogs}
  1001. </div>
  1002. {/block:RebloggedFrom}
  1003.  
  1004. </div>
  1005.  
  1006.  
  1007.  
  1008. {/block:Text}{block:Photo}
  1009.  
  1010. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" style="width:100%"/>
  1011. {block:Caption}
  1012. <div class="caption"> {block:NotReblog}
  1013. <figcaption>
  1014. {Caption}
  1015. </figcaption>
  1016. {/block:NotReblog}
  1017.  
  1018. {block:RebloggedFrom}
  1019. <div class="reblog-list">
  1020. {block:Reblogs}
  1021. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1022. <div class="reblog-header">
  1023.  
  1024. {block:IsActive}
  1025. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1026. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1027. </a>
  1028. {/block:IsActive}
  1029.  
  1030. {block:IsDeactivated}
  1031. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1032. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1033. </span>
  1034. {/block:IsDeactivated}
  1035.  
  1036. {block:IsActive}
  1037. <a target="_blank" href="{Permalink}" class="user">{Username}</a>
  1038. {/block:IsActive}
  1039.  
  1040. {block:IsDeactivated}
  1041. <span class="inactive deactivated">{Username}</span>
  1042. {/block:IsDeactivated}
  1043.  
  1044. </div>
  1045. <div class="reblog-content">
  1046. {Body}
  1047. </div>
  1048. </div>
  1049. {/block:Reblogs}
  1050. </div>
  1051. {/block:RebloggedFrom}</div>
  1052. {/block:Caption}
  1053.  
  1054. {/block:Photo}{block:Panorama}
  1055.  
  1056. {LinkOpenTag}
  1057. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  1058. {LinkCloseTag}{block:Caption}
  1059. <div class="text">{Caption}</div>
  1060. {/block:Caption}
  1061.  
  1062. {/block:Panorama}{block:Photoset}
  1063.  
  1064. {Photoset}
  1065.  
  1066. {block:Caption}
  1067. <div class="caption"> {block:NotReblog}
  1068. <figcaption>
  1069. {Caption}
  1070. </figcaption>
  1071. {/block:NotReblog}
  1072.  
  1073. {block:RebloggedFrom}
  1074. <div class="reblog-list">
  1075. {block:Reblogs}
  1076. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1077. <div class="reblog-header">
  1078.  
  1079. {block:IsActive}
  1080. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1081. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1082. </a>
  1083. {/block:IsActive}
  1084.  
  1085. {block:IsDeactivated}
  1086. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1087. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1088. </span>
  1089. {/block:IsDeactivated}
  1090.  
  1091. {block:IsActive}
  1092. <a target="_blank" href="{Permalink}" class="user">{Username}</a>
  1093. {/block:IsActive}
  1094.  
  1095. {block:IsDeactivated}
  1096. <span class="inactive deactivated">{Username}</span>
  1097. {/block:IsDeactivated}
  1098.  
  1099. </div>
  1100. <div class="reblog-content">
  1101. {Body}
  1102. </div>
  1103. </div>
  1104. {/block:Reblogs}
  1105. </div>
  1106. {/block:RebloggedFrom}</div>
  1107. {/block:Caption}
  1108.  
  1109. {/block:Photoset}{block:Quote}
  1110. <div class="quote" style="text-align:center; padding:40px">
  1111. <span style="font-size:1.2em"> "{Quote}" </span>
  1112. <br>
  1113. {block:Source}
  1114. <small> {Source}</small>
  1115. {/block:Source}
  1116. </div>
  1117. {/block:Quote}{block:Link}
  1118. <div class="caption"><p>
  1119. <big style="padding:10px; background:{color:link post}; width:100%; border-radius:8px" class="biglink"> <span style="padding:4px; font-size:.8em ; border-radius:4px; background:{color:link post link}; color:{color:link post};" class="th th-link-o"></span> <a href="{URL}" style="color:{color:link post link}; margin-left:6px" {Target}>{Name} <span class="th th-right-direction" style="transform:translateY(1px); font-size:.9em;"></span></a> </span></big>
  1120.  
  1121. {block:Description}
  1122. <div style="padding:10px 0"> {Description}</div>
  1123. {/block:Description}
  1124. </div>
  1125. {/block:Link}
  1126.  
  1127. {block:Chat}
  1128. <div class="caption">{block:Title}<h2>{title}</h2>{/block:Title}{block:Lines}<div class="chat">{block:Label}<b>{Label}</b>{/block:Label} {Line}<br/></div>{/block:Lines}</div>{/block:Chat}
  1129.  
  1130.  
  1131. {block:Video}
  1132.  
  1133. {Video-500}
  1134. {block:Caption}
  1135. <div class="caption"> {block:NotReblog}
  1136. <figcaption>
  1137. {Caption}
  1138. </figcaption>
  1139. {/block:NotReblog}
  1140.  
  1141. {block:RebloggedFrom}
  1142. <div class="reblog-list">
  1143. {block:Reblogs}
  1144. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1145. <div class="reblog-header">
  1146.  
  1147. {block:IsActive}
  1148. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1149. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1150. </a>
  1151. {/block:IsActive}
  1152.  
  1153. {block:IsDeactivated}
  1154. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1155. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1156. </span>
  1157. {/block:IsDeactivated}
  1158.  
  1159. {block:IsActive}
  1160. <a target="_blank" href="{Permalink}" class="user">{Username}</a>
  1161. {/block:IsActive}
  1162.  
  1163. {block:IsDeactivated}
  1164. <span class="inactive deactivated">{Username}</span>
  1165. {/block:IsDeactivated}
  1166.  
  1167. </div>
  1168. <div class="reblog-content">
  1169. {Body}
  1170. </div>
  1171. </div>
  1172. {/block:Reblogs}
  1173. </div>
  1174. {/block:RebloggedFrom}</div>
  1175. {/block:Caption}
  1176.  
  1177. {/block:Video}{block:Audio} <div class="audiopost">
  1178. <div class="playerbox">
  1179. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1180.  
  1181. <center><div class="playercon"><div class="player">{AudioPlayerWhite}</div></div></center></div>
  1182. <div class="infobox">
  1183. <div class="track"> {block:TrackName}
  1184. Track: {TrackName}
  1185. {/block:TrackName} </div>
  1186.  
  1187.  
  1188. <div class="artist">
  1189. {block:Artist}
  1190.  
  1191. Artist: {Artist}
  1192. {/block:Artist} </div>
  1193.  
  1194.  
  1195. </div> </div> <br>
  1196. {block:Caption}
  1197. <div class="caption"> {block:NotReblog}
  1198. <figcaption>
  1199. {Caption}
  1200. </figcaption>
  1201. {/block:NotReblog}
  1202.  
  1203. {block:RebloggedFrom}
  1204. <div class="reblog-list">
  1205. {block:Reblogs}
  1206. <div class="{block:isOriginalEntry}original-reblog{/block:isOriginalEntry}">
  1207. <div class="reblog-header">
  1208.  
  1209. {block:IsActive}
  1210. <a class="{block:isNotOriginalEntry}sub-reblog{/block:isNotOriginalEntry}" href="{Permalink}" target="_blank">
  1211. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1212. </a>
  1213. {/block:IsActive}
  1214.  
  1215. {block:IsDeactivated}
  1216. <span class="inactive {block:isNotOriginalEntry} sub-reblog{/block:isNotOriginalEntry}">
  1217. <img src="{PortraitURL-64}" style="width:24px; float:left">
  1218. </span>
  1219. {/block:IsDeactivated}
  1220.  
  1221. {block:IsActive}
  1222. <a target="_blank" href="{Permalink}" class="user">{Username}</a>
  1223. {/block:IsActive}
  1224.  
  1225. {block:IsDeactivated}
  1226. <span class="inactive deactivated">{Username}</span>
  1227. {/block:IsDeactivated}
  1228.  
  1229. </div>
  1230. <div class="reblog-content">
  1231. {Body}
  1232. </div>
  1233. </div>
  1234. {/block:Reblogs}
  1235. </div>
  1236. {/block:RebloggedFrom}</div>
  1237. {/block:Caption}
  1238. {/block:Audio}
  1239.  
  1240.  
  1241.  
  1242. {block:Answer}
  1243.  
  1244. <div class="caption">
  1245. <div class="askerportrait"><img style=" margin-left:10px; margin-top:10px; border-radius:10px;" src="{AskerPortraitURL-40}" align="left" /></div><div class="speechbubble">{Asker} shouted: {Question}</div> {answer}
  1246.  
  1247. </div>
  1248. {/block:Answer}
  1249. {block:date}
  1250. <div class="info">
  1251. <div style="float:right">
  1252. <a href="{permalink}"><span class="th th-chat-bubble-o"></span> {NoteCount}
  1253. {block:permalinkpage}
  1254. {block:rebloggedfrom}<br> <a href="{ReblogParentURL}">Via {ReblogParentName}</a> / <a href="{ReblogRootURL}">Source: {Reblogrootname}</a> {/block:rebloggedfrom} {/block:permalinkpage}
  1255. </a>
  1256. </div>
  1257. <a href="/day/{year}/{monthnumberwithzero}/{dayofmonthwithzero}" tooltip="at {12hour}:{minutes}{AmPM}" >{lang:Posted TimeAgo}</a> <br>{block:HasTags}{block:tags}<a href="{tagURL}">#{tag}</a> {/block:tags}{/block:HasTags}</div> {/block:date}
  1258.  
  1259. </article><br><!--posts end-->{/block:Posts}
  1260. <center>
  1261. {block:Pagination}
  1262. <div id="pagination">
  1263. {block:previousPage} <span class ="jump_page"><a href="{PreviousPage}"> <span class="th th-left-direction"></span></a></span>{/block:PreviousPage}
  1264.  
  1265. {block:JumpPagination length="5"}
  1266. {block:CurrentPage}
  1267. <span class="current_page th th-{text:current}"></span>
  1268. {/block:CurrentPage}
  1269.  
  1270. {block:JumpPage}
  1271. <a class="jump_page" href="{URL}">{PageNumber}</a>
  1272. {/block:JumpPage}
  1273. {/block:JumpPagination}
  1274.  
  1275. {block:NextPage} <span class="jump_page">
  1276. <a href="{NextPage}"> <span class="th th-right-direction"></span> </a>
  1277. </span>{/block:NextPage}
  1278. </div>
  1279. {/block:Pagination}
  1280.  
  1281. {block:DayPagination}{block:PreviousDayPage}
  1282. <a href="{PreviousDayPage}" class="jump_page">
  1283. <span class="th th-left-direction"></span>
  1284. </a>
  1285. {/block:PreviousDayPage}
  1286.  
  1287. {block:PreviousDayPage}
  1288. <span class="currentpage"> {lang:Previous}: {ShortMonth} {Dayofmonth} </span>
  1289. {/block:PreviousDayPage}
  1290. {block:NextDayPage}
  1291. <span class="currentpage">{lang:Next}: {ShortMonth} {Dayofmonth} </span>
  1292. {/block:NextDayPage}
  1293. {block:NextDayPage}
  1294. <a href="{NextDayPage}" class="jump_page">
  1295. <span class="th th-right-direction"></span>
  1296. </a>
  1297. {/block:NextDayPage}{/block:DayPagination}
  1298. {block:PermalinkPagination}
  1299. {block:PreviousPost}
  1300. <a href="{PreviousPost}" class="jump_page"><span class="th th-left-direction"></span></a>
  1301. {/block:PreviousPost}
  1302.  
  1303. {block:NextPost}
  1304. <a href="{NextPost}" class="jump_page"><span class="th th-right-direction"></span></a>
  1305. {/block:NextPost}
  1306. {/block:PermalinkPagination} </center>
  1307.  
  1308. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1309. <!--container end-->
  1310.  
  1311.  
  1312. </main>
  1313.  
  1314. {block:ContentSource}
  1315. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1316. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1317. {/block:SourceLogo}
  1318. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1319. {/block:ContentSource}
  1320.  
  1321. <a id="egg" href="http://eggdesigns.co"></a>
  1322.  
  1323. </body>
  1324.  
  1325. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!