chellescodes

PHASES THEME - DARK

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