API tools faq
paste
atlasthemes

untitled 3

atlasthemes
Mar 26th, 2019
345
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.19 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------------------------------
  2.  
  3. all-in-one #2 sidebar theme
  4. by @atlasthemes
  5. pls do not remove credit
  6. thanks!<3
  7.  
  8.  
  9. all-in-one tab code via
  10. neonbikethemes.tumblr.com
  11.  
  12. ------------------------------------------------------------------------->
  13.  
  14. <html>
  15. <head>
  16. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  20.  
  21.  
  22. <!--- meta --->
  23.  
  24. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  25.  
  26. <meta name="image:project one" content=""/>
  27. <meta name="image:project two" content=""/>
  28.  
  29. <meta name="color:link" content="#aaaaaa" />
  30. <meta name="color:text" content="#555555" />
  31. <meta name="color:accent" content="#ffabab">
  32. <meta name="color:light accent" content="#ffe3e3">
  33.  
  34. <meta name="text:title" content="your title here">
  35.  
  36. <meta name="select:font" content="Open Sans"/>
  37. <meta name="select:font" content="Lora"/>
  38. <meta name="select:font" content="Fira Sans"/>
  39. <meta name="select:font" content="Helvetica"/>
  40.  
  41. <meta name="text:font size" content="10px"/>
  42.  
  43. <meta name="select:post size" content="400px"/>
  44. <meta name="select:post size" content="450px"/>
  45. <meta name="select:post size" content="500px"/>
  46. <meta name="select:post size" content="540px"/>
  47.  
  48. <meta name="text:tab 1 title" content="index" />
  49. <meta name="text:tab 2 title" content="links" />
  50. <meta name="text:tab 3 title" content="contact" />
  51. <meta name="text:tab 4 title" content="about" />
  52. <meta name="text:tab 5 title" content="projects" />
  53. <meta name="text:tab 6 title" content="explore" />
  54.  
  55.  
  56. <!--- icon font --->
  57.  
  58. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  59.  
  60.  
  61. <!--- google fonts --->
  62.  
  63. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700" rel="stylesheet">
  64.  
  65.  
  66. <!--- tab scripts --->
  67.  
  68. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  69.  
  70. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  71.  
  72. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  73. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  74. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  75. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  76. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  77. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  78. </script><script src="https://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  79. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  80.  
  81. <!-- TABS/ALL-IN-ONE SCRIPTS DO NOT REMOVE!!! -->
  82.  
  83. <script>
  84. $(document).ready(function() {
  85. $('.tabs .tab-links a').on('click', function(e) {
  86. var currentAttrValue = $(this).attr('href');
  87.  
  88. // Show/Hide Tabs
  89. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  90.  
  91. // Change/remove current tab to active
  92. $(this).parent('li').addClass('active').siblings().removeClass('active');
  93.  
  94. e.preventDefault();
  95. });
  96. });
  97. </script>
  98.  
  99. <script>
  100. $(document).ready(function() {
  101. $('#filterOptions li a').click(function() {
  102. // fetch the class of the clicked item
  103. var ourClass = $(this).attr('class');
  104.  
  105. // reset the active class on all the buttons
  106. $('#filterOptions li').removeClass('active');
  107. // update the active state on our clicked button
  108. $(this).parent().addClass('active');
  109.  
  110. if(ourClass == 'all') {
  111. // show all our items
  112. $('#ourHolder').children('div.item').show();
  113. }
  114. else {
  115. // hide all elements that don't share ourClass
  116. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  117. // show all elements that do share ourClass
  118. $('#ourHolder').children('div.' + ourClass).show();
  119. }
  120. return false;
  121. });
  122. });
  123. </script>
  124.  
  125.  
  126. <!-- tooltips -->
  127. <script>
  128. (function($){
  129. $(document).ready(function(){
  130. $("a[title]").style_my_tooltips({
  131. tip_follows_cursor:true,
  132. tip_delay_time:90,
  133. tip_fade_speed:300,
  134. attribute:"title"
  135. });
  136. });
  137. })(jQuery);
  138. </script>
  139.  
  140. <!-- unnest captions -->
  141. <script>
  142. $(document).ready(function(){ $('.posts').unnest({
  143. yourCaption: ".caption",
  144. wrapName: ".cap",
  145. newCaptionUsername: true,
  146. originalPostCaptionUsername: false,
  147. tumblrAvatars: true,
  148. tumblrAvatarClass: ".icon",
  149. usernameColon: false
  150. });
  151.  
  152. }); </script>
  153.  
  154. <!-- search -->
  155. <script>
  156. $(document).ready(function(){
  157. $('.search').submit(function(event){
  158. var value = $('input:first').val();
  159. location.replace('https://{Name}.tumblr.com/tagged/' + value);
  160. });
  161. });
  162. </script>
  163.  
  164. <!-- photosets -->
  165. <script>
  166. $(document).ready(function(){
  167. $('.photo-slideshow').pxuPhotoset({
  168. lightbox: true,
  169. highRes: true,
  170. gutter: '1px',
  171. borderRadius: '0px',
  172. photoset: '.photo-slideshow',
  173. photoWrap: '.photo-data',
  174. photo: '.pxu-photo'
  175. });
  176.  
  177. }); </script>
  178.  
  179.  
  180. <style type="text/css">
  181.  
  182. /* --- selection --- */
  183.  
  184. ::-moz-selection {background:{color:light accent};color:{color:text};}
  185. ::selection {background:{color:light accent};color:{color:text};}
  186.  
  187.  
  188. /* --- fade in --- */
  189.  
  190. @-webkit-keyframes fadein {
  191. 0% {opacity: 0;}
  192. 100% { opacity: 1; } }
  193.  
  194. @-moz-keyframes fadein {
  195. 0% { opacity: 0; }
  196. 100% { opacity: 1; } }
  197.  
  198. @keyframes fadein {
  199. 0% { opacity: 0; }
  200. 100% { opacity: 1; } }
  201.  
  202.  
  203. /* --- scrollbar --- */
  204.  
  205. ::-webkit-scrollbar {width:7px;height:7px;}
  206. ::-webkit-scrollbar {background-color:transparent;}
  207. ::-webkit-scrollbar-track {border:3px solid #fff;background-color:#ededed;}
  208. ::-webkit-scrollbar-thumb {border:3px solid #fff;background-color:{color:accent};min-height:24px;min-width:24px;}
  209.  
  210. #s-m-t-tooltip {max-width:300px;margin-top:-40px;margin-left:-18px; font-size:10px;font-family:{select:font};letter-spacing:1px;text-align:left;text-transform:lowercase;padding:3px 6px;color:{color:link};background-color:#fff;z-index:999999;box-shadow:2px 2px 3px #eee;border:1px solid #f6f6f6;border-radius:3px;}
  211.  
  212.  
  213. /* --- basics --- */
  214.  
  215. body {
  216. background:#fff;
  217. color: {color:text};
  218. font-family: {select:font};
  219. font-size: {text:font size};
  220. line-height:18px;
  221. letter-spacing:0.2px;
  222. word-wrap: break-word;
  223. -moz-osx-font-smoothing:grayscale;
  224. -webkit-font-smoothing:antialiased;
  225. font-smoothing:antialiased;
  226. -webkit-animation: fadein 1s;
  227. -moz-animation:fadein 1s;
  228. animation:fadein 1s;
  229. }
  230.  
  231. a {
  232. color: {color:link};
  233. text-decoration: none;
  234. -webkit-transition: all .3s ease-in-out;
  235. -moz-transition: all .3s ease-in-out;
  236. -o-transition: all .3s ease-in-out;
  237. -ms-transition: all .3s ease-in-out;
  238. transition: all .3s ease-in-out;
  239. }
  240.  
  241. a:hover{
  242. color:{color:accent};
  243. -webkit-transition: all .3s ease-in-out;
  244. -moz-transition: all .3s ease-in-out;
  245. -o-transition: all .3s ease-in-out;
  246. -ms-transition: all .3s ease-in-out;
  247. transition: all .3s ease-in-out;
  248. }
  249.  
  250. h1 {font-family:{select:font};font-size:15px;font-weight:400;line-height:18px;text-transform:lowercase;padding-top:5px;}
  251. h5 {font-size:10.5px;text-transform:lowercase;letter-spacing:1px;margin:8px 0px 0px 0px;font-weight:400;padding:0px;font-style:italic;}
  252. h2, h3, h4, h6 {font-family:{select:font};font-size: 13px;font-weight:400;text-align:left; line-height:20px;}
  253. small {font-size:10px!important;} big {font-size:12px!important;}
  254.  
  255. hr {width:30%;margin:10px 0px;border-width: 1px 0px 0px 0px;border-style: solid;border-color:#eee;}
  256. pre {font-size: {text:font size};font-family: {select:font};width:{select:post size};text-align: left;word-break: break-all;color:{color:Text};}
  257.  
  258.  
  259. /* ------ SIDEBAR ------ */
  260.  
  261. #sidebar {
  262. display:block;
  263. position:fixed;
  264. width:500px;
  265. height:100%;
  266. background-color:#fff;
  267. left:0px;
  268. top:0px;
  269. }
  270.  
  271. #sidebar a:hover {color:{color:accent};}
  272.  
  273. #sbcontainer {
  274. display:block;
  275. padding-top:100px;
  276. padding-left:100px;
  277. font-size:{text:font size};
  278. text-align:left;
  279. }
  280.  
  281. .title, .title a{
  282. color:{color:text};
  283. text-transform:uppercase;
  284. font-size:20px;
  285. letter-spacing:2px;
  286. font-weight:400;
  287. margin-bottom:15px;
  288. }
  289.  
  290. .title a:hover {color:{color:accent};}
  291.  
  292. .title img {
  293. display:inline-block;
  294. position:relative;
  295. vertical-align:middle;
  296. width:22px;
  297. height:22px;
  298. margin-top:-4px;
  299. margin-right:8px;
  300. border-radius:100%;
  301. }
  302.  
  303. .description {
  304. text-align:left;
  305. font-size:10.5px;
  306. letter-spacing:0.3px;
  307. margin:auto;
  308. }
  309. /* ------ END SIDEBAR ------ */
  310.  
  311.  
  312. /* --- search form --- */
  313.  
  314. .search .query {border-top:0;border-left:0;border-right:0;outline:0;margin-top:15px;font-family: inherit;font-size:11px!important;color:{color:link};background-color:transparent;width:70%;text-align:left;font-style:italic;border-bottom:1px dotted #eee;letter-spacing:0.2px;}
  315. ::-webkit-input-placeholder {color: inherit;}
  316. :-moz-placeholder {color:inherit; opacity:0.5;}
  317. ::-moz-placeholder {color:inherit; opacity:0.5;}
  318. :-ms-input-placeholder {color:inherit;}
  319. input:focus::-webkit-input-placeholder {color:transparent;}
  320. input:focus:-moz-placeholder {color:transparent;}
  321. input:focus::-moz-placeholder {color:transparent;}
  322. input:focus:-ms-input-placeholder {color:transparent;}
  323.  
  324.  
  325. /* --- TAB CUSTOMIZATION --- */
  326.  
  327. .linkbox {margin:auto;padding:0px;display: grid;grid-template-columns: auto auto auto;}
  328. .linkbox a {display:block;color:{color:text};} .linkbox a:hover {color:{color:accent};}
  329.  
  330. .aboutbox {width:100%;margin:auto;text-align:justify;}
  331. .aboutbox span b {font-family:'Open Sans';width:30%;display:inline-block;font-size:8.5px;text-transform:uppercase;letter-spacing:1px;}
  332.  
  333. .project {display:block;position:relative;width:300px;height:70px;text-align:left;margin-top:10px;margin-bottom:0px;}
  334. .projectimage img {width:60px;height:60px;padding:5px;border:1px solid #eee;float:left;margin:0px 8px 0px 0px;display:inline-block;}
  335.  
  336. .p-details {font-family:'Open Sans';width:220px;height:70px;float:right;display:inline-block;}
  337. .p-details span {display:block;font-size:8.5px;text-transform:uppercase;letter-spacing:0.75px;line-height:17px;}
  338. .p-details span b {width:30%;display:inline-block;font-weight:400;}
  339.  
  340. .meter {
  341. height: 4px;
  342. width: 70%;
  343. position: relative;
  344. background:#f7f7f7; /* BACKGROUND COLOR */
  345. -moz-border-radius: 25px;
  346. -webkit-border-radius: 25px;
  347. border-radius: 25px;
  348. padding: 1px;
  349. margin:15px auto 25px auto;
  350. }
  351.  
  352. .meter > span {
  353. display: block;
  354. height: 100%;
  355. border-top-right-radius: 8px;
  356. border-bottom-right-radius: 8px;
  357. border-top-left-radius: 20px;
  358. border-bottom-left-radius: 20px;
  359. background-color:{color:accent}; /* FILL COLOR */
  360. position: relative;
  361. overflow: hidden;
  362. }
  363.  
  364. .explore {width:100%;margin:auto;display: grid;grid-template-columns: auto auto auto;padding-top:5px;padding-bottom:10px;}
  365. .explore span {color:{color:text};}
  366.  
  367.  
  368. /* ------------------------- TABS CONTAINERS -------------------------- */
  369.  
  370. #tab-bar {
  371. display:inline-block;
  372. text-align:left;
  373. text-align:left;
  374. line-height:12px;
  375. }
  376.  
  377. .tabcontent {
  378. position:static;
  379. width: 300px;
  380. margin:0px;
  381. font-size:10.5px;
  382. line-height:18px;
  383. text-align:left;
  384. }
  385.  
  386.  
  387. /* ---------------------------- TAB LINKS ----------------------------- */
  388.  
  389. .tabs {width:100%;display:inline-block;}
  390.  
  391. /*----- tab links -----*/
  392.  
  393. .tab-links {padding-left:0px;}
  394.  
  395. /* Clearfix */
  396. .tab-links:after {display:block;clear:both;content:'';}
  397.  
  398. .tab-links li {
  399. display:inline-block;
  400. list-style:none;
  401. margin-left:0px;
  402. padding-left:0px;
  403. text-transform:lowercase;
  404. }
  405.  
  406. .tab-links a {
  407. padding-right:6px;
  408. margin-left:0px;
  409. display:inline-block;
  410. color:{color:text};
  411. transition:all linear 0.15s;
  412. }
  413.  
  414. .tab-links a:hover {color:{color:accent};}
  415.  
  416. li.active a, li.active a:hover {
  417. background:transparent;
  418. color:{color:link};
  419. -webkit-transition: all .3s;
  420. -moz-transition: all .3s;
  421. -o-transition: all .3s;
  422. -ms-transition: all .3s;
  423. transition: all .3s;
  424. }
  425.  
  426. /*----- don't touch -----*/
  427. .tab-content {
  428. }
  429.  
  430. .tab {display:none;}
  431. .tab.active {display:block;}
  432.  
  433.  
  434. /* -------------------------------------------------------------------- */
  435. /* --------------------------- POST STUFF --------------------------- */
  436. /* -------------------------------------------------------------------- */
  437.  
  438. /* --- buttons --- */
  439. .button {
  440. font-family:'Open Sans';
  441. display:inline-block;
  442. font-size:8px;
  443. text-transform:uppercase;
  444. letter-spacing:1px;
  445. background-color:#fafafa;
  446. border:1px solid #f6f6f6;
  447. padding:2px 5px 3px 5px;
  448. margin-right:8px;
  449. margin-top:5px;
  450. margin-bottom:5px;
  451. }
  452.  
  453. .button a {color:{color:link};border-bottom:0px!important;}
  454. .button a:hover {color:{color:text};}
  455.  
  456. .tumblr_blog {font-family:'Open Sans';font-size:9.5px;color:{color:link};font-weight:bold;display:inline-block;line-height:15px;text-transform:uppercase;padding-top:5px;margin-top:5px;letter-spacing:1px;border-bottom:0px!important;}
  457.  
  458. .icon {width:15px!important;height:15px!important;margin-right:5px;margin-bottom:-4px;line-height:15px;border-radius:100%;}
  459.  
  460. .cap {
  461. margin:0px;
  462. padding:0px 0px 0px 0px;
  463. position:relative;
  464. background-color:#fff;
  465. letter-spacing:0.3px;
  466. border-radius:3px;
  467. }
  468.  
  469. .cap a {color:{color:link};border-bottom:1px solid {color:light accent};} .cap a:hover {color:{color:accent};}
  470.  
  471. .cap blockquote {width:calc({select:post size} - 55px);margin-left:5px;padding-left:15px;border-left:1px solid #eee;}
  472.  
  473. /* --- pagination --- */
  474.  
  475. .pagination {
  476. display:block;
  477. position:fixed;
  478. width:500px;
  479. bottom:20px;
  480. left:100px;
  481. text-align:left;
  482. font-size:{text:font size};
  483. text-transform:lowercase;
  484. }
  485.  
  486. .pagination a {color:{color:text};padding:6px;}
  487. .pagination a:hover {color:{color:accent};text-decoration:none;}
  488. .current-page {color:{color:accent};padding:6px;}
  489.  
  490. .postscontainer {display:block;position:relative;width:{select:post size};top:75px;left:675px;}
  491.  
  492. .posts {
  493. display:block;
  494. width:{select:post size};
  495. font-size:{text:font size};
  496. font-family: {select:font};
  497. margin-bottom:125px;
  498. {block:ifjustifytext}
  499. text-align:justify;
  500. {/block:ifjustifytext}
  501. {block:ifnotjustifytext}
  502. text-align:left;
  503. {/block:ifnotjustifytext}
  504. }
  505.  
  506. .posts img {display:inline-block;width:100%;height:auto;margin-top:2px;}
  507.  
  508. .info {
  509. font-family:'Open Sans';
  510. width:{select:post size};
  511. margin-top:8px;
  512. text-align:left;
  513. text-transform:uppercase;
  514. letter-spacing:0.5px;
  515. font-size:9px;
  516. font-weight:700;
  517. color:{color:link};
  518. }
  519.  
  520. .info a {color:{color:link};letter-spacing:0.5px;font-size:10px;}
  521. .info a:hover {text-decoration:none;color:{color:accent};}
  522. .rb {float:right;display:inline-block;font-size:10px;-moz-transition-duration: 0.3s;-o-transition-duration: 0.3s;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;} .rb a:hover {-moz-transition-duration: 0.3s;-o-transition-duration: 0.3s;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;}
  523.  
  524. .tags {
  525. width:100%;
  526. font-family:'Open Sans';
  527. text-align:left;
  528. font-size:10px;
  529. letter-spacing:0.2px;
  530. word-break:break-word;
  531. color:{color:link};
  532. }
  533.  
  534. .tags a {margin-right:8px;color:{color:link};}
  535. .tags a:hover {color:{color:text};}
  536.  
  537. .postsnote {width:calc({select:post size} - 20px);min-height:50px;max-height:242px;overflow-y:scroll;overflow-x:hidden;margin-top:40px;margin-bottom:50px;background-color:#fff;border-radius:3px;padding:10px;}
  538.  
  539. .postsnote ol, .notes-bottom ul {margin: 0px;padding:0;list-style: none;}
  540.  
  541. .postsnote li {width:100%;font-size: {text:font size};float:left;text-align:left;}
  542.  
  543. .postsnote li img.avatar {width:12px;height:12px;border-radius:100%;margin-right:5px;margin-bottom:-2px;} .more_notes_link {list-style: none;text-transform:lowercase;letter-spacing:0.5px;font-size: {text:font size};margin-top:10px;position:relative;float:left;}
  544.  
  545. .photo-slideshow {visibility: hidden;}
  546. .photo-slideshow.processed {visibility: visible;}
  547. .photo-slideshow .row {clear: both;width: 100%;}
  548. .photo-slideshow .pxu-photo {display: block;float: clear;width: 100%;overflow: hidden;}
  549. .photo-slideshow .pxu-photo img {display: block;}
  550. .photo-slideshow.processed .pxu-photo img {width:100%;height: auto;}
  551. .photo-slideshow .pxu-photo:first-child img {margin:auto;}
  552. .photo-slideshow .count-1 {max-width:100%;height: auto;}
  553. .set {margin-left:10px;}
  554. .photo-slideshow .count-2 {width:50%;height: auto;}
  555. .photo-slideshow .count-3 {width:33.33%;height: auto;}
  556.  
  557. .playerbuttonbg {position: absolute;left: 10px;top:10px;width: 25px;height: 25px;background-color: transparent;padding: 10px;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;opacity:0.5;transition:0.5s ease-in-out;} .playerbuttonbg:hover {opacity:0.85;transition:0.5s ease-in-out;} .newplayerbutton {position:relative;width:30px;height:40px;overflow:hidden;} .playerbuttonhug {position: absolute;top:0px;left:0px;} .audioimgwrapper {position: absolute;left:0px;top:0px;overflow: hidden;width:79px;height:79px;} .audioimgwrapper img {height:76px;width:auto;position:relative;top:0px;margin-top:-6px;} .trackdetails {width:auto;font-size:10px;text-align:left;line-height:18px;margin-top:15px;padding:5px;max-height:70px;} .audiowrapper {background-color: #f6f6f6;position: relative;display:inline-block;width:{select:post size};height:70px;border-radius:3px;}
  558.  
  559. iframe#youtube_iframe {width: {select:post size}!important;height: auto;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;} .atlas {position:fixed;right:15px;bottom:20px;} .atlas a {color:#a1a1a1;background:transparent;font-family:times new roman;font-size:14px;} .atlas a:hover {color:{color:accent};}
  560.  
  561. .quote {font-size: 14px;font-style:italic;line-height:20px;font-weight:400;margin-top:5px; text-align:left;} .source {font-family:{select:font};font-size: 11px;letter-spacing:0.5px;text-transform:lowercase;text-align:left;line-height:18px;margin-top:8px;} .chat {margin-top:5px;font-size: {text:font size};} .chatlabel {font-family:{select:font};text-transform:lowercase;display:inline-block;margin-right:1px;font-weight:600;} .chat .lines {margin-left:0; } .chat .lines span {font-weight: bold;}
  562.  
  563. /* --- answer posts --- */
  564.  
  565. .ask {background-color:#fff;border-radius:3px;}
  566.  
  567. .question {background-color:#fff;padding:15px;min-height:35px;border:1px solid #eee;border-top-right-radius:3px;border-top-left-radius:3px;letter-spacing:0.3px;}
  568.  
  569. .asker img {width:15px;height:15px;margin-right:5px;padding:0px;display:inline-block;border-radius:100%;vertical-align:middle;margin-top:-3px;}
  570.  
  571. .asker {font-family:'Open Sans';font-size:10px;text-transform:uppercase;letter-spacing:0.75px;font-weight:700;color:#aaa;margin-bottom:5px;}
  572.  
  573. .answer {padding:0px;}
  574.  
  575. .linktitle {font-size:14px;line-height:20px;margin:10px 0px;font-family:{select:font};}
  576.  
  577. iframe.tmblr-iframe {
  578. z-index:99999999999999!important;
  579. top:0!important;
  580. right:0!important;
  581. opacity:0.4;
  582. /* delete invert(1) from here */
  583. filter:invert(1) contrast(150%);
  584. -webkit-filter:invert(1) contrast(150%);
  585. -o-filter:invert(1) contrast(150%);
  586. -moz-filter:invert(1) contrast(150%);
  587. -ms-filter:invert(1) contrast(150%);
  588. /* to here if your blog has a dark background */
  589. transform:scale(0.65);
  590. transform-origin:100% 0;
  591. -webkit-transform:scale(0.65);
  592. -webkit-transform-origin:100% 0;
  593. -o-transform:scale(0.65);
  594. -o-transform-origin:100% 0;
  595. -moz-transform:scale(0.65);
  596. -moz-transform-origin:100% 0;
  597. -ms-transform:scale(0.65);
  598. -ms-transform-origin:100% 0;
  599. -moz-transition-duration: 0.3s;
  600. -o-transition-duration: 0.3s;
  601. -webkit-transition-duration: 0.3s;
  602. transition-duration: 0.3s;
  603. }
  604.  
  605. iframe.tmblr-iframe:hover {
  606. opacity:0.6!important;
  607. -moz-transition-duration: 0.3s;
  608. -o-transition-duration: 0.3s;
  609. -webkit-transition-duration: 0.3s;
  610. transition-duration: 0.3s;
  611. }
  612.  
  613.  
  614. </style>
  615. </head>
  616. <body>
  617.  
  618.  
  619.  
  620.  
  621. <!----------------------------------------------------------------------->
  622. <!----------------------------------------------------------------------->
  623. <!----------------------------------------------------------------------->
  624. <!----------------------------------------------------------------------->
  625. <!----------------------------------------------------------------------->
  626.  
  627.  
  628.  
  629.  
  630. <!--- sidebar --->
  631.  
  632. <div id="sidebar">
  633.  
  634. <div id="sbcontainer">
  635.  
  636. <div class="title">
  637. <img src="{PortraitURL-96}"/>
  638. <a href="/">{text:title}</a>
  639. </div>
  640.  
  641. <!----------------------------- tab titles ------------------------------>
  642.  
  643. <div id="tab-bar">
  644. <div class="tabs">
  645. <ul class="tab-links">
  646. <li class="active"><a href="#tab1">{text:Tab 1 Title}</a></li>
  647. <li><a href="#tab2">{text:Tab 2 Title}</a></li>
  648. <li><a href="#tab3">{text:Tab 3 Title}</a></li>
  649. <li><a href="#tab4">{text:Tab 4 Title}</a></li>
  650. <li><a href="#tab5">{text:Tab 5 Title}</a></li>
  651. </ul>
  652. </div>
  653. </div>
  654.  
  655.  
  656. <!-------------------------------- TABS --------------------------------->
  657.  
  658. <div class="tabs">
  659. <div class="tab-content">
  660.  
  661. <!--------------------------- DESCRIPTION TAB --------------------------->
  662.  
  663. <div id="tab1" class="tab active">
  664. <div class="tabcontent">
  665.  
  666. <!--- description tab --->
  667.  
  668. <div class="description">{description}</div>
  669.  
  670. </div>
  671. </div>
  672.  
  673. <!------------------------------ LINKS TAB ------------------------------>
  674.  
  675. <div id="tab2" class="tab">
  676. <div class="tabcontent">
  677.  
  678. <!--- links go here --->
  679.  
  680. <div class="linkbox">
  681. <a href="/about">about</a>
  682. <a href="/ask">contact</a>
  683. <a href="/archive">archive</a>
  684. <a href="/links">tags</a>
  685. <a href="/works-in-progress">wips</a>
  686. <a href="http://www.pinterest.com/bebenovels">pinterest</a>
  687. </div>
  688.  
  689. </div>
  690. </div>
  691.  
  692.  
  693. <!---------------------------- CONTACT TAB ------------------------------>
  694.  
  695. <div id="tab3" class="tab">
  696. <div class="tabcontent">
  697.  
  698. <!--- if you want some text above the ask box, add it here --->
  699. <h5>ask me anything :)</h5>
  700.  
  701. <iframe frameborder="0" scrolling="no" width="125%" height="190" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="overflow: hidden; width: 300px; background-color: transparent;margin-top:10px;" id="ask_form"></iframe>
  702.  
  703. </div></div>
  704.  
  705.  
  706. <!-- -------------------------- TAB 4 -------------------------- -->
  707.  
  708. <div id="tab4" class="tab">
  709. <div class="tabcontent">
  710.  
  711. <!-------- projects tab -------->
  712.  
  713.  
  714. <!--- project one --->
  715. <div class="project">
  716. <div class="projectimage">
  717. <img src="{image:project one}"/></div>
  718.  
  719. <div class="p-details">
  720. <span><b>title:</b> these mortal infinities</span>
  721. <span><b>genre:</b> na sci-fi fantasy</span>
  722. <span><b>status:</b> outlining</span>
  723. <span><b>links:</b>
  724. <a href="/these-mortal-infinities">page</a>,
  725. <a href="/tagged/wip%3A-tmi">tag</a>,
  726. <a href="http://www.thesemortalinfinities.tumblr.com" target="_blank">sideblog</a>
  727. </span>
  728. </div></div>
  729.  
  730. <div class="meter">
  731. <span style="width: 8%"></span>
  732. </div>
  733. <!--- end project one --->
  734.  
  735. <!--- project one --->
  736. <div class="project">
  737. <div class="projectimage">
  738. <img src="{image:project two}"/></div>
  739.  
  740. <div class="p-details">
  741. <span><b>title:</b> the night veil</span>
  742. <span><b>genre:</b> na fantasy</span>
  743. <span><b>status:</b> plotting</span>
  744. <span><b>links:</b>
  745. <a href="/the-night-veil">page</a>,
  746. <a href="/tagged/wip%3A-tnv">tag</a>,
  747. <a href="http://www.thenightveil.tumblr.com" target="_blank">sideblog</a>
  748. </span>
  749. </div></div>
  750.  
  751. <div class="meter">
  752. <span style="width: 15%"></span>
  753. </div>
  754. <!--- end project one --->
  755.  
  756.  
  757. </div>
  758. </div>
  759.  
  760.  
  761. <!-- -------------------------- TAB 5 -------------------------- -->
  762.  
  763. <div id="tab5" class="tab">
  764. <div class="tabcontent">
  765.  
  766. <!--- explore tab --->
  767.  
  768. <div class="explore">
  769. <div class="column"><span>general</span></div>
  770. <div class="column"><a href="/tagged/about-me">about me</a></div>
  771. <div class="column"><a href="/tagged/a">aesthetics</a></div>
  772. <div class="column"><a href="/tagged/answered">answered</a></div>
  773. <div class="column"><a href="/tagged/writing-tips">writing tips</a></div>
  774. <div class="column"><a href="/tagged/writing-advice">writing advice</a></div>
  775. <div class="column"><a href="/tagged/moodboards">moodboards</a></div>
  776. <div class="column"><a href="/tagged/wip%3A-tnv">wip: tnv</a></div>
  777. <div class="column"><a href="/tagged/wip%3A-tmi">wip: tmi</a></div>
  778. </div>
  779.  
  780. <form class="search" action="javascript:return false">
  781. <input type="text" class="query" placeholder="search">
  782. </form>
  783.  
  784. </div>
  785. </div>
  786.  
  787. <!-- END OF TABS -->
  788.  
  789. </div>
  790. </div>
  791. </div>
  792. </div>
  793. </div>
  794.  
  795. </div></div><!--- end sidebar --->
  796.  
  797.  
  798. <!-- POST HTML -->
  799.  
  800. <div class="pagination">
  801. {block:Pagination}{block:PreviousPage}
  802. <a href="{PreviousPage}">prev</a>
  803. {/block:PreviousPage}{block:JumpPagination length="5"}{block:CurrentPage}
  804. <span class="current-page">{PageNumber}</span>
  805. {/block:CurrentPage}{block:JumpPage}
  806. <a class="jump_page" href="{URL}">{PageNumber}</a>
  807. {/block:JumpPage}{/block:JumpPagination}{block:NextPage}
  808. <a href="{NextPage}">next</a>
  809. {/block:NextPage}{/block:Pagination}
  810. </div>
  811.  
  812. <div class="postscontainer" id="{PostID}">
  813.  
  814. {block:Posts}<div class="posts" id="{PostID}">{block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}<div class="caption">{Body}</div>{/block:Text}
  815.  
  816. {block:Quote}<div class="quote">&#8220;{Quote}&#8221;</div><div class="source"> {block:Source}{Source}{/block:Source}</div>{/block:Quote}
  817.  
  818. {block:Link}<div class="linktitle"><a href="{URL}">{Name}</a></div>{block:Description}<div class="caption">{Description}</div>{/block:Description}{/block:Link}
  819.  
  820. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:lines}<div class="chat"><div class="lines">{block:label}<div class="chatlabel">{label}</div>{/block:label} {line}</br></div></div>{/block:lines}{/block:Chat}
  821.  
  822. {block:Answer}<div class="ask"><div class="question"><div class="asker"><img src="{AskerPortraitURL-96}"/>{Asker} said:</div> {Question}</div><div class="caption"><div class="answer">{Answer}</div></div></div>{/block:Answer}
  823.  
  824. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">{LinkCloseTag}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Photo}
  825.  
  826. {block:Photoset}
  827. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  828. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  829. {/block:Photoset}
  830.  
  831. {block:Audio}{block:AudioPlayer}<div class="audiowrapper">{block:AlbumArt}<div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}<div class="playerbuttonbg"><div class="newplayerbutton"><div class="playerbuttonhug">{AudioPlayerWhite}</div></div></div><div class="trackdetails">{block:TrackName}<span style="font-weight:bold;font-style:italic;">Track:</span> {TrackName} <br/>{/block:TrackName}{block:Artist}<span style="font-weight:bold;font-style:italic;">Artist:</span> {Artist} <br/>{/block:Artist}</div></div>{/block:AudioPlayer}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Audio}
  832.  
  833. {block:Video}<div class="video">{Video-500}</div>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Video}
  834.  
  835. {block:Date}<div class="info"><hr>
  836. <a title="{timeago}" href="{Permalink}">{DayOfWeek}</a>&nbsp;&middot;&nbsp;{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
  837.  
  838. {block:PermalinkPage}{block:RebloggedFrom}<br/>via: <a href="{ReblogParentURL}">{ReblogParentName}</a>{block:ContentSource} src: <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}{/block:RebloggedFrom}{/block:PermalinkPage}</div>{/block:Date}
  839.  
  840. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  841.  
  842. {block:PostNotes}<div class="postsnote">{PostNotes}</div>{/block:PostNotes}
  843.  
  844. </div>
  845. {/block:Posts}
  846.  
  847. <div class="atlas"><a href="https://www.atlasthemes.tumblr.com" target="_blank">a</a></div>
  848.  
  849. </div></div>
  850.  
  851.  
  852.  
  853. </body>
  854. </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!