API tools faq
paste
Advertisement
mellywheats

Picturesque theme

mellywheats
Jun 2nd, 2016
421
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4. •plz don't remove the 'theme' link in the description
  5. •the sidebar picture looks best if it's close to a square
  6. •description is optional
  7. •description looks best with around 5+ lines
  8. •Thanks for choosing melly's themes!!
  9. •The theme will look kinda weird on this edit html page but it's fine when you close it (:
  10. •Enjoy!!
  11. -->
  12.  
  13.  
  14.  
  15.  
  16. <head>
  17.  
  18. <link rel=”shortcut icon” href=”http://67.media.tumblr.com/tumblr_lu2dcfnrX71qfoi4t.png”>
  19.  
  20.  
  21.  
  22. <title>{title}-{block:posttitle}{posttitle}{/block:posttitle}</title>
  23. <!-- meta colors -->
  24. <meta name="color:background" content="#eeeeee"/>
  25. <meta name="color:post background" content="#fff"/>
  26. <meta name="color:scrollbar" content="#e89e8c"/>
  27. <meta name="color:words" content="#666"/>
  28. <meta name="color:sidebar background" content=""/>
  29. <meta name="color:description" content="#eeeeee"/>
  30. <meta name="color:sidebar links" content="#b33c99"/>
  31. <meta name="color:desciption box" content="#ccc"/>
  32. <meta name="color:post background" content="#fff"/>
  33. <meta name="color:post link" content="#000"/>
  34. <meta name="color:linkspace" content="#000"/>
  35. <meta name="color:sidebar hover" content="#dccbe7"/>
  36. <meta name="color:title" content="#e89e8c" />
  37. <meta name="color:shadows" content="#888"/>
  38. <meta name="color:link hover" content="#557755"/>
  39. <meta name="color:quote color" content="#000"/>
  40. <meta name="color:text post title" content="#000"/>
  41. <!-- meta links -->
  42. <meta name="text:link 1 name" content=""/>
  43. <meta name="text:link 1" content="http://"/>
  44. <meta name="text:link 2 name" content=""/>
  45. <meta name="text:link 2" content="http://"/>
  46. <meta name="text:link 3 name" content=""/>
  47. <meta name="text:link 3" content="http://"/>
  48. <meta name="text:ask" content="/ask">
  49. <meta name="text:link spacer" content="+"/>
  50. <!-- meta images -->
  51. <meta name="image:sidebar" content=""/>
  52. <!-- meta "ifs" -->
  53. <meta name="if:description" content="1"/>
  54. <meta name="if:title" content="1"/>
  55. <meta name="if:3 columns" content="0"/>
  56. <meta name="if:ifinitescroll" content="0"/>
  57. <meta name="if:CustomLink1" content="0">
  58. <meta name="if:CustomLink2" content="0">
  59. <meta name="if:CustomLink3" content="0">
  60. <meta name="if:shadows" content"0"/>
  61. <meta name="if:SidebarImage" content="0"/>
  62. <!-- meta sizes? -->
  63. <meta name="text:title size" content="25" />
  64.  
  65.  
  66.  
  67.  
  68.  
  69.  
  70.  
  71.  
  72.  
  73.  
  74. <!-- fonts -->
  75. <link href='https://fonts.googleapis.com/css?family=Neucha' rel='stylesheet' type='text/css'>
  76.  
  77. <link href='https://fonts.googleapis.com/css?family=Delius' rel='stylesheet' type='text/css'>
  78.  
  79. <link href='https://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet' type='text/css'>
  80.  
  81. <link href='https://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'>
  82.  
  83. <link href='https://fonts.googleapis.com/css?family=Delius+Unicase:400,700' rel='stylesheet' type='text/css'>
  84.  
  85.  
  86. <!-- end fonts -->
  87. <style type=text/css>
  88.  
  89.  
  90.  
  91. *, body, a, a:hover {cursor: url(http://i1258.photobucket.com/albums/ii535/MellyWheats/lol-im-gonna-make-this-cute_zpsiwwqhce5.png), auto;}
  92.  
  93.  
  94.  
  95.  
  96. ::-webkit-scrollbar {width: 3px; height: 3px; background: {color:post background}; }
  97. ::-webkit-scrollbar-thumb { background-color:{color:scrollbar};
  98. -webkit-border-radius: 1ex; }
  99.  
  100.  
  101.  
  102. body{
  103. color:{color:words};
  104. font-family: 'Delius', cursive;
  105. font-size:10px;
  106. background:{color:background};
  107. }
  108. #entries {
  109. width:1000px;
  110. }
  111.  
  112. #posts{
  113. position:relative;
  114. background:{color:post background};
  115. color: {color:words};
  116.  
  117. {block:if3columns}
  118. width:250px;
  119. {/block:if3columns}
  120.  
  121.  
  122.  
  123. {block:ifnot3columns}
  124. width:400px;
  125. {/block:ifnot3columns}
  126.  
  127. padding:20px;
  128. margin:10px;
  129. float:left;
  130.  
  131. {block:ifshadows}
  132. box-shadow:3px 3px 3px {color:shadows};
  133. {/block:ifshadows}
  134.  
  135. {block:ifnotshadows}
  136. box-shadow:0px;
  137. {/block:ifnotshadows}
  138. }
  139.  
  140. #posts img{
  141.  
  142. border:1px solid #ccc;
  143. width:100%;
  144. height:auto;
  145. }
  146.  
  147.  
  148. #sb{
  149. background-color:{color:sidebar background};
  150. width:200px;
  151. height:370px;
  152. border:1px solid gray;
  153. margin-top:200px;
  154. margin-left:80%;
  155. margin-right:auto;
  156. position:fixed;
  157. }
  158.  
  159. #sbp{
  160. width:180px;
  161. margin:auto;
  162. margin-top:10px;
  163.  
  164. }
  165.  
  166. #sbp img{
  167. max-width:180px;
  168. height:190px;
  169. border:1px solid black;
  170.  
  171. }
  172.  
  173. #desc {
  174. font-family: 'Neucha', cursive;
  175. border:1px dotted {color:description box};
  176. border-radius:5px;
  177. margin-left:auto;
  178. margin-right:auto;
  179. margin-top:10px;
  180. width:180px;
  181. height:70px;
  182. color:{color:description};
  183. font-size:10pt;
  184. padding:3px;
  185. text-align:center;
  186. overflow:scroll;
  187. }
  188.  
  189. #linkity {
  190. color:{color:linkspace};
  191. font:{text:linkspacer};
  192. text-align:center;
  193. font-size:15px;
  194. border:3px dashed transparent;
  195. position:fixed;
  196. width:180px;
  197. margin-top:10px;
  198. margin-left:10px;
  199. margin-right:10px;
  200.  
  201. }
  202.  
  203. h2 {
  204. font-family: 'Sacramento', cursive;
  205. font-size:25px;
  206. color:{color:text post title};
  207. }
  208.  
  209.  
  210. body a{text-decoration:none;
  211. font:helvetica;
  212. color:{color:post link};
  213. }
  214.  
  215. body a:hover {
  216. color:{color:link hover};
  217. }
  218.  
  219. #bigbutt {
  220. height:50px;
  221. padding:5px;
  222. border:transparent;
  223. margin:10px 0px 0px 0px;
  224. overflow:scroll;
  225. }
  226. #smallbutt {
  227. height:30px;
  228. padding:5px;
  229. border:1px solid transparent;
  230. margin:10px 0px 0px 0px;
  231. overflow:scroll;
  232. }
  233. #qt {
  234. font-family: 'Amatic SC', cursive;
  235. font-size:30px;
  236. color:{color:quote color};
  237. }
  238. #linkity a{
  239. color:{color:sidebar links};
  240. font-size:15px;
  241. transition:color .2s;
  242. transition:letter-spacing .2s;
  243. -webkit-transition-duration:.2s;
  244. }
  245. #linkity a:hover {
  246. letter-spacing:2px;
  247. color:{color:sidebar hover};
  248. text-decoration:underline;
  249. }
  250. h1 {
  251. font-family:'Delius Unicase', cursive;
  252. }
  253. #tit {
  254. position:absolute;
  255. height:40px;
  256. width:200px;
  257. border:2px solid transparent;
  258. font-family:'Delius Unicase', cursive;
  259. font-size:{text:title size}px;
  260. margin-left:auto;
  261. margin-top:170px;
  262. padding:3px;
  263. color:{color:title};
  264. overflow:hidden;
  265. }
  266.  
  267. .notes a{
  268. text-decoration:underline;
  269. transition:letter-spacing ease-in 1s;
  270. transition:letter-spacing ease-out 1s;
  271. transition:color ease-in-out .5s;
  272. }
  273.  
  274. .notes a:hover{
  275. letter-spacing:1px;
  276. color:{color:link hover};
  277. }
  278.  
  279.  
  280. #speaker {
  281. color:black;
  282. }
  283. #pages a{
  284. color:{color:sidebar links};
  285. font-size:15px;
  286. transition:color .2s;
  287. transition:letter-spacing .2s;
  288. }
  289.  
  290. #pages a:hover {
  291. letter-spacing:2px;
  292. color:{color:sidebar hover};
  293. text-decoration:underline;
  294. }
  295. #outline {
  296. border:1px;
  297. }
  298.  
  299. #no {
  300. background:black;
  301. width:180px;
  302. height:200px;
  303. margin:auto;
  304. margin-top:10px;
  305. }
  306.  
  307.  
  308.  
  309. </style>
  310. </head>
  311.  
  312.  
  313.  
  314.  
  315.  
  316.  
  317.  
  318.  
  319.  
  320.  
  321.  
  322.  
  323. <body bgcolor="{color:background}">
  324.  
  325.  
  326.  
  327.  
  328.  
  329.  
  330.  
  331.  
  332.  
  333. <!-- SIDE BAR !!-->
  334.  
  335. <div id=sb>
  336.  
  337. {block:iftitle}<div id=tit>{title}</div>{/block:iftitle}
  338.  
  339.  
  340.  
  341. <div id=sbp>
  342. {block:ifSidebarImage}<image src="{image:sidebar}"/>{/block:ifSidebarImage}
  343. </div>
  344.  
  345.  
  346. {block:ifnotSidebarImage}<div id=no></div>{/block:ifnotSidebarImage}
  347.  
  348.  
  349.  
  350.  
  351. {block:ifdescription}<div id=desc>
  352. <center>{block:description} {description} {/block:description}</center></div>
  353. {/block:ifdescription}
  354.  
  355.  
  356.  
  357.  
  358.  
  359.  
  360. <div id=linkity>
  361. <a href="/">home</a>
  362. {text:link spacer}
  363. <a href="/ask">{text:Ask}</a>
  364.  
  365. {block:IfCustomLink1}{text:link spacer}
  366. <a href="{text:Link 1}">{text:Link 1 name}</a>
  367. {/block:IfCustomLink1}
  368. {block:IfCustomLink2}{text:link spacer}
  369. <a href="{text:Link 2}">{text:Link 2 name}</a>
  370. {/block:IfCustomLink2}
  371. {block:IfCustomLink3}{text:link spacer}
  372. <a href="{text:Link 3}">{text:Link 3 name}</a>
  373. {/block:IfCustomLink3}
  374.  
  375.  
  376. {block:haspages}
  377. {block:pages}
  378. {text:link spacer}
  379. <a href="{url}">{label}</a>
  380. {/block:pages}
  381. {/block:haspages}
  382.  
  383. {block:ifnotifinitescroll}
  384. <div id=pages>
  385. {block:PreviousPage}<a href="{PreviousPage}"> « </a>{/block:PreviousPage}
  386.  
  387. {block:NextPage}<a href="{NextPage}"> » </a>{/block:NextPage}
  388. {/block:ifnotifinitescroll}
  389.  
  390. <center><a href="http://mellysthemes.tumblr.com">theme</a></center>
  391.  
  392.  
  393.  
  394.  
  395.  
  396.  
  397. </div>
  398. </div>
  399.  
  400.  
  401. </div>
  402. <!-- END OF SIDE BAR!!!-->
  403.  
  404.  
  405.  
  406.  
  407. <div class="autopagerize_page_element">
  408. <div id=entries>
  409.  
  410. {block:ififinitescroll}
  411. {block:IndexPage}<div class="column navigation" id="navigation">
  412. {block:Pagination}
  413. {block:PreviousPage}<a href="{PreviousPage}" class="navigate">{/block:PreviousPage}{block:PreviousPage}</a>{/block:PreviousPage}
  414. {block:NextPage}<a href="{NextPage}" class="navigate" id="nextPage">{/block:NextPage}{block:NextPage}</a>{/block:NextPage}{/block:Pagination}
  415. </div>{/block:IndexPage}
  416. {/block:ififinitescroll}
  417.  
  418.  
  419.  
  420.  
  421. {block:posts}
  422.  
  423.  
  424.  
  425.  
  426. <!--just sperating the fckn posts block-->
  427.  
  428. <div id=posts>
  429.  
  430.  
  431. {Block:text}
  432. <center>{block:title}<h2>{title}</h2>{/block:title}</center>
  433.  
  434. {body}
  435.  
  436. {/block:text}
  437.  
  438.  
  439.  
  440. {block:photo}
  441. {block:if3columns}<img src="{photourl-250}">{/block:if3columns}
  442. {block:ifnot3columns}<img src="{photourl-400}">{/block:ifnot3columns}
  443. <div id=bigbutt><center>{block:caption}{caption}{/block:caption}</center></div>
  444. {/block:photo}
  445.  
  446.  
  447.  
  448. {block:photoset}
  449. {block:if3columns}{photoset-250}{/block:if3columns}
  450. {block:ifnot3columns}{photoset-400}{/block:ifnot3columns}
  451. <div id=bigbutt>{block:caption}{caption}{/block:caption}</div>
  452. {/block:photoset}
  453.  
  454.  
  455.  
  456. {block:quote}
  457. <h3 id=qt>{quote}</h3>
  458. <div id=smallbutt>{block:source}-{source}{block:source}</div>
  459. {/block:quote}
  460.  
  461.  
  462.  
  463. {block:link}
  464. <h2><a href="{url}" target="{target}">{name}</a>
  465. <div id=smallbutt>{block:description}{description}{/block:description}</div>
  466. {/block:link}
  467.  
  468.  
  469.  
  470. {block:chat}
  471. <h2>{block:title}{title}{/block:title}</h2>
  472. {block:lines}{block:label}<div id=speaker>{label}</div>{/block:label} {line} <br>{/block:lines}
  473. {/block:chat}
  474.  
  475.  
  476.  
  477. {block:audio}
  478. {audioplayer}
  479. {/block:audio}
  480.  
  481.  
  482.  
  483. {block:video}
  484. {block:if3columns}{video-250}{/block:if3columns}
  485. {block:ifnot3columns}{video-400}{/block:ifnot3columns}
  486. <div id=bigbutt>{block:caption}{caption}{/block:caption}</div>
  487.  
  488. <div class=notes>
  489. <center><a href="{Permalink}">{notecount}</a></center>
  490. </div>
  491. {/block:video}
  492.  
  493.  
  494.  
  495.  
  496.  
  497.  
  498. {block:PostNotes}
  499. <div id="notecontainer">{PostNotes}</div>
  500. {/block:PostNotes}
  501.  
  502.  
  503.  
  504.  
  505.  
  506. <center>
  507. <div class="notes">
  508. <a href="{Permalink}">
  509. {block:NoteCount}{NoteCount}{/block:NoteCount}
  510. </a>
  511. </div>
  512. </center>
  513.  
  514. </div>
  515. <!--ow my ear hurts idk why-->
  516.  
  517. {/block:posts}
  518. </div>
  519.  
  520.  
  521.  
  522.  
  523. <!------ S C R I P T S! ------>
  524.  
  525. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  526. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  527. <script type="text/javascript" src="http://static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>
  528.  
  529. <script type="text/javascript">
  530. $(window).load(function(){
  531. var $wall = $('#entries');
  532. $wall.imagesLoaded(function(){
  533. $wall.masonry({
  534. itemSelector: '#posts',
  535. isAnimated : true
  536. });
  537. });
  538. $wall.infinitescroll({
  539. navSelector : "div#navigation",
  540. nextSelector : "div#navigation a#nextPage",
  541. itemSelector : '#posts',
  542. loadingImg : "",
  543. loadingText : " ",
  544. donetext : " ",
  545. extraScrollPx : 0,
  546. bufferPx : 10000,
  547. debug : false,
  548. errorCallback: function() {
  549. $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
  550. }},
  551. function( newElements ) {
  552. var $newElems = $( newElements );
  553. $newElems.hide();
  554. $newElems.imagesLoaded(function(){
  555. $wall.masonry( 'appended', $newElems, {isAnimated: true, animationOptions: {duration: 250, easing: 'linear', queue: false}}, function(){$newElems.fadeIn('slow');} );
  556. });
  557. }); $('#entries').show(500);
  558. });
  559. </script>
  560.  
  561. <script language="JavaScript">
  562. function function1(){
  563. window.scrollTo(0,5);
  564. }
  565. function function2(){
  566. window.scroll(0,2);
  567. }
  568. </script>
  569. <!---- end masonry scripts -->
  570.  
  571.  
  572.  
  573.  
  574.  
  575.  
  576.  
  577. </body>
  578. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!