Advertisement
williamhiddles

THEME 10

Aug 24th, 2017
608
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.25 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----------base code by clumhood
  5. ADAPTED BY @ JOESMAZZELLOS
  6. ------------>
  7.  
  8. <title>{Title}</title>
  9. <link rel="shortcut icon" href="{Favicon}">
  10. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  11. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  12.  
  13.  
  14. <!--------DEFAULT VARIABLES-------->
  15.  
  16. <meta name="color:background" content="#ffffff"/>
  17. <meta name="color:text" content="#333333"/>
  18. <meta name="color:links" content="#5b5b5b"/>
  19. <meta name="color:links hover" content="#c9c9c9"/>
  20. <meta name="color:scrollbar bg" content="#ffffff"/>
  21. <meta name="color:scrollbar" content="#eeeeee">
  22. <meta name="color:accent" content="#000000"/>
  23. <meta name="color:bold" content="#333333"/>
  24.  
  25. <meta name="image:sidebar image" content=""/>
  26. <meta name="image:background image" content=""/>
  27.  
  28. <meta name="text:link 1 title" content="link">
  29. <meta name="text:link 1 url" content=" ">
  30. <meta name="text:link 2 title" content="link">
  31. <meta name="text:link 2 url" content=" ">
  32. <meta name="text:link 3 title" content="link">
  33. <meta name="text:link 3 url" content=" ">
  34.  
  35. <meta name="if:show link 1" content="1" />
  36. <meta name="if:show link 2" content="1" />
  37. <meta name="if:show link 3" content="1" />
  38. <meta name="if:show sidebar image" content="1" />
  39. <meta name="if:show side title" content="1" />
  40.  
  41. <!----------------SCRIPTS---------------->
  42.  
  43. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  44. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  45. <link href="http://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  46. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  47. <script src="http://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  48. <script>
  49. (function($){
  50. $(document).ready(function(){
  51. $("[title]").style_my_tooltips({
  52. tip_follows_cursor:true,
  53. tip_delay_time:200,
  54. tip_fade_speed:300
  55. });
  56. });
  57. })(jQuery);
  58. </script>
  59.  
  60. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  61. <script>
  62. /* questions? ask oddhour.tumblr.com */
  63. var updatePhotosetCss = "<style id='updatePhotosetStyle'> .photoset .photoset_row img { display: block; } .photoset .photoset_row.photoset_row_1 img { max-width: 540px; } .photoset .photoset_row.photoset_row_2 img { max-width: 268px; } .photoset .photoset_row.photoset_row_3 img { max-width: 177px; } .photoset .photoset_row .photoset_photo { margin-left: 4px; } .photoset .photoset_row { text-align: center; width: 540px; } .photoset { width: 540px; }</style>";
  64. function updatePhotoset() {
  65.  
  66. $(".photoset:not(.540-resized)").each( function (i, e) {
  67. if($(this.contentDocument).find("#updatePhotosetStyle").size() <= 0)
  68. $(this.contentDocument).find("head").append(updatePhotosetCss);
  69. var photoset = $(this.contentDocument).find(".photoset");
  70. var photosetRows = photoset.find(".photoset_row");
  71. photoset.find(".photoset_photo")
  72. .each(function () {
  73. var hiResSrc = $(this).attr("href");
  74. var img = $(this).find('img');
  75. img.attr("src", hiResSrc );
  76. img.attr("style", "");
  77. });
  78. photosetRows.attr("style", "");
  79. photoset.attr("style","");
  80. photoset.addClass("540-resized");
  81. $(this).height($(this.contentDocument.body).height());
  82. });
  83. }
  84.  
  85. updatePhotoset();
  86.  
  87. var photosetTimer = setInterval(updatePhotoset, 1500);
  88. $(window).on('load', function () { setTimeout(function() {clearInterval(photosetTimer)}, 2000); })
  89. </script>
  90. <!-------------------------------------------------------------------->
  91.  
  92.  
  93. <!------------------------UNNEST SCRIPT--------------------->
  94. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  95. </script><script src="http://static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  96. <script>
  97. $(function(){ $('.posts').unnest({
  98. yourCaption: ".caption",
  99. wrapName: ".cap",
  100. newCaptionUsername: true,
  101. originalPostCaptionUsername: false,
  102. tumblrAvatars: true,
  103. tumblrAvatarClass: ".icon",
  104. usernameColon: false
  105. }); }); </script>
  106. <!------------------------TOOLTIPS SCRIPT--------------------->
  107.  
  108. <style type="text/css">
  109.  
  110.  
  111. /*----------tooltips---------*/
  112.  
  113. #s-m-t-tooltip {
  114. max-width:300px;
  115. margin:15px;
  116. padding:5px;
  117. border:1px solid #eeeeee;
  118. border-radius:0px;
  119. background:#ffffff;
  120. color:{color:text};
  121. z-index:999999;
  122. font-size:9px;
  123. font-style:bold;
  124. font-weight:lighter;
  125. letter-spacing:2px;
  126. font-family:'arial', montserrat;
  127. text-transform:uppercase;
  128. box-shadow:1px 1px 3px rgba(0,0,0,.0);
  129. }
  130.  
  131. /*----------SCROLLBAR---------*/
  132.  
  133. ::-webkit-scrollbar {
  134. background-color: {color:scrollbar bg};
  135. height:8px;
  136. width:5px;
  137. }
  138.  
  139. ::-webkit-scrollbar-thumb:vertical {
  140. background-color:{color:scrollbar};
  141. height:50px;
  142. }
  143.  
  144. ::-webkit-scrollbar-thumb:horizontal {
  145. background-color:{color:scrollbar bg};
  146. height:8px;
  147. }
  148.  
  149. /*----------unnest---------*/
  150.  
  151. .tumblr_blog {
  152. display:block;
  153. vertical-align:middle; /* this is to center the url to the height of the icon */
  154. line-height:20px; /* change this to the height of the icon */
  155. margin-bottom:5px;
  156. font-weight:bold!important;
  157. color:{color:links};
  158. }
  159.  
  160. .tumblr_blog a:hover {
  161. text-decoration:underline;
  162. color:{color:links hover};
  163. }
  164.  
  165. .icon {
  166. width:20px; /* size of the icon */
  167. height:20px; /* size of the icon */
  168. margin-right:10px; /* space between icon and url */
  169. display:inline-block;
  170. float:left;
  171. border-radius:2px; /* change to 100% for circular icon */
  172. }
  173.  
  174. .cap {
  175. margin-left:0px;
  176. width:500px;
  177. }
  178.  
  179. .cap blockquote {
  180. width:500px;
  181. margin-left:0px;
  182. }
  183.  
  184. /*----------BASICS---------*/
  185.  
  186. body {
  187. background:{color:background} url({image:background image}) repeat right top fixed;
  188. color:{color:text};
  189. font-family:'arial';
  190. line-height:15px;
  191. font-size:11px;
  192. margin:0;
  193. text-align:left;
  194. }
  195.  
  196. blockquote {
  197. padding-left:10px;
  198. border-left:1px solid;
  199. border-color:#eeeeee;
  200. margin:10px;
  201. }
  202.  
  203. a {
  204. color:{color:links};
  205. text-decoration:none;
  206. }
  207.  
  208. a:hover {
  209. text-decoration:none;
  210. color: {color:links hover};
  211. -webkit-transition:all 0.5s;
  212. -moz-transition:all 0.5s;
  213. -ms-transition:all 0.5s;
  214. -o-transition:all 0.5s;
  215. transition:all 0.5s;
  216. }
  217.  
  218. img {
  219. opacity:1;
  220. text-decoration:none;
  221. }
  222.  
  223. small {
  224. font-size:10px;
  225. font-weight:none;
  226. }
  227.  
  228. h1 {
  229. font-size:15px;
  230. font-weight:bold;
  231. }
  232.  
  233.  
  234. /*----------SIDEBAR---------*/
  235.  
  236. .sidebar {
  237. position:fixed;
  238. top:70px;
  239. width:245px;
  240. margin-left:215px;
  241. }
  242.  
  243. .sidebarimage {
  244. width:245px;
  245. }
  246.  
  247. .title {
  248. font-size:15px;
  249. text-transform:uppercase;
  250. font-family:'montserrat';
  251. font-weight:bold;
  252. color:{color:accent};
  253. margin-top:10px;
  254. width:250px;
  255. }
  256.  
  257. .description {
  258. width:240px;
  259. text-align:center;
  260. font-family:'arial';
  261. margin-top:10px;
  262. }
  263.  
  264. .links {
  265. margin-top:10px;
  266. color:{color:links};
  267. text-transform:uppercase;
  268. font-family:'montserrat';
  269. }
  270.  
  271. .links a {
  272. display:block;
  273. padding:8px;
  274. letter-spacing:1px;
  275. border-bottom:1px solid #eee;
  276. }
  277.  
  278. /*----------PAGINATION---------*/
  279.  
  280. .pagination {
  281. padding:10px;
  282. margin-top:10px;
  283. text-align:center;
  284. letter-spacing:1px;
  285. }
  286.  
  287. /*----------POSTS---------*/
  288.  
  289. .entries {
  290. margin-left:580px;
  291. margin-top:50px;
  292. width:540px;
  293. }
  294.  
  295. .posts {
  296. width:540px;
  297. margin-bottom:70px;
  298. }
  299.  
  300.  
  301. /*----------quotes---------*/
  302.  
  303. .quote {
  304. text-transform:uppercase;
  305. font-size:14px;
  306. font-weight:bold;
  307. text-align:center;
  308. }
  309.  
  310. .quotesource {
  311. text-align:center;
  312. margin-top:10px;
  313. }
  314.  
  315. /*----------CHAT---------*/
  316.  
  317. .chat {
  318. line-height:150%;
  319. list-style:none;
  320. }
  321.  
  322. .line.odd {
  323. padding:10px;
  324. background:#f8f8f8;
  325. }
  326.  
  327. .line.even {
  328. padding:10px;
  329. }
  330.  
  331. .label {
  332. text-transform:uppercase;
  333. font-size:10px;
  334. letter-spacing:1px;
  335. font-weight:bold;
  336. }
  337.  
  338. /*----------AUDIO---------*/
  339.  
  340. .cover {
  341. position:relative;
  342. z-index:1;
  343. max-width:100px;
  344. padding:10px;
  345. float:left;
  346. }
  347.  
  348. .playerbutton {
  349. position:relative;
  350. width:30px;
  351. height:35px;
  352. overflow:hidden;
  353. }
  354.  
  355. .playerbuttonhug {
  356. position: absolute;
  357. top:-7px;
  358. left:2px;
  359. }
  360.  
  361. .tumblr_audio_player {
  362. height:50px;
  363. width:500px;
  364. }
  365.  
  366. .playerbuttonbg {
  367. position:absolute;
  368. width:35px;
  369. height:35px;
  370. background-color:#e4e4e4;
  371. padding:10px;
  372. }
  373.  
  374. .trackdetails {
  375. width:auto;
  376. display:inline-block;
  377. margin-left:70px;
  378. font-size:10px;
  379. letter-spacing:1px;
  380. text-transform:lowercase;
  381. padding:5px;
  382. line-height:15px;
  383. }
  384.  
  385. .audiowrapper {
  386. position:relative;
  387. display:inline-block;
  388. }
  389.  
  390. .spotify_audio_player {
  391.  
  392. height: 80px !important;
  393.  
  394. }
  395.  
  396. /*----------questions---------*/
  397.  
  398. .question {
  399. background:transparent;
  400. padding:10px;
  401. }
  402.  
  403. .asker {width:540px; margin-bottom:5px; padding-left:7px; text-align:left; font-family:'arial'; color:{color:accent}; text-overflow:ellipsis}
  404.  
  405.  
  406. .answer {
  407. padding:10px;
  408. margin-top:-15px;
  409. }
  410.  
  411.  
  412. /*----------INFO---------*/
  413.  
  414. .info {
  415. padding:10px;
  416. font-family:'arial';
  417. font-size:10px;
  418. font-weight:bold;
  419. color:{color:accent};
  420. text-transform:uppercase;
  421. border-top:1px solid #eee;
  422. margin-top:25px;
  423. }
  424.  
  425.  
  426. .tags {
  427. margin-left:10px;
  428. margin-top:-5px;
  429. font-size:11px;
  430. font-family:'arial';
  431. letter-spacing:0px;
  432. font-style:italic;
  433. text-transform:lowercase;
  434. }
  435.  
  436. .tags a {
  437. margin-right:10px;
  438. letter-spacing:0px;
  439. }
  440.  
  441. /*----------POST NOTES---------*/
  442.  
  443. ol.notes {
  444. padding:0px;
  445. margin:25px 0px 0px -10px;
  446. list-style-type:none;
  447. }
  448.  
  449. ol.notes li.note {
  450. padding:10px;
  451. }
  452.  
  453. ol.notes li.note img.avatar {
  454. vertical-align:-4px;
  455. margin-right:10px;
  456. width:16px;
  457. height:16px;
  458. }
  459.  
  460. ol.notes li.note span.action {
  461. font-weight:none;
  462. }
  463.  
  464. ol.notes li.note .answer_content {
  465. font-weight:normal;
  466. }
  467.  
  468. ol.notes li.note blockquote {
  469. padding:4px 10px;
  470. margin:10px 0px 0px 25px;
  471. }
  472.  
  473. ol.notes li.note blockquote a {
  474. text-decoration:none;
  475. }
  476.  
  477.  
  478. /*----------credit---------*/
  479.  
  480. .credit {
  481. font-size:13px;
  482. position:fixed;
  483. font-weight:bold;
  484. bottom:7px;
  485. right:15px;
  486. z-index:10;
  487. text-align:right;
  488. letter-spacing:1px;
  489. padding:2px;
  490. }
  491.  
  492. .credit a {
  493. color:{color:links};
  494. text-decoration:none;
  495. }
  496.  
  497. .credit a:hover {
  498. color:{color:links hover};
  499. text-decoration:none;
  500. }
  501.  
  502. /*----------tumblr controls---------*/
  503. iframe.tmblr-iframe {
  504. z-index:99999999999999!important;
  505. top:0!important;
  506. right:0!important;
  507. opacity:0.4;
  508. /* delete invert(1) from here */
  509. filter:invert(1) contrast(150%);
  510. -webkit-filter:invert(1) contrast(150%);
  511. -o-filter:invert(1) contrast(150%);
  512. -moz-filter:invert(1) contrast(150%);
  513. -ms-filter:invert(1) contrast(150%);
  514. /* to here if your blog has a dark background */
  515. transform:scale(0.65);
  516. transform-origin:100% 0;
  517. -webkit-transform:scale(0.65);
  518. -webkit-transform-origin:100% 0;
  519. -o-transform:scale(0.65);
  520. -o-transform-origin:100% 0;
  521. -moz-transform:scale(0.65);
  522. -moz-transform-origin:100% 0;
  523. -ms-transform:scale(0.65);
  524. -ms-transform-origin:100% 0;}
  525.  
  526. iframe.tmblr-iframe:hover {
  527. opacity:0.6!important;}
  528.  
  529. </style>
  530. </head>
  531.  
  532. <body>
  533.  
  534. <div class="credit">
  535. <a title="theme by joesmazzellos" href="http://joesmazzellos.tumblr.com/" target="_blank"><i class="fa fa-star" aria-hidden="true"></i></a></div>
  536.  
  537. <div class="sidebar">
  538. {block:IfShowSidebarImage}
  539. <div class="sidebarimage">
  540. <a href="/"><img src="{image:sidebar image}">
  541. </a></div>
  542. {/block:IfShowSidebarImage}
  543.  
  544. {block:IfShowSideTitle}
  545. <div class="title">{Title}</div>
  546. {/block:IfShowSideTitle}
  547.  
  548. <div class="description">{Description}</div>
  549.  
  550. <div class="links">
  551. <a href="/"><font style="color:{color:accent}"><i class="fa fa-user" aria-hidden="true"></i></font> home</a>
  552. <a href="/ask"><font style="color:{color:accent}"><i class="fa fa-comment" aria-hidden="true"></i></font> ask</a>
  553. {block:IfShowLink1}
  554. <a href="{text:link 1 url}"><font style="color:{color:accent}"><i class="fa fa-bars" aria-hidden="true"></i></font> {text:link 1 title}</a>
  555. {/block:IfShowLink1}
  556. {block:IfShowLink2}
  557. <a href="{text:link 2 url}"><font style="color:{color:accent}"><i class="fa fa-folder-open" aria-hidden="true"></i></font> {text:link 2 title}</a>
  558. {/block:IfShowLink2}
  559. {block:IfShowLink3}
  560. <a href="{text:link 3 url}"><font style="color:{color:accent}"><i class="fa fa-code" aria-hidden="true"></i></font> {text:link 3 title}</a>
  561. {/block:IfShowLink3}
  562. </div>
  563.  
  564. <div class="pagination">
  565. {block:Pagination}
  566. {block:PreviousPage}
  567. <a href="{PreviousPage}"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>{/block:PreviousPage}&nbsp; &nbsp;&nbsp;
  568.  
  569. {block:NextPage}
  570. <a href="{NextPage}"><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
  571. {/block:NextPage}
  572. {/block:Pagination}
  573. </div>
  574. </div>
  575.  
  576. <div class="entries">
  577. {block:Posts}
  578. <div class="posts">
  579.  
  580. {block:Text}
  581. <h1>{block:Title}{Title}{/block:Title}</h1>
  582. <div class="caption">
  583. {Body}
  584. </div>
  585. {/block:Text}
  586.  
  587.  
  588. {block:Photo}
  589. {LinkOpenTag}<img src="{PhotoURL-HighRes}">{LinkCloseTag}
  590. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  591. {/block:Photo}
  592.  
  593.  
  594. {block:Photoset}
  595. <div class="media">{photoset}</div>
  596. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  597. {/block:Photoset}
  598.  
  599.  
  600. {block:Quote}
  601. <div class="quote">"{Quote}"</div>
  602. {block:Source}<div class="quotesource"> — {Source}</div>
  603. {/block:Source}{/block:Quote}
  604.  
  605.  
  606. {block:Link}
  607. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  608. {block:Description}{Description}{/block:Description}
  609. {/block:Link}
  610.  
  611.  
  612. {block:Chat}
  613. {block:Title}<h1>{Title}</h1>{/block:Title} <div class="chat"> {block:Lines} <li class="line {Alt}"> {block:Label} <span class="label"> {Label}</span> {/block:Label}{Line}</li> {/block:Lines}</div>
  614. {/block:Chat}
  615.  
  616.  
  617. {block:Audio}
  618. {block:AudioPlayer}
  619. <div class="audiowrapper">
  620. <div class="playerbuttonbg">
  621. <div class="playerbutton">
  622. <div class="playerbuttonhug">
  623. {AudioPlayerGrey}
  624. </div></div></div>
  625.  
  626. <div class="trackdetails">
  627. {block:TrackName}<b>TRACK:</b> {TrackName}{/block:TrackName}<br>
  628.  
  629. {block:Artist}<b>ARTIST:</b> {Artist}{/block:Artist}<br>
  630.  
  631. <b>PLAYS:</b> {FormattedPlayCount}</div></div>
  632. {/block:AudioPlayer}
  633.  
  634. {block:Caption}
  635. <div class="caption">{Caption}</div>
  636. {/block:Caption}
  637. {/block:Audio}
  638.  
  639.  
  640. {block:Video}
  641. {Video-500}
  642. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  643. {/block:Video}
  644.  
  645.  
  646. {block:Answer}
  647. <img align="left" src="{AskerPortraitURL-30}"style="border-radius:80px;"> <div id="question" style="width:450px;font-style:bold;"> {Asker} said: {Question}</div> <br>
  648. <div class="caption">
  649. {Answer}
  650. </div>
  651. {/block:Answer}
  652.  
  653.  
  654. <div class="info">
  655. {block:Date}<a href="{Permalink}" title="{TimeAgo}"><font style="color:{color:bold}">{Month} {DayOfMonth}</font></a>
  656.  
  657. &nbsp;&nbsp;
  658. <a href="{Permalink}">{NoteCount} <font style="color:{color:accent}">♥</font></a>
  659. &nbsp;&nbsp;
  660.  
  661. <a href="{ReblogURL}" target="_blank" class="details"><i class="fa fa-refresh" aria-hidden="true"></i></a>
  662.  
  663. <font style="float:right">
  664. {block:RebloggedFrom}
  665. <a href="{ReblogParentURL}" title="{ReblogParentName}"><b>via</b> </a>
  666. {block:ContentSource}
  667. <a href="{ReblogRootURL}" "{ReblogRootName}" title="{ReblogRootName}">/ <b>source</b></a>
  668. {/block:ContentSource}
  669. {/block:RebloggedFrom}
  670.  
  671. </font style>
  672.  
  673.  
  674. </div>
  675.  
  676.  
  677. {block:HasTags}
  678. <div class="tags">
  679. {block:Tags}
  680. <a href="{TagURL}">{Tag}</a>
  681. {/block:Tags}
  682. </div>
  683. {/block:HasTags}
  684.  
  685. </div> {/block:Date}
  686.  
  687.  
  688. {block:PostNotes}
  689. {PostNotes}
  690. {/block:PostNotes}
  691.  
  692. {/block:Posts}
  693.  
  694. {block:ContentSource}
  695. <!---{SourceURL}{block:SourceLogo}<img src=”{BlackLogoURL}”
  696. width=”{LogoWidth}” height=”{LogoHeight}” alt=”{SourceTitle}” />
  697. {/block:SourceLogo}
  698. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} --->
  699. {/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
  700.  
  701. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement