API tools faq
paste
Advertisement
Laighlin

#-1: Bublets

Laighlin
Feb 1st, 2017
213
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.36 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. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  4. <link href="#s-m-t-tooltip" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head><title>{Title}</title>
  7. <link rel="shortcut icon" href="{image:favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  10.  
  11. <!----------------------------------------------------------------------------
  12.  
  13. Bublets by Laighlin
  14.  
  15. 1.  you can move the credit elsewhere as long as it's visible.
  16. 2.  you can use sections of the code on other themes (including themes you make yourself) without credit. do not use the entire theme as a base.
  17. 3.  don't claim ownership of the theme.
  18.  
  19. note: This theme was originally released on an old account of mine. I have since updated it to look a little better and run a whole lot smoother. It's not very fancy and I'm somewhat out of love with the concept as a whole, but it's functional and looks kinda cute I guess.
  20.  
  21. ----------------------------------------------------------------------------->
  22.  
  23. <script>
  24. $(document).ready(function() {
  25.     $("[title]").style_my_tooltips({
  26.         tip_follows_cursor:true,
  27.         tip_delay_time:200,
  28.         tip_fade_speed:200
  29.     });
  30. });
  31. </script>
  32.  
  33. <meta name="image:sidebar" content=""/>
  34. <meta name="image:background" content="/">
  35. <meta name="image:favicon" content="/">
  36. <meta name="text:cover or repeat" content="cover">
  37. <meta name="if:border invert" content="1"/>
  38. <meta name="if:400px" content="1"/>
  39.  
  40. <meta name="color:background" content="#fff"/>
  41. <meta name="color:text" content="#444"/>
  42. <meta name="color:body link" content="#999"/>
  43. <meta name="color:link hover" content="#000"/>
  44. <meta name="color:borders" content="#0db">
  45. <meta name="color:post border" content="#0a9"/>
  46. <meta name="color:post bg" content="#fff"/>
  47.  
  48. <meta name="color:scroll" content="#0db"/>
  49. <meta name="color:scroll bg" content="#fff"/>
  50.  
  51. <meta name="color:links" content="#0a9"/>
  52. <meta name="color:links bg" content="#fff"/>
  53.  
  54. <!-- description fields -->
  55. <meta name="color:side bg" content="#d0fff0"/>
  56. <meta name="color:desc bg" content="#fff"/>
  57. <meta name="color:desc text" content="#0a9"/>
  58.  
  59. <!-- title fields -->
  60. <meta name="color:title" content="#0a9"/>
  61. <meta name="color:title bg" content="#fff"/>
  62.  
  63. <!--pagination fields-->
  64. <meta name="color:nav" content="#0a9"/>
  65. <meta name="color:nav bg" content="#fff"/>
  66.  
  67. <!--text fields-->
  68. <meta name="text:body font" content="consolas"/>
  69. <meta name="text:body font size" content="12"/>
  70. <meta name="text:cover or repeat" content="repeat">
  71. <meta name="text:link 1" content="link 1"/>
  72. <meta name="text:link 1 url" content="/">
  73. <meta name="text:link 2" content="link 2"/>
  74. <meta name="text:link 2 url" content="/">
  75. <meta name="text:link 3" content="link 3"/>
  76. <meta name="text:link 3 url" content="/">
  77. <meta name="text:link 4" content="link 4"/>
  78. <meta name="text:link 4 url" content="/">
  79. <style type="text/css">
  80.  
  81. body {
  82.     margin:0px;
  83.     color:{color:text};
  84.     font:{text:body font size} {text:body font};
  85.     line-height:100%;
  86.     background:{color:background} url('{image:background}') fixed;
  87.     background-size:{text:cover or repeat};
  88.     background-position:center;
  89. }
  90.  
  91. #s-m-t-tooltip {
  92.     background:{color:nav bg};
  93.     padding:4px;
  94.     margin:auto 13px;
  95.     border:3px solid {color:borders};
  96.     max-width:200px;
  97.     border-radius:10px;
  98.     font:12px consolas;
  99.     z-index:99999;
  100. }
  101.  
  102. img {
  103.     border-radius:12px;
  104.     resize:auto;
  105. }
  106.  
  107. #cred {
  108.     bottom:10px;
  109.     left:10px;
  110.     position:fixed;
  111.     font-family:tahoma;
  112.     font-size:15px;
  113.     border-width:10px;
  114.     {block:ifBorderInvert}
  115.     border-color: {color:post border};
  116.     {/block:ifBorderInvert}
  117.     color:{color:title};
  118.     padding:5px;
  119.     width:14px;
  120.     height:14px;
  121.     background:{color:post bg};
  122. }
  123.  
  124. #cred:hover {
  125.     border-color: {color:post border};
  126.     {block:ifBorderInvert}
  127.     border-color: {color:borders};
  128.     {/block:ifBorderInvert}
  129. }
  130.  
  131. ::selection {
  132.   background:{color:scroll};
  133.   color:{color:scroll bg};
  134. }
  135.  
  136. ::-moz-selection {
  137.   background:{color:scroll};
  138.   color:{color:scroll bg};
  139. }
  140.  
  141. ::-webkit-scrollbar {
  142.     width:9px;
  143.     height:9px;
  144. }
  145.  
  146. ::-webkit-scrollbar-track {
  147.     border-radius:10px;
  148.     background:{color:scroll bg};
  149. }
  150.  
  151. ::-webkit-scrollbar-thumb {
  152.     border-radius:10px;
  153.     background:{color:scroll};
  154. }
  155.  
  156. a {
  157.     text-decoration:none;
  158.     outline:none;
  159.     color:{color:body link};
  160.     transition:.2s all ease;
  161. }
  162.  
  163. a:hover {
  164.     color:{color:link hover};
  165. }
  166.  
  167. img {
  168.     border:none;
  169. }
  170.  
  171. blockquote {
  172.     margin-left:10px;
  173.     margin-right:0px;
  174.     padding-left:10px;
  175.     border-left:2px solid {color:borders};
  176. }
  177.    
  178. blockquote blockquote {
  179.     margin-left:10px;
  180.     margin-right:0px;
  181.     padding-left:10px;
  182.     border-left:2px solid {color:post border};
  183. }
  184.  
  185. #post img {
  186.     max-width:100%;
  187.     max-height:100%;
  188. }
  189.  
  190. h1 {
  191.     font-size:20px;
  192.     font-family:calibri;
  193. }
  194.  
  195. #post, .bub {
  196.     border-style:solid;
  197.     {block:ifNotBorderInvert}
  198.     border-color:{color:borders};
  199.     {/block:ifNotBorderInvert}
  200.     border-radius:50%;
  201.     transition:.4s all ease;
  202. }
  203.  
  204. .nav .lnr {
  205.     font-size:25px;
  206. }
  207.  
  208. {block:ifBorderInvert}
  209. #post:hover, .bub:hover {
  210.     border-color:{color:borders};
  211. }
  212. {/block:ifBorderInvert}
  213.  
  214. #entries {
  215.     padding:10px;
  216.     {block:if400px}
  217.     width:400px;
  218.     {/block:if400px}
  219.     {block:ifNot400px}
  220.     width:500px;
  221.     {/block:ifNot400px}
  222.     margin-left:40%;
  223.     margin-top:40px;
  224. }
  225.  
  226. #post {
  227.     {block:if400px}
  228.     width:400px;
  229.     {/block:if400px}
  230.     {block:ifNot400px}
  231.     width:500px;
  232.     {/block:ifNot400px}
  233.     padding:10px;
  234.     background:{color:post bg};
  235.     margin-bottom:30px;
  236.     border-radius:40px;
  237.     border-width:20px;
  238.     {block:ifBorderInvert}
  239.     border-color:{color:post border};
  240.     {/block:ifBorderInvert}
  241.     transition:.4s all ease;
  242. }
  243.  
  244. #post:hover {
  245.     {block:ifNotBorderInvert}
  246.     border:20px solid {color:post border};
  247.     {/block:ifNotBorderInvert}
  248. }
  249.  
  250. #sbar {
  251.     position:fixed;
  252.     height:100%;
  253.     width:410px;
  254. }
  255.  
  256. #sidebar {
  257.     width:250px;
  258.     height:250px;
  259.     position:fixed;
  260.     left:40px;
  261.     top:40px;
  262.     border-radius:100%;
  263.     border:40px solid {color:borders};
  264.     {block:ifBorderInvert}
  265.     border-color: {color:desc text};
  266.     {/block:ifBorderInvert}
  267.     background-image:url('{image:sidebar}');
  268.     background-position:center;
  269.     background-color:{color:side bg};
  270.     background-size:cover;
  271.     transition:.4s all ease;
  272. }
  273.  
  274. #sidebar img {
  275.     resize:auto;
  276.     border-radius:100%;
  277. }
  278.  
  279. #desc {
  280.     font-size:13px;
  281.     color:{color:desc text};
  282.     background-color:{color:desc bg};
  283.     font-family:consolas;
  284.     font-size:12px;
  285.     line-height:13px;
  286.     padding:25px;
  287.     height:200px;
  288.     width:200px;
  289.     border-radius:50%;
  290.     overflow-y:hidden;
  291.     opacity:0;
  292.     transition:.3s all ease;
  293. }
  294.  
  295. #desc span {
  296.     text-align:center;
  297.     display:table-cell;
  298.     height:200px;
  299.     width:200px;
  300.     vertical-align:middle;
  301. }
  302.  
  303. #sidebar:hover #desc{
  304.     opacity:1;
  305. }
  306.  
  307. #sidebar:hover {
  308.     border-color:{color:borders};
  309.     {block:ifNotBorderInvert}
  310.     border-color: {color:desc text};
  311.     {/block:ifNotBorderInvert}
  312. }
  313.  
  314. .nav {
  315.     position:fixed;
  316.     border:10px solid;
  317.     padding:5px;
  318.     color:{color:nav};
  319.     border-color:{color:borders};
  320.     {block:ifBorderInvert}
  321.     border-color:{color:nav};
  322.     {/block:ifBorderInvert}
  323.     background:{color:nav bg};
  324.     left:60px;
  325.     top:360px;
  326. }
  327.  
  328. {block:ifNotBorderInvert}
  329. .nav:hover {
  330.     border-color:{color:nav};
  331. }
  332. {/block:ifNotBorderInvert}
  333.  
  334. #msg {
  335.     margin-left:25px;
  336.     margin-top:60px;
  337. }
  338.  
  339. #submit {
  340.     margin-left:80px;
  341.     margin-top:100px;
  342. }
  343.  
  344. #archive {
  345.     margin-left:145px;
  346.     margin-top:110px;
  347. }
  348.  
  349. #title {
  350.     font-size:15px;
  351.     text-align:center;
  352.     position:relative;
  353.     font-size:17px;
  354.     font-family:consolas;
  355.     vertical-align:middle;
  356.     width:110px;
  357.     margin:auto;
  358.     overflow-y:hidden;
  359.     padding:10px;
  360.     line-height:18px;
  361. }
  362.  
  363. #title a {
  364.     color:{color:title};
  365. }
  366.  
  367. #titcircle {
  368.     width:130px;
  369.     height:130px;
  370.     border:25px solid {color:borders};
  371.     {block:ifBorderInvert}
  372.     border-color:{color:title};
  373.     {/block:ifBorderInvert}
  374.     background-color:{color:title bg};
  375.     display:flex;
  376.     align-items:center;
  377.     top:240px;
  378.     left:230px;
  379.     z-index:3;
  380.     position:relative;
  381. }
  382.  
  383. #titcircle:hover {
  384.     {block:ifBorderInvert}
  385.     border:25px solid {color:borders};
  386.     {/block:ifBorderInvert}
  387.     {block:ifNotBorderInvert}
  388.     border:25px solid {color:title};
  389.     {/block:ifNotBorderInvert}
  390. }
  391.  
  392. #pagination {
  393.     font-size:20px;
  394.     text-align:center;
  395.     padding-top:30px;
  396.     font-size:20px;
  397.     font-family:calibri;
  398.     color:{color:nav};
  399. }
  400.  
  401. #pagicircle a {
  402.     color:{color:nav};
  403. }
  404.  
  405. #pagicircle {
  406.     left:140px;
  407.     top:335px;
  408.     border-color:{color:borders};
  409.     {block:ifBorderInvert}
  410.     border-color:{color:nav};
  411.     {/block:ifBorderInvert}
  412.     background-color:{color:nav bg};
  413.     border-width:15px;
  414.     width:75px;
  415.     height:75px;
  416.     position:fixed;
  417.     transition:.4s all ease;
  418.     z-index:4;
  419. }
  420.  
  421. #pagicircle:hover {
  422.     border-color:{color:borders};
  423.     {block:ifNotBorderInvert}
  424.     border-color: {color:nav};
  425.     {/block:ifNotBorderInvert}
  426. }
  427.  
  428. #info {
  429.     text-align:center;
  430.     margin-top:10px;
  431. }
  432.  
  433. #asker {
  434.     float:left;
  435.     margin-right:5px;
  436. }
  437.  
  438. #links {
  439.     margin-right:20%;
  440.     position:absolute;
  441.     width:250px;
  442. }
  443.  
  444. #l1, #l2, #l3, #l4 {
  445.     text-align:center;
  446.     border:{color:borders} 25px solid;
  447.     background:{color:links bg};
  448.     {block:ifBorderInvert}
  449.     border-color:{color:links};
  450.     {/block:ifBorderInvert}
  451.     background-color:{color:links bg};
  452.     font-size:20px;
  453.     line-height:12px;
  454.     font-family:consolas;
  455.     position:fixed;
  456. }
  457.  
  458.  
  459. #l1:hover, #l2:hover, #l3:hover, #l4:hover {
  460.     border-color:{color:links};
  461.     {block:ifBorderInvert}
  462.     border-color:{color:borders};
  463.     {/block:ifBorderInvert}
  464. }
  465.  
  466.  
  467. #l1 {
  468.     right:60px;
  469.     top:60px;
  470.     width:20px;
  471.     height:16px;
  472.     padding-top:4px;
  473.     border-width:25px;
  474. }
  475.  
  476. #l2 {
  477.     right:30px;
  478.     top:105px;
  479.     width:30px;
  480.     height:20px;
  481.     padding-top:10px;
  482. }
  483.  
  484. #l3 {
  485.     right:70px;
  486.     top:150px;
  487.     width:45px;
  488.     height:27px;
  489.     padding-top:18px;
  490. }
  491.  
  492. #l4 {
  493.     right:20px;
  494.     top:215px;
  495.     width:60px;
  496.     height:35px;
  497.     padding-top:25px;
  498. }
  499.  
  500. .tags {
  501.     color:{color:tags};
  502. }
  503.  
  504. .line {
  505.     width:inherit;
  506.     height:5px;
  507.     border-bottom:1px dotted {color:post border};
  508.     margin-bottom:3px;
  509. }
  510.  
  511. .quote {
  512.     font-size:130%;
  513.     font-weight:bold;
  514. }
  515.  
  516. #notecont {
  517.     {block:if400px}
  518.     width:400px;
  519.     {/block:if400px}
  520.     {block:ifNot400px}
  521.     width:500px;
  522.     {/block:ifNot400px}    
  523.     max-height:400px;
  524.     padding:20px;
  525.     background:{color:post bg};
  526.     margin-bottom:30px;
  527.     border-radius:40px;
  528.     {block:ifNotBorderInvert}
  529.     border:20px solid {color:borders};
  530.     {/block:ifNotBorderInvert}
  531.     {block:ifBorderInvert}
  532.     border:20px solid {color:post border};
  533.     {/block:ifBorderInvert}
  534. }
  535.  
  536. #notecont:hover{
  537.     {block:ifNotBorderInvert}
  538.     border:20px solid {color:post border};
  539.     {/block:ifNotBorderInvert}
  540.     {block:ifBorderInvert}
  541.     border:20px solid {color:borders};
  542.     {/block:ifBorderInvert}
  543. }
  544.  
  545. #notec2 {
  546.     max-height:400px;
  547.     overflow-y:auto;
  548. }
  549. {CustomCSS}
  550.    
  551. </style>
  552. </head>
  553.  
  554. <body>
  555.  
  556. <div id="sbar">
  557.  
  558. <a href="http://linthm.tumblr.com/thm" title="Bublets by Laighlin"><div class="bub" id="cred"><span class="lnr lnr-code"></span></div></a>
  559.  
  560. <div class="bub" id="titcircle">
  561. <div id="title"><a href="/">{Title}</a></div>
  562. </div>
  563.  
  564. <div class="bub" id="sidebar">
  565. <div id="desc"><span>{Description}</span></div>
  566. </div>
  567.  
  568.  
  569. <div class="bub" id="pagicircle">
  570. <div id="pagination">
  571. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">←</a>{/block:PreviousPage}
  572. {block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}{/block:Pagination}
  573. </div></div>
  574. </div>
  575.  
  576.  
  577. <div id="entries">{block:Posts}<div id="post">
  578.  
  579. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  580.  
  581. {block:Photo}{LinkOpenTag}
  582. {block:if400px}
  583.     <img src="{PhotoURL-400}">
  584.     {/block:if400px}
  585.     {block:ifNot400px}
  586.     <img src="{PhotoURL-500}">
  587.     {/block:ifNot400px}
  588. {LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  589.  
  590. {block:Photoset}{block:if400px}
  591.     {Photoset-400}
  592.     {/block:if400px}
  593.     {block:ifNot400px}
  594.     {Photoset-500}
  595.     {/block:ifNot400px}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  596.  
  597. {block:Quote}<div class="quote">“{Quote}”</div>{block:Source}<p> —{Source}{/block:Source}{/block:Quote}
  598.  
  599. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  600.  
  601. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  602.  
  603. {block:Audio}{AudioPlayerWhite}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  604.  
  605. {block:Video}{block:if400px}
  606.     {Video-400}
  607.     {/block:if400px}
  608.     {block:ifNot400px}
  609.     {Video-500}
  610.     {/block:ifNot400px}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  611.  
  612. {block:Answer}<div id="asker"><img src="{AskerPortraitURL-24}"></div>{Asker}:<br>{Question}<br>{Answer}{/block:Answer}
  613.  
  614. <div id="info">
  615. {block:Date}posted on <a href="{Permalink}">{DayOfMonth}.{MonthNumber}.{Year}</a>{block:NoteCount} // <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} // <a href="{ReblogUrl}">reblog</a>
  616.  
  617. {block:RebloggedFrom}<br>via:<a href="{ReblogParentURL}"
  618. title="{ReblogParentTitle}">{ReblogParentName}</a> op:<a href="{ReblogRootURL}"title="{ReblogRoottitle}">{ReblogRootName}</a>{/block:RebloggedFrom}<br>{/block:Date}
  619.  
  620. {block:HasTags}
  621. <div class="line"></div>
  622. {block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}{/block:HasTags}
  623.  
  624. </div>
  625.  
  626. </div>
  627.  
  628. {block:PostNotes}<div id="notecont"><div id="notec2">{PostNotes}</div></div>{/block:PostNotes}
  629. {/block:Posts}</div>
  630.  
  631. {block:ifLink1}<a href="{text:link 1 url}" title="{text:link 1}"><div class="bub" id="l1">I</div></a>{/block:ifLink1}
  632.  
  633. {block:ifLink2}<a href="{text:link 2 url}" title="{text:link 2}"><div class="bub" id="l2">II</div></a>{/block:ifLink2}
  634.  
  635. {block:ifLink3}<a href="{text:link 3 url}" title="{text:link 3}"><div class="bub" id="l3">III</div></a>{/block:ifLink3}
  636.  
  637. {block:ifLink4}<a href="{text:link 4 url}" title="{text:link 4}"><div class="bub" id="l4">IV</div></a>{/block:ifLink4}
  638.  
  639. <a href="/" title="home"><div class="bub nav" id="home"><span class="lnr lnr-home"></span></div></a>
  640. <a href="/ask" title="ask"><div class="bub nav" id="msg"><span class="lnr lnr-pencil"></span></div></a>
  641. <a href="/submit" title="submit"><div class="bub nav" id="submit"><span class="lnr lnr-envelope"></div></a>
  642. <a href="/archive" title="archive"><div class="bub nav" id="archive"><span class="lnr lnr-calendar-full"></div></a>
  643.  
  644. </body></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!