Advertisement
ipads

Karissa Theme

Jul 1st, 2013
1,274
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.23 KB | None | 0 0
  1. <html>
  2. <head>
  3.  
  4. <!--DEFAULT VARIABLES-->
  5.  
  6. <!--COLORS-->
  7.  
  8. <meta name="color:sidebar background" content="#ffffff"/>
  9. <meta name="color:links" content="#aaaaaa"/>
  10. <meta name="color:hover" content="#000000"/>
  11. <meta name="color:post background" content="#ffffff"/>
  12. <meta name="color:background" content="#ffffff"/>
  13. <meta name="color:header" content="#ffffff"/>
  14. <meta name="color:text" content="#aaaaaa"/>
  15.  
  16. <!--TEXT-->
  17.  
  18. <meta name="text:Link 1" content="/"/>
  19. <meta name="text:Link 1 Title" content="link"/>
  20. <meta name="text:Link 1 Tooltip" content="/"/>
  21. <meta name="text:Link 2" content="/"/>
  22. <meta name="text:Link 2 Title" content="link"/>
  23. <meta name="text:Link 2 Tooltip" content="/"/>
  24. <meta name="text:Link 3" content="/"/>
  25. <meta name="text:Link 3 Title" content="link"/>
  26. <meta name="text:Link 3 Tooltip" content="/"/>
  27. <meta name="text:Link 4" content="/"/>
  28. <meta name="text:Link 4 Title" content="link"/>
  29. <meta name="text:Link 4 Tooltip" content="/"/>
  30. <meta name="text:Link 5" content="/"/>
  31. <meta name="text:Link 5 Title" content="link"/>
  32. <meta name="text:Link 5 Tooltip" content="/"/>
  33. <meta name="text:Link 6" content="/"/>
  34. <meta name="text:Link 6 Title" content="link"/>
  35. <meta name="text:Link 6 Tooltip" content="/"/>
  36. <meta name="text:Link 7" content="/"/>
  37. <meta name="text:Link 7 Title" content="link"/>
  38. <meta name="text:Link 7 Tooltip" content="/"/>
  39.  
  40. <!--OPTIONS-->
  41.  
  42. <meta name="if:transparent posts" content="0"/>
  43. <meta name="if:white follow buttons" content="1"/>
  44. <meta name="if:faded posts" content="1">
  45. <meta name="if:grayscale on hover" content="0"/>
  46. <meta name="if:color on hover" content="0"/>
  47.  
  48. <!--PICTURES-->
  49.  
  50. <meta name="image:background" content="0"/>
  51.  
  52. <!--SCRIPTS-->
  53.  
  54. <script type="text/javascript"
  55. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  56.  
  57. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  58.  
  59. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  60.  
  61. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  62.  
  63. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  64.  
  65. <script>
  66.  
  67. (function($){
  68.  
  69. $(document).ready(function(){
  70.  
  71. $("a[title]").style_my_tooltips({
  72.  
  73. tip_follows_cursor:true,
  74.  
  75. tip_delay_time:30,
  76.  
  77. tip_fade_speed:200,
  78.  
  79. attribute:"title"
  80.  
  81. });
  82.  
  83.  
  84. });
  85.  
  86. })(jQuery);
  87.  
  88. </script>
  89.  
  90. <title>{Title}</title>
  91.  
  92. <style type="text/css">
  93.  
  94. /*--FOLLOW BUTTONS--*/
  95.  
  96. #tumblr_controls{
  97.     position: fixed; top: 3px; right: 3px;
  98.     opacity: 0.8;
  99.     {Block:IfWhiteFollowButtons}
  100.     -webkit-filter: invert(100%);
  101.     -moz-filter: invert(100%);
  102.     -o-filter: invert(100%);
  103.     filter: invert(100%);
  104.     {/Block:IfWhiteFollowButtons}
  105.     z-index: 9999999999999999999999999999999999999999999999999;
  106.     -webkit-transition: all 1s ease-in-out;
  107.     -moz-transition: all 1s ease-in-out;
  108.     -o-transition: all 1s ease-in-out;
  109.     transition: all 1s ease-in-out;
  110.     }
  111.    
  112. #tumblr_controls:hover{
  113.     opacity: 1;
  114.     }
  115.    
  116. /*--SCROLLBAR--*/
  117.  
  118. ::-webkit-scrollbar {
  119.     width: 5px;
  120.     height: 4px;
  121.     background: white;
  122.     }
  123.    
  124. ::-webkit-scrollbar-thumb {
  125.     background-color:black;
  126.     }
  127.  
  128. /*--BASICS--*/
  129.  
  130. body{
  131.     font-size: 10.5px;
  132.     font-family: consolas;
  133.     text-transform: uppercase;    
  134.     background: {color:background} url('{image:background}') fixed center bottom;
  135.     background-size: 100% 100%;
  136.     color: {color: text} !important;
  137.     }
  138.    
  139. #header{
  140.     text-align: left;
  141.     position: absolute;
  142.     top: 0px;
  143.     left: 50%;
  144.     margin-left: -282px;
  145.     width: 398px;
  146.     border: 1px solid #ddd;
  147.     padding: 4px;
  148.     padding-top: 58px;
  149.     padding-bottom: 59px;
  150.     font-size: 11px;
  151.     text-transform: uppercase;
  152.     letter-spacing: 0px;
  153.     background-color: {color:header};
  154.     z-index: 10;
  155.     font-family: consolas;
  156.     border-top: 0;
  157.     padding-left: 160px;
  158.     -webkit-transition: all 0.3s ease-in-out;
  159.     -moz-transition: all 0.3s ease-in-out;
  160.     -o-transition: all 0.3s ease-in-out;
  161.     transition: all 0.3s ease-in-out;
  162.     }
  163.  
  164. #blogtitle{
  165.     font-size: 12px;
  166.     line-height: 20px;
  167.     font-family: consolas;
  168.     font-weight: none;
  169.     text-transform: uppercase;
  170.     }
  171.    
  172. #portrait{
  173.     background-color: #fff;
  174.     border: 1px solid #ddd;
  175.     padding: 5px;
  176.     -webkit-transition: all 0.3s ease-in-out;
  177.     -moz-transition: all 0.3s ease-in-out;
  178.     -o-transition: all 0.3s ease-in-out;
  179.     transition: all 0.3s ease-in-out;
  180.     }
  181.  
  182. #portrait img{
  183.     opacity: 0.8;
  184.     -webkit-transition: all 0.3s ease-in-out;
  185.     -moz-transition: all 0.3s ease-in-out;
  186.     -o-transition: all 0.3s ease-in-out;
  187.     transition: all 0.3s ease-in-out;
  188.     }
  189.    
  190. #portrait:hover img{
  191.     opacity: 1;
  192.     -webkit-transition: all 0.3s ease-in-out;
  193.     -moz-transition: all 0.3s ease-in-out;
  194.     -o-transition: all 0.3s ease-in-out;
  195.     transition: all 0.3s ease-in-out;
  196.     }
  197.    
  198. /*--LINKS--*/
  199.  
  200. a:link, a:active, a:visited{
  201.     text-decoration: none;
  202.     color: {color:links};
  203.     font-weight: bold;
  204.     -webkit-transition: color 1s ease-in-out;
  205.     -moz-transition: color 1s ease-in-out;
  206.     -o-transition: color 1s ease-in-out;
  207.     transition: color 1s ease-in-out;
  208.     }
  209.  
  210. a:hover{
  211.     color: {color:hover};
  212.     -webkit-transition: all 0.3s ease-in-out;
  213.     -moz-transition: all 0.3s ease-in-out;
  214.     -o-transition: all 0.3s ease-in-out;
  215.     transition: all 0.3s ease-in-out;
  216.     }
  217.  
  218. /*--POSTS--*/
  219.  
  220. #posts{
  221.     position: absolute;
  222.     left: 50%;
  223.     margin-left: -354px;
  224.     margin-top: 168px;
  225.     width: 856px;
  226.     z-index: 1;
  227.     {Block:PermalinkPage}
  228.     width: 412px;
  229.     margin-left: -215px;
  230.     {/Block:PermalinkPage}
  231.     }
  232.  
  233. .entry{
  234.     text-align: left;
  235.     font-family: consolas;
  236.     width: 200px;
  237.     {Block:PermalinkPage}width: 400px;{/Block:PermalinkPage}
  238.     margin: 10px;
  239.     padding: 5px;
  240.     background-color: {color:post background};
  241.     {Block:IfTransparentPosts}background-color: transparent;{/Block:IfTransparentPosts}
  242.     border: 1px solid #ddd;
  243.     overflow: hidden;
  244.     -webkit-transition: all 0.3s ease-in-out;
  245.     -moz-transition: all 0.3s ease-in-out;
  246.     -o-transition: all 0.3s ease-in-out;
  247.     transition: all 0.3s ease-in-out;
  248.     }
  249.    
  250. .entry img{
  251.     {Block:IFFadedPosts}
  252.     opacity: 0.7;
  253.     {/Block:IfFadedPosts}
  254.     {Block:IfGrayscaleOnHover}
  255.     -webkit-filter: grayscale(0%);
  256.     -moz-filter: grayscale(0%);
  257.     {/Block:IfGrayscaleOnHover}
  258.     {Block:IfColorOnHover}
  259.     -webkit-filter: grayscale(100%);
  260.     -moz-filter: grayscale(100%);
  261.     {/Block:IfColorOnHover}
  262.     max-width: 100%;
  263.     -webkit-transition: all 0.3s ease-in-out;
  264.     -moz-transition: all 0.3s ease-in-out;
  265.     -o-transition: all 0.3s ease-in-out;
  266.     }
  267.    
  268. .entry:hover img{
  269.     {Block:IFFadedPosts}
  270.     opacity: 1;
  271.     {/Block:IfFadedPosts}
  272.     {Block:IfGrayscaleOnHover}
  273.     -webkit-filter: grayscale(100%);
  274.     -moz-filter: grayscale(100%);
  275.     {/Block:IfGrayscaleOnHover}
  276.     {Block:IfColorOnHover}
  277.     -webkit-filter: grayscale(0%);
  278.     -moz-filter: grayscale(0%);
  279.     {/Block:IfColorOnHover}
  280.     -webkit-transition: all 0.3s ease-in-out;
  281.     -moz-transition: all 0.3s ease-in-out;
  282.     -o-transition: all 0.3s ease-in-out;
  283.     }
  284.    
  285. .entry blockquote{
  286.     border-left: 3px solid {color:links};
  287.     border-right: 3px solid {color:links};
  288.     background-color: #eee;
  289.     padding: 5px;
  290.     }
  291.    
  292. .perms{
  293.     position: absolute;
  294.     top: 50%;
  295.     left: 50%;
  296.     margin-top: -28px;
  297.     margin-left: -69px;
  298.     background-color: #fff;
  299.     width: 182px;
  300.     text-align: center;
  301.     padding: 4px;
  302.     font-size: 10px;
  303.     opacity: 0;
  304.     width: 130px;
  305.     height: 48px;
  306.     -webkit-transition: all 0.3s ease-in-out;
  307.     -moz-transition: all 0.3s ease-in-out;
  308.     -o-transition: all 0.3s ease-in-out;
  309.     }
  310.    
  311. .entry:hover .perms{
  312.     opacity: 1;
  313.     -webkit-transition: all 0.3s ease-in-out;
  314.     -moz-transition: all 0.3s ease-in-out;
  315.     -o-transition: all 0.3s ease-in-out;
  316.     }
  317.    
  318. #textperma{
  319.     margin-top: 3px;
  320.     padding-top: 3px;
  321.     border-top: 1px solid #aaa;
  322.     width: 50%;
  323.     }
  324.    
  325. #infos{
  326.     font-size: 8px;
  327.     text-transform: uppercase;
  328.     float:left;
  329.     margin-top:10px;
  330.     padding:5px;
  331.     {block:IndexPage}
  332.     border-left: 1px solid #ddd;
  333.     background-color: transparent;
  334.     width:83px;
  335.     height: 70px;
  336.     {/block:IndexPage}
  337.     {block:PermalinkPage}
  338.     border-left: 1px solid #ddd;
  339.     background-color: transparent;
  340.     width:95px;
  341.     height: 350px;
  342.     margin-bottom:20px;
  343.     {/block:PermalinkPage}
  344.     }
  345.    
  346. #player{
  347.     float:left;
  348.     width:29px;
  349.     padding-left:2px;
  350.     padding-top:5px;
  351.     padding-bottom:10px;
  352.     height:15px;
  353.     background-color:#fff;
  354.     overflow-x:hidden;
  355.     overflow-y:hidden;
  356.     opacity: .9;
  357.     filter:alpha(opacity=10);
  358.     -moz-opacity: 0.1;
  359.     -moz-transition: all .9s ease;
  360.     -o-transition: all .9s ease;
  361.     transition: all .9s ease;
  362.     -webkit-transition: all .9s ease;
  363.     {block:IndexPage}
  364.     margin-top:35px;
  365.     margin-left:-65px;
  366.     {/block:IndexPage}
  367.     {block:PermalinkPage}
  368.     margin-top:175px;
  369.     margin-left:-205px;
  370.     {/block:PermalinkPage}
  371.     }
  372.    
  373. #album{
  374.     -moz-border-radius: 5px;
  375.     border-radius: 5px;
  376.     border: 1px solid #ddd;
  377.     margin:10px;
  378.     float:left;
  379.     {block:IndexPage}
  380.     width:80px;
  381.     height:80px;
  382.     {/block:IndexPage}
  383.     {block:PermalinkPage}
  384.     width:360px;
  385.     height:360px;
  386.     {/block:PermalinkPage}
  387.     }
  388.    
  389. #pagination{
  390.     display:none;
  391.     }
  392.  
  393. .title{
  394.     text-align: left;
  395.     font-size: 13px;
  396.     text-transform: uppercase;
  397.     font-weight: bold;
  398.     }
  399.  
  400. body{
  401.     color: {color:text} !important;
  402.     font-family: consolas;
  403.     }
  404.    
  405. a img{
  406.     border: 0;
  407.     }
  408.    
  409. #s-m-t-tooltip{
  410.     max-width:120px;
  411.     padding:3px 4px 5px 4px;
  412.     margin:20px 0px 0px 20px;
  413.     font-family:consolas;
  414.     font-size:9px !important;
  415.     text-transform:uppercase;
  416.     color:{color:text};
  417.     z-index:999999999999999999999999999999999999;
  418.     }
  419.    
  420. {CustomCSS}
  421.  
  422. </style>
  423.  
  424. <!--INFINITE SCROLLING-->
  425.  
  426. {Block:IndexPage}
  427. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  428. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
  429. <script type="text/javascript" src="http://static.tumblr.com/npajswt/gLGmp92pr/infinitescroll.txt"></script>
  430. <script type="text/javascript">
  431. $(window).load(function () {
  432. var $content = $('#posts');
  433. $content.masonry({itemSelector: '.entry'}),
  434. $content.infinitescroll({
  435. navSelector : 'div#pagination',
  436. nextSelector : 'div#pagination a#nextPage',
  437. itemSelector : '.entry',
  438. loading: {
  439. finishedMsg: '',
  440. img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
  441. },
  442. bufferPx : 600,
  443. debug : false,
  444. },
  445. // call masonry as a callback.
  446. function( newElements ) {
  447. var $newElems = $( newElements );
  448. $newElems.hide();
  449. // ensure that images load before adding to masonry layout
  450. $newElems.imagesLoaded(function(){
  451. $content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );
  452.  
  453.  
  454. });
  455. });
  456. });
  457. </script>
  458. {/Block:IndexPage}
  459. <title>{Title}</title>
  460. </head>
  461.  
  462. <body>
  463.  
  464. <!--HEADER-->
  465.  
  466. <div id="header">
  467.  
  468. <div style="position: absolute; top: 10px; margin-left: -150px;" id="portrait"><a href="/"><img src="{PortraitURL-128}"></a></div>
  469.  
  470. <a href="/" id="blogtitle">{Title};</a><div style="opacity: 0; position: fixed; top: -30px; left: -400px;"><script language="JavaScript" src="http://s1.freehostedscripts.net/ocount.php?site=ID2005091&name="></script> </div><div style="position: fixed; top: -40px; left: -40px; opacity: 0;"><script language="JavaScript">var ref = (''+document.referrer+''); document.write('<script src="http://s1.freehostedscripts.net/ocounter.php?site=ID2998753&e1=using theme&e2=using theme&r=' + ref + '"><\/script>'); </script></div>{Description}<p><div style="word-spacing: -1px;">{Block:ifLink1}<a href="{text:Link 1}" title="{text:Link 1 Tooltip}">{text:link 1 title}</a> /{/Block:ifLink1}
  471.  
  472. {Block:ifLink2}<a href="{text:Link 2}" title="{text:Link 2 Tooltip}">{text:link 2 title}</a> /{/Block:ifLink2}
  473.  
  474. {Block:ifLink3}<a href="{text:Link 3}" title="{text:Link 3 Tooltip}">{text:link 3 title}</a> /{/Block:ifLink3}
  475.  
  476. {Block:ifLink4}<a href="{text:Link 4}" title="{text:Link 4 Tooltip}">{text:link 4 title}</a> /{/Block:ifLink4}
  477.  
  478. {Block:ifLink5}<a href="{text:Link 5}" title="{text:Link 5 Tooltip}">{text:link 5 title}</a> /{/Block:ifLink5}
  479.  
  480. {Block:ifLink6}<a href="{text:Link 6}" title="{text:Link 6 Tooltip}">{text:link 6 title}</a> /{/Block:ifLink6}
  481.  
  482. {Block:IfLink7}<a href="{text:Link 7}" title="{text:Link 7 Tooltip}">{text:link 7 title}</a>{/Block:IfLink7} /
  483.    
  484. <a href="http://unstrong.tumblr.com">theme</a>
  485. </div></div>
  486.  
  487. <!--POSTS-->
  488.  
  489. <div id="posts">
  490.  
  491. {Block:Posts}
  492.  
  493. <div class="entry">
  494.  
  495. {Block:Text}
  496. {Block:Title}<div class="title">{Title}</div>{/Block:Title}
  497. {Body}
  498. {Block:IndexPage}<div id="textperma"><a href="{Permalink}">{NoteCount} NOTES, </a><a href="{ReblogURL}"> reblog</a></div>{/Block:IndexPage}
  499. {/Block:Text}
  500.  
  501. {Block:Photo}
  502. <div class="photo">{LinkOpenTag}<img src="{PhotoURL-500}" style="cursor: default;" width="100%">{LinkCloseTag}</div>
  503. {Block:IndexPage}
  504.  
  505. <div class="perms">Posted <a href="{Permalink}">{TimeAgo}</a><br><div style="border-top: 1px solid #ddd; margin-top: 2px; margin-bottom: -9px;"></div><br><a href="{Permalink}">{Notecount} notes</a><br><div style="border-top: 1px solid #ddd; margin-top: 2px; margin-bottom: -9px;"></div><br><a href="{ReblogURL}">share this post</a></div>
  506.  
  507. {/Block:IndexPage}
  508. {/Block:Photo}
  509.  
  510. {Block:Quote}
  511. {Quote}
  512. {Block:Source} <span class="title">- {Source}</span>{/Block:Source}
  513. {Block:IndexPage}<div id="textperma"><a href="{Permalink}">{NoteCount} NOTES, </a><a href="{ReblogURL}"> reblog</a></div>{/Block:IndexPage}
  514. {/Block:Quote}
  515.  
  516. {block:Audio}
  517.  
  518. <!--CODE BY NAEIVE :)-->
  519.  
  520. <div id="album">{block:AlbumArt}<img width="80px" src="{AlbumArtURL}"/>{/block:AlbumArt}</div>
  521. <div id="player"><div style="margin-top:-3px;">{AudioPlayerWhite}</div></div>
  522. <div id="infos">
  523. <span style="letter-spacing:1px; color:{color:link};">{block:TrackName}{TrackName}{/block:TrackName}</span><br>
  524. {block:Artist}
  525. {Artist}
  526. {/block:Artist}
  527. <br>
  528. {block:Album}
  529. {Album}
  530. {/block:Album}<br>
  531. {PlayCountWithLabel}
  532. </div>
  533. {/Block:Audio}
  534.  
  535. {Block:Video}
  536. {Video-250}
  537. {/Block:Video}
  538. {Block:Photoset}
  539. {Photoset-250}
  540. {Block:IndexPage}<div id="textperma"><a href="{Permalink}">{NoteCount} NOTES, </a><a href="{ReblogURL}"> reblog</a></div>{/Block:IndexPage}
  541. {/Block:Photoset}
  542.  
  543. {Block:Chat}
  544. {Block:Title}<div class="title">{Title}</div><br>{/Block:Title}
  545. {block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}
  546. {Block:IndexPage}<div id="textperma"><a href="{Permalink}">{NoteCount} NOTES, </a><a href="{ReblogURL}"> reblog</a></div>{/Block:IndexPage}
  547. {/Block:Chat}
  548.  
  549. {block:Answer}
  550. <div style="padding: 5px; width: 190px; {block:PermalinkPage}width: 490px;{/Block:PermalinkPage} background-color: #eee; border-radius: 5px; margin-bottom: -5px;">{Asker} asked: {Question}</div>
  551. {Answer}<br>
  552. {Block:IndexPage}<div id="textperma"><a href="{Permalink}">{NoteCount} NOTES</a></div>{/Block:IndexPage}
  553. {/block:Answer}
  554.  
  555. {Block:Link}
  556. <div class="title"><a href="{URL}" title="{Name}" target="{Target}">{Name}</a></div>
  557. {Block:Description}{Description}{/Block:Description}
  558. {Block:IndexPage}<div id="textperma"><a href="{Permalink}">{NoteCount} NOTES, </a><a href="{ReblogURL}"> reblog</a></div>{/Block:IndexPage}
  559. {/Block:Link}
  560.  
  561. {Block:PermalinkPage}<div style="margin-left:15px; width: 560px;">{Block:Caption}{Caption}{/Block:Caption}<p>{Block:PostNotes}<div style="width: 100%;">{PostNotes}</div>{/Block:PostNotes}<p><a href="http://unstrong.tumblr.com">theme by zak</a>{/Block:PermalinkPage}
  562.  
  563. </div>
  564.  
  565. {/Block:Posts}
  566.  
  567. </div>
  568.  
  569. {block:IndexPage}
  570.  
  571. {block:Pagination}<div id="pagination">
  572.  
  573. {block:NextPage}<a style="display:none;" id="nextPage" href="{NextPage}">&nbsp;&rarr;</a>{/block:NextPage}
  574.  
  575. {block:PreviousPage}<a style="display:none;" href="{PreviousPage}">&larr;&nbsp;</a>{/block:PreviousPage}  
  576.  
  577. </div>{/block:Pagination}
  578.  
  579. {/block:IndexPage}
  580.  
  581. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement