the49thname

Theme 15: House of Wolves (dark version)

Mar 4th, 2019
3,057
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.82 KB | None | 0 0
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.  
  5. <!-- theme 15: house of wolves (dark ver) / version 1.1 (updated 03/09/19)
  6.  
  7. themes by ro (the49thname) / the49ththeme.tumblr.com
  8. tumblr controls fix by cyantists @ tumblr
  9. unnest captions script by magnusthemes & neothm @ tumblr
  10. pxu photoset script by shythemes @ tumblr / pixelunion @ github
  11. don't remove the credit, use as a base code, or claim as your own work.
  12. edit as much as you want, and feel free to send me any queries/problems.
  13.  
  14. -->
  15.  
  16. <title>{Title}</title>
  17.  
  18. <link rel="shortcut icon" href="{Favicon}">
  19.  
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21.  
  22. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  23.  
  24. <!-- colour options -->
  25.  
  26. <meta name="color:bold" content="#feff8b"/>
  27. <meta name="color:italic" content="#fff"/>
  28. <meta name="color:underline" content="#fff"/>
  29. <meta name="color:background" content="#000"/>
  30. <meta name="color:scrollbar" content="#feff8b"/>
  31. <meta name="color:text" content="#fff"/>
  32. <meta name="color:link" content="#feff8b"/>
  33. <meta name="color:link hover" content="#fff"/>
  34. <meta name="color:title" content="#fff"/>
  35. <meta name="color:nav links" content="#fff"/>
  36. <meta name="color:nav links hover" content="#feff8b"/>
  37. <meta name="color:post bg" content="#000"/>
  38. <meta name="color:h1 text" content="#feff8b"/>
  39. <meta name="color:border" content="#666"/>
  40. <meta name="color:button icon" content="#000"/>
  41. <meta name="color:button bg" content="#fff"/>
  42. <meta name="color:button bg hover" content="#feff8b"/>
  43. <meta name="color:perma link" content="#feff8b"/>
  44. <meta name="color:perma link hover" content="#fff"/>
  45. <meta name="color:tags" content="#fff"/>
  46. <meta name="color:tags hover" content="#feff8b"/>
  47. <meta name="color:tooltip text" content="#fff"/>
  48. <meta name="color:tooltip bg" content="#000"/>
  49. <meta name="color:selection text" content="#000"/>
  50. <meta name="color:selection bg" content="#feff8b"/>
  51.  
  52. <!-- image options -->
  53.  
  54. <meta name="image:bg" content=""/>
  55. <meta name="image:header icon" content="//66.media.tumblr.com/9b3ae3035303b96dc22f12b78bbed73a/tumblr_inline_pnt264izVk1ua3owt_1280.png"/>
  56.  
  57. <!-- text options -->
  58.  
  59. <meta name="text:link 1" content="link 1"/>
  60. <meta name="text:link 1 url" content=""/>
  61. <meta name="text:link 2" content="link 2"/>
  62. <meta name="text:link 2 url" content=""/>
  63. <meta name="text:link 3" content="link 3"/>
  64. <meta name="text:link 3 url" content=""/>
  65. <meta name="text:link 4" content="link 4"/>
  66. <meta name="text:link 4 url" content=""/>
  67. <meta name="text:link 5" content="link 5"/>
  68. <meta name="text:link 5 url" content=""/>
  69. <meta name="text:link 6" content="link 6"/>
  70. <meta name="text:link 6 url" content=""/>
  71.  
  72. <meta name="text:update 1" content="update"/>
  73. <meta name="text:update 2" content="update"/>
  74. <meta name="text:update 3" content="update"/>
  75. <meta name="text:update 4" content="update"/>
  76. <meta name="text:update 5" content="update"/>
  77.  
  78. <!-- select options -->
  79.  
  80. <meta name="select:link 1 icon" content="user" title="about"/>
  81. <meta name="select:link 1 icon" content="bars" title="navigation"/>
  82. <meta name="select:link 1 icon" content="paper-plane" title="submit"/>
  83. <meta name="select:link 1 icon" content="tags" title="tags"/>
  84. <meta name="select:link 1 icon" content="list" title="faq"/>
  85. <meta name="select:link 1 icon" content="star" title="star 1"/>
  86. <meta name="select:link 1 icon" content="star-o" title="star 2"/>
  87.  
  88. <meta name="select:link 2 icon" content="bars" title="navigation"/>
  89. <meta name="select:link 2 icon" content="user" title="about"/>
  90. <meta name="select:link 2 icon" content="paper-plane" title="submit"/>
  91. <meta name="select:link 2 icon" content="tags" title="tags"/>
  92. <meta name="select:link 2 icon" content="list" title="faq"/>
  93. <meta name="select:link 2 icon" content="star" title="star 1"/>
  94. <meta name="select:link 2 icon" content="star-o" title="star 2"/>
  95.  
  96. <meta name="select:update 1 icon" content="pencil" title="writing"/>
  97. <meta name="select:update 1 icon" content="photo" title="art"/>
  98. <meta name="select:update 1 icon" content="television" title="tv/films"/>
  99. <meta name="select:update 1 icon" content="book" title="books"/>
  100. <meta name="select:update 1 icon" content="gamepad" title="video games"/>
  101. <meta name="select:update 1 icon" content="star" title="star 1"/>
  102. <meta name="select:update 1 icon" content="star-o" title="star 2"/>
  103.  
  104. <meta name="select:update 2 icon" content="photo" title="art"/>
  105. <meta name="select:update 2 icon" content="pencil" title="writing"/>
  106. <meta name="select:update 2 icon" content="television" title="tv/films"/>
  107. <meta name="select:update 2 icon" content="book" title="books"/>
  108. <meta name="select:update 2 icon" content="gamepad" title="video games"/>
  109. <meta name="select:update 2 icon" content="star" title="star 1"/>
  110. <meta name="select:update 2 icon" content="star-o" title="star 2"/>
  111.  
  112. <meta name="select:update 3 icon" content="television" title="tv/films"/>
  113. <meta name="select:update 3 icon" content="pencil" title="writing"/>
  114. <meta name="select:update 3 icon" content="photo" title="art"/>
  115. <meta name="select:update 3 icon" content="book" title="books"/>
  116. <meta name="select:update 3 icon" content="gamepad" title="video games"/>
  117. <meta name="select:update 3 icon" content="star" title="star 1"/>
  118. <meta name="select:update 3 icon" content="star-o" title="star 2"/>
  119.  
  120. <meta name="select:update 4 icon" content="book" title="books"/>
  121. <meta name="select:update 4 icon" content="pencil" title="writing"/>
  122. <meta name="select:update 4 icon" content="photo" title="art"/>
  123. <meta name="select:update 4 icon" content="television" title="tv/films"/>
  124. <meta name="select:update 4 icon" content="gamepad" title="video games"/>
  125. <meta name="select:update 4 icon" content="star" title="star 1"/>
  126. <meta name="select:update 4 icon" content="star-o" title="star 2"/>
  127.  
  128. <meta name="select:update 5 icon" content="gamepad" title="video games"/>
  129. <meta name="select:update 5 icon" content="pencil" title="writing"/>
  130. <meta name="select:update 5 icon" content="photo" title="art"/>
  131. <meta name="select:update 5 icon" content="television" title="tv/films"/>
  132. <meta name="select:update 5 icon" content="book" title="books"/>
  133. <meta name="select:update 5 icon" content="star" title="star 1"/>
  134. <meta name="select:update 5 icon" content="star-o" title="star 2"/>
  135.  
  136. <!-- toggle options -->
  137.  
  138. <meta name="if:show link 1" content="1"/>
  139. <meta name="if:show link 2" content="1"/>
  140. <meta name="if:show search bar" content="1"/>
  141.  
  142. <meta name="if:show sidebar links" content="1"/>
  143. <meta name="if:show link 3" content="1"/>
  144. <meta name="if:show link 4" content="1"/>
  145. <meta name="if:show link 5" content="1"/>
  146. <meta name="if:show link 6" content="1"/>
  147.  
  148. <meta name="if:show updates" content="1"/>
  149. <meta name="if:show update 1" content="1"/>
  150. <meta name="if:show update 2" content="1"/>
  151. <meta name="if:show update 3" content="1"/>
  152. <meta name="if:show update 4" content="1"/>
  153. <meta name="if:show update 5" content="1"/>
  154.  
  155. <meta name="if:show captions" content="1"/>
  156. <meta name="if:show like reblog buttons" content="1"/>
  157. <meta name="if:show tags" content="1"/>
  158.  
  159. <!-- fonts -->
  160.  
  161. <link href="//fonts.googleapis.com/css?family=Roboto|Roboto+Condensed" rel="stylesheet">
  162.  
  163. <!-- font awesome script -->
  164.  
  165. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  166.  
  167. <!-- jquery scripts -->
  168.  
  169. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  170.  
  171. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  172.  
  173. <!-- tooltip scripts -->
  174.  
  175. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  176.  
  177. <script>
  178. (function($){
  179. $(document).ready(function(){
  180. $("a[title]").style_my_tooltips({
  181. tip_follows_cursor:true,
  182. tip_delay_time:90,
  183. tip_fade_speed:600,
  184. attribute:"title"
  185. });
  186. });
  187. })(jQuery);
  188. </script>
  189.  
  190. <style type="text/css">
  191.  
  192. iframe.tmblr-iframe {
  193. top:0!important;
  194. right:0!important;
  195. transform:scale(0.8);
  196. transform-origin:100% 0;
  197. -webkit-transform:scale(0.8);
  198. -webkit-transform-origin:100% 0;
  199. -o-transform:scale(0.8);
  200. -o-transform-origin:100% 0;
  201. -moz-transform:scale(0.8);
  202. -moz-transform-origin:100% 0;
  203. -ms-transform:scale(0.8);
  204. -ms-transform-origin:100% 0;
  205. z-index:99999999999999!important;
  206. }
  207.  
  208. ::-webkit-scrollbar-thumb {
  209. position:relative;
  210. height:auto;
  211. background-color:{color:scrollbar};
  212. z-index:9999;
  213. }
  214.  
  215. @media only screen and (max-width: 900px) and (max-height: 600px), only screen and (min-width: 901px) and (max-height: 600px), only screen and (max-width: 900px) and (min-height: 601px) {
  216. ::-webkit-scrollbar {background-color:{color:background};}
  217. }
  218.  
  219. @media only screen and (min-width: 901px) and (min-height: 601px) {
  220. ::-webkit-scrollbar {background-color:rgba(0,0,0,0.1);}
  221. }
  222.  
  223. ::-webkit-scrollbar {
  224. width:5px;
  225. height:5px;
  226. }
  227.  
  228. /* basics */
  229.  
  230. @media only screen and (max-width: 900px) and (max-height: 600px), only screen and (min-width: 901px) and (max-height: 600px), only screen and (max-width: 900px) and (min-height: 601px) {
  231. html, body {height:100%;}
  232. }
  233.  
  234. body {
  235. color:{color:text};
  236. background-color:{color:background};
  237. font-family:'Roboto', sans-serif;
  238. font-size:10px;
  239. margin:0;
  240. line-height:14px;
  241. letter-spacing:1px;
  242. text-align:justify;
  243. word-wrap:break-word;
  244. background-image:url('{image:bg}');
  245. background-position:left top;
  246. background-attachment:fixed;
  247. background-repeat:repeat;
  248. }
  249.  
  250. small {font-size:9px;}
  251.  
  252. pre {
  253. margin:0 10px;
  254. padding:5px;
  255. border:1px solid {color:border};
  256. word-wrap:break-word;
  257. white-space:pre-wrap;
  258. white-space:-moz-pre-wrap;
  259. white-space:-pre-wrap;
  260. white-space:-o-pre-wrap;
  261. }
  262.  
  263. blockquote {
  264. margin:5px 0 5px 20px;
  265. padding:2px 0 2px 5px;
  266. border-left:1px solid {color:border};
  267. }
  268.  
  269. b, strong {color:{color:bold};}
  270.  
  271. i, em {color:{color:italic};}
  272.  
  273. u {color:{color:underline};text-transform:none;}
  274.  
  275. a {
  276. color:{color:link};
  277. text-transform:uppercase;
  278. text-decoration:none;
  279. -moz-transition-duration:1s;
  280. -webkit-transition-duration:1s;
  281. -o-transition-duration:1s;
  282. }
  283.  
  284. a:hover {
  285. color:{color:link hover};
  286. -moz-transition-duration:1s;
  287. -webkit-transition-duration:1s;
  288. -o-transition-duration:1s;
  289. }
  290.  
  291. p {margin:10px;}
  292. p:empty {display:none;}
  293.  
  294. p img {margin-left:0!important;}
  295.  
  296. hr {width:200px;border-top:1px solid {color:border};}
  297.  
  298. .posts h1 {
  299. color:{color:h1 text};
  300. margin:0 0 5px 0;
  301. padding:0 10px 10px 10px;
  302. font-size:14px;
  303. font-family:'Roboto', sans-serif;
  304. text-align:left;
  305. text-transform:uppercase;
  306. letter-spacing:1px;
  307. }
  308.  
  309. .posts h1 a {color:{color:link};}
  310. .posts h1 a:hover {color:{color:link hover};}
  311.  
  312. .unnest h1, .text h1 {color:{color:text};margin:10px 0 5px 10px;}
  313.  
  314. h2 {
  315. margin:0;
  316. padding:10px;
  317. text-align:center;
  318. font-size:14px;
  319. word-spacing:2px;
  320. line-height:17px;
  321. text-transform:uppercase;
  322. font-family:'Roboto', sans-serif;
  323. }
  324.  
  325. /* container + header */
  326.  
  327. @media only screen and (max-width: 900px) and (max-height: 600px), only screen and (min-width: 901px) and (max-height: 600px), only screen and (max-width: 900px) and (min-height: 601px) {
  328.  
  329. #themecontainer, #postcontainer {position:relative;width:100%;margin:0;}
  330.  
  331. #header {
  332. position:relative;
  333. width:100%;
  334. background-color:rgba(0,0,0,0.6);
  335. border-bottom:1px solid {color:border};
  336. }
  337.  
  338. #header div {display:block;}
  339.  
  340. #headericon {margin:0 auto;padding-top:20px;}
  341.  
  342. #title, #headerdesc {margin:10px auto;text-align:center;}
  343.  
  344. #headerdesc {width:50%;}
  345.  
  346. #nav {width:100%;margin:20px auto 20px auto;text-align:center;}
  347.  
  348. #nav a, #nav div {display:inline-block;}
  349.  
  350. .sfm input {margin:0 auto 0 5px;vertical-align:bottom;}
  351. }
  352.  
  353. @media only screen and (min-width: 901px) and (min-height: 601px) {
  354.  
  355. #themecontainer {
  356. position:fixed;
  357. top:calc(50% - 275px);
  358. left:calc(50% - 403px);
  359. width:805px;
  360. height:561px;
  361. background-color:rgba(0,0,0,0.6);
  362. border:1px solid {color:border};
  363. box-sizing:border-box;
  364. }
  365.  
  366. #postcontainer {
  367. position:absolute;
  368. bottom:0;
  369. left:0;
  370. width:594px;
  371. height:500px;
  372. border-right:1px solid {color:border};
  373. box-sizing:border-box;
  374. overflow-x:hidden;
  375. overflow-y:auto;
  376. }
  377.  
  378. #header {
  379. position:absolute;
  380. top:0;
  381. left:0;
  382. width:803px;
  383. height:60px;
  384. padding:10px;
  385. box-sizing:border-box;
  386. border-bottom:1px solid {color:border};
  387. overflow:hidden;
  388. white-space:nowrap;
  389. z-index:9999;
  390. }
  391.  
  392. #header div {display:inline-block;}
  393.  
  394. #headericon {
  395. float:left;
  396. margin-right:15px;
  397. padding-right:15px;
  398. border-right:1px solid {color:border};
  399. }
  400.  
  401. #title {
  402. margin-right:15px;
  403. padding-right:10px;
  404. border-right:1px solid {color:border};
  405. }
  406.  
  407. #headerdesc {display:none!important;}
  408.  
  409. #nav {line-height:40px;}
  410.  
  411. .sfm input {margin:6px auto 0 5px;vertical-align:top;}
  412. }
  413.  
  414. #headericon {width:40px;height:40px;}
  415.  
  416. #headericon img {
  417. width:40px;
  418. height:40px;
  419. border-radius:10%;
  420. opacity:1;
  421. -moz-transition-duration:1s;
  422. -webkit-transition-duration:1s;
  423. -o-transition-duration:1s;
  424. }
  425.  
  426. #headericon img:hover {
  427. opacity:0.5;
  428. -moz-transition-duration:1s;
  429. -webkit-transition-duration:1s;
  430. -o-transition-duration:1s;
  431. }
  432.  
  433. #title {
  434. color:{color:title};
  435. font-size:20px;
  436. line-height:40px;
  437. font-weight:700;
  438. font-family:'Roboto Condensed', sans-serif;
  439. text-transform:uppercase;
  440. letter-spacing:5px;
  441. }
  442.  
  443. #nav a {
  444. display:inline-block;
  445. padding:0 8px;
  446. color:{color:nav links};
  447. font-size:18px;
  448. }
  449.  
  450. #nav a:hover {color:{color:nav links hover};}
  451.  
  452. #nav a:first-child {padding-left:0;font-size:20px;}
  453.  
  454. a#searchbutton:hover {cursor:text;color:{color:nav links};}
  455.  
  456. .sfm input {
  457. height:20px;
  458. padding:4px 8px;
  459. box-sizing:border-box;
  460. color:{color:nav links};
  461. background-color:transparent;
  462. border:0;
  463. border-bottom:1px solid {color:border};
  464. font-size:10px;
  465. text-transform:uppercase;
  466. }
  467.  
  468. .sfm input:focus {outline:none;}
  469.  
  470. /* sidebar */
  471.  
  472. #sidebarcont {
  473. position:absolute;
  474. bottom:0;
  475. right:0;
  476. width:210px;
  477. height:500px;
  478. text-transform:uppercase;
  479. }
  480.  
  481. #sidebardesc, #updates, #sidebarnav {border-bottom:1px solid {color:border};}
  482.  
  483. #sidebardesc {height:70px;padding:20px;overflow:auto;}
  484.  
  485. #sidebarnav {padding:10px;text-align:center;}
  486.  
  487. #sidebarnav a {
  488. display:inline-block;
  489. width:74px;
  490. margin:10px;
  491. padding:10px 5px;
  492. box-sizing:border-box;
  493. color:{color:text};
  494. background-color:{color:post bg};
  495. border:1px solid {color:text};
  496. }
  497.  
  498. #sidebarnav a:empty {display:none;}
  499.  
  500. #sidebarnav a:hover {color:{color:link};border:1px solid {color:link};}
  501.  
  502. #updates {
  503. max-height:196px;
  504. padding:15px;
  505. box-sizing:border-box;
  506. overflow-x:hidden;
  507. overflow-y:auto;
  508. }
  509.  
  510. #updates li {list-style:none;margin:0 0 10px 0;}
  511.  
  512. #updates li:last-child {margin-bottom:0;}
  513.  
  514. #updates c {
  515. width:25px;
  516. height:25px;
  517. margin-right:10px;
  518. padding:5px;
  519. box-sizing:border-box;
  520. color:{color:post bg};
  521. background-color:{color:text};
  522. border-radius:10%;
  523. font-size:14px;
  524. line-height:15px;
  525. text-align:center;
  526. }
  527.  
  528. #pagination {margin-top:10px;padding:10px;text-align:center;}
  529.  
  530. #pagination span {
  531. padding:0 10px;
  532. font-family:'Roboto Condensed', sans-serif;
  533. font-size:15px;
  534. }
  535.  
  536. #pagination a {display:inline-block;color:{color:text};font-size:18px;}
  537.  
  538. #pagination a:hover {color:{color:link};}
  539.  
  540. @media only screen and (max-width: 900px) and (max-height: 600px), only screen and (min-width: 901px) and (max-height: 600px), only screen and (max-width: 900px) and (min-height: 601px) {
  541. #sidebarcont {display:none;}
  542.  
  543. #paginationtwo {
  544. position:relative;
  545. width:100%;
  546. height:100px;
  547. margin:80px auto 0 auto;
  548. color:{color:text};
  549. background-color:rgba(0,0,0,0.6);
  550. border-top:1px solid {color:border};
  551. line-height:100px;
  552. text-transform:uppercase;
  553. text-align:center;
  554. }
  555.  
  556. #paginationtwo span {
  557. padding:0 10px;
  558. font-family:'Roboto Condensed', sans-serif;
  559. font-size:20px;
  560. }
  561.  
  562. #paginationtwo a {
  563. display:inline-block;
  564. padding:0 10px;
  565. color:{color:text};
  566. font-family:'Roboto Condensed', sans-serif;
  567. font-size:20px;
  568. letter-spacing:3px;
  569. }
  570.  
  571. #paginationtwo a:hover {color:{color:link};}
  572. }
  573.  
  574. @media only screen and (min-width: 901px) and (min-height: 601px) {
  575. #paginationtwo {display:none!important;}
  576. }
  577.  
  578. /* posts */
  579.  
  580. @media only screen and (max-width: 900px) and (max-height: 600px), only screen and (min-width: 901px) and (max-height: 600px), only screen and (max-width: 900px) and (min-height: 601px) {
  581. #container {width:550px;margin:80px auto;}
  582. }
  583.  
  584. @media only screen and (min-width: 901px) and (min-height: 601px) {
  585. #container {width:550px;margin:30px auto;}
  586.  
  587. .posts:last-of-type {margin-bottom:0;}
  588. }
  589.  
  590. .posts {
  591. width:500px;
  592. margin:0 auto 40px auto;
  593. padding:20px;
  594. background-color:{color:post bg};
  595. border:1px solid {color:border};
  596. }
  597.  
  598. .tumblr_parent {
  599. margin:0;
  600. padding:1px 0;
  601. background-color:{color:post bg};
  602. border-left:none;
  603. border-top:1px solid {color:border};
  604. }
  605.  
  606. .tumblr_parent:first-child {border-top:none;}
  607.  
  608. .tumblr_avatar {
  609. display:inline-block;
  610. vertical-align:middle;
  611. width:25px;
  612. height:25px;
  613. margin:15px 10px 0 10px;
  614. border-radius:10%;
  615. }
  616.  
  617. .tumblr_parent a.tumblr_blog {display:inline-block;vertical-align:-8px;}
  618.  
  619. .tcap .tumblr_parent:first-child .tumblr_avatar {margin-top:0px;}
  620. .tcap .tumblr_parent:first-child a.tumblr_blog {vertical-align:-1px;}
  621.  
  622. .posts ul, ol {margin-left:15px;padding:0!important;}
  623.  
  624. .posts li {margin:0 10px;}
  625.  
  626. .posts img:not(.tumblr_avatar), .posts iframe:not(.like_toggle) {
  627. display:block;
  628. vertical-align:middle;
  629. max-width:500px;
  630. }
  631.  
  632. #pphotos img {width:500px!important;}
  633.  
  634. .posts img:not(.tumblr_avatar) {height:auto;}
  635.  
  636. .text img, .tumblr_parent img:not(.tumblr_avatar),
  637. .text iframe, .tumblr_parent iframe {
  638. max-width:calc(500px - 20px)!important;
  639. margin-left:10px;
  640. margin-bottom:10px;
  641. }
  642.  
  643. .text video, .tumblr_parent video {
  644. max-width:calc(500px - 20px)!important;
  645. margin-top:10px;
  646. margin-left:10px;
  647. }
  648.  
  649. .tumblr_parent img:not(.tumblr_avatar), .tumblr_parent iframe {
  650. margin-top:10px;
  651. margin-bottom:10px;
  652. }
  653.  
  654. blockquote:not(.tumblr_parent) img,
  655. blockquote:not(.tumblr_parent) iframe {
  656. max-width:calc(100% - 20px)!important;
  657. margin:0 0 0 10px!important;
  658. }
  659.  
  660. iframe#ask_form {max-width:500px!important;margin:0;}
  661.  
  662. iframe#submit_form {margin-bottom:10px;}
  663.  
  664. .text {padding:1px 0;}
  665.  
  666. .caption {
  667. {block:ifnotshowcaptions}
  668. {block:IndexPage}display:none;{/block:IndexPage}
  669. {/block:ifnotshowcaptions}
  670. margin-top:5px;
  671. }
  672.  
  673. #source {padding:0 10px 10px 10px;text-align:center;}
  674.  
  675. #audio {
  676. height:100px;
  677. font-family:'Roboto Condensed', sans-serif;
  678. font-size:10px;
  679. line-height:25px;
  680. }
  681.  
  682. #albumart {
  683. float:left;
  684. width:80px;
  685. height:80px;
  686. margin:10px 20px 10px 10px;
  687. }
  688.  
  689. #albumart img {width:80px;height:80px;border-radius:10%;}
  690.  
  691. #audioplayerbg {
  692. position:absolute;
  693. width:80px;
  694. height:80px;
  695. margin:10px;
  696. padding:10px;
  697. box-sizing:border-box;
  698. background-color:#fff;
  699. border-radius:10%;
  700. opacity:0.5;
  701. -moz-transition-duration:1s;
  702. -webkit-transition-duration:1s;
  703. -o-transition-duration:1s;
  704. }
  705.  
  706. #audioplayerbg:hover {
  707. opacity:0.4;
  708. -moz-transition-duration:1s;
  709. -webkit-transition-duration:1s;
  710. -o-transition-duration:1s;
  711. }
  712.  
  713. #audioplayer {
  714. width:30px;
  715. height:30px;
  716. margin:20px auto;
  717. overflow:hidden;
  718. }
  719.  
  720. #audioinfo {
  721. height:100px;
  722. padding:0 10px 0px 15px;
  723. box-sizing:border-box;
  724. background-color:{color:h1 bg};
  725. border-left:1px solid {color:border};
  726. text-transform:uppercase;
  727. text-align:left;
  728. overflow-x:auto;
  729. overflow-y:hidden;
  730. }
  731.  
  732. .audiocaption {margin-top:10px;border-top:1px solid {color:border};}
  733.  
  734. .audiocaption:empty {display:none;}
  735.  
  736. #chat ol {margin:0;}
  737.  
  738. .line {list-style:none;padding:5px 0;}
  739.  
  740. .line:first-child {padding-top:10px;}
  741. .line:last-child {padding-bottom:7px;}
  742.  
  743. .label {font-weight:bold;}
  744.  
  745. #askcont {margin-bottom:5px;border-bottom:1px solid {color:border};}
  746.  
  747. #askericon {
  748. position:relative;
  749. float:left;
  750. width:40px;
  751. height:40px;
  752. margin:0 20px 0 10px;
  753. z-index:99;
  754. }
  755.  
  756. #askericon img {
  757. width:40px;
  758. height:40px;
  759. border-radius:10%;
  760. opacity:1;
  761. -moz-transition-duration:1s;
  762. -webkit-transition-duration:1s;
  763. -o-transition-duration:1s;
  764. }
  765.  
  766. #askericon img:hover {
  767. opacity:0.5;
  768. -moz-transition-duration:1s;
  769. -webkit-transition-duration:1s;
  770. -o-transition-duration:1s;
  771. }
  772.  
  773. #asker {
  774. position:relative;
  775. height:40px;
  776. font-size:15px;
  777. line-height:40px;
  778. font-family:'Roboto', sans-serif;
  779. text-transform:uppercase;
  780. }
  781.  
  782. #ask {padding:10px;box-sizing:border-box;}
  783.  
  784. #replier {
  785. margin:15px 0;
  786. font-size:15px;
  787. font-family:'Roboto', sans-serif;
  788. text-align:center;
  789. text-transform:uppercase;
  790. }
  791.  
  792. .answer img:first-child {margin-top:10px;}
  793.  
  794. .replies {margin-top:5px;}
  795.  
  796. .replies:empty {display:none;}
  797.  
  798. #perma {
  799. margin-top:5px;
  800. {block:IndexPage}
  801. min-height:45px;
  802. {/block:IndexPage}
  803. padding:15px 10px 0 10px;
  804. box-sizing:border-box;
  805. border-top:1px solid {color:border};
  806. letter-spacing:2px;
  807. text-align:center;
  808. }
  809.  
  810. #buttonscont {
  811. height:30px;
  812. text-align:center;
  813. {block:PermalinkPage}display:none;{/block:PermalinkPage}
  814. }
  815.  
  816. #buttonscont c {
  817. width:30px;
  818. height:30px;
  819. margin:0 10px -5px 0;
  820. padding:5px 5px 4px 6px;
  821. box-sizing:border-box;
  822. color:{color:button icon};
  823. background-color:{color:button bg};
  824. border-radius:10%;
  825. font-size:20px;
  826. text-align:center;
  827. overflow:hidden;
  828. -moz-transition-duration:1s;
  829. -webkit-transition-duration:1s;
  830. -o-transition-duration:1s;
  831. }
  832.  
  833. #buttonscont c:hover {
  834. background-color:{color:button bg hover};
  835. -moz-transition-duration:1s;
  836. -webkit-transition-duration:1s;
  837. -o-transition-duration:1s;
  838. }
  839.  
  840. .buttons {
  841. display:inline-block;
  842. width:30px;
  843. height:30px;
  844. margin-right:10px;
  845. }
  846.  
  847. .buttons img {
  848. display:inline-block!important;
  849. width:30px;
  850. height:30px;
  851. border-radius:10%;
  852. vertical-align:initial!important;
  853. }
  854.  
  855. #reblogicon img, #sourceicon img {
  856. margin-bottom:-5px;
  857. opacity:1;
  858. -moz-transition-duration:1s;
  859. -webkit-transition-duration:1s;
  860. -o-transition-duration:1s;
  861. }
  862.  
  863. #reblogicon img:hover, #sourceicon img:hover {
  864. opacity:0.5;
  865. -moz-transition-duration:1s;
  866. -webkit-transition-duration:1s;
  867. -o-transition-duration:1s;
  868. }
  869.  
  870. #likebutton, #reblogbutton {
  871. width:30px;
  872. height:30px;
  873. background-color:{color:button bg};
  874. border-radius:10%;
  875. box-sizing:border-box;
  876. -moz-transition-duration:1s;
  877. -webkit-transition-duration:1s;
  878. -o-transition-duration:1s;
  879. }
  880.  
  881. #likebutton:hover, #reblogbutton:hover {
  882. cursor:pointer;
  883. background-color:{color:button bg hover};
  884. -moz-transition-duration:1s;
  885. -webkit-transition-duration:1s;
  886. -o-transition-duration:1s;
  887. }
  888.  
  889. #likebutton {padding-top:6px;vertical-align:top;}
  890. #reblogbutton {padding:5px;}
  891.  
  892. {block:PermalinkPage}
  893. #perma a {color:{color:perma link};font-size:9px;padding:5px;}
  894.  
  895. #perma a:first-child {padding-left:0;}
  896.  
  897. #perma a:hover {color:{color:perma link hover};}
  898. {/block:PermalinkPage}
  899.  
  900. #tags {
  901. {block:IndexPage}margin-top:15px;{/block:IndexPage}
  902. {block:PermalinkPage}margin-top:10px;{/block:PermalinkPage}
  903. text-align:center;
  904. }
  905.  
  906. #tags a {
  907. padding:0 5px;
  908. color:{color:tags};
  909. font-size:9px;
  910. text-transform:none;
  911. }
  912.  
  913. #tags a:first-child {padding-left:0;}
  914. #tags a:last-child {padding-right:0;}
  915.  
  916. #tags a:hover {color:{color:tags hover};}
  917.  
  918. ol.notes {
  919. list-style-type:none;
  920. margin:15px 0 0 0;
  921. border-top:1px solid {color:border};
  922. text-align:left;
  923. }
  924.  
  925. ol.notes li.note {margin:5px;padding:15px 10px 0 10px;line-height:14px;}
  926.  
  927. ol.notes li.note:last-child {padding-bottom:10px;}
  928.  
  929. ol.notes li.note img.avatar {
  930. float:left;
  931. width:20px;
  932. height:20px;
  933. margin:-5px 15px 0 0;
  934. border-radius:10%;
  935. }
  936.  
  937. ol.notes li.note blockquote {padding:2px 5px;margin:5px 0 0 35px;}
  938.  
  939. /* extras */
  940.  
  941. #s-m-t-tooltip {
  942. display:block;
  943. color:{color:tooltip text};
  944. background:{color:tooltip bg};
  945. border:1px solid {color:tooltip text};
  946. max-width:150px;
  947. margin:24px 14px 7px 12px;
  948. padding:2px 5px 2px 5px;
  949. font-size:9px;
  950. line-height:11px;
  951. font-family:'Roboto Condensed', sans-serif;
  952. text-align:left;
  953. text-transform:uppercase;
  954. word-wrap:break-word;
  955. z-index:9999999999;
  956. }
  957.  
  958. ::selection {color:{color:selection text};background:{color:selection bg};}
  959.  
  960. /* credit - do not remove, alter, or move to another page */
  961.  
  962. #credit {
  963. position:fixed;
  964. bottom:14px;
  965. right:10px;
  966. text-align:center;
  967. z-index:9999;
  968. }
  969.  
  970. #credit a {
  971. color:{color:background};
  972. background-color:{color:scrollbar};
  973. padding:4px;
  974. font-size:10px;
  975. }
  976.  
  977. #credit a:hover {color:{color:scrollbar};background-color:{color:background};}
  978.  
  979. </style>
  980. </head>
  981. <body>
  982.  
  983. <div id="themecontainer">
  984.  
  985. <div id="header">
  986. <div id="headericon"><a href="/"><img src="{image:header icon}"/></a></div>
  987. <div id="title">{Title}</div>
  988. <div id="headerdesc">{Description}</div>
  989. <div id="nav">
  990. <a href="/" title="return home"><c class="fa fa-home"></c></a>
  991. <a href="/ask" title="send a message"><c class="fa fa-envelope"></c></a>
  992. <a href="/archive" title="archive"><c class="fa fa-calendar"></c></a>
  993. {block:ifshowlink1}<a href="{text:Link 1 URL}" title="{text:Link 1}"><c class="fa fa-{select:link 1 icon}"></c></a>{/block:ifshowlink1}
  994. {block:ifshowlink2}<a href="{text:Link 2 URL}" title="{text:Link 2}"><c class="fa fa-{select:link 2 icon}"></c></a>{/block:ifshowlink2}
  995. {block:ifshowsearchbar}
  996. <a id="searchbutton"><c class="fa fa-search"></c></a>
  997. <div id="search"><form action="/search" method="get" class="sfm">
  998. <input type="text" name="q" value="search" onfocus="if (this.value == 'search') {this.value=''}" onblur="if (this.value == '') {this.value='search'}" /></form></div>
  999. {/block:ifshowsearchbar}
  1000. </div>
  1001. </div>
  1002.  
  1003. <div id="sidebarcont">
  1004. <div id="sidebardesc">{Description}</div>
  1005. {block:ifshowsidebarlinks}
  1006. <div id="sidebarnav">
  1007. {block:ifshowlink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifshowlink3}{block:ifshowlink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifshowlink4}{block:ifshowlink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifshowlink5}{block:ifshowlink6}<a href="{text:Link 6 URL}">{text:Link 6}</a>{/block:ifshowlink6}
  1008. </div>
  1009. {/block:ifshowsidebarlinks}
  1010. {block:ifshowupdates}
  1011. <div id="updates">
  1012. {block:ifshowupdate1}<li><c class="fa fa-{select:update 1 icon}"></c> {text:update 1}</li>{/block:ifshowupdate1}
  1013. {block:ifshowupdate2}<li><c class="fa fa-{select:update 2 icon}"></c> {text:update 2}</li>{/block:ifshowupdate2}
  1014. {block:ifshowupdate3}<li><c class="fa fa-{select:update 3 icon}"></c> {text:update 3}</li>{/block:ifshowupdate3}
  1015. {block:ifshowupdate4}<li><c class="fa fa-{select:update 4 icon}"></c> {text:update 4}</li>{/block:ifshowupdate4}
  1016. {block:ifshowupdate5}<li><c class="fa fa-{select:update 5 icon}"></c> {text:update 5}</li>{block:ifshowupdate5}
  1017. </div>
  1018. {/block:ifshowupdates}
  1019. {block:Pagination}
  1020. <div id="pagination">
  1021. {block:PreviousPage}<a href="{PreviousPage}" title="previous page"><c class="fa fa-angle-double-left"></c></a>{/block:PreviousPage} <span>Page {CurrentPage} / {TotalPages}</span> {block:NextPage}<a href="{NextPage}" title="next page"><c class="fa fa-angle-double-right"></c></a>{/block:NextPage}
  1022. </div>
  1023. {/block:Pagination}
  1024. </div>
  1025.  
  1026. <div id="postcontainer">
  1027. <div id="container">
  1028. {block:Posts}
  1029. <div class="posts">
  1030.  
  1031. {block:Text}
  1032. {block:RebloggedFrom}
  1033. {block:Title}<h1>{Title}</h1>{/block:Title}
  1034. <div class="unnest tcap">{Body}</div>
  1035. {/block:RebloggedFrom}
  1036. {block:NotReblog}
  1037. {block:Title}<h1>{Title}</h1>{/block:Title}
  1038. <div class="text">{Body}</div>
  1039. {/block:NotReblog}
  1040. {/block:Text}
  1041.  
  1042. {block:Quote}
  1043. <div class="text"><h2>&quot;{Quote}&quot;</h2>
  1044. {block:Source}<div id="source">{Source}</div>{/block:Source}</div>
  1045. {/block:Quote}
  1046.  
  1047. {block:Link}
  1048. <h1><a href="{URL}"><< {Name} >></a></h1>
  1049. {block:Description}{block:RebloggedFrom}<div class="unnest">{Description}</div>{/block:RebloggedFrom}{block:NotReblog}<div class="text">{Description}</div>{/block:NotReblog}{/block:Description}{/block:Link}
  1050.  
  1051. {block:Chat}
  1052. {block:Title}
  1053. <h1>{Title}</h1>
  1054. {/block:Title}
  1055. <div id="chat">
  1056. <ol>{block:Lines}
  1057. <li class="line {Alt}">
  1058. {block:Label}
  1059. <span class="label">
  1060. <b>{Label}</b></span>
  1061. {/block:Label}{Line}</li>
  1062. {/block:Lines}
  1063. </ol></div>
  1064. {/block:Chat}
  1065.  
  1066. {block:Photo}
  1067. {LinkOpenTag}<div id="pphotos"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div>{LinkCloseTag}{block:Caption}{block:RebloggedFrom}<div class="unnest caption">{Caption}</div>{/block:RebloggedFrom}{block:NotReblog}<div class="text caption">{Caption}</div>{/block:NotReblog}{/block:Caption}
  1068. {/block:Photo}
  1069.  
  1070. {block:Photoset}
  1071. <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>{block:Caption}{block:RebloggedFrom}<div class="unnest caption">{Caption}</div>{/block:RebloggedFrom}{block:NotReblog}<div class="text caption">{Caption}</div>{/block:NotReblog}{/block:Caption}
  1072. {/block:Photoset}
  1073.  
  1074. {block:Video}
  1075. {Video-500}{block:Caption}{block:RebloggedFrom}<div class="unnest caption">{Caption}</div>{/block:RebloggedFrom}{block:NotReblog}<div class="text caption">{Caption}</div>{/block:NotReblog}{/block:Caption}
  1076. {/block:Video}
  1077.  
  1078. {block:Audio}
  1079. <div id="audio">
  1080. <div id="audioplayerbg"><div id="audioplayer">{AudioPlayerWhite}</div></div>
  1081. <div id="albumart"><span{block:AlbumArt} style="display:none;"{block:AlbumArt}><img src="//78.media.tumblr.com/9b78d1e07567414cae86f9e454b1e9f7/tumblr_inline_o39hgzRFff1rrt3vb_540.png" width="80"/></span>{block:AlbumArt}<img src="{AlbumArtURL}" width="80"/>{/block:AlbumArt}</div>
  1082. <div id="audioinfo">
  1083. <span{block:TrackName} style="display:none;"{block:TrackName}><b>Song:</b> unknown</span>{block:TrackName}<b>Song:</b> {TrackName}{/block:TrackName}
  1084. <br/><span{block:Artist} style="display:none;"{block:Artist}><b>Artist:</b> unknown</span>{block:Artist}<b>Artist:</b> {Artist}{/block:Artist}
  1085. <br/><span{block:Album} style="display:none;"{block:Album}><b>Album:</b> unknown</span>{block:Album}<b>Album:</b> {Album}{/block:Album}
  1086. <br/><span{block:PlayCount} style="display:none;"{block:PlayCount}><b>Play count:</b> unknown</span>{block:PlayCount}<b>Play count:</b> {PlayCount}{/block:PlayCount}
  1087. </div></div>
  1088. {block:Caption}{block:RebloggedFrom}<div class="unnest caption audiocaption">{Caption}</div>{/block:RebloggedFrom}{block:NotReblog}<div class="text caption audiocaption">{Caption}</div>{/block:NotReblog}{/block:Caption}
  1089. {/block:Audio}
  1090.  
  1091. {block:Answer}
  1092. <div id="askcont">
  1093. <div id="askericon"><a href="{AskerURL}"><img src="{AskerPortraitURL-96}"/></a></div>
  1094. <div id="asker">{Asker} asked:</div>
  1095. <div id="ask">{Question}</div>
  1096. </div>
  1097. <div class="answer text">{block:Answerer}<div id="replier">{Answerer} replied:</div>{/block:Answerer}{Answer}</div>
  1098. {block:Answerer}<div class="unnest replies">{Replies}</div>{/block:Answerer}
  1099. {/block:Answer}
  1100.  
  1101. {block:Date}
  1102.  
  1103. {block:IndexPage}<div id="perma">
  1104.  
  1105. <div id="buttonscont">
  1106. <a href="{Permalink}" title="{NoteCountwithLabel}"><c class="fa fa-comments"></c></a><a href="{Permalink}" title="{block:Date}{DayofMonthWithZero}.{MonthNumberWithZero}.{ShortYear} - {TimeAgo}{/block:Date}"><c class="fa fa-clock-o"></c></a>{block:RebloggedFrom}<div class="buttons" id="reblogicon"><a href="{ReblogParentURL}" title="via - {ReblogParentName}"><img src="{ReblogParentPortraitURL-30}"/></a></div><div class="buttons" id="sourceicon"><a href="{ReblogRootURL}" title="© - {ReblogRootName}"><img src="{ReblogRootPortraitURL-30}"/></a></div>{/block:RebloggedFrom}{block:ifshowlikereblogbuttons}<div class="buttons" id="likebutton">{LikeButton size="20" color="black"}</div><div class="buttons" id="reblogbutton">{ReblogButton size="20" color="black"}</div>{/block:ifshowlikereblogbuttons}
  1107. </div>
  1108.  
  1109. {block:ifshowtags}{block:HasTags}<div id="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}{/block:ifshowtags}
  1110. </div>{/block:IndexPage}
  1111.  
  1112. {block:PermalinkPage}<div id="perma">
  1113. <a href="{Permalink}">{block:Date}{TimeAgo}{/block:Date}</a>
  1114. <a href="{Permalink}">{NoteCountwithLabel}</a>
  1115. {block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{/block:RebloggedFrom}
  1116. {block:ContentSource}<a href="{SourceURL}" title="{SourceTitle}">©</a>{/block:ContentSource}
  1117. {block:HasTags}<br/><div id="tags">{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1118. </div>{/block:PermalinkPage}
  1119.  
  1120. {/block:Date}
  1121.  
  1122. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1123.  
  1124. </div>
  1125. {/block:Posts}
  1126. </div>
  1127. </div> <!-- #postcontainer end -->
  1128.  
  1129. </div> <!-- #themecontainer end -->
  1130.  
  1131. {block:Pagination}
  1132. <div id="paginationtwo">
  1133. {block:PreviousPage}<a href="{PreviousPage}" title="previous page"><c class="fa fa-angle-double-left"></c></a>{/block:PreviousPage} <span>Page {CurrentPage} / {TotalPages}</span> {block:NextPage}<a href="{NextPage}" title="next page"><c class="fa fa-angle-double-right"></c></a>{/block:NextPage}
  1134. </div>
  1135. {/block:Pagination}
  1136.  
  1137. <!-- pxu photosets scripts -->
  1138.  
  1139. <link href="//static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1140.  
  1141. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1142.  
  1143. <script src="//static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  1144.  
  1145. <!-- unnest captions script -->
  1146.  
  1147. <script src="//static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
  1148.  
  1149. <!-- jquery -->
  1150.  
  1151. <script type="text/javascript">
  1152. $(document).ready(function(){
  1153. $('.posts').unnest({
  1154. yourCaption: ".unnest",
  1155. //your caption selector, the div wrapping {Caption}
  1156. wrapName: ".tumblr_parent",
  1157. //the name of the captions’ new wrapper
  1158. newCaptionUsername: true,
  1159. //if the user adds a new caption, following a series of captions, show their username above the caption
  1160. originalPostCaptionUsername: false,
  1161. //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
  1162. tumblrAvatars: true,
  1163. //”dashboard style” caption, have the avatar of the blog next to the username
  1164. tumblrAvatarClass: ".tumblr_avatar",
  1165. //class of the avatar next to the username
  1166. usernameColon: false
  1167. //if turned to false, removes the colon at the end of usernames
  1168. });
  1169. $('.photo-slideshow').pxuPhotoset({
  1170. lightbox: true,
  1171. rounded: false,
  1172. gutter: '2px',
  1173. borderRadius: '0',
  1174. photoset: '.photo-slideshow',
  1175. photoWrap: '.photo-data',
  1176. photo: '.pxu-photo'
  1177. });
  1178. });
  1179. </script>
  1180.  
  1181. <div id="credit"><a href="//the49thname.tumblr.com/" title="made by the49thname">49</a>
  1182. </div>
  1183.  
  1184. </body>
  1185. </html>
Advertisement
Add Comment
Please, Sign In to add comment