chellescodes

PHASES THEME - LIGHT

May 1st, 2017
3,038
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 28.05 KB | None | 0 0
  1. <!--
  2.  
  3. =========DMMMM============DDDMMMMD=====M
  4. =====IMM====MMMN=========+MMMMMMMM=====M
  5. ===NM======MMMMM=======MMMMM==?MMMDD===M
  6. =+D~=======MM=NMM====MMMMM====MMM8==DD=M
  7. OD========MMN==MMM=MMMMM=====MMMM====NDM
  8. DD=======MMM===MMMMMMM======+MMM======DM
  9. D=======MMM=====MMMM========MMM=======DD
  10. D8=====MMM======MM==========MM========DM
  11. DD====MMM=======D===========MM=======DDM
  12. =$D==MMD====================M=======DD=M
  13. ===NMM======================M=====ND===M
  14. ===M=ODD=======================MDN=====M
  15. =========DDNN=============IDDD=========M
  16. ================7MDDDD8================M
  17.                    
  18.     CODE BY CHELLE, AKA @MARKRHAMILL
  19.        PLEASE LEAVE THE CREDIT
  20.  DO NOT STEAL THE ENTIRE/BIG CHUNKS
  21.    OF THE CODE AND DISTRIBUTE IT
  22.        AS IF IT WERE YOUR OWN
  23.  
  24.  
  25. NOTES ON THIS THEME:
  26. Special thanks to @shythemes for the video resizing tutorial.
  27.  
  28. Please consult the-jedi.tumblr.com/my+theme for tips on how to best utilize this theme.
  29. For help, first consult markrhamill.tumblr.com/tagged/theme+help, or markrhamill.tumblr.com/tagged/phasestheme.
  30. If you don't find an answer to your query, go to the-jedi.tumblr.com/ask with your question.
  31.  
  32. -->
  33.  
  34. <!DOCTYPE html>
  35.  
  36. <head>
  37. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  38. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  39. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  40. <script src ="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  41. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  42. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  43. <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  44. <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  45.  
  46. <title>{Title}</title>
  47.  
  48. <link rel="shortcut icon" href="{Favicon}">
  49. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  50. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  51.  
  52.  
  53. <meta name="color:background" content="#f5f5f5"/>
  54. <meta name="color:text" content="#aaa2a2"/>
  55. <meta name="color:link" content="#f0708c"/>
  56. <meta name="color:link hover" content="#ffcc9d"/>
  57. <meta name="color:blockquote" content="#dadada"/>
  58. <meta name="color:post background" content="#ffffff"/>
  59.  
  60.  
  61.  
  62. <meta name="image:sidebar" content=""/>
  63. <meta name="text:go to the website below to search icons, use the icon titles to replace the ones for your links:" content="http://fontawesome.io/icons/" />
  64. <meta name="text:link 1 URL" content="/" />
  65. <meta name="text:link 1 icon" content="tag"/>
  66. <meta name="text:link 1" content="link 1" />
  67. <meta name="text:link 2 URL" content="/" />
  68. <meta name="text:link 2 icon" content="cog"/>
  69. <meta name="text:link 2" content="link 2" />
  70. <meta name="text:link 3 URL" content="/" />
  71. <meta name="text:link 3 icon" content="book"/>
  72. <meta name="text:link 3" content="link 3" />
  73. <meta name="text:link 4 URL" content="/" />
  74. <meta name="text:link 4 icon" content="pencil"/>
  75. <meta name="text:link 4" content="" />
  76. <meta name="text:link 5 URL" content="/" />
  77. <meta name="text:link 5 icon" content="twitter"/>
  78. <meta name="text:link 5" content="" />
  79. <meta name="text:link 6 URL" content="/" />
  80. <meta name="text:link 6 icon" content="code"/>
  81. <meta name="text:link 6" content="" />
  82. <meta name="text:post width" content="500" />
  83. <meta name="text:about link" content="/about" />
  84. <meta name="text:updates" content="updates here"/>
  85. <meta name="text:sidebar size" content="250" />
  86. <meta name="text:border radius" content="5" />
  87. <meta name="if:show topbar" content="1"/>
  88. <meta name="if:show updates" content="1"/>
  89. <meta name="if:show about" content="1"/>
  90. <meta name="if:extra links" content="1"/>
  91. <meta name="if:sidebar border" content="0"/>
  92.  
  93.  
  94.  
  95. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  96.  
  97. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  98.  
  99. <script>
  100.  
  101. (function($){
  102.  
  103. $(document).ready(function(){
  104.  
  105. $("a[title]").style_my_tooltips({
  106.  
  107. tip_follows_cursor:true,
  108.  
  109. tip_delay_time:90,
  110.  
  111. tip_fade_speed:600,
  112.  
  113. attribute:"title"
  114.  
  115. });
  116.  
  117. });
  118.  
  119. })(jQuery);
  120.  
  121. </script>
  122.  
  123. <!-- end of script tooltip -->
  124.  
  125. <script>
  126.     $(document).ready(function(){
  127.         $(".controloptions").click(function(){
  128.             $("#controls,.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls, .tmblr-iframe-compact .tmblr-iframe--unified-controls").fadeToggle();
  129.         });
  130.     });
  131.    
  132. </script>
  133.  
  134.  
  135.  
  136.  
  137.  
  138.  
  139.  
  140. <style type="text/css">
  141.  
  142. #s-m-t-tooltip {
  143. max-width:300px;
  144. background-color:{color:link};
  145. font-size:10px;
  146. font-family:Karla;
  147. padding:3px 3px 3px 3px;
  148. text-transform: uppercase;
  149. color: #fff;
  150. letter-spacing:1px;
  151. margin:20px 0px 0px 20px;
  152. z-index:9999999999999999999999;
  153. border-radius:{text:border radius}px;
  154.  
  155. }
  156.  
  157.  
  158. blockquote {
  159. padding-left:12px;
  160. border-left:3px solid {color:blockquote};
  161. margin-left:8px;
  162.  
  163. }
  164.  
  165. ul {
  166. list-style:none;
  167. text-align:left;
  168. padding-left:0;
  169. }
  170.  
  171. h1 {
  172.     font-family: Karla;
  173.     font-size:12px;
  174. }
  175. h1 {
  176.     font-family: Karla;
  177.     font-size:11px;
  178. }
  179.  
  180.  
  181. li {
  182. position:relative;
  183. padding-left:30px;
  184. }
  185.  
  186. ul li:before {
  187. position:absolute;
  188. left:15px;
  189. vertical-align:baseline!important;
  190. content:'›';
  191. }
  192.  
  193. body {
  194. background:{color:background};
  195. color:{color:text};
  196. font-family:Karla, Arial;
  197. font-size:11px;
  198. margin:0;
  199. text-align:justify;
  200. line-height:16px;
  201.  
  202. }
  203.  
  204. a {
  205. color:{color:link};
  206. -moz-transition-duration:0.4s;
  207. -webkit-transition-duration:0.4s;
  208. -o-transition-duration:0.4s;
  209. text-decoration:none;
  210. }
  211.  
  212. a:hover {
  213. color:{color:link hover};
  214. -moz-transition-duration:0.4s;
  215. -webkit-transition-duration:0.4s;
  216. -o-transition-duration:0.4s;
  217. }
  218.  
  219. img {
  220. opacity:1;
  221. border:none;
  222. text-decoration:none;
  223. }
  224.  
  225. small {
  226. font-size:11px;
  227. }
  228.  
  229. big {
  230. font-size:11px;
  231. }
  232.  
  233. #title {
  234. font-size:12px;
  235. font-family:Karla;
  236. color:{color:post background};
  237.  background:linear-gradient( to left, {color:link}, {color:link hover});
  238.     background: -webkit-linear-gradient(left, {color:link}, {color:link hover}); /* For Safari 5.1 to 6.0 */
  239.     background: -o-linear-gradient(right, {color:link}, {color:link hover}); /* For Opera 11.1 to 12.0 */
  240.     background: -moz-linear-gradient(right, {color:link}, {color:link hover}); /* For Firefox 3.6 to 15 */
  241. line-height:18px;
  242. letter-spacing:5px;
  243. margin-bottom:10px;
  244. padding:10px 10px 10px 10px;
  245. text-transform:none;
  246. text-align:left;
  247. }
  248.  
  249. #title a {
  250.     color:{text:post background};
  251. }
  252.  
  253.  
  254. #top {
  255.     width:100%;
  256.     height:40px;
  257.     box-shadow: rgba(0,0,0,.05) 1px 1px 3px;
  258.     color:{color:post background};
  259.     position:fixed;
  260.     top:0;
  261.     left:0;
  262.     float:right;
  263.     z-index:999998;
  264.     background:linear-gradient( to left, {color:link}, {color:link hover});
  265.     background: -webkit-linear-gradient(left, {color:link}, {color:link hover}); /* For Safari 5.1 to 6.0 */
  266.     background: -o-linear-gradient(right, {color:link}, {color:link hover}); /* For Opera 11.1 to 12.0 */
  267.     background: -moz-linear-gradient(right, {color:link}, {color:link hover}); /* For Firefox 3.6 to 15 */
  268. }
  269.  
  270. /*topbar*/
  271.  
  272. #toplinks {
  273.     color:{color:post background};
  274.     float:right;
  275.     margin-right:20px;
  276.     margin-top:13px;
  277.     font-family:Karla;
  278.     cursor:pointer;
  279.     -moz-transition-duration:0.4s;
  280.     -webkit-transition-duration:0.4s;
  281.     -o-transition-duration:0.4s;
  282.     text-decoration:none;
  283. }
  284.  
  285. #toplinks:hover  {
  286.     color:{color:link};
  287.     float:right;
  288.     margin-right:20px;
  289.     margin-top:13px;
  290.     -moz-transition-duration:0.4s;
  291.     -webkit-transition-duration:0.4s;
  292.     -o-transition-duration:0.4s;
  293.  
  294. }
  295.  
  296. .searchbox {
  297.     background:{color:post background};
  298.     border:0px;
  299.     height:auto;
  300.     border-radius:25px;
  301.     margin-top:10px;
  302.     margin-right:20px;
  303. }
  304.  
  305. .searchbox input{
  306.     background-color: {color:post background};
  307.     text-align:center;
  308.     height:auto;
  309.     font-size: 10px;
  310.     font-family:Karla;
  311.     text-transform: uppercase;
  312.     border:0px;
  313.     color: {color:text};
  314.     letter-spacing: 1px;
  315.     outline:none;
  316.     padding: 4px 8px;
  317.     width:100px;
  318.     border-radius:25px;
  319.    
  320. }
  321.  
  322.  
  323. #controls, .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls, .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  324.     animation: fadin 2s;
  325.     top:50px!important;
  326.     opacity:.5!important;
  327.     position:fixed!important;
  328.     right:10px!important;
  329.     display:none;
  330. -webkit-animation: fadein 2s;
  331. -moz-animation: fadein 2s;
  332. -ms-animation: fadein 2s;
  333.  -o-animation: fadein 2s;
  334. }
  335.  
  336. @keyframes fadein {
  337.     from { opacity: 0; }
  338.     to   { opacity: 1; }
  339. }
  340.  
  341. @-moz-keyframes fadein {
  342.     from { opacity: 0; }
  343.     to   { opacity: 1; }
  344. }
  345.  
  346. @-webkit-keyframes fadein {
  347.     from { opacity: 0; }
  348.     to   { opacity: 1; }
  349. }
  350.  
  351. @-ms-keyframes fadein {
  352.     from { opacity: 0; }
  353.     to   { opacity: 1; }
  354. }
  355.  
  356. @-o-keyframes fadein {
  357.     from { opacity: 0; }
  358.     to   { opacity: 1; }
  359. }
  360.  
  361.  
  362.  
  363.  
  364. #sidebar {
  365.  
  366. text-align:left;
  367. position:fixed;
  368. margin-left:calc(-{text:sidebar size}px - 50px);
  369. padding:0px 0px 0px 0px;
  370. {block:ifSidebarBorder}
  371. margin-left:calc(-{text:sidebar size}px - 70px);
  372. padding:10px 10px 10px 10px;
  373.  
  374.  border: 5px solid transparent;
  375.  
  376.       -moz-border-image: -moz-linear-gradient(left, {color:link}, {color:link hover});
  377.       -webkit-border-image: -webkit-linear-gradient(left, {color:link}, {color:link hover});
  378.       border-image: linear-gradient(to right,{color:link}, {color:link hover});
  379.  
  380.       border-image-slice: 1;
  381. {/block:ifSidebarBorder}
  382. margin-top:152px;
  383. width:{text:sidebar size}px;
  384. background:{color:post background};
  385. box-shadow: rgba(0,0,0,.05) 0px 0px 3px;
  386. border-radius:{text:border radius}px;
  387.  
  388.  
  389.  
  390. }
  391.  
  392.  
  393. #sidebar img {
  394.     border-top-left-radius:{text:border radius}px;
  395.     border-top-right-radius:{text:border radius}px;
  396.     width:{text:sidebar size}px;
  397. }
  398.  
  399.  
  400. #blogtitle {
  401.     height:25px;
  402.     letter-spacing:2px;
  403.     background:linear-gradient( to left, {color:link}, {color:link hover});
  404.     background: -webkit-linear-gradient(left, {color:link}, {color:link hover}); /* For Safari 5.1 to 6.0 */
  405.     background: -o-linear-gradient(right, {color:link}, {color:link hover}); /* For Opera 11.1 to 12.0 */
  406.     background: -moz-linear-gradient(right, {color:link}, {color:link hover}); /* For Firefox 3.6 to 15 */
  407.     text-align:center;
  408.    
  409.     color:{color:post background};
  410.     line-height:18px;
  411.     font-weight:lighter;
  412.     font-family: Karla;
  413.     font-size:12px;
  414.     margin-top:-5px;
  415.     padding-top:10px;
  416.  
  417.    
  418. }
  419.  
  420. .dropbtn {
  421.      background:linear-gradient( to left, {color:link}, {color:link hover});
  422.     background: -webkit-linear-gradient(left, {color:link}, {color:link hover}); /* For Safari 5.1 to 6.0 */
  423.     background: -o-linear-gradient(right, {color:link}, {color:link hover}); /* For Opera 11.1 to 12.0 */
  424.     background: -moz-linear-gradient(right, {color:link}, {color:link hover}); /* For Firefox 3.6 to 15 */
  425.     color: {color:background};
  426.     padding: 10px;
  427.     font-size: 10px;
  428.     font-family:Karla;
  429.     text-transform:uppercase;
  430.     width:{text:sidebar size}px;
  431.     border: none;
  432.     cursor: pointer;
  433.     height:30px;
  434.     border-bottom-left-radius:{text:border radius}px;
  435.     border-bottom-right-radius:{text:border radius}px;
  436.     -o-transition: opacity .7s ease-in-out;
  437.     -ms-transition: opacity .7s ease-in-out;
  438.     -moz-transition: opacity .7s ease-in-out;
  439.     -webkit-transition: opacity .7s ease-in-out;
  440.     transition: opacity .7s ease-in-out;
  441.  
  442.  
  443.  
  444.  
  445. }
  446.  
  447.  
  448. .dropdown-content {
  449.     position: absolute;
  450.     background-color: {color:post background};
  451.     width:{text:sidebar size}px;
  452.  
  453.     z-index: -1;
  454.     opacity: 0;
  455.     -o-transition: opacity .7s ease-in-out;
  456.     -ms-transition: opacity .7s ease-in-out;
  457.     -moz-transition: opacity .7s ease-in-out;
  458.     -webkit-transition: opacity .7s ease-in-out;
  459.     transition: opacity .7s ease-in-out;
  460.  
  461.  
  462. }
  463.  
  464.  
  465. .dropdown-content a {
  466.     color: {color:link};
  467.     font-size: 10px;
  468.     padding: 5px 5px;
  469.     text-decoration: none;
  470.     display: block;
  471. }
  472.  
  473.  
  474. .dropdown-content a:hover {
  475.     background-color: {color:background};
  476.     color:{color:link hover};
  477.    
  478. }
  479.  
  480. .dropdown:hover .dropdown-content {
  481.     display: block;
  482.     opacity:1;
  483.     border-radius:0;
  484.     -o-transition: opacity .5s ease-in-out;
  485.     -ms-transition: opacity .5s ease-in-out;
  486.     -moz-transition: opacity .5s ease-in-out;
  487.     -webkit-transition: opacity .5s ease-in-out;
  488.     transition: opacity .5s ease-in-out;
  489. }
  490.  
  491.  
  492. .dropdown:hover .dropbtn {
  493.     background-color: {color:background};
  494.          background:linear-gradient( to left, {color:link}, {color:link hover});
  495.     background: -webkit-linear-gradient(left, {color:link}, {color:link hover}); /* For Safari 5.1 to 6.0 */
  496.     background: -o-linear-gradient(right, {color:link}, {color:link hover}); /* For Opera 11.1 to 12.0 */
  497.     background: -moz-linear-gradient(right, {color:link}, {color:link hover}); /* For Firefox 3.6 to 15 */
  498.     color: {color:post background};
  499.     padding: 10px;
  500.     font-size: 10px;
  501.     font-family:Karla;
  502.     text-transform:uppercase;
  503.     width:{text:sidebar size}px;
  504.     border: none;
  505.     cursor: pointer;
  506.     border-radius:0px;
  507.    
  508. }
  509.  
  510.  
  511. #links {
  512. font-size:10px;
  513. margin-top:10px;
  514. text-align:center;
  515. text-transform:uppercase;
  516.  
  517. }
  518.  
  519. ::-webkit-scrollbar {
  520. width: 10px; /** width of total scrollbar **/
  521. background: {color:background};
  522. }
  523.  
  524. ::-webkit-scrollbar-thumb {
  525. background: {color:link hover};
  526. }
  527.  
  528. #mainlinks {
  529.     text-align:center;
  530.     width:{text:sidebar width}px;
  531.     letter-spacing:5px;
  532.     padding-top:10px;
  533.     font-size:14px;
  534. }
  535.  
  536. #links a {
  537. -moz-transition-duration:0.4s;
  538. -webkit-transition-duration:0.4s;
  539. -o-transition-duration:0.4s;
  540. }
  541.  
  542.  
  543. #description {
  544. margin-top:10px;
  545. padding-bottom:5px;
  546. padding-left:20px;
  547. padding-right:20px;
  548. line-height:13px;
  549. float:middle;
  550. width:{text:sidebar width}px;
  551. text-align:center;
  552. }
  553.  
  554.  
  555. /*pagination*/
  556.  
  557. #pagination {
  558. text-transform:lowercase;
  559. text-align:center;
  560. font-size:13px;
  561. margin-bottom:120px;
  562. }
  563.  
  564. #pagination a {
  565. padding:0 3px;
  566. }
  567.  
  568.  
  569. #con {
  570. left:50%;
  571. margin-left:-140px;
  572. position:absolute;
  573. width:{text:post width}px;
  574. }
  575.  
  576.  
  577. #entries {
  578. opacity: 1;
  579. transition: 1s opacity;
  580. margin-top:115px;
  581.  
  582. -webkit-animation: fadein 2s;
  583. -moz-animation: fadein 2s;
  584. -ms-animation: fadein 2s;
  585.  -o-animation: fadein 2s;
  586.     animation: fadein 2s;
  587. }
  588.  
  589. @keyframes fadein {
  590.     from { opacity: 0; }
  591.     to   { opacity: 1; }
  592. }
  593.  
  594. @-moz-keyframes fadein {
  595.     from { opacity: 0; }
  596.     to   { opacity: 1; }
  597. }
  598.  
  599. @-webkit-keyframes fadein {
  600.     from { opacity: 0; }
  601.     to   { opacity: 1; }
  602. }
  603.  
  604. @-ms-keyframes fadein {
  605.     from { opacity: 0; }
  606.     to   { opacity: 1; }
  607. }
  608.  
  609. @-o-keyframes fadein {
  610.     from { opacity: 0; }
  611.     to   { opacity: 1; }
  612. }
  613.  
  614.  
  615.  
  616.  
  617.  
  618. #posts {
  619. width: calc({text:post width} - 10)px;
  620. border-radius:{text:border radius}px;
  621. box-shadow: rgba(0,0,0,.05) 1px 1px 3px;
  622. padding:0px 0px -10px 0px;
  623. background:{color:post background};
  624. {block:IndexPage}
  625. margin-bottom:30px;
  626. {/block:IndexPage}
  627. {block:PermalinkPage}
  628. margin-bottom:50px;
  629. {/block:PermalinkPage}
  630. }
  631.  
  632. #posts img {
  633. max-width:100%;
  634. height:auto;
  635. }
  636.  
  637. #posts img, #posts li, #posts blockquote {
  638. max-width:100%;
  639. height:auto;
  640.  
  641. }
  642.  
  643. #itemsbelow {
  644.  
  645. max-width:100%;
  646. height:auto;
  647.    
  648. }
  649.  
  650. #photoset {
  651. height:auto;
  652. width:100.5%;
  653. max-width:calc({text:post width}px + 2px);
  654.    
  655. }
  656.  
  657.  
  658. #postlink a{
  659.     color:{color:post background};
  660. }
  661.  
  662. #postlink a:hover{
  663.     color:{color:link hover};
  664. }
  665.  
  666. .caption {
  667. width:{text:post width}px;
  668. margin-top:13px;
  669. padding-left:10px;
  670. padding-right:10px;
  671. margin-bottom:0px;
  672. }
  673.  
  674. a.tumblr_blog {
  675. font-weight:bold;
  676. -moz-transition-duration:0.4s;
  677. -webkit-transition-duration:0.4s;
  678. -o-transition-duration:0.4s;
  679. }
  680.  
  681. /*quote*/
  682.  
  683. #titlequote {
  684. padding:0px 10px 10px 10px;
  685. text-align:left;
  686. font-size:12px;
  687. line-height:17px;
  688. font-weight:bold;
  689. }
  690.  
  691. #source {
  692. padding:0px 10px 10px 10px;
  693. margin-top:0px;
  694. margin-bottom:11px;
  695. margin-left:0px;
  696. }
  697.  
  698. /*asks*/
  699.  
  700. .q {
  701. padding:0px 10px 10px 10px;
  702. line-height:17px;
  703. font-size:11px;
  704. }
  705.  
  706. .as {
  707. padding:0px 15px 10px 10px;
  708. font-weight:normal;
  709. left:10px;
  710.  
  711. }
  712.  
  713. #asker{
  714.    
  715.     padding:10px 10px 10px 10px;
  716.     color:{color:post background};
  717.     background:{color:link hover};
  718.     border-radius:{text:border radius}px;
  719.    
  720.    
  721. }
  722.  
  723. #asker a {
  724.     text-transform:uppercase;
  725.     color:{color:link};
  726.     font-weight:bold;
  727.    
  728. }
  729.  
  730. .a {
  731. margin-left:5px;
  732. }
  733.  
  734.  
  735. .chat ol {
  736. padding:0;
  737. list-style:none;
  738. }
  739.  
  740. .line {
  741. padding:0px 0;
  742. }
  743.  
  744. .label {
  745. font-weight:bold;
  746. }
  747.  
  748. #video {
  749.     top: -{text:post width}px;
  750. }
  751.  
  752.  
  753. #postinfo {
  754.     width:{text:post width}px;
  755.     margin-top:0px;
  756.     margin-left:-5px;
  757.     font-size:12px;
  758.     padding:0px 0px 5px 10px;
  759.     {block:HasTags}
  760.     padding:0px 10px 10px 10px;
  761.     {/block:HasTags}
  762.     text-align:left;
  763.     display:inline-block;
  764.     line-height:14px;
  765.     vertical-align:text-top;
  766. }
  767.  
  768. #tags {
  769.     text-transform:none;
  770.     font-size:11px;
  771.     padding-left:15px;
  772.     text-align:left;
  773.     margin-top:3px;
  774.     }
  775. #tags a {
  776.     display:inline-block;
  777. }
  778.  
  779. #mybuttons {
  780.     vertical-align:top;
  781.     width:40px;
  782.     display:inline-block;
  783.     margin-top:-5px;
  784.     float:right;
  785.     padding:5px 10px 0px 0px;
  786.     }
  787.  
  788. #mylike {
  789.     opacity:0.7;
  790.     display:inline-block;
  791.     margin-bottom:5px;
  792.     }
  793.  
  794. #mylike:hover {
  795.     opacity:1;
  796.     }
  797.    
  798. #myreblog {
  799.     padding-left:4px;
  800.     padding-right:5px;
  801.     opacity:0.7;
  802.     display:inline-block;
  803.     }
  804.  
  805. #myreblog:hover {
  806.     opacity:1;
  807. }
  808.  
  809. #icons {
  810.     padding:10px 10px 12px 10px;
  811. }
  812.  
  813.  
  814. #date {
  815.     float:right;
  816.     margin-right:5px;
  817.     margin-top:1px;
  818.     text-transform:lowercase;
  819. }
  820.  
  821.  
  822. #usericon {
  823.     width:23px;
  824.     float:left;
  825.     padding-right:8px;
  826.     margin-top:-2px;
  827. }
  828.  
  829. #topurl {
  830.    font-size:12px;
  831.    left:10px;
  832.    font-weight:bold;
  833. }
  834.  
  835. #audio {
  836.     height:50px;
  837.     padding:0;
  838. }
  839.  
  840. #audioplayer {
  841.     width:30px;
  842.     margin-top:15px;
  843.     border-radius:{text:border radius}px;
  844.     margin-left:15px;
  845.     opacity:.5;
  846.     overflow:hidden;
  847.     position:absolute;
  848.     vertical-align:top;
  849.     z-index:999999;
  850. }
  851.  
  852. #albumart {
  853.     position:absolute;
  854.     z-index:1;
  855.     vertical-align:top;
  856.     width:60px;
  857.     padding-top:-10px;
  858. }
  859.  
  860. #audioinfo {
  861.     display:inline;
  862. }
  863.  
  864. .tags {
  865. font-size:11px;
  866. text-transform:none;
  867. padding-bottom:0px;
  868. }
  869.  
  870. .pagenotes {
  871. {block:IndexPage}
  872. display: none!important;
  873. {/block:IndexPage}
  874. width:{text:post width};
  875. text-align:left;
  876. }
  877.  
  878. .pagenotes img {
  879. display:none!important;
  880. }
  881.  
  882. .pagenotes li {
  883. list-style-type:none;
  884. padding:2px 0px;
  885. text-align:left;
  886. margin:0 0 0 -40px;
  887. }
  888.  
  889.  
  890.  
  891.  
  892.  
  893. .my-like {
  894.     cursor:pointer;
  895.     display:inline-block;
  896.     vertical-align:top;
  897. }
  898. .my-liked, .my-like:hover {
  899.     color: red;
  900.     cursor:pointer;
  901.     display:inline-block;
  902.     vertical-align:top;
  903. }
  904.  
  905.  
  906. #updates {
  907.     position:fixed;
  908.     font-family:Karla;
  909.     left:0px;
  910.     top:0px;
  911.     z-index:999;
  912.     }
  913.    
  914.  
  915. #updates a{
  916.     color:{color:link hover};
  917.     font-weight:bold;
  918.     text-decoration:underline;
  919. }
  920.  
  921.  
  922.  
  923. #updates:hover #updatescontent {
  924.         opacity:1;
  925.         -webkit-transition: all .5s ease-in-out;
  926.         -moz-transition: all .5s ease-in-out;
  927.         -o-transition: all .5s ease-in-out;
  928.         width: 125px;
  929.     border-radius:10px;
  930.  
  931.     }
  932.    
  933.  
  934.  
  935. #updatescontent {
  936.     line-height:10px;
  937.     font-size:10px;
  938.     text-align:left;
  939.     width:125px;
  940.     top:45px;
  941.     color: {color:link};
  942.     left:20px;
  943.     position:fixed;
  944.     opacity:0;
  945.     -webkit-transition: all .5s ease-in-out;
  946.     -moz-transition: all .5s ease-in-out;
  947.     -o-transition: all .5s ease-in-out;
  948.  
  949. }
  950.  
  951.  
  952. #updatestab  {
  953.     width: 100px;
  954.    margin-left:20px;
  955.    margin-top:10px;
  956.    text-align: center;
  957.    padding:2px;
  958.    color:{color:link};
  959.    border-radius:10px;
  960.    background:{color:post background};
  961.     height: auto;
  962.     top:0px;
  963.     left:0px;
  964. }
  965.  
  966. #credit {
  967.     width:20px;
  968.     position:fixed;
  969.     bottom:0;
  970.     right:10px;
  971.     float:right;
  972.     z-index:999998;
  973. }
  974.  
  975.  
  976. </style>
  977. <script>
  978. window.onload = function () {
  979. document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' );
  980. document.addEventListener( 'click', function ( event ) {
  981.     var myLike = event.target;
  982.     if( myLike.className.indexOf( 'my-like' ) > -1 ) {
  983.         var frame = document.getElementById( 'my-like-frame' ),
  984.             liked = ( myLike.className == 'my-liked' ),
  985.             command = liked ? 'unlike' : 'like',
  986.             reblog = myLike.getAttribute( 'data-reblog' ),
  987.             id = myLike.getAttribute( 'data-id' ),
  988.             oauth = reblog.slice( -8 );
  989.         frame.src = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
  990.         liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
  991.     };
  992. }, false );
  993. };
  994. </script>
  995.  
  996. {CustomCSS}
  997.  
  998. </style>
  999.  
  1000.  
  1001.  
  1002. </head>
  1003.  
  1004. <body>
  1005. {block:ifShowTopbar}
  1006. <div id="top">
  1007. {block:ifShowUpdates}
  1008. <div id="updates">
  1009. <div id="updatestab">&nbsp;<i class="fa fa-calendar">&nbsp;&nbsp;</i>UPDATES</div>
  1010. <div id="updatescontent">
  1011.     {text:updates}
  1012. </div>
  1013. </div>
  1014. {/block:ifShowUpdates}
  1015.  
  1016. <form style="float:right;" action="/search" method="get" class="searchbox" name="theform">
  1017.     <input type="text" name="q" value="SEARCH"/>
  1018. </form>
  1019.  
  1020.  
  1021. <div class="controloptions"><div id="toplinks">CONTROLS</div></div>
  1022.  
  1023.  
  1024.  
  1025. <a href="/redirect">
  1026. <div id="toplinks">FOLLOW</div>
  1027. </a>
  1028.  
  1029.  
  1030. </div>
  1031. {/block:ifShowTopbar}
  1032.  
  1033.  
  1034. <div id="con">
  1035.  
  1036. <div id="sidebar">
  1037. <div id="sidebar img"><img src="{image:sidebar}"></div>
  1038. <div id="blogtitle">{Title}</div>
  1039. <div id= "mainlinks">
  1040.     <a title="home" style="font-size:17px;" href="/"><i class="fa fa-home"></i></a>&nbsp;
  1041.     <a title="ask" href="/ask"><i class="fa fa-envelope"></i></a>&nbsp;
  1042.     {block:ifShowAbout}
  1043.     <a title="about" href="{text:about link}"><i class="fa fa-user"></i></a>&nbsp;
  1044.     {/block:ifShowAbout}
  1045.     <a title="archive" href="/archive"><i class="fa fa-archive"></i></a>&nbsp;
  1046.        
  1047.     </div>
  1048. <div id="description">{Description}</div>
  1049.  
  1050.  
  1051. <div id="links">
  1052. {block:ifExtraLinks}
  1053. <div class="dropdown">
  1054.   <button onhover="myFunction()" class="dropbtn"><i style="float:left;font-size:12px;" class="fa fa-bars"></i>&nbsp;Links</button>
  1055.    <div id="Demo" class="dropdown-content">
  1056.    {block:IfLink1}
  1057.     <a href="{text:link 1 URL}"><i style="margin-left:5px;float:left;font-size:12px;" class="fa fa-{text:link 1 icon}"></i>&nbsp;{text:link 1}</a>
  1058.    {/block:IfLink1}
  1059.    
  1060.    {block:IfLink2}
  1061.     <a href="{text:link 2 URL}"><i style="margin-left:5px;float:left;font-size:12px;" class="fa fa-{text:link 2 icon}"></i>&nbsp;{text:link 2}</a>
  1062.    {/block:IfLink2}
  1063.    
  1064.    {block:IfLink3}
  1065.     <a href="{text:link 3 URL}"><i style="float:left;margin-left:5px;font-size:12px;" class="fa fa-{text:link 3 icon}"></i>&nbsp;{text:link 3}</a>
  1066.    {/block:IfLink3}    
  1067.    
  1068.    
  1069.     {block:IfLink4}
  1070.     <a href="{text:link 4 URL}"><i style="margin-left:5px;float:left;font-size:12px;" class="fa fa-{text:link 4 icon}"></i>&nbsp;{text:link 4}</a>
  1071.     {/block:IfLink4}
  1072.    
  1073.    
  1074.     {block:IfLink5}
  1075.     <a href="{text:link 5 URL}"><i style="margin-left:5px;float:left;font-size:12px;" class="fa fa-{text:link 5 icon}"></i>&nbsp;{text:link 5}</a>
  1076.     {/block:IfLink5}
  1077.    
  1078.     {block:IfLink6}
  1079.     <a href="{text:link 6 URL}"><i style="float:left;margin-left:5px;font-size:12px;" class="fa fa-{text:link 6 icon}"></i>&nbsp;{text:link 6}</a>
  1080.     {/block:IfLink6}
  1081.    
  1082.    
  1083.   </div>
  1084.   {/block:ExtraLinks}
  1085. </div>
  1086. </div>
  1087.  
  1088. </div>
  1089.  
  1090.  
  1091. <div id="entries">
  1092.  
  1093. {block:Posts}
  1094.  
  1095. <div id="posts">
  1096.  
  1097. <div id="icons">
  1098. <a href="{Permalink}">
  1099. <div id= "date">{ShortMonth} {DayofMonth}, {Year}</a></div>
  1100.  
  1101. {block:NotReblog}
  1102. <div id="usericon"><img src="{PortraitURL-40}"/ style="border-radius:3px;"></div>
  1103. <div id="topurl"><a href="/">{Name}</a></div>
  1104. {/block:NotReblog}
  1105.  
  1106. {block:RebloggedFrom}
  1107. <div id="usericon"><img src="{ReblogParentPortraitURL-40}" style="border-radius:3px;" /></div>
  1108. <div id="topurl"> <a title="{ReblogRootTitle}"  href="{ReblogParentURL}">{ReblogParentName}</a></div>
  1109. {/block:RebloggedFrom}  
  1110. </div>
  1111.  
  1112. <div id= "itemsbelow">
  1113.  
  1114. {block:Quote}
  1115. <div id="titlequote"><i class="fa fa-quote-left"></i>&nbsp; {Quote} &nbsp;<i class="fa fa-quote-right"></i></div>
  1116. {block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
  1117. {/block:Quote}
  1118.  
  1119. {block:Text}
  1120. {block:Title}
  1121. <div id="title">{Title}</div>{/block:Title}
  1122. <div style="padding:0px 10px 0px 10px;">{Body}</div>
  1123. {/block:Text}
  1124.  
  1125. {block:link}
  1126. <div id="title"><a href="{URL}"><div id="postlink"><i class="fa fa-link"></i>&nbsp; {Name}</a></div></div>
  1127. {block:Description}<div style="padding:0px 10px 0px 10px;">{Description}</div>{/block:Description}
  1128. {/block:link}
  1129.  
  1130. {block:Chat}
  1131. {block:Title}
  1132. <div id="title">{Title}</div>{/block:Title}
  1133. {/block:Text}
  1134. <div style="padding:0px 10px 0px 10px;">{block:lines}
  1135. {block:label}
  1136. <br><b>{label}</b>
  1137. {/block:label}
  1138. {line}
  1139. {/block:lines}</div>
  1140. {/block:Chat}
  1141.  
  1142. {block:Photo}
  1143. {linkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{linkCloseTag}
  1144. {/block:Photo}
  1145.  
  1146. {block:Photoset}
  1147. <div id="photoset">{Photoset}</div>
  1148. {/block:Photoset}
  1149.  
  1150. <div class="video">{Video-500}</div>
  1151.  
  1152.  
  1153. {block:Audio}
  1154. <div id="audio">
  1155. <div id="audioinfo">
  1156. <div id="audioplayer" >{AudioPlayerWhite}</div>
  1157. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}</div>
  1158. <div id= "title" style="height:60%; bottom:10px; padding-top:20px">
  1159. <span style="margin-left:60px;padding-top:30px">
  1160. {block:TrackName}
  1161. {TrackName}
  1162. {/block:TrackName} - {block:Artist}
  1163. {Artist}
  1164. {/block:Artist}
  1165. </span>
  1166. </div>
  1167. </div> </div>
  1168. {/block:Audio}
  1169.  
  1170. {block:Answer}
  1171. <div class="q">
  1172. <div id="asker" class="as"> <b><big>{Asker} said:</big></b>
  1173. {Question}</div></div>
  1174. <div style="padding:0px 15px 0px 10px;" class="a"> {Answer}</div>
  1175. {/block:Answer}
  1176.  
  1177. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1178.  
  1179. <!-- {block:ContentSource} {SourceURL} {/block:ContentSource} {block:RebloggedFrom} {ReblogRootURL} {ReblogParentURL} {/block:RebloggedFrom} -->
  1180.  
  1181. {block:Date}
  1182. <div id="postinfo">
  1183. <div id="mybuttons">
  1184. <div id="myreblog">{ReblogButton size="14" color="grey"}</div>
  1185. <div id="mylike">{LikeButton size="14" color="grey"}</div></div>
  1186. {block:NoteCount}<a href="{Permalink}" style="margin-left:5px;">{NoteCountWithLabel} </a>{/block:NoteCount}
  1187. {block:ContentSource}<a title="{SourceTitle}" href="{SourceURL}" style="float:right;left:-10px;">&nbsp;source </a>{/block:ContentSource}
  1188. {block:HasTags}<div style="margin-left:-10px;" id="tags">{block:Tags}<a href="{TagUrl}">#{Tag}</a>&nbsp;&nbsp;{/block:Tags}</div>{/block:HasTags}
  1189. </div>
  1190. {/block:Date}
  1191.  
  1192.  
  1193. </div>
  1194.  
  1195. {block:PostNotes}
  1196. <div style="padding:0px 10px 0px 10px;" class="pagenotes">
  1197. {PostNotes}
  1198. </div>
  1199. {/block:PostNotes}
  1200. </div>
  1201.  
  1202. {/block:Posts}
  1203.  
  1204. <div id="pagination">
  1205. {block:Pagination}
  1206. {block:Pagination}
  1207. <div id="pagination">
  1208.       {block:PreviousPage}
  1209.             <a title="previous" href="{PreviousPage}"><i style="margin-left:5px;float:left;font-size:12px;" class="fa fa-arrow-left"></i>&nbsp;</a>
  1210.       {/block:PreviousPage}
  1211.  
  1212.       {block:JumpPagination length="5"}
  1213.             {block:CurrentPage}
  1214.                   <span style="background:{color:link hover};color:{color:background};"class="current_page">{PageNumber}</span>
  1215.             {/block:CurrentPage}
  1216.  
  1217.             {block:JumpPage}
  1218.                   <a class="jump_page" href="{URL}">{PageNumber}</a>
  1219.             {/block:JumpPage}
  1220.       {/block:JumpPagination}
  1221.  
  1222.       {block:NextPage}
  1223.             <a title="next" href="{NextPage}"> <i style="float:right;font-size:12px;" class="fa fa-arrow-right"></i>&nbsp; </a>
  1224.       {/block:NextPage}
  1225. </div>
  1226. {/block:Pagination}
  1227. {/block:Pagination}
  1228. </div>
  1229.  
  1230.  
  1231. <!--
  1232. DO NOT REMOVE!!!
  1233. -->
  1234.  
  1235. <div id="credit"><a title="THEME BY CHELLE" href="https://markrhamill.tumblr.com/"><img src="https://68.media.tumblr.com/62496251ce73eb90b955cdfa12c0ac83/tumblr_op9av3V2XR1tbtydxo2_r1_75sq.png"/></a></div>
  1236.  
  1237. </div>
  1238.  
  1239. </div>
  1240.  
  1241. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment