Advertisement
Guest User

theme 29: watson; by primrosetylers

a guest
Jul 22nd, 2014
695
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.60 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. theme 29: watson;
  7. coded by irma at primrosetylers.tumblr.com
  8. do not steal, redistribute, or remove the credit thanks
  9.  
  10. -->
  11.  
  12. <title>{Title}</title>
  13. <link rel="shortcut icon" href="{Favicon}">
  14.  
  15. <!-- CLICK EFFECT SCRIPT FOR TOP BAR -->
  16. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  17. <script>
  18. $(document).ready(function(){
  19. $(".box").click(function(){
  20. $(this).toggleClass("clicked");
  21. });
  22. });
  23. </script>
  24. <script>
  25. $(document).ready(function(){
  26. $("#box1").click(function(){
  27. $("#box2, #box3, #box4").removeClass("clicked");
  28. });
  29. });
  30. </script>
  31. <script>
  32. $(document).ready(function(){
  33. $("#box2").click(function(){
  34. $("#box1, #box3, #box4").removeClass("clicked");
  35. });
  36. });
  37. </script>
  38. <script>
  39. $(document).ready(function(){
  40. $("#box3").click(function(){
  41. $("#box1, #box2, #box4").removeClass("clicked");
  42. });
  43. });
  44. </script>
  45. <script>
  46. $(document).ready(function(){
  47. $("#box4").click(function(){
  48. $("#box1, #box2, #box3").removeClass("clicked");
  49. });
  50. });
  51. </script>
  52. <!-- SCRIPT ENDS -->
  53.  
  54. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  55.  
  56. <script>
  57. $(document).ready(function(){
  58. $("#box1").click(function(){
  59. $("box2").removeClass();
  60. $("#firstone").slideToggle(500);
  61. $("#about, #contact, #navi").slideUp("250");
  62. });
  63. });
  64. </script>
  65. <script>
  66. $(document).ready(function(){
  67. $("#box2").click(function(){
  68. $("#about").slideToggle(500);
  69. $("#firstone, #contact, #navi").slideUp("250");
  70. });
  71. });
  72. </script>
  73. <script>
  74. $(document).ready(function(){
  75. $("#box3").click(function(){
  76. $("#contact").slideToggle(500);
  77. $("#about, #firstone, #navi").slideUp("250");
  78. });
  79. });
  80. </script>
  81. <script>
  82. $(document).ready(function(){
  83. $("#box4").click(function(){
  84. $("#navi").slideToggle(500);
  85. $("#about, #contact, #firstone").slideUp("250");
  86. });
  87. });
  88. </script>
  89. </head>
  90.  
  91. <!-- infinite scroll script -->
  92.  
  93. {block:IfInfiniteScroll}<script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>{/block:IfInfiniteScroll}
  94. {block:IfNotInfiniteScroll}{/block:IfNotInfiniteScroll}
  95.  
  96. <!-- tooltip script -->
  97. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  98. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  99. <script>
  100. (function($){
  101. $(document).ready(function(){
  102. $("a[title]").style_my_tooltips({
  103. tip_follows_cursor:true,
  104. tip_delay_time:30,
  105. tip_fade_speed:300,
  106. attribute:"title"
  107. });
  108. });
  109. })(jQuery);
  110. </script>
  111.  
  112. <!-- META STUFFS -->
  113. <meta name="color:background" content="#eee">
  114. <meta name="color:title" content="#fff">
  115. <meta name="color:tooltip text" content="#aaa">
  116. <meta name="color:tooltip background" content="#fff">
  117. <meta name="color:scrollbar" content="#aaa">
  118. <meta name="color:text" content="#575757">
  119. <meta name="color:first box" content="#aaa">
  120. <meta name="color:second box" content="#000">
  121. <meta name="color:third box" content="#aaa">
  122. <meta name="color:fourth box" content="#000">
  123. <meta name="color:content background" content="#fff">
  124. <meta name="color:content border" content="#aaa">
  125. <meta name="color:post link" content="#000">
  126. <meta name="color:post link hover" content="#aaa">
  127. <meta name="color:post info" content="#000">
  128. <meta name="color:post info hover" content="#aaa">
  129. <meta name="color:pagination" content="#aaa">
  130. <meta name="color:pagination hover" content="#000">
  131. <meta name="color:blockquote" content="#aaa">
  132.  
  133. <meta name="image:about" content="http://31.media.tumblr.com/63a5dede8efe0c04350dc23435ada77b/tumblr_mjxwtiQaea1rgdhcao1_500.png">
  134. <meta name="image:background" content="">
  135.  
  136. <meta name="if:500px posts" content="0">
  137. <meta name="if:400px posts" content="1">
  138. <meta name="if:tiny cursor" content="1">
  139. <meta name="if:infinite scroll" content="0">
  140.  
  141. <meta name="text:url" content="urlhere">
  142. <meta name="text:link 1" content="home">
  143. <meta name="text:link 1 url" content="/">
  144. <meta name="text:link 2" content="ask">
  145. <meta name="text:link 2 url" content="/ask">
  146. <meta name="text:link 3" content="past">
  147. <meta name="text:link 3 url" content="/archive">
  148. <meta name="text:link 4" content="">
  149. <meta name="text:link 4 url" content="">
  150. <meta name="text:link 5" content="">
  151. <meta name="text:link 5 url" content="">
  152. <meta name="text:link 6" content="">
  153. <meta name="text:link 6 url" content="">
  154. <meta name="text:link 7" content="">
  155. <meta name="text:link 7 url" content="">
  156. <meta name="text:link 8" content="">
  157. <meta name="text:link 8 url" content="">
  158. <meta name="text:link 9" content="">
  159. <meta name="text:link 9 url" content="">
  160. <meta name="text:link 10" content="">
  161. <meta name="text:link 10 url" content="">
  162.  
  163.  
  164. <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
  165.  
  166. <style type="text/css">
  167.  
  168. /*tooltip css*/
  169. #s-m-t-tooltip {
  170. max-width:300px;
  171. border-radius:3px;
  172. position:absolute;
  173. z-index:99999;
  174. margin-top:20px;
  175. text-transform:uppercase;
  176. padding:4px;
  177. background-color:{color:tooltip background};
  178. font-family:arial;
  179. font-size:11px;
  180. color:{color:tooltip text};
  181. }
  182.  
  183. ::-webkit-scrollbar {
  184. width: 8px;
  185. }
  186.  
  187. ::-webkit-scrollbar-track {
  188. background-color:{color:background};
  189. }
  190.  
  191. ::-webkit-scrollbar-thumb {
  192. background-color:{color:scrollbar};
  193. }
  194.  
  195. body {
  196. font-family:'Lato', arial;
  197. background-color:{color:background};
  198. background-image:{image:background};
  199. overflow-y:hidden;
  200. overflow-x:auto;
  201. }
  202.  
  203. h3 {
  204. text-transform:uppercase;
  205. text-align:center;
  206. letter-spacing:4px;
  207. color:{color:title};
  208. }
  209.  
  210. a {
  211. text-decoration:none;
  212. -webkit-transition:0.5s;
  213. -moz-transition:0.5s;
  214. -ms-transition:0.5s;
  215. -o-transition:0.5s;
  216. transition:0.5s;
  217. }
  218.  
  219. blockquote {
  220. border-left:2px solid {color:blockquote};
  221. padding-left:8px;
  222. }
  223.  
  224. #main {
  225. width:600px;
  226. margin:auto;
  227. height:100vh;
  228. background-color:{color:content border};
  229. }
  230.  
  231. #links {
  232. position:absolute;
  233. margin:auto;
  234. padding:0;
  235. top:0;
  236. }
  237.  
  238. .box {
  239. width:150px;
  240. height:12vh;
  241. display:inline-block;
  242. margin:0;
  243. padding:0;
  244. -webkit-transition:0.5s;
  245. -moz-transition:0.5s;
  246. -ms-transition:0.5s;
  247. -o-transition:0.5s;
  248. transition:0.5s;
  249. }
  250.  
  251. .box:hover {
  252. opacity:0.5;
  253. }
  254.  
  255. .clicked {
  256. opacity:0.5;
  257. }
  258.  
  259. #content {
  260. margin-top:12vh;
  261. height:80vh;
  262. background-color:{color:content border};
  263. }
  264.  
  265. .stuff {
  266. width:560px;
  267. height:75vh;
  268. margin-top:10px;
  269. margin-left:10px;
  270. background-color:{color:content background};
  271. position:absolute;
  272. display:none;
  273. padding:10px;
  274. overflow-y:auto;
  275. overflow-x:hidden;
  276. text-align:center;
  277. color:{color:text};
  278. }
  279.  
  280. #box1 {background-color:{color:first box};}
  281. #firstone a {color:{color:first box};}
  282.  
  283. #firstone {
  284. display:block;
  285. font-size:12px;
  286. }
  287.  
  288. #firstone pre {
  289. overflow-x:auto;
  290. }
  291.  
  292. #postage {
  293. {block:if500pxposts}width:500px;{/block:if500pxposts}
  294. {block:if400pxposts}width:400px;{/block:if400pxposts}
  295. margin-top:30px;
  296. margin-bottom:50px;
  297. margin-left:auto;
  298. margin-right:auto;
  299. text-align:left;
  300. }
  301.  
  302. #postage a {
  303. color:{color:post link};
  304. }
  305.  
  306. #postage a:hover {
  307. color:{color:post link hover};
  308. }
  309.  
  310. #postage h2 {
  311. text-align:center;
  312. text-transform:uppercase;
  313. letter-spacing:4px;
  314. }
  315.  
  316. #words {
  317. font-style:italic;
  318. font-size:15px;
  319. }
  320.  
  321. .source {
  322. text-align:right;
  323. padding-right:5px;
  324. }
  325.  
  326. #linkpost {
  327. text-align:center;
  328. font-size:11px;
  329. }
  330.  
  331. .linkety {
  332. font-size:15px;
  333. }
  334.  
  335. #chat ul {
  336. list-style:none;
  337. font-family:consolas;
  338. margin-left:-30px;
  339. }
  340.  
  341. .label {
  342. text-transform:uppercase;
  343. font-weight:bold;
  344. }
  345.  
  346. #audioplayer {
  347. width:30px;
  348. height:30px;
  349. overflow:hidden;
  350. position:absolute;
  351. margin-top:35px;
  352. margin-left:35px;
  353. opacity:0.7;
  354. }
  355.  
  356. #albumart {
  357. width:100px;
  358. height:100px;
  359. background-color:#e3e3e3;
  360. }
  361.  
  362. #ask span {
  363. font-style:italic;
  364. }
  365.  
  366. .info a {
  367. color:{color:post info}!important;
  368. }
  369.  
  370. .info a:hover {
  371. color:{color:post info hover}!important;
  372. }
  373. .info {
  374. padding-top:5px;
  375. color:{color:post info};
  376. text-transform:uppercase;
  377. text-align:center;
  378. margin-top:5px;
  379. font-size:11px;
  380. -webkit-transition:0.6s;
  381. -moz-transition:0.6s;
  382. -ms-transition:0.6s;
  383. -o-transition:0.6s;
  384. }
  385.  
  386. .tags {
  387. text-align:center;
  388. font-size:11px;
  389. -webkit-transition:0.6s;
  390. -moz-transition:0.6s;
  391. -ms-transition:0.6s;
  392. -o-transition:0.6s;
  393. }
  394.  
  395. .tags a {
  396. color:{color:post info}!important;
  397. }
  398.  
  399. .tags a:hover {
  400. color:{color:post info hover}!important;
  401. }
  402.  
  403. #pag {
  404. text-transform:uppercase;
  405. color:{color:pagination};
  406. letter-spacing:4px;
  407. }
  408.  
  409. #pag a {
  410. color:{color:pagination};
  411. }
  412.  
  413. #pag a:hover {
  414. color:{color:pagination hover};
  415. }
  416.  
  417. #box2 {background-color:{color:second box};}
  418. #about h3 {color:{color:second box};}
  419.  
  420. #contact a {color:{color:third box};}
  421. #contact h3 {color:{color:third box};}
  422. #contact h4 {color:{color:third box};
  423. text-transform:uppercase;
  424. font-size:14px;
  425. }
  426.  
  427. #contact p {
  428. font-size:13px;
  429. line-height:13px;
  430. }
  431. #box3 {background-color:{color:third box};}
  432.  
  433. #navi h3 {color:{color:fourth box};}
  434. #navi a {background-color:{color:fourth box};
  435. color:{color:content background};
  436. display:inline-block;
  437. text-transform:uppercase;
  438. letter-spacing:2px;
  439. margin-top:2px;
  440. margin-bottom:2px;
  441. font-size:14px;
  442. width:200px;
  443. margin-left:auto;
  444. margin-right:auto;
  445. padding:10px 0 10px 0;
  446. }
  447.  
  448. #navi a:hover {
  449. letter-spacing:0;
  450. text-decoration:none;
  451. }
  452. #box4 {background-color:{color:fourth box};}
  453.  
  454. #credit {
  455. right:10px;
  456. bottom:15px;
  457. font-size:11px;
  458. padding:0 5px 2px 5px;
  459. text-transform:uppercase;
  460. text-align:center;
  461. background-color:#000;
  462. position:fixed;
  463. font-family:arial;
  464. opacity:0.8;
  465. }
  466.  
  467. #credit a {
  468. color:#fff;
  469. }
  470.  
  471. #credit a:hover {
  472. text-shadow:0 0 2px #fff;
  473. color:#000;
  474. opacity:1;
  475. }
  476.  
  477. {block:IfTinyCursor}
  478. /* Start http://www.cursors-4u.com */ body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), progress !important;} /* End http://www.cursors-4u.com */
  479. {/block:IfTinyCursor}
  480.  
  481. {CustomCSS}
  482. </style>
  483.  
  484. </head>
  485.  
  486. <body>
  487.  
  488. <div id="main">
  489.  
  490. <div id="links">
  491.  
  492. <!-- CHANGE the title of the boxes up top if you want -->
  493.  
  494. <!-- BOX 1 --><a title="posts"><div class="box clicked" id="box1"></div></a><!--
  495. BOX 2--><a title="about"><div class="box" id="box2"></div></a><!--
  496. BOX 3--><a title="contact"><div class="box" id="box3"></div></a><!--
  497. BOX 4--><a title="navi"><div class="box" id="box4"></div></a>
  498. </div>
  499.  
  500. <div id="content">
  501.  
  502. <!-- ABOUT CODE -->
  503.  
  504. <div class="stuff" id="firstone">
  505. <div class="autopagerize_page_element">
  506. {block:Posts}
  507. <div id="postage">
  508.  
  509. {block:Text}
  510. <div id="text">
  511. <h2><a href="{Permalink}">{Title}</a></h2>
  512. {Body}
  513. </div> <!--text post-->
  514. {/block:Text}
  515.  
  516. {block:Photo}
  517. <div id="photo">
  518. {block:if500pxposts}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/><{/block:if500pxposts}
  519. {block:If400pxPosts}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{/block:if400pxPosts}
  520. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  521. </div> <!--photo post-->
  522. {/block:Photo}
  523.  
  524. {block:Panorama}
  525. <div id="panorama">
  526. {LinkOpenTag}
  527. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  528. {LinkCloseTag}
  529. {block:Caption}
  530. <div class="caption">{Caption}</div>
  531. {/block:Caption}
  532. </div> <!--panorama post-->
  533. {/block:Panorama}
  534.  
  535. {block:Photoset}
  536. <div id="photoset">
  537. {block:If500pxPosts}{Photoset-500}{/block:If500pxPosts}
  538. {block:If400pxPosts}{Photoset-400}{/block:if400pxPosts}
  539. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  540. </div> <!--photoset-->
  541. {/block:Photoset}
  542.  
  543. {block:Quote}
  544. <div id="quote">
  545. <div id="words">{Quote}</div>
  546. {block:Source}<div class="source">- {Source}</div>{/block:Source}
  547. </div> <!--quote-->
  548. {/block:Quote}
  549.  
  550. {block:Link}
  551. <div id="linkpost">
  552. {block:PostTitle}<h2><a href="{Permalink}">{PostTitle}</a></h2>{/block:PostTitle}
  553. <a href="{URL}" class="linkety" {Target}>{Name}</a>
  554. {block:Description}
  555. <div class="linkdesc">{Description}</div>
  556. {/block:Description}
  557. </div> <!--link-->
  558. {/block:Link}
  559.  
  560. {block:Chat}
  561. <div id="chat">
  562. <h2><a href="{Permalink}">{Title}</a></h2>
  563. <ul>
  564. {block:Lines}
  565. <li class="{Alt} user_{UserNumber}">
  566. {block:Label}
  567. <span class="label">{Label}</span>
  568. {/block:Label}{Line}
  569. </li>
  570. {/block:Lines}
  571. </ul>
  572. </div> <!--chat-->
  573. {/block:Chat}
  574.  
  575. {block:Video}
  576. <div id="video">
  577. {block:PostTitle}<h2><a href="{Permalink}">{PostTitle}</a></h2>{/block:PostTitle}
  578. {block:If500pxPosts}{Video-500}{/block:If500pxPosts}
  579. {block:If400pxPosts}{Video-400}{/block:if400pxPosts}
  580. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  581. </div> <!--video-->
  582. {/block:Video}
  583.  
  584. {block:Audio}
  585. <div id="audio">
  586. <table style="padding:5px; background-color:#fff;margin-bottom:5px;">
  587. <tr>
  588. <td style="vertical-align:top;padding-right:10px;"><div id="audioplayer">{AudioPlayerWhite}</div>
  589. <div id="albumart">
  590. {block:AlbumArt}
  591. <img src="{AlbumArtURL}" style="width:100px;">
  592. {/block:AlbumArt}</div></td>
  593. <td style="vertical-align:top; font-size:11px; line-height:12px"> {block:TrackName}<i>title:</i> {TrackName} <br />{/block:TrackName}
  594. {block:Artist}<i>artist:</i> {Artist} <br />{/block:Artist}
  595. {block:Album}<i>album:</i> {Album} <br />{/block:Album}
  596. {block:PlayCount}<i>played:</i> {FormattedPlayCount} times{/block:PlayCount}
  597. </td>
  598. </tr>
  599. </table>
  600. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  601. </div> <!--audio-->
  602. {/block:Audio}
  603.  
  604. {block:Answer}
  605. <div id="ask">
  606. <div style="text-transform:uppercase; background-color:#e3e3e3; padding:10px; margin-bottom:5px;">— <span>{Asker}</span>: {Question}</div>
  607. <div style="text-align:center;">{block:Answerer}— <span>{Answerer}</span> replied: {/block:Answerer}{Answer}</div>
  608. {block:Answerer}<blockquote>{Replies}</blockquote>{/block:Answerer}
  609. </div> <!--ask-->
  610. {/block:Answer}
  611.  
  612. <div class="info">
  613. <a title="{TimeAgo}" href="{Permalink}">{NoteCountWithLabel}</a> {block:RebloggedFrom} - <a title="{ReblogParentName}" href="{ReblogParentURL}">via{/block:RebloggedFrom} {block:ContentSource}<a title="{SourceTitle}" href="{SourceURL}">, src</a>{/block:ContentSource} - <a href="{ReblogURL}" target="_blank">reblog</a>
  614. </div> <!--info-->
  615.  
  616. {block:HasTags}
  617. <div class="tags">
  618. {block:Tags} <a href="{TagURL}">#{Tag}</a> {/block:Tags}
  619. </div>
  620. {/block:HasTags}
  621.  
  622. {block:PermalinkPage}
  623. {PostNotes}
  624. {/block:PermalinkPage}
  625.  
  626. </div> <!--postage-->
  627. {/block:Posts}
  628. </div>
  629.  
  630. {block:IfNotInfiniteScroll}
  631. {block:Pagination}
  632. <div id="pag">
  633.  
  634. {block:PreviousPage}<a href="{PreviousPage}" style="letter-spacing:0;">back</a> — {/block:PreviousPage} {block:JumpPagination length="5"}{block:CurrentPage} [{PageNumber}] {/block:CurrentPage} {block:JumpPage} <a href="{URL}">{PageNumber}</a> {/block:JumpPage} {/block:JumpPagination}
  635. {block:NextPage} — <a href="{NextPage}" style="letter-spacing:0;">forth</a>{/block:NextPage}
  636. </div>
  637. {/block:Pagination}
  638. {block:IfNotInfiniteScroll}
  639. {block:IfInfiniteScroll}{/block:IfInfiniteScroll}
  640. </div>
  641.  
  642. <div class="stuff" id="about">
  643.  
  644. <h3>about</h3>
  645. <img src="{image:about}" style="max-width:400px;" />
  646. <p>{Description}</p>
  647. </div>
  648.  
  649.  
  650. <div class="stuff" id="contact">
  651.  
  652. <h3>faq</h3>
  653. <!-- FAQ GOES HERE -->
  654. <h4>Question?</h4>
  655. <p>Answer!</p>
  656.  
  657. <h4>Should I put an FAQ here?</h4>
  658. <p>If you want to, go ahead. If you don't, then just erase all this extra code in the edit HTML section.</p>
  659.  
  660. <h4>How do I change FAQ?</h4>
  661. <p>In the edit HTML section. Just ctrl + f for "faq goes here" and then add, remove, and change as you wish.</p>
  662.  
  663. <h4>Why isn't my ask form working?</h4>
  664. <p>Make sure that you type in your url in the customization bar. You only need to type in your username, not the .tumblr.com part. So I would put "primrosetylers" instead of "primrosetylers.tumblr.com."</p>
  665.  
  666. <!-- ASK FORM -->
  667. <p><iframe src="http://www.tumblr.com/ask_form/{text:url}.tumblr.com" id="ask_form" frameborder="0" height="200" scrolling="no" width="500px;"></iframe></p>
  668.  
  669. </div>
  670.  
  671. <div class="stuff" id="navi">
  672.  
  673. <h3>Links</h3>
  674. {block:iflink1}<a href="{text:link 1 url}">{text:link 1}</a>{/block:iflink1}
  675. {block:iflink2}<a href="{text:link 2 url}">{text:link 2}</a>{/block:iflink2}
  676. {block:iflink3}<a href="{text:link 3 url}">{text:link 3}</a>{/block:iflink3}
  677. {block:iflink4}<a href="{text:link 4 url}">{text:link 4}</a>{/block:Iflink4}
  678. {block:iflink5}<a href="{text:link 5 url}">{text:link 5}</a>{/block:iflink5}
  679. {block:iflink6}<a href="{text:link 6 url}">{text:link 6}</a>{/block:iflink6}
  680. {block:iflink7}<a href="{text:link 7 url}">{text:link 7}</a>{/block:iflink7}
  681. {block:iflink8}<a href="{text:link 8 url}">{text:link 8}</a>{/block:iflink8}
  682. {block:iflink9}<a href="{text:link 9 url}">{text:link 9}</a>{/block:iflink9}
  683. {block:iflink10}<a href="{text:link 10 url}">{text:link 10}</a>{/block:iflink10}
  684.  
  685. </div>
  686.  
  687. </div>
  688. <h3>{Title}</h3>
  689. </div>
  690.  
  691. <div id="credit"><a href="http://primrosetylers.tumblr.com">✿THEME</a></div>
  692.  
  693. </body>
  694. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement