API tools faq
paste
Advertisement
0cherrylove

simple theme by teejpg (sugaracfe)

0cherrylove
Aug 30th, 2014
695
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.43 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <!--
  6.  
  7.  
  8.  
  9.  
  10.  
  11.      "simple theme" THM BY teejpg (sugarcafe)
  12.                    - http://teejpg.tumblr.com/
  13.  
  14.             THE RULES:
  15.  
  16. 1. Use all you want! Customize everything, do whatever. Just DO NOT remove the credits! If you customize it enough that it doesn't look like my theme anymore, at least give credit on another page or something :)
  17. 2. Do not claim as your own.
  18. 3. If you customize it too much and somehow screw up the coding, I probably won't help you ^^;
  19. 4. If you have any questions, please feel free to ask. BUT FIRST - try googling your problem, I'm sure you'll be able to find better help than I can probably give you haha
  20.  
  21.       That's it! Enjoy the theme! <3^^
  22.      
  23.       for cursor and screen effects go here
  24.       http://sugarcafes.wix.com/tumblr-html
  25.  
  26. -->
  27.  
  28. <head>
  29.  
  30. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="http://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script><a href="javascript:;" id="scrollToTop"><img src=" " border="0"></a>
  31.  
  32. <script type="text/javascript"
  33.  
  34. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  35.  
  36.  
  37.  
  38. <script type="text/javascript"
  39.  
  40. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  41.  
  42.  
  43.  
  44. <title>{title}</title>
  45.  
  46.  
  47.  
  48. <link rel="shortcut icon"img="http://media.tumblr.com/99123d4bf7ad63a1bb4e87bbd0a28fb5/tumblr_inline_nb4zz4mcmK1rfw5am.gif">
  49.  
  50.  
  51.  
  52. <meta name="if:250px" content="1">
  53. <meta name="if:photo fade" content="1">
  54. <meta name="if:infinite scroll" content="1">
  55. <meta name="if:top bar" content="1">
  56. <meta name="if:extra nav" content="1">
  57.  
  58. <meta name="color:BG" content="#fff">
  59. <meta name="color:postdescBG" content="#fff">
  60. <meta name="color:postBG" content="#fff">
  61. <meta name="color:text" content="#C4C4C4">
  62. <meta name="color:link" content="#bfbfbf">
  63. <meta name="color:link hover" content="#f0f0f0">
  64. <meta name="color:link click" content="#fff">
  65. <meta name="color:title" content="#bfbfbf">
  66. <meta name="color:permatext" content="#cccccc">
  67. <meta name="color:permashadow" content="#F0F0F0">
  68. <meta name="color:scrollbar" content="#DEDEDE">
  69. <meta name="color:scrollbarBG" content="#fff">
  70. <meta name="color:borders" content="#E8E8E8">
  71. <meta name="color:selection" content="#DEDEDE">
  72. <meta name="color:desctext" content="#cccccc">
  73. <meta name="color:sidebar title" content="#bfbfbf">
  74. <meta name="color:Border" content="#eeeeee" />
  75. <meta name="color:Posts" content="#ffffff" />
  76.  
  77.  
  78. <meta name="text:fade" content="0"/>
  79. <meta name="text:img opacity" content=".8"/>
  80. <meta name="text:sidebar title" content="title"/>
  81. <meta name="text:extra nav title" content="navigate"/>
  82. <meta name="text:pixel margin bottom" content="-35"/>
  83. <meta name="text:pixel margin left" content="-15"/>
  84.  
  85.  
  86. <meta name="image:Background"content="https://31.media.tumblr.com/ab1ec69c9a482bddfc3c9c226741953a/tumblr_inline_nb51qsnV6v1rfw5am.png"
  87. <meta name="image:Sidebar" content=""/>
  88.  
  89.  
  90. <meta name="text:link one" content="/">
  91. <meta name="text:link one title" content="link">
  92. <meta name="text:link two" content="/">
  93. <meta name="text:link two title" content="link">
  94. <meta name="text:link three" content="/">
  95. <meta name="text:link three title" content="link">
  96. <meta name="text:link four" content="/">
  97. <meta name="text:link four title" content="link">
  98. <meta name="text:link five" content="/">
  99. <meta name="text:link five title" content="link">
  100. <meta name="text:link six" content="/">
  101. <meta name="text:link six title" content="link">
  102. <meta name="text:link seven" content="/">
  103. <meta name="text:link seven title" content="link">
  104.  
  105.  
  106.  
  107. <style type="text/css">
  108.  
  109.  
  110.  
  111.  
  112. <style type="text/css">
  113.  
  114.  
  115.  
  116.  
  117. #scrollToTop:link,#scrollToTop:visited {
  118. color: transparent;
  119. background-color: transparent;
  120. display: none;
  121. position: fixed;
  122. bottom: 5px;
  123. right: 15px; }
  124.  
  125.  
  126.  
  127. iframe#tumblr_controls{
  128. top: 1px !important;
  129. margin: 0 0 0 0;
  130. right: 6px !important;
  131. position: fixed !important;
  132. }
  133.  
  134.  
  135.  
  136. ::-webkit-scrollbar {width: 5px; height: 4px; background: white; }
  137.  
  138.  
  139.  
  140. ::-webkit-scrollbar-thumb { background-color:black; }
  141.  
  142.  
  143.  
  144. a {color:;text-decoration:none;-webkit-transition: all 0.7s ease-out;-moz-transition: all 0.7s ease-out;transition: all 0.7s ease-out;}
  145.  
  146.  
  147.  
  148. #tumblr_controls{
  149. position:fixed !important;
  150.  
  151. }
  152.  
  153.  
  154.  
  155. .wrapper{
  156. margin: 0px auto;
  157. width: 900px;
  158.  
  159. }
  160.  
  161.  
  162.  
  163. .header{
  164. float: left;
  165. width: 100%;
  166. }
  167.  
  168.  
  169.  .left{
  170. float: left;
  171. margin-right: 20px;
  172. width: 802px;
  173.  
  174. }
  175.  
  176.  
  177.  
  178. .right{
  179.  
  180. float: right;
  181.  
  182. width: 200px;
  183.  
  184. background-color: {color:Background};
  185.  
  186. }
  187.  
  188.  {block:ifphotofade}
  189. img {  
  190.     {block:indexpage}opacity: {text:img opacity};{/block:indexpage}
  191. -webkit-transition: all 0.6s ease-out;
  192. -moz-transition: all 0.6s ease-out;
  193. transition: all 0.6s ease-out;
  194. -webkit-filter:grayscale({text:fade}%);
  195.     -moz-filter:grayscale({text:fade}%);
  196.     -ms-filter:grayscale({text:fade}%);
  197.     -o-filter:grayscale({text:fade}%);
  198.     filter:grayscale({text:fade}%);}
  199.  
  200. img:hover {
  201.     opacity: 1;
  202. -webkit-transition: all 0.6s ease-out;
  203. -moz-transition: all 0.6s ease-out;
  204. transition: all 0.6s ease-out;}
  205.  
  206. iframe.photoset {
  207.     {block:indexpage}opacity: {text:img opacity};{/block:indexpage}
  208.  -webkit-transition: all 0.6s ease-out;
  209. -moz-transition: all 0.6s ease-out;
  210. transition: all 0.6s ease-out;
  211. -webkit-filter:grayscale({text:fade}%);
  212.     -moz-filter:grayscale({text:fade}%);
  213.     -ms-filter:grayscale({text:fade}%);
  214.     -o-filter:grayscale({text:fade}%);
  215.     filter:grayscale({text:fade}%);}
  216. }
  217. iframe.photoset:hover {
  218.     opacity: 1;
  219.  -webkit-transition: all 0.6s ease-out;
  220. -moz-transition: all 0.6s ease-out;
  221. transition: all 0.6s ease-out;
  222. }
  223. {/block:ifphotofade}
  224.  
  225.  
  226. body {
  227.     background-color: {color:background};
  228.     font-family: arial;
  229.     background-image: url({image:Background});
  230.     line-height:100%;
  231.     color:{color:text};
  232.     word-wrap: break-word;
  233.     font-size:12px;
  234.     text-align:justify;
  235.     cursor: url({image:cursor}), auto; }
  236.      
  237.    
  238.    
  239.  
  240.  
  241. a:link, a:active, a:visited{
  242.  
  243. color:{color:link};
  244.  
  245. text-decoration: none;
  246.  
  247. -webkit-transition: color 0.4s ease-out;
  248.  
  249. -moz-transition: color 0.4s ease-out;
  250.  
  251. }
  252.  
  253.  
  254.  
  255. a:hover{
  256.  
  257. color:{color:Hover};
  258.  
  259. text-decoration:underline;
  260.  
  261. -webkit-transition: color 0.4s ease-out;
  262.  
  263. -moz-transition: color 0.4s ease-out;
  264.  
  265. }
  266.  
  267.  
  268.  
  269.  
  270.  
  271. .entry {
  272.  
  273. float:left;
  274. margin-left:30px;
  275. margin-top:10px;
  276. text-align: left;
  277. padding-top:10px;
  278. padding-left:8px;
  279. padding-right:8px;
  280. padding-bottom:1px;
  281.  
  282.  
  283. {block:IndexPage}
  284. width:250px;
  285. {/block:IndexPage}
  286. {block:PermalinkPage}
  287. width:330px;
  288. margin-left:-10px;
  289. {/block:PermalinkPage}
  290.  
  291. }
  292.  
  293.  
  294.  
  295.  
  296. blockquote {
  297. padding-left:5px;
  298. padding-top:3px;padding-right:5px;
  299. padding-bottom:3px;margin-left:0px;margin-right:0px;
  300. border-left: 2px solid #e4e4e4;
  301.  
  302. }
  303.  
  304.  
  305.  
  306.  
  307.  
  308.  
  309. .entry .permalink{
  310.  
  311. padding:8px;
  312. opacity:0.0;
  313. font-size: 9px;
  314. line-height:11px;
  315. background-color:#fff;
  316. border-bottom:1px solid #eee;
  317. border-radius:3px;
  318. font-style:italic;
  319.  
  320. }
  321.  
  322.    
  323.  
  324. .entry:hover .permalink{
  325. opacity:1.0;
  326. margin-top:-28px;
  327. background-color:white;
  328.  
  329.  
  330.  
  331.  
  332. }
  333.  
  334. #titlebar{
  335.  
  336. z-index:999999999999999;
  337. position:fixed;
  338. width:120px;
  339. color:{color:text};
  340. z-index:10;
  341. overflow:hidden;
  342. text-align:center;
  343. margin-left:630px;
  344. top:150px;
  345. background-color:{color:Background};
  346. padding:5px;
  347.  
  348.  
  349.  
  350. }
  351.  
  352.  
  353.  
  354. #posts {
  355.  
  356. width: 500px;
  357.  
  358. margin-left:300px;
  359.  
  360. padding:2px;
  361.  
  362.  
  363.  
  364.  
  365. /* Post Title */
  366.  
  367. .posts_title {
  368.     display:block;
  369.     margin-bottom:10px;
  370.     padding-bottom:5px;
  371.     border-bottom:1px solid {color:Border};
  372.     color:{color:Post Title};
  373.     font-family:helvetica;
  374.     font-size:18px;
  375.     line-height:18px;
  376.     }
  377.    
  378.  
  379.  
  380. }
  381.  
  382.  
  383. #sidebar img{    
  384. padding:1px;
  385. background:#ffffff;
  386. margin-top:10px;
  387. width:100px;
  388. -webkit-transition: all .5s ease;
  389. -moz-transition: all .5s ease;
  390. -o-transition: all .5s ease;
  391. transition: all .5s ease;
  392.  
  393. }
  394.  
  395.  
  396.    
  397.    
  398.  
  399. .entry .textperma{
  400. display: block;
  401. text-transform: lowercase;
  402. text-align:center;
  403. font-style:italic;
  404. opacity:0.0;
  405. margin: 2px;
  406. margin-top:-15px;
  407. -webkit-transition-duration:0.6s;
  408.  
  409. }
  410.  
  411.  
  412.  
  413. .entry:hover .textperma{
  414. opacity:1.0;
  415. margin-top:0px;
  416. margin: 2px;
  417.  
  418. }
  419.  
  420.  
  421.  
  422. .title{
  423.  
  424. font-family:georgia;
  425. font-size:12px;
  426. line-height:9px;
  427. color: {color:text};
  428. font-weight: normal;
  429. text-transform:none;
  430.  
  431. }
  432.  
  433.  .links{
  434. font-family: "consolas";
  435. border-top:3px double #eee;
  436. margin:5px;
  437. font-size:8px;}
  438.  
  439. .description{
  440. font-family:"consolas";  
  441. border-top:3px double #eee;
  442. border-bottom:3px double #eee;
  443. padding:4px;
  444. font-size: 11px}
  445.  
  446.  
  447.  
  448.  
  449.  
  450.  
  451. </style>
  452.  
  453.  
  454.  
  455.     {block:ifinfinitescroll}
  456.    
  457. <script type="text/javascript"
  458. src="http://codysherman.com/tools/infinite-scrolling/code" ></script>
  459.  
  460.      {/block:ifinfinitescroll}
  461.  
  462.  
  463.  
  464. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  465. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  466. <script>
  467. (function($){
  468. $(document).ready(function(){
  469. $("[title]").style_my_tooltips();
  470. });
  471. })(jQuery);
  472. </script>
  473.  
  474. </head>
  475.  
  476.  
  477.  
  478.  
  479.  
  480.  
  481. {block:ifcursortrail}
  482. <script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/40/40596/125/parts.js"></script><p
  483.  
  484.  
  485. {/block:ifcursortrail}
  486.  
  487.  
  488. {block:IndexPage}
  489.  
  490. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  491.  
  492. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
  493.  
  494.  
  495.  
  496. <script type="text/javascript">
  497.  
  498. $(window).load(function () {
  499.  
  500. var $content = $('#posts');
  501.  
  502. $content.masonry({itemSelector: '.entry'}),
  503.  
  504. $content.infinitescroll({
  505.  
  506. navSelector : 'div#pagination',
  507.  
  508. nextSelector : 'div#pagination a#nextPage',
  509.  
  510. itemSelector : '.entry',
  511.  
  512. loading: {
  513.  
  514. finishedMsg: '',
  515.  
  516. img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
  517.  
  518. },
  519.  
  520. bufferPx : 600,
  521.  
  522. debug : false,
  523.  
  524. },
  525.  
  526. // call masonry as a callback.
  527.  
  528. function( newElements ) {
  529.  
  530. var $newElems = $( newElements );
  531.  
  532. $newElems.hide();
  533.  
  534. // ensure that images load before adding to masonry layout
  535.  
  536. $newElems.imagesLoaded(function(){
  537.  
  538. $content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );
  539.  
  540.  
  541.  
  542.  
  543.  
  544. });
  545.  
  546. });
  547.  
  548. });
  549.  
  550. </script>
  551.  
  552.  
  553.  
  554.  
  555.  
  556.  
  557.  
  558. {/block:IndexPage}
  559.  
  560.  
  561.  
  562. <title>{title}</title>
  563.  
  564.  
  565.  
  566.  
  567.  
  568.  
  569.  
  570.  
  571.  
  572. </head>
  573.  
  574.  
  575.  
  576. <body>
  577.  
  578.  
  579. <img style='position: fixed; left; bottom: 0;'src='https://31.media.tumblr.com/4bc44c9198e2bc442624a42ec165efb0/tumblr_inline_nb51wllT871rfw5am.png'>
  580.  
  581.  
  582.  
  583. <div class="wrapper">
  584.  
  585. <div class="header">
  586.  
  587. </div>
  588.  
  589.  
  590.  
  591. <div id="titlebar">
  592.  
  593. <br><br>
  594. <a href="/"><img src="{image:sidebar}" width=100%></a>
  595.  
  596.  
  597.  
  598.  
  599. <div class="links">
  600.  
  601.         <div id="sideimg"><img src="{image:sideimg}"></div>    
  602.         <div id="tee"><a href="/">{text:sidebar title}</a></div>
  603.  
  604.        
  605.         <div id="buttons">
  606.         <a href="/" title="index"><img src="https://31.media.tumblr.com/fc49f49e65e506691a42b325c41b9e70/tumblr_inline_nb51j2F7Fc1rfw5am.png"></a>
  607.         <a href="/ask" title="message"><img src="https://31.media.tumblr.com/dacf25171216567e0057b2a4a8606c58/tumblr_inline_nb51moHhsC1rfw5am.png"></a>
  608.         <a href="/archive" title="archive"><img src="https://31.media.tumblr.com/b720fc737da456bc6f0858b4c0c8191b/tumblr_inline_nb51mqBMvD1rfw5am.png"></a>
  609.                  
  610.           </a></div>
  611.        
  612.    
  613. {block:ifextranav}    
  614. <p><center>
  615. <form>
  616. <select onChange="location=this.options[this.selectedIndex].value;" style="font-family:silkscreen; letter-spacing: 2px; color: {color:desctext}; background-color: {color:postdescBG}; font-size: 8px; border: 1px solid {color:borders}; -webkit-appearance:  none; text-align: center; margin-top: 4px; padding-left: 9px; padding-right: 9px; padding-top: 2px; padding-bottom: 2px; line-height: 9px; border-radius: 3px;">
  617. <option value="">{text:extra nav title}</option>
  618. <option value="{text:link two}">{text:link two title}</option>
  619. <option value="{text:link three}/">{text:link three title}</option>
  620. <option value="{text:link four}/">{text:link four title}</option>
  621. <option value="{text:link five}/">{text:link five title}</option>
  622. <option value="{text:link six}/">{text:link six title}</option>
  623. <option value="{text:link seven}/">{text:link seven title}</option>
  624. </select>
  625. </form></center>
  626. {/block:ifextranav}
  627.        
  628.  
  629. <br>
  630. <div class="description">
  631. <i>{description}</i>
  632. </div>
  633.  
  634.  
  635.  
  636.  
  637.  
  638. </div>
  639. </div>
  640.  
  641.  
  642.  
  643. <div class="content">
  644.  
  645.  
  646.  
  647. <div class="left">
  648.  
  649.  
  650.  
  651. <div id="posts">
  652.  
  653.  
  654.  
  655. {block:Posts}
  656.  
  657. <div class="entry">
  658.  
  659.  
  660.  
  661. {block:Text}
  662.  
  663. {block:Title}<span class="title">{Title}</span>{/block:Title}
  664.  
  665. <span class="entrytext">{Body}</span></a>
  666.  
  667. {/block:Text}
  668.  
  669.  
  670.  
  671. {block:Link}
  672.  
  673. <a href="{URL}" class="title">{Name}</a>
  674.  
  675. {block:Description}{Description}{/block:Description}
  676.  
  677. {block:Link}
  678.  
  679.  
  680.  
  681. {block:Photo}
  682.  
  683. {block:IndexPage}{LinkOpenTag}
  684.  
  685. <div class="photo"><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="250"/></a></div>{LinkCloseTag}{/block:IndexPage}
  686.  
  687. {block:PermalinkPage}{LinkOpenTag}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="330"/></a>{LinkCloseTag}{/block:PermalinkPage}
  688.  
  689. {block:IndexPage}
  690.  
  691. {/block:IndexPage}
  692.  
  693. {/block:Photo}
  694.  
  695.  
  696.  
  697. {block:Photoset}
  698.  
  699. <center>{Photoset-250}</center></span>
  700.  
  701. {/block:Photoset}
  702.  
  703.  
  704.  
  705. {block:Quote}
  706.  
  707. <span class="title">{Quote}</span><br />
  708.  
  709. {block:Source}{Source}{/block:Source}
  710.  
  711. {/block:Quote}
  712.  
  713.  
  714.  
  715. {block:Chat}
  716.  
  717. {block:Title}<span class="title">{Title}</span>{/block:Title}
  718.  
  719. {block:Lines}
  720.  
  721. <li class="user_{UserNumber}">
  722.  
  723. {block:Label}
  724.  
  725. <b><span class="label">{Label}</b></span>
  726.  
  727. {/block:Label}
  728.  
  729.  
  730.  
  731. {Line}
  732.  
  733. </li>
  734.  
  735. {/block:Lines}
  736.  
  737. </ul>
  738.  
  739. {/block:Chat}
  740.  
  741.  
  742.  
  743. {block:Audio}{AudioPlayergrey}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  744.  
  745. {block:IndexPage}
  746.  
  747. <div class="textperma"><a href="{Permalink}">{NoteCountWithLabel}</a> ยท <a href="{Permalink}">{DayofMonth} {ShortMonth}</a></span></a></div>
  748.  
  749. {/block:IndexPage}
  750.  
  751. {/block:Audio}
  752.  
  753.  
  754.  
  755. {block:Video}
  756.  
  757. <center>
  758.  
  759. <div class="videoperma">{Video-250}</div><BR>
  760.  
  761. {block:Caption}{Caption}</a>{/block:Caption}</center>
  762.  
  763. {block:Video}
  764.  
  765.  
  766.  
  767. {block:PermalinkPage}
  768.  
  769. <center>
  770.  
  771. {block:Caption}{Caption}{/block:Caption}{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} &middot; {block:Tags}<a href="TagURL"> #{Tag}</a> {/block:Tags}{/block:hasTags}</center>
  772.  
  773.  
  774.  
  775. {/block:PermalinkPage}
  776.  
  777.  
  778.  
  779. {block:PostNotes}{PostNotes}
  780.  
  781. {/block:PostNotes}
  782.  
  783. </div>
  784.  
  785.  
  786.  
  787. {/block:Posts}
  788.  
  789. </div>
  790.  
  791. </div>
  792.  
  793. {block:IndexPage}
  794.  
  795. {block:Pagination}
  796.  
  797. <div id="pagination">
  798.  
  799. {block:NextPage}
  800.  
  801. <a id="nextPage" href="{NextPage}"> </a>
  802.  
  803. {/block:NextPage}
  804.  
  805. {block:PreviousPage}
  806.  
  807. <a href="{PreviousPage}"> </a>
  808.  
  809. {/block:PreviousPage}
  810.  
  811. </div>
  812.  
  813. {/block:Pagination}
  814.  
  815. {/block:IndexPage}
  816.  
  817. </div>
  818.  
  819.  
  820.  
  821. </body>
  822.  
  823. </script>
  824.  
  825. <div style='position:fixed;
  826. bottom:10px;right:10px;'>
  827.     <div id="yo"><a href="http://teejpg.tumblr.com/" title="theme by teejpg">แƒฆ</a></div>
  828.  
  829.  
  830. </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!