API tools faq
paste
Advertisement
nofacesface

Champloo (Revamp)

nofacesface
Dec 29th, 2013
1,479
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 30.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--THEME BY NO-FACES-FACE
  5. steal and I'll find you and punch you in the throat  (◡‿◡✿)
  6. -->
  7.  
  8. <head>
  9.  
  10. <meta name="color:Link" content="#fff"/>
  11. <meta name="color:Blog Title" content="#fff"/>
  12. <meta name="color:Blog Title Hover" content="#ffe29c"/>
  13. <meta name="color:Borders" content="#eee" />
  14. <meta name="color:Background" content="#fff" />
  15. <meta name="color:Text" content="#fafafa" />
  16. <meta name="color:Underline" content="#ffe29c" />
  17. <meta name="color:Bold" content="#db3400" />
  18. <meta name="color:Italic" content="#db3400" />
  19. <meta name="color:Description" content="#000" />
  20. <meta name="color:Scroll" content="#000" />
  21. <meta name="color:Hover" content="#aaa" />
  22. <meta name="color:Permalink" content="#fff" />
  23. <meta name="color:Post Title" content="#fafafa" />
  24. <meta name="color:Post BG" content="#000" />
  25. <meta name="color:Header BG" content="#000" />
  26. <meta name="color:Navigation Icon" content="#fff" />
  27. <meta name="color:Navigation Icon Hover" content="#000" />
  28. <meta name="color:Navigation Triangle" content="#000" />
  29. <meta name="color:Triangle Box" content="#000" />
  30. <meta name="color:Music Triangle" content="#000" />
  31. <meta name="color:Navigation Triangle Hover" content="#fff" />
  32. <meta name="color:Permalink BG" content="#000" />
  33. <meta name="color:Permalink BG Hover" content="#fff" />
  34. <meta name="color:Permalink Icon" content="#fff" />
  35. <meta name="color:Permalink Icon Hover" content="#000" />
  36.  
  37. <meta name="image:Background" content="http://25.media.tumblr.com/tumblr_lzxkhw34cK1r9g6hvo2_100.png" />
  38.  
  39.  
  40. <meta name="text:Link 1" content="/" />
  41. <meta name="text:Link 1 Title" content="refresh" />
  42. <meta name="text:Link 2" content="/" />
  43. <meta name="text:Link 2 Title" content="tags" />
  44. <meta name="text:Link 3" content="/ask" />
  45. <meta name="text:Link 3 Title" content="whisper" />
  46. <meta name="text:Link 4" content="/submit" />
  47. <meta name="text:Link 4 Title" content="submit" />
  48. <meta name="text:music code" content="" />
  49.  
  50.  
  51. <meta name="if:caption" content="1"/>
  52. <meta name="if:photoeffect" content="0"/>
  53. <meta name="if:posttype2" content="1"/>
  54. <meta name="if:posttype1" content="0"/>
  55. <meta name="if:musicplayer" content="1"/>
  56.  
  57. <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title> {block:Description}<meta name=""
  58. content="{MetaDescription}" />{/block:Description}
  59. <link rel="shortcut icon" href="{Favicon}">
  60.  
  61.  <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  62.  
  63. <style>
  64.     div#qTip {
  65.     padding: 4px;
  66.     display: none;
  67.     text-align: center;
  68.     position: absolute;
  69.     font-family: consolas;
  70.     font-size:8px;
  71.     line-height:10px;
  72.     z-index: 1000;
  73.     background-color: rgba(0,0,0,0.6);
  74.     color: #fff;
  75.     text-transform:uppercase;
  76.     letter-spacing: 3px;
  77.    
  78.     }
  79.     </style>
  80.  
  81.  
  82. <style type="text/css">
  83.  
  84. @import url(http://weloveiconfonts.com/api/?family=fontawesome);
  85.  
  86. /* fontawesome */
  87. [class*="fontawesome-"]:before {
  88.   font-family: 'FontAwesome', sans-serif;
  89. }
  90.  
  91. #tumblr_controls {
  92. position: fixed !important;
  93. }
  94.  
  95. iframe#tumblr_controls { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); opacity:0.2; right:3px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.2;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  96.  
  97. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.2s linear;opacity: 1;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
  98.  
  99.  
  100.  
  101. ::-webkit-scrollbar {width: 5px;height:5px; background: #fff;}
  102. ::-webkit-scrollbar-thumb {background:{color:Scroll};}
  103.  
  104.  
  105.  
  106. /* GENERAL */
  107.  
  108. body{
  109. cursor:crosshair;
  110. margin:0px;
  111.  font-family: consolas;
  112.     font-style: oblique;
  113.     font-size: 10px;
  114.     letter-spacing: 1px;
  115. line-height: 11px;
  116. color: {color:text};
  117. }
  118.  
  119.  
  120.  
  121. body {
  122.         background-color: {color:Background};
  123.  
  124.         background-image: url({image:Background});
  125.         margin: 0;
  126.         word-wrap: break-word;
  127.         background-attachment: fixed;
  128.         overflow-x: hidden;
  129.  
  130. }
  131.  
  132.  
  133. a:link, a:active, a:visited{text-decoration: none;color: {color:Link};
  134. -webkit-transition: all 0.7s ease;transition: all 0.7s ease;
  135. -moz-transition: all 0.7s ease;-o-transition: all 0.7s ease;}
  136.  
  137. a:hover{ color: {color:Hover}; }
  138.  
  139. a.class1 {color: {color:Blog Title};}
  140. a.class1:link  
  141. a.class1:active
  142. a.class1:visited{text-decoration: none;color: {color:Link};
  143. -webkit-transition: all 0.5s ease;transition: all 0.5s ease;
  144. -moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;}
  145. a.class1:hover{
  146.  color: {color:Blog Title Hover};}
  147.  
  148.  
  149. /* POSTS */
  150.  
  151.  
  152. #content{
  153.     position: relative;
  154.     margin-top:60px;
  155.        margin-left: auto;
  156.     margin-right: auto;
  157.      {block:ifposttype2}
  158.     width:300px;
  159.       padding-right: 40px;
  160.        {/block:ifposttype2}
  161.         {block:ifposttype1}
  162.     width:500px;
  163.       padding-left: 0px;
  164.     {/block:ifposttype1}
  165.    
  166.     }
  167. .entry{
  168.     cursor:help;
  169.     {block:ifposttype2}
  170.     width: 250px;
  171.     {/block:ifposttype2}
  172.     {block:ifposttype1}
  173.     width: 400px;
  174.     {/block:ifposttype1}
  175.     margin: 10px 10px;
  176.     padding: 40px;
  177.     opacity: 1;
  178.     background-color: {color:Post BG};
  179. -webkit-transition: all 0.4s ease-in-out;
  180. -moz-transition: all 0.4s ease-in-out;
  181. -o-transition: all 0.4s ease-in-out;
  182. -ms-transition: all 0.4s ease-in-out;
  183. transition: all 0.4s ease-in-out;}
  184.  
  185.  
  186.  
  187.  
  188. .entry img{max-width:100%;
  189.   cursor:help;
  190. opacity: 1px;
  191.     -webkit-transition: opacity 0.6s linear;
  192.     -webkit-transition: all 0.6s ease-in-out;
  193.     -moz-transition: all 0.6s ease-in-out;
  194.     -o-transition: all 0.6s ease-in-out;}
  195.    
  196.  
  197. .entry {
  198. {block:ifphotoeffect}  
  199.     opacity: 1;
  200. -webkit-filter: grayscale(100%);
  201. {/block:ifphotoeffect} }
  202.  
  203. .entry:hover {
  204.         opacity: 1;
  205. -webkit-filter:none;
  206.     -webkit-transition: opacity 0.6s linear;
  207.     -webkit-transition: all 0.6s ease-in-out;
  208.     -moz-transition: all 0.6s ease-in-out;
  209.     -o-transition: all 0.6s ease-in-out;
  210. }
  211.  
  212.  
  213.  
  214. /* SIDEBAR */
  215.  
  216. .container {
  217.   background-color: none;
  218.     z-index: 999;
  219.     width: 250px;
  220. height: 265px;
  221. position: fixed;
  222. {block:ifposttype1}
  223. margin-left: 170px;
  224. {/block:ifposttype1}
  225. {block:ifposttype2}
  226. margin-left: 250px;
  227. {/block:ifposttype2}
  228. margin-top: 0px;
  229. opacity: 1;
  230.  -webkit-transition: opacity 0.6s linear;
  231.     -webkit-transition: all 0.6s ease-in-out;
  232.     -moz-transition: all 0.6s ease-in-out;
  233.     -o-transition: all 0.6s ease-in-out;}
  234.    
  235.  
  236. .trianglebox {
  237.     position: fixed;
  238.     width: 0px;
  239. height: 0px;
  240. border-style: solid;
  241. border-width: 100px 150px 100px 0;
  242. border-color: transparent {color:Triangle Box} transparent transparent;
  243. margin-left: 100px;
  244. margin-top: 25px;
  245. }
  246.  
  247. .circlebg {
  248.     background-image: url({image:Background});
  249.     width: 80px;
  250.     height: 80px;
  251.     margin-left: 60px;
  252.     margin-top: -40px;
  253.     border-radius: 500px;
  254.     position: absolute;
  255. }
  256.  
  257. .icon {
  258.     border-radius: 500px;
  259.      width: 60px;
  260.     height: 60px;
  261.      margin-left: 10px;
  262.     margin-top: 10px;
  263.     position: absolute;
  264.     opacity: 1;
  265.      -webkit-transition: opacity 0.6s linear;
  266.     -webkit-transition: all 0.6s ease-in-out;
  267.     -moz-transition: all 0.6s ease-in-out;
  268.     -o-transition: all 0.6s ease-in-out;
  269. }
  270.  
  271. .trianglebox:hover .icon {
  272.     opacity: 0;
  273. }
  274.  
  275.  
  276. .header {
  277.     width: 100%;
  278. height: 50px;
  279. background-color: {color:Header BG};
  280. position: fixed;
  281. margin-left: 0px;
  282. margin-top: -60px;
  283. z-index: 999999999;
  284. }
  285.  
  286. .titlebox {
  287. width: 333px;
  288. height: 50px;
  289. background-color: none;
  290. position: relative;
  291. margin-left: auto;
  292. margin-right: auto;
  293. margin-top: 0px;
  294. z-index: 999999999;
  295.  -webkit-transition: opacity 0.6s linear;
  296.     -webkit-transition: all 0.6s ease-in-out;
  297.     -moz-transition: all 0.6s ease-in-out;
  298.     -o-transition: all 0.6s ease-in-out;
  299. }
  300.  
  301. .blogtitle {
  302.     color: {color:Blog Title};
  303.     text-align: center;
  304.     font-family: calibri;
  305.     font-size: 15px;
  306.     font-style: oblique;
  307.     text-transform: none;
  308.     padding: 16px;
  309.     text-transform: lowercase;
  310.     letter-spacing: 6px;
  311.      -webkit-transition: opacity 0.4s linear;
  312.     -webkit-transition: all 0.4s ease-in-out;
  313.     -moz-transition: all 0.4s ease-in-out;
  314.     -o-transition: all 0.4s ease-in-out;
  315. }
  316.  
  317. .descbox {
  318.   position:absolute;
  319.        cursor:help;
  320.        overflow: hidden;
  321.        background: none;
  322.     opacity: 0;
  323.       width: 80px;
  324.     height: 80px;
  325.     margin-left: 0px;
  326.     margin-top: 0px;
  327.     border-radius: 500px;
  328.      -webkit-transition: opacity 0.6s linear;
  329.     -webkit-transition: all 0.6s ease-in-out;
  330.     -moz-transition: all 0.6s ease-in-out;
  331.     -o-transition: all 0.6s ease-in-out;
  332. }
  333.  
  334. .trianglebox:hover .descbox {
  335. opacity: 1;
  336. background: rgba(255,255,255,0.8);
  337. }
  338.  
  339.  
  340. .description {
  341.     opacity: 1;
  342.     text-align: center;
  343.     color: {color:Description};
  344.     font-family: calibri;
  345.     font-style: oblique;
  346.     font-size: 11px;
  347.     letter-spacing: 1px;
  348.     text-transform: none;
  349.     margin-top: 12px;
  350.     padding: 10px;
  351.         -webkit-transition: opacity .5s linear;
  352.     -webkit-transition: all .5s ease-in-out;
  353.     -moz-transition: all .5s ease-in-out;
  354.     -o-transition: all .5s ease-in-out;
  355. }
  356.  
  357.  
  358. /* NAVIGATION */
  359.  
  360. .nav {
  361.      color: {color:Navigation Icon};
  362.     font-size: 14px;
  363.     font-style: normal;
  364.     padding-top: 21px;
  365.      padding-left: 17px;
  366.      -webkit-transform: rotate(-90deg);
  367. -moz-transform: rotate(-90deg);
  368. }
  369.  
  370. .nav1 {
  371.       cursor:help;
  372.         -webkit-transform: rotate(58deg);
  373. -moz-transform: rotate(58deg);
  374.       width: 0px;
  375. height: 0px;
  376. border-style: solid;
  377. border-width: 20px 30px 20px 0;
  378. border-color: transparent {color:Navigation Triangle} transparent transparent;
  379.     opacity: 1;
  380.     margin-top: 73px;
  381.     margin-left: 93px;
  382.     position: absolute;
  383.         -webkit-transition: opacity .5s linear;
  384.     -webkit-transition: all .5s ease-in-out;
  385.     -moz-transition: all .5s ease-in-out;
  386.     -o-transition: all .5s ease-in-out;
  387. }
  388.  
  389. .nav1:hover {
  390. border-color: transparent {color:Navigation Triangle Hover} transparent transparent;
  391. }
  392.  
  393. .navt1 {
  394.      color: {color:Navigation Icon};
  395.     font-size: 13px;
  396.     font-style: normal;
  397.     padding-top: 21px;
  398.      padding-left: 17px;
  399.      -webkit-transform: rotate(-90deg);
  400. -moz-transform: rotate(-90deg);
  401.    -webkit-transition: opacity .5s linear;
  402.     -webkit-transition: all .5s ease-in-out;
  403.     -moz-transition: all .5s ease-in-out;
  404.     -o-transition: all .5s ease-in-out;
  405. }
  406.  
  407. .nav1:hover .navt1 {
  408.       color: {color:Navigation Icon Hover};
  409. }
  410.  
  411.  
  412.  
  413. .nav2 {
  414.            cursor:help;
  415.         -webkit-transform: rotate(115deg);
  416. -moz-transform: rotate(115deg);
  417.       width: 0px;
  418. height: 0px;
  419. border-style: solid;
  420. border-width: 19px 28px 19px 0;
  421. border-color: transparent {color:Navigation Triangle} transparent transparent;
  422.     opacity: 1;
  423.     position: absolute;
  424.     margin-top: 46px;
  425.     margin-left: 103px;
  426.         -webkit-transition: opacity .5s linear;
  427.     -webkit-transition: all .5s ease-in-out;
  428.     -moz-transition: all .5s ease-in-out;
  429.     -o-transition: all .5s ease-in-out;
  430. }
  431.  
  432. .nav2:hover {
  433. border-color: transparent {color:Navigation Triangle Hover} transparent transparent;
  434. }
  435.  
  436. .navt2 {
  437.      color: {color:Navigation Icon};
  438.     font-size: 11px;
  439.     font-style: normal;
  440.     margin-top: -2px;
  441.      margin-left: 19px;
  442.      -webkit-transform: rotate(-90deg);
  443. -moz-transform: rotate(-90deg);
  444.    -webkit-transition: opacity .5s linear;
  445.     -webkit-transition: all .5s ease-in-out;
  446.     -moz-transition: all .5s ease-in-out;
  447.     -o-transition: all .5s ease-in-out;
  448. }
  449.  
  450. .nav2:hover .navt2 {
  451.      color: {color:Navigation Icon Hover};
  452. }
  453.  
  454. .nav3 {
  455.            cursor:help;
  456.         -webkit-transform: rotate(-56deg);
  457. -moz-transform: rotate(-56deg);
  458.       width: 0px;
  459. height: 0px;
  460. border-style: solid;
  461. border-width: 20px 30px 20px 0;
  462. border-color: transparent {color:Navigation Triangle} transparent transparent;
  463.     opacity: 1;
  464.     position: absolute;
  465.     margin-top: 213px;
  466.     margin-left: 206px;
  467.         -webkit-transition: opacity .5s linear;
  468.     -webkit-transition: all .5s ease-in-out;
  469.     -moz-transition: all .5s ease-in-out;
  470.     -o-transition: all .5s ease-in-out;
  471. }
  472.  
  473. .nav3:hover {
  474. border-color: transparent {color:Navigation Triangle Hover} transparent transparent;
  475. }
  476.  
  477. .navt3 {
  478.      color: {color:Navigation Icon};
  479.     font-size: 12px;
  480.     font-style: normal;
  481.     margin-top: 0px;
  482.      margin-left: 20px;
  483.      -webkit-transform: rotate(-90deg);
  484. -moz-transform: rotate(-90deg);
  485.    -webkit-transition: opacity .5s linear;
  486.     -webkit-transition: all .5s ease-in-out;
  487.     -moz-transition: all .5s ease-in-out;
  488.     -o-transition: all .5s ease-in-out;
  489. }
  490.  
  491. .nav3:hover .navt3 {
  492.   color: {color:Navigation Icon Hover};
  493. }
  494.  
  495.  
  496.  
  497. .nav4 {
  498.            cursor:help;
  499.         -webkit-transform: rotate(0deg);
  500. -moz-transform: rotate(0deg);
  501.       width: 0px;
  502. height: 0px;
  503. border-style: solid;
  504. border-width: 19px 28px 19px 0;
  505. border-color: transparent {color:Navigation Triangle} transparent transparent;
  506.     opacity: 1;
  507.     position: absolute;
  508.     margin-top: 219px;
  509.     margin-left: 178px;
  510.         -webkit-transition: opacity .5s linear;
  511.     -webkit-transition: all .5s ease-in-out;
  512.     -moz-transition: all .5s ease-in-out;
  513.     -o-transition: all .5s ease-in-out;
  514. }
  515.  
  516. .nav4:hover {
  517. border-color: transparent {color:Navigation Triangle Hover} transparent transparent;
  518. }
  519.  
  520. .navt4 {
  521.      color: {color:Navigation Icon};
  522.     font-size: 11px;
  523.     font-style: normal;
  524.     margin-top: -1px;
  525.      margin-left: 18px;
  526.      -webkit-transform: rotate(-90deg);
  527. -moz-transform: rotate(-90deg);
  528.    -webkit-transition: opacity .5s linear;
  529.     -webkit-transition: all .5s ease-in-out;
  530.     -moz-transition: all .5s ease-in-out;
  531.     -o-transition: all .5s ease-in-out;
  532. }
  533.  
  534. .nav4:hover .navt4 {
  535.       color: {color:Navigation Icon Hover};
  536. }
  537.  
  538.  
  539.  
  540. /* TITLES */
  541.  
  542. .title a{color: {color:Link}; }
  543. .title {
  544.     text-align: right;
  545.     padding: 5px;
  546.     font-family:consolas;
  547. {block:ifposttype1}
  548. font-size:13px;
  549. {/block:ifposttype1}
  550. {block:ifposttype2}
  551. font-size:10px;
  552. {/block:ifposttype2}
  553. letter-spacing: 5px;
  554. text-transform: none;
  555. color: {color:Post Title};}
  556.  
  557. .quote {
  558. padding:10px;
  559. font-size:10px;
  560. letter-spacing: 0px;
  561. text-transform:none;
  562. color: {color:Text};}
  563.  
  564. .source {
  565. font-size:8px;
  566. letter-spacing: 2px;
  567. text-align:right;
  568. font-style:none;
  569. font-weight:none;
  570. text-transform:none;}
  571.  
  572. .answer {margin:10px;}
  573.  
  574. /* PERMALINKS */
  575.  
  576. .entry:hover .perma  {
  577. opacity:1;
  578. z-index:999;
  579. -webkit-transition: all 0.9s ease;
  580. -moz-transition: all 0.9s ease;}
  581.  
  582. .perma a {
  583.       cursor:help;
  584. color:{color:Link};
  585. font-size:9px;
  586. font-family: consolas;
  587. text-transform:normal;}
  588.  
  589. .perma a:hover {
  590. color:{color:Hover};    
  591. }
  592.    
  593.  
  594. .perma {
  595.     margin-left:0px;
  596.     text-transform: normal;
  597. position:absolute;
  598. font-size: 9px;
  599. text-transform: uppercase;
  600. line-height:10px;
  601. text-align:center;  
  602. margin-top: 0px;
  603. width: 55px;
  604. height: 1px;
  605. opacity:0;
  606. padding: 8px;
  607. -webkit-transition: all 0.9s ease;
  608. -moz-transition: all 0.9s;
  609. }
  610.  
  611.  
  612. .permanumberbox {
  613.      background-color: {color:Permalink BG};
  614.       position: absolute;
  615.     margin-top: 0px;
  616.     {block:ifposttype2}
  617.      margin-left: 210px;
  618.      {block:ifposttype2}
  619.       {block:ifposttype1}
  620.      margin-left: 361px;
  621.      {block:ifposttype1}
  622.     height: 20px;
  623.     width: 20px;
  624.      padding: 2px;
  625.     opacity: 1;
  626.     -webkit-transition: all 0.9s ease;
  627. -moz-transition: all 0.9s;
  628.    
  629. }
  630.  
  631. .permanumberbox:hover {
  632.     background-color: {color:Permalink BG Hover};
  633. }
  634.  
  635. .permanumber {
  636.     margin-left: 1px;
  637.     margin-top: 3px;
  638.     color: {color:Permalink Icon};
  639.     padding: 2px;
  640.     font-size: 12px;
  641.     text-align: center;
  642.     font-style: normal;
  643.         -webkit-transition: all 0.9s ease;
  644. -moz-transition: all 0.9s;
  645. }
  646.  
  647. .permanumberbox:hover .permanumber {
  648.     color: {color:Permalink Icon Hover};
  649. }
  650.  
  651.  
  652. .permareblogbox {
  653.      background-color: {color:Permalink BG};
  654.       position: absolute;
  655.     margin-top: 0px;
  656.      margin-left: 0px;
  657.     height: 20px;
  658.     width: 20px;
  659.     opacity: 1;
  660.     letter-spacing: 2px;
  661.       padding: 2px;
  662.     overflow:hidden;
  663.     -webkit-transition: all 0.9s ease;
  664. -moz-transition: all 0.9s;
  665.    
  666. }
  667.  
  668. .permareblogbox:hover {
  669.     background-color: {color:Permalink BG Hover};
  670. }
  671.  
  672. .permareblog {
  673.   margin-left: 2px;
  674.     margin-top: 4px;
  675.     color: {color:Permalink Icon};
  676.     padding: 1px;
  677.     font-size: 12px;
  678.     text-align: center;
  679.     font-style: normal;
  680.      -webkit-transition: all 0.9s ease;
  681. -moz-transition: all 0.9s;
  682. }
  683.  
  684. .permareblogbox:hover .permareblog {
  685.     color: {color:Permalink Icon Hover};
  686. }
  687.  
  688.  
  689. #permalink{
  690. {block:PermalinkPage}    
  691. text-align:center;
  692. margin-top:15px;
  693. padding:5px;
  694. font-size:11px;
  695. letter-spacing: 3px;
  696. font-style:normal;
  697. text-transform:uppercase;
  698. color: {color:Text};
  699. {/block:PermalinkPage}
  700. }
  701.  
  702.  
  703.  
  704. /* AUDIO */
  705.  
  706. .newplayerbutton {
  707.                 position: relative;
  708.                 width: 28px;
  709.                 height: 27px;
  710.                 overflow: hidden;
  711.             }
  712.            
  713.             .playerbuttonhug {
  714.                 position: absolute;
  715.                 top: -11px;
  716.                 left: -10px;
  717.             }
  718.  
  719.  
  720.                .tumblr_audio_player {
  721.                 border: none;
  722.                 padding: 0px;
  723.                 margin-top: 0px;
  724.                 margin-left: 11px;
  725.                 height: 50px;
  726.                 width: 500px;
  727.             }
  728.  
  729.             .playerbuttonbg {
  730.                 position: absolute;
  731.                 left: 15px;
  732.                 top: 15px;
  733.                 width: 28px;
  734.                 height: 28px;
  735.                 background-color: #ffffff;
  736.                 padding: 10px;
  737.                 -webkit-border-radius: 40px;
  738.                 -moz-border-radius: 40px;
  739.                 border-radius: 40px;
  740.                 opacity: .4;
  741.                 filter: alpha(opacity=40);
  742.                 -moz-opacity: 0.4;
  743.                  -khtml-opacity: 0.4;
  744.                 transition: opacity .7s ease-in-out;
  745.                 -moz-transition: opacity .7s ease-in-out;
  746.                 -webkit-transition: opacity .7s ease-in-out;
  747.             }
  748.            
  749.             .playerbuttonbg:hover {
  750.                 opacity: 1;
  751.                     filter: alpha(opacity=100);
  752.                     -moz-opacity: 1;
  753.                     -khtml-opacity: 1;
  754.             }
  755.  
  756.             .audioimgwrapper {
  757.                 position: absolute;
  758.                 left: 0px;
  759.                 top: 0px;
  760.                 -webkit-border-radius: 50px;
  761.                 -moz-border-radius: 50px;
  762.                 border-radius: 50px;                
  763.                 overflow: hidden;
  764.                 width: 78px;
  765.                 height: 78px;
  766.             }
  767.            
  768.             .audioimgwrapper img {
  769.                 width: 100%;
  770.                 height: auto;      
  771.                 -webkit-border-radius: 50px;
  772.                 -moz-border-radius: 50px;
  773.                 border-radius: 50px;                
  774.             }
  775.            
  776.             .trackdetails {
  777.                 width: auto;
  778.                 display:inline-block;
  779.                 margin-left: 100px;
  780.                 min-height: 85px;
  781.             }
  782.            
  783.             .audiowrapper {
  784.                 position: relative;
  785.                 display:inline-block;
  786.             }
  787.            
  788. /* MUSIC PLAYER */
  789.  
  790. .musictri {
  791.     cursor: help;
  792.     position: fixed;
  793.     {block:ifposttype2}
  794.     margin-left: 875px;
  795.     {block:ifposttype2}
  796.     {block:ifposttype1}
  797.     margin-left: 945px;
  798.     {block:ifposttype1}
  799.     bottom: 20px;
  800.     width: 0px;
  801. height: 0px;
  802. border-style: solid;
  803. border-width: 35px 0 35px 60.6px;
  804. border-color: transparent transparent transparent {color:Music Triangle};
  805. }
  806.  
  807. .musicwrapper {
  808.     overflow: hidden;
  809.         position: absolute;
  810.     margin-left: -55px;
  811.     margin-top: -12px;
  812.     width: 25px;
  813. height: 25px;
  814. }
  815.  
  816. .musiciconw {
  817.         position: absolute;
  818.     margin-left: 0px;
  819.     margin-top: 0px;
  820.     width: 25px;
  821. height: 25px;
  822. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  823. -o-transition: 0.5s ease;-moz-transition: 0.5s ease;
  824. }
  825.  
  826. .musicwrapper:hover .musiciconw {
  827.     margin-top: -35px;
  828. }
  829.  
  830. .musicon {
  831.         position: absolute;
  832.     margin-left: 5px;
  833.     margin-top: 5px;
  834.     width: 15px;
  835. height: 15px;
  836. }
  837.  
  838. .musicon img {
  839.     width: 100%;
  840. }
  841.  
  842. .musicplayw {
  843.     overflow: hidden;
  844.         position: absolute;
  845.     margin-left: 0px;
  846.     margin-top: 0px;
  847.     width: 25px;
  848. height: 25px;
  849.     margin-top: 35px;
  850. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  851. -o-transition: 0.5s ease;-moz-transition: 0.5s ease;
  852. }
  853.  
  854. .musicplayer {
  855.     overflow: hidden;
  856.         position: absolute;
  857.     margin-left: 5px;
  858.     margin-top: 5px;
  859.     width: 15px;
  860. height: 15px;
  861. }
  862.  
  863. .musicc {
  864.       position: absolute;
  865.     margin-left: -23px;
  866.     margin-top: 0px;
  867.     width: 15px;
  868. height: 15px;
  869. }
  870.  
  871. .musicwrapper:hover .musicplayw {
  872.     margin-top: 0px;
  873. }
  874.  
  875.  
  876.  
  877.  
  878. /* TEXT */
  879.  
  880. i, em{color:{color:Italic};}
  881. b{color:{color:Bold}; letter-spacing: 1px;}
  882. b, strong{color:{color:Title}; letter-spacing: 2px;}
  883. ul,ol{margin:0px;margin-left:-10px;}
  884. p{padding:0px;margin:10px;}
  885. u{text-decoration:none;color: {color:Underline}; letter-spacing: 1px;
  886. border-bottom:1px solid {color:Underline};}
  887. blockquote {margin:2px; margin-left:10px;
  888. padding:2px;border-left:1px solid {color:Lines};}
  889.  
  890. /* MISC */
  891.  
  892.  
  893. #warning {
  894.     z-index: -10000;
  895.     position: fixed;
  896.     top: 0;left: 0;
  897.     width: 100%;
  898.     height: 100%;
  899.     background-color: rgba(255,255,255,0.8);
  900.     color: #000;
  901.     text-align: center;
  902.     text-transform: uppercase;
  903.     padding-top: 250px;
  904.     font-family: consolas;
  905.     font-size: 13px;
  906.     letter-spacing: 4px;
  907.     opacity: 0;
  908.      {block:ifposttype1}{block:ifposttype2}
  909.    opacity: 1;z-index:10000;
  910.    {/block:ifposttype2}{/block:ifposttype1}
  911.     {block:ifnotposttype1}{block:ifnotposttype2}
  912.     opacity: 1;z-index:10000;
  913.     {/block:ifnotposttype2}{/block:ifnotposttype1}
  914. }
  915.  
  916. .c img{
  917.     padding-left: 2.5px;
  918.     padding-top: 2px;
  919.      border-radius: 500px;
  920.     opacity: 0;
  921.     width:25px;
  922. height: 25px;
  923. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  924. -o-transition: 0.5s ease;-moz-transition: 0.5s ease;}
  925.  
  926. .c{overflow: hidden; position:fixed;right:7px;bottom:7px; background-color: rgba(0,0,0,0.3);
  927. width: 30px; height: 30px; border-radius: 500px;}
  928.  
  929.  
  930. .c img:hover{
  931.     opacity: 1;
  932. }
  933.  
  934. .l .odd{display:block;padding:5px 5px;}
  935. .l .even{display:block;background: black;padding:5px 5px;}
  936.  
  937. #s-m-t-tooltip{display:inline-block;position:absolute;max-width:300px;
  938. margin:15px;padding:3px 10px 3px 10px;z-index:99;border:1px solid #AAA;
  939. border-radius:10px;border-top-left-radius:0px;background:#000;}
  940.  
  941. ::selection {color: {color:Hover};}
  942. ::-moz-selection {color: {color:Hover};}
  943. ::-webkit-selection{color: {color:Hover};}
  944.  
  945. img{ margin-bottom:-3px;}
  946.  
  947. /* POSTNOTES */
  948.  
  949. ol.notes a{letter-spacing:2px;}
  950. ol.notes {
  951. list-style:none;
  952. font-size: 10px;
  953. letter-spacing: 2px;
  954. line-height: 20px;
  955. margin-top:20px;
  956. text-transform:none;}
  957.  
  958. ol.notes li.note img.avatar {
  959. vertical-align:-5px;
  960. margin-right:5px;
  961. width:17px;
  962. border-radius: 500px;
  963. padding:4px;}
  964.  
  965. ol.notes li.note {margin:5px 0px 10px -20px;}
  966. ol.notes li.note span.action {font-style: normal;}
  967. ol.notes li.note .answer_content {font-weight: normal;}
  968. ol.notes li.note blockquote {padding:4px 10px;margin: 10px 0px 0px 25px;}
  969.  
  970. </style>
  971.  
  972.  
  973.  
  974. </head>
  975. <body>
  976.  
  977. {block:indexpage}
  978. <script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
  979.  
  980. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  981. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script> <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script> <script type="text/javascript" charset="utf-8"> var $j = jQuery.noConflict(); $j(function() { if (navigator.platform == "iPad" || navigator.platform == "iPhone") return; $j("img").lazyload({ placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif", effect: "fadeIn", }); }); </script>
  982. {/block:indexpage}
  983.  
  984.  
  985.  
  986. <div id="warning">please select only one post size</div>
  987.  
  988.  
  989. {block:ifmusicplayer}
  990. <div class="musictri">
  991.     <div class="musicwrapper">
  992.     <div class="musicplayw">
  993.             <div class="musicplayer">
  994.             <div class="musicc">
  995.              {text:music code}
  996.              </div>
  997.             </div>
  998.         </div>
  999.        
  1000.         <div class="musiciconw">
  1001.             <div class="musicon"><img src="http://media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif"></div>
  1002.         </div>
  1003.     </div>
  1004. </div><!--musictri-->
  1005. {/block:ifmusicplayer}
  1006.  
  1007. <div class="header">
  1008.         <div class="titlebox">
  1009.     <div class="blogtitle"><a href="/" class="class1">{Title}</a></div>
  1010. </div>
  1011. </div>
  1012.  
  1013.  
  1014. <div class="container">
  1015.  
  1016. <div class="trianglebox">
  1017. <div class="circlebg">
  1018.  
  1019.  <div class="descbox">
  1020.       <div class="description">{Description}</div>
  1021.   </div>
  1022.  
  1023.   <img class="icon" src="{PortraitURL-64}"></div>
  1024.  
  1025. </div>
  1026.  
  1027. <a href="{text:Link 1}" title="{text:Link 1 Title}" >
  1028. <div class="nav1">
  1029. <div class="navt1"><span class="fontawesome-home"></span></div>
  1030. </div></a>
  1031.  
  1032. <a href="{text:Link 2}" title="{text:Link 2 Title}" >
  1033. <div class="nav2">
  1034. <div class="navt2"><span class="fontawesome-tag"></span></div>
  1035. </div></a>
  1036.  
  1037. <a href="{text:Link 3}" title="{text:Link 3 Title}" >
  1038. <div class="nav3">
  1039. <div class="navt3"><span class="fontawesome-envelope"></span></div>
  1040. </div></a>
  1041.  
  1042. <a href="{text:Link 4}" title="{text:Link 4 Title}" >
  1043. <div class="nav4">
  1044. <div class="navt4"><span class="fontawesome-pencil"></span></div>
  1045. </div></a>
  1046.  
  1047. </div><!--container-->
  1048.  
  1049.  
  1050. <div id="content">
  1051. {block:Posts}
  1052.  
  1053. <div class="entry">
  1054.  
  1055. {block:IndexPage}
  1056.  
  1057. <div class="perma">
  1058. <a href="{Permalink}" title="{NoteCount}" class="class2" >
  1059. <div class="permanumberbox">
  1060. <div class="permanumber"><span class="fontawesome-link"></span></div>
  1061. </div></a>
  1062.  
  1063. <a href="{ReblogURL}" target="_blank" title="reblog" class="class2">
  1064. <div class="permareblogbox">
  1065. <div class="permareblog"><span class="fontawesome-retweet"></span></div>
  1066. </div></a>
  1067.  
  1068. </span></div>
  1069.  
  1070. {/block:IndexPage}
  1071.  
  1072. {block:Text}
  1073. <div class="title">{Title}</div>{Body}
  1074. {/block:Text}
  1075.  
  1076. {block:Link}
  1077. <a href="{URL}"><span class="title">{Name} <span class="fontawesome-chevron-right"></span></span></a>
  1078. {block:Description}{Description}{/block:Description}
  1079. {/block:Link}
  1080.  
  1081. {block:Photo}
  1082. <a href="{Permalink}">
  1083. {block:IndexPage}
  1084. {block:ifposttype1}<center><img src="{PhotoURL-400}"></center>{/block:ifposttype1}
  1085. {block:ifposttype2}<center><img src="{PhotoURL-250}"></center>{/block:ifposttype2}
  1086. {/block:IndexPage}
  1087. {block:PermalinkPage}
  1088. {block:ifposttype2}<center><img src="{PhotoURL-250}"></center>{/block:ifposttype2}
  1089. {block:ifposttype1}<center><img src="{PhotoURL-400}"></center>{/block:ifposttype1}
  1090. {/block:PermalinkPage}
  1091. {block:ifCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifCaption}
  1092. {/block:Photo}
  1093.  
  1094. {block:Photoset}
  1095. {block:IndexPage}
  1096. {block:ifposttype1}{Photoset-400}{/block:ifposttype1}
  1097. {block:ifposttype2}{Photoset-250}{/block:ifposttype2}
  1098. {/block:IndexPage}
  1099. {block:PermalinkPage}
  1100. {block:ifposttype2}{Photoset-250}{/block:ifposttype2}
  1101. {block:ifposttype1}{Photoset-400}{/block:ifposttype1}
  1102. {/block:PermalinkPage}
  1103. {block:ifCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifCaption}
  1104. {/block:Photoset}
  1105.  
  1106. {block:Quote}
  1107. <div class="quote">{Quote}<div class="source">{Source}</div></div>
  1108. {/block:Quote}
  1109.  
  1110. {block:Chat}
  1111. <div class="title">{Title}</div>{block:Lines}
  1112. <div class="l {Alt}"><div class="{Alt} user_{UserNumber}">
  1113. {block:Label}<b>{Label} </b>{/block:Label}
  1114. {Line}</div></div>{/block:Lines}
  1115. {/block:Chat}
  1116.  
  1117. {block:AudioPlayer}
  1118.         <div class="audiowrapper">
  1119.         {block:AlbumArt}
  1120.             <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  1121.         {/block:AlbumArt}
  1122.        
  1123.         <div class="playerbuttonbg">
  1124.             <div class="newplayerbutton">
  1125.                 <div class="playerbuttonhug">
  1126.            
  1127.                     {AudioPlayerWhite}
  1128.            
  1129.                 </div>
  1130.             </div>
  1131.         </div>
  1132.        
  1133.         <div class="trackdetails">
  1134.            
  1135.                 {block:TrackName}<b>TITLE:</b> {TrackName}{/block:TrackName}<br><br>
  1136.                 {block:Artist}<b>ARTIST:</b> {Artist}{/block:Artist}<br><br>
  1137.                 {block:Album}<b>ALBUM:</b> {Album}{/block:Album}<br><br>
  1138.                 <b>PLAYS:</b> {PlayCountWithLabel}
  1139.    
  1140.         </div>
  1141.         </div>
  1142.            {block:Caption}{Caption}{/block:Caption}
  1143.         {/block:AudioPlayer}
  1144.    
  1145.  
  1146. {block:Video}
  1147. {block:IndexPage}
  1148. {block:ifposttype1}{Video-400}{/block:ifposttype1}
  1149. {block:ifposttype2}{Video-250}{/block:ifposttype2}
  1150. {/block:IndexPage}
  1151. {block:PermalinkPage}
  1152. {block:ifposttype2}{Video-250}{/block:ifposttype2}
  1153. {block:ifposttype1}{Video-400}{/block:ifposttype1}
  1154. {/block:PermalinkPage}
  1155. {block:ifCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifCaption}
  1156. {/block:Video}
  1157.  
  1158. {block:Answer}
  1159. <table style="border-bottom:1px solid #a0a0a0;padding-bottom:5px;margin-bottom:5px;">
  1160. <tr>
  1161. <td style="vertical-align:top;padding-right:5px; width:40px;"><img src="{AskerPortraitURL-64}" style="border-radius: 500px;"></td>
  1162. <td style="vertical-align:top;"><strong>{Asker} asked:</strong> {Question}</td>
  1163. </tr>
  1164. </table>
  1165. {Answer}
  1166. {/block:Answer}
  1167.  
  1168. {block:PermalinkPage}
  1169. <div id="permalink">
  1170. {block:Date}
  1171. <a href="{Permalink}">{Month} {DayOfMonthWithZero}</a>{/block:Date}
  1172. {block:NoteCount} |
  1173. <a href="{Permalink}">{NoteCountWithLabel}</a>{block:NoteCount}
  1174. {block:RebloggedFrom}
  1175. | <a href="{ReblogParentURL}" title="{ReblogParentName}" >via</a> | <a href="{ReblogRootURL}" title="{ReblogRootName}" >source</a>
  1176. {/block:RebloggedFrom}
  1177.  
  1178.  
  1179.  
  1180. <div class="tags">
  1181. {block:HasTags}
  1182. Tagged:
  1183. {block:Tags}<a href="{TagURL}">#{Tag}</a>
  1184. {/block:Tags}
  1185. {/block:HasTags}
  1186. </div></div>
  1187. {/block:PermalinkPage}
  1188.  
  1189.  
  1190. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1191.  
  1192. </div>
  1193. {/block:Posts}
  1194. </div>
  1195.  
  1196.  
  1197. <div class="c">
  1198. <a href="http://nff-themes.tumblr.com"><img src="http://static.tumblr.com/cbjpgjf/hmgmwsd81/yyylamo.png"></a>
  1199. </div>
  1200.  
  1201.  
  1202.  
  1203.  
  1204.  
  1205.  
  1206.  
  1207. </body>
  1208. </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!