API tools faq
paste
Advertisement
musecentral

theme #14. ooh

musecentral
Aug 11th, 2016
745
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.43 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4.  
  5.  
  6.  
  7. <head>
  8.  
  9.  
  10.  
  11.  
  12.  
  13. <link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
  14.  
  15. <link rel=“stylesheet” href=“https://cdn.linearicons.com/free/1.0.0/icon-font.min.css”>
  16. <script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js"></script>
  17. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  18.  
  19.  
  20. <title>{Title}</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  24.  
  25.  
  26. <!--- musecentral.tumblr.com/ theme #14. OOH
  27. please don't steal! it's not very nice --->
  28.  
  29. <meta name="color:Background" content="#dadada"/>
  30. <meta name="color:Text" content="#99aaa7"/>
  31. <meta name="color:accent1" content="#c3b0b5"/>
  32. <meta name="color:accent2" content="#e2e2e2"/>
  33. <meta name="color:shadow" content="#e2a9b0"/>
  34. <meta name="color:post bold" content="#dcc1c8"/>
  35. <meta name="color:Border" content="#99aaa7"/>
  36. <meta name="color:desc text" conetent="#acbebb"/>
  37. <meta name="color:post italic" content="#84ada6"/>
  38. <meta name="color:Links" content="#a69396"/>
  39. <meta name="color:container" content="#f5f5f5"/>
  40. <meta name="color:Post Background" content="#e7e7e7"/>
  41. <meta name="color:Info Background" content="#758087"/>
  42.  
  43. <meta name="image:header" content=""/>
  44. <meta name="image:icon1" content=""/>
  45. <meta name="image:icon2" content=""/>
  46. <meta name="image:icon3" content=""/>
  47.  
  48. <meta name="text:link1" content="/"/>
  49. <meta name="text:link2" content="/"/>
  50. <meta name="text:subtitle" content="/"/>
  51. <meta name="text:admin1" content="/"/>
  52. <meta name="text:admin2" content="/"/>
  53. <meta name="text:admin3" content="/"/>
  54. <meta name="text:online now" content="/"/>
  55. <meta name="text:hit counter" content="/"/>
  56.  
  57.  
  58.  
  59.  
  60.  
  61.  
  62.  
  63. <style type="text/css">
  64.  
  65.  
  66.  
  67. /*STYLES*/
  68.  
  69. ::-webkit-scrollbar {
  70. display:none;
  71. }
  72.  
  73. ::selection {
  74. background:{color:background}; /* WebKit/Blink Browsers */
  75. }
  76.  
  77. ul, li
  78. {
  79. line-height:14.7px;
  80. }
  81.  
  82. b, strong {
  83. color: {color:Post Bold};
  84. font-family: arial;
  85. text-transform:uppercase;
  86. text-shadow:1px 1px 0px {color:shadow};
  87. letter-spacing:6px;
  88. }
  89.  
  90. i, em {
  91. color: {color:Post Italic};
  92. font-family:arial;
  93. text-shadow: 0px 1px 1px {color:shadow};
  94. letter-spacing:1px;
  95. }
  96.  
  97. pre {
  98. background:{color:border};
  99. color:{color:text};
  100. padding:5px;
  101. text-align:center;
  102. text-transform:uppercase;
  103. word-wrap: break-word;
  104. text-shadow: 1px 1px 0px {color:shadow};
  105.  
  106. }
  107.  
  108. body {
  109. background:{color:background};
  110. color:{color:text};
  111. font-family:arial;
  112. font-size:9px;
  113. line-height:17px;
  114. text-align:justify;
  115. overflow:hidden;
  116. }
  117.  
  118. a {
  119. text-decoration:none;
  120. font-style:none;
  121. outline:none;
  122. font-family: ARIAL;
  123. text-transform:uppercase;
  124. -moz-outline-style:none;
  125. color:{color:links};
  126. -webkit-transition: all 0.4s ease-in-out;
  127. -moz-transition: all 0.4s ease-in-out;
  128. -o-transition: all 0.4s ease-in-out;
  129. -ms-transition: all 0.4s ease-in-out;
  130. transition: all 0.4s ease-in-out;
  131. }
  132.  
  133. a:hover {
  134. font-family: ARIAl;
  135. text-transform:uppercase;
  136. -moz-outline-style:none;
  137. color:{color:links};
  138. -webkit-transition: all 0.4s ease-in-out;
  139. -moz-transition: all 0.4s ease-in-out;
  140. -o-transition: all 0.4s ease-in-out;
  141. -ms-transition: all 0.4s ease-in-out;
  142. transition: all 0.4s ease-in-out;
  143. }
  144.  
  145.  
  146.  
  147. img {
  148. border:none;
  149. max-width:100%;
  150. }
  151.  
  152. small {
  153. font-size:8px;
  154. text-shadow:0px 1px 0px {color:shadow};
  155. }
  156. sup {
  157. font-size:9px;
  158. letter-spacing:3px;
  159. }
  160. sub {
  161. font-size:9px;
  162. letter-spacing:3px;
  163. }
  164. big {
  165. font-size:13px;
  166. text-transform:uppercase;
  167. letter-spacing:1px;
  168. }
  169.  
  170. strike {
  171. text-shadow:0px 1px 0px {color:shadow};
  172. letter-spacing:7px;
  173. text-transform:uppercase;
  174. }
  175.  
  176. h1 {
  177. color:{color:desc text};
  178. padding:5px;
  179. line-height:100%;
  180. text-transform:uppercase;
  181. font-family:arial black;
  182. font-size:14px;
  183. background-color:{color:container};
  184. text-align:right;
  185. text-shadow:1px 1px 0px {color:shadow};
  186. border-radius:3px;
  187. -webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
  188. -moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
  189. box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.75);
  190. }
  191.  
  192. h2 {
  193. font-size:7px;
  194. color:{color:text};
  195. text-transform:uppercase;
  196. font-family: arial;
  197. padding:7px;
  198. font-style:;
  199. text-align:center;
  200. border-bottom:1px solid {color:border};
  201. border-radius:3px;
  202. }
  203.  
  204. blockquote {
  205. border-left:2px solid {color:accent1};
  206. padding:2px 7px;
  207. margin:3px 0 3px 8px;
  208. max-width:100%;
  209. text-align:justify;
  210. border-radius:3px;
  211. background:{color:container};
  212. }
  213.  
  214. blockquote small {
  215. text-shadow:none;
  216. color:{color:background};
  217. font-size:10px;
  218. }
  219.  
  220. blockquote img {
  221. max-width: 100%;
  222. }
  223.  
  224. /*IFRAME CONTROLS*/
  225.  
  226.  
  227. .tmblr-iframe.iframe-controls--desktop {
  228. top:0%!important;
  229. right:0%!important;
  230. position:fixed!important;
  231. z-index:999999999!important;
  232. }
  233.  
  234. .tmblr-iframe--desktop-logged-in-controls {
  235. -webkit-filter:invert(100%);
  236. -moz-filter:invert(100%);
  237. -o-filter:invert(100%);
  238. -ms-filter:invert(100%);
  239. filter:invert(100%);
  240. opacity:0.3;
  241. }
  242.  
  243. /*TOOLTIP*/
  244.  
  245. .tooltip{
  246. display: inline;
  247. position: relative;
  248. }
  249.  
  250. #s-m-t-tooltip {
  251. max-width:300px; /*how big the tooltip can be at most*/
  252. border-radius: 0px; /*change your border radius*/
  253. padding:3px 4px 5px 4px; /*padding inside tooltip*/
  254. margin:20px 7px -2px 20px; /*distance from word*/
  255. background-color:{color:background}; /*background color*/
  256. border:1px solid {color:border}; /*border info*/
  257. font-family:arial; /*tooltip font*/
  258. font-size:9px; /*tooltip font size*/
  259. letter-spacing:2px; /*tooltip letter spacing*/
  260. text-transform:uppercase; /*makes the tooltip title uppercase*/
  261. color:{color:container}; /*tooltip font color*/
  262. z-index:999999999999999999999999999999999999;
  263. }
  264.  
  265. /*MOVE EVERY DIV*/
  266.  
  267. #everything {
  268. position:fixed;
  269. margin-left:150px;
  270. margin-top:100px;
  271. }
  272.  
  273.  
  274.  
  275. /*IMAGES*/
  276.  
  277. #header {
  278. margin-top:-20px;
  279. margin-left:300px;
  280. position:fixed;
  281. }
  282.  
  283. #header img {
  284. border-top:20px solid {color:border};
  285. width:600px;
  286. height:100px;
  287. z-index:999999;
  288.  
  289. }
  290.  
  291. .icons {
  292. position:fixed;
  293. margin-top:400px;
  294. margin-left:435px;
  295. z-index:999999;
  296. }
  297.  
  298. .icons img {
  299. width:40px;
  300. height:40px;
  301. border:3px solid {color:background};
  302. }
  303.  
  304. /*PUSH MENU*/
  305.  
  306. .wrapper{
  307. overflow:hidden;
  308. }
  309.  
  310. nav{
  311. position:fixed;
  312. top:0;
  313. left:0;
  314. width:370px;
  315. height:100%;
  316. margin:0 0 0 -400px;
  317. -moz-transition:all 200ms ease-in;
  318. -webkit-transition:all 200ms ease-in;
  319. -o-transition:all 200ms ease-in;
  320. transition:all 200ms ease-in;
  321. }
  322.  
  323. nav ul{
  324. width:370px;
  325. height:100%;
  326. padding:0;
  327. margin:0;
  328. list-style:none;
  329. background:{color:container};
  330. overflow:hidden;
  331. }
  332.  
  333. nav li{
  334. margin:0;
  335. }
  336.  
  337. nav a{
  338. color:{color:info background};
  339. font-size:10px;
  340. font-family:arial black;
  341. text-decoration:none;
  342. display:block;
  343. padding:12px 15px;
  344. font-weight:300;
  345. letter-spacing:2px;
  346. border-bottom:1px solid {color:border};
  347. }
  348.  
  349. nav a:hover{
  350. background:{color:post background};
  351. color:{color:container};
  352. font-family:arial black;
  353. }
  354.  
  355. nav span {
  356. width:auto;
  357. font-size:10px;
  358. font-family:arial;
  359. text-transform:uppercase;
  360. overflow:none;
  361. text-align:center;
  362. line-height:140%;
  363. letter-spacing:2px;
  364. padding:5px;
  365. padding-bottom:10px;
  366. text-shadow: 1px 1px 1px {color:shadow};
  367. z-index:9999999999;
  368. color:{color:accent1};
  369. border-bottom:1px solid {color:border};
  370. }
  371.  
  372. nav p{
  373. font-family:arial;
  374. font-size:9px;
  375. line-height:17px;
  376. text-align:justify;
  377. overflow:hidden;
  378. text-transform:uppercase;
  379. }
  380.  
  381. label{
  382. color:{color:links};
  383. text-align:center;
  384. font-size:10px;
  385. position:fixed;
  386. top:230px;
  387. left:1018px;
  388. width:11px;
  389. height:11px;
  390. padding:6px;
  391. border:2px solid {color:border};
  392. border-radius:50px;
  393. background:{color:background};
  394. -webkit-transition: all 0.2s ease-in-out;
  395. -moz-transition: all 0.2s ease-in-out;
  396. -o-transition: all 0.2s ease-in-out;
  397. -ms-transition: all 0.2s ease-in-out;
  398. transition: all 0.2s ease-in-out;
  399. z-index:500;
  400. }
  401.  
  402. label:hover {
  403. cursor:pointer;
  404. border:2px solid {color:background};
  405. background:{color:accent2};
  406. color:{color:accent1};
  407. -webkit-transition: all 0.2s ease-in-out;
  408. -moz-transition: all 0.2s ease-in-out;
  409. -o-transition: all 0.2s ease-in-out;
  410. -ms-transition: all 0.2s ease-in-out;
  411. transition: all 0.2s ease-in-out;
  412. }
  413.  
  414. input[type="checkbox"]{
  415. display:none;
  416. }
  417.  
  418. input[type="checkbox"]:checked ~ nav{
  419. margin:0;
  420. }
  421.  
  422. input[type="checkbox"]:checked ~ label{
  423.  
  424. }
  425.  
  426. input[type="checkbox"]:checked ~ section{
  427. -webkit-transform:translate3d(260px, 0, 0);
  428. -moz-transform:translate3d(260px, 0, 0);
  429. -o-transform:translate3d(260px, 0, 0);
  430. transform:translate3d(260px, 0, 0);
  431. }
  432.  
  433.  
  434. /*ENTRIES*/
  435.  
  436. #box{
  437. margin-top:100px;
  438. margin-left:300px;
  439. width:600px;
  440. height:401px;
  441. background-color:{color:container};
  442. border-top:5px solid {color:accent2};
  443. }
  444.  
  445. #entries {
  446. position:fixed;
  447. padding:10px;
  448. padding-top:0px;
  449. z-index:9999;
  450. margin-left:5px;
  451. margin-top:10px;
  452. height:371px;
  453. width:420px;
  454. overflow:auto;
  455. text-align:justify;
  456. }
  457.  
  458. #post {
  459. width:400px;
  460. text-align: justify;
  461. padding: 10px;
  462. background-color:{color:post background};
  463. margin-top:5px;
  464. margin-bottom:15px;
  465. -webkit-transition: all 0.4s ease-in-out;
  466. -moz-transition: all 0.4s ease-in-out;
  467. -o-transition: all 0.4s ease-in-out;
  468. -ms-transition: all 0.4s ease-in-out;
  469. transition: all 0.4s ease-in-out;
  470. }
  471.  
  472. #post b, strong {
  473. color: {color:Post Bold};
  474. font-family: arial;
  475. text-transform:uppercase;
  476. text-shadow:1px 1px 0px {color:shadow};
  477. letter-spacing:6px;
  478. }
  479.  
  480. #post i, em {
  481. color: {color:Post Italic};
  482. font-family:arial;
  483. text-shadow: 0px 1px 1px {color:shadow};
  484. letter-spacing:1px;
  485.  
  486. }
  487.  
  488.  
  489.  
  490. /*SIDEBAR*/
  491.  
  492.  
  493. #description {
  494. padding:10px;
  495. overflow:auto;
  496. text-align:justify;
  497. font-size:9px;
  498. height:220px;
  499. text-transform:uppercase;
  500. position:fixed;
  501. width:125px;
  502. color:{color:desc text};
  503. margin-left:435px;
  504. margin-top:155px;
  505. }
  506.  
  507. #description b, strong {
  508. text-transform:uppercase;
  509. color: {color:Post Bold};
  510. font-family: arial black;
  511. letter-spacing:5px;
  512. text-shadow:1px 1px 0px {color:shadow};
  513. }
  514.  
  515. #description i, em {
  516. color: {color:Post Italic};
  517. font-family: arial;
  518. text-shadow: 0px 0px 1px {color:shadow};
  519. letter-spacing:1px;
  520. text-transform:none;
  521. }
  522.  
  523. #description a {
  524. color:{color:post background};
  525. text-shadow:1px 1px 0px {color:info background};
  526. }
  527.  
  528.  
  529.  
  530. #sidebar{
  531. padding:10px;
  532. z-index:9999;
  533. text-align:center;
  534. position:fixed;
  535. margin-top:40px;
  536. font-size:10px;
  537. margin-left:300px;
  538. width:443px;
  539. height:150px;
  540. color:black;
  541. font-family:arial;
  542. color:{color:background};
  543. }
  544.  
  545. #title {
  546. width:130px;
  547. font-size:10px;
  548. font-family:arial;
  549. text-transform:uppercase;
  550. overflow:none;
  551. position:fixed;
  552. text-align:center;
  553. line-height:140%;
  554. letter-spacing:2px;
  555. padding:5px;
  556. padding-bottom:10px;
  557. text-shadow: 1px 1px 1px {color:shadow};
  558. margin-top:110px;
  559. margin-left:437px;
  560. z-index:9999999999;
  561. color:{color:accent1};
  562. border-bottom:1px solid {color:border};
  563. }
  564.  
  565. #subtitle {
  566. width:400px;
  567. font-size:8px;
  568. font-family:arial;
  569. text-transform:uppercase;
  570. overflow:none;
  571. position:fixed;
  572. text-align:left;
  573. letter-spacing:2px;
  574. padding:5px;
  575. margin-top:-73px;
  576. margin-left:0px;
  577. z-index:9999999999;
  578. color:{color:links};
  579. }
  580.  
  581. #stats {
  582. width:400px;
  583. font-size:8px;
  584. font-family:arial;
  585. text-transform:uppercase;
  586. overflow:none;
  587. position:fixed;
  588. text-align:right;
  589. letter-spacing:2px;
  590. padding:5px;
  591. margin-top:-23px;
  592. margin-left:490px;
  593. z-index:9999999999;
  594. color:{color:container};
  595. }
  596.  
  597. #stats a{
  598. z-index:999999999999999999;
  599. }
  600.  
  601. /*SIDELINKS*/
  602.  
  603.  
  604. #links{
  605. z-index:9999999;
  606. margin-top:77px;
  607. font-family:arial;
  608. position:fixed;
  609. letter-spacing:10px;
  610. margin-left:190px;
  611. width:150px;
  612. height:150px;
  613. display:inline-block;
  614. padding-bottom:10px;
  615.  
  616. }
  617.  
  618. #links a{
  619. text-align:center;
  620. margin-top:4px;
  621. font-size:10px;
  622. text-align:left;
  623. letter-spacing:0px;
  624. text-transform:lowercase;
  625. font-family: arial;
  626. color:{color:links};
  627. width:50px;
  628. height:50px;
  629. padding:6px;
  630. border:2px solid {color:border};
  631. border-radius:100px;
  632. background:{color:background};
  633. -webkit-transition: all 0.2s ease-in-out;
  634. -moz-transition: all 0.2s ease-in-out;
  635. -o-transition: all 0.2s ease-in-out;
  636. -ms-transition: all 0.2s ease-in-out;
  637. transition: all 0.2s ease-in-out;
  638.  
  639. }
  640.  
  641. #links a:hover {
  642. border:2px solid {color:background};
  643. background:{color:accent2};
  644. color:{color:accent1};
  645. -webkit-transition: all 0.2s ease-in-out;
  646. -moz-transition: all 0.2s ease-in-out;
  647. -o-transition: all 0.2s ease-in-out;
  648. -ms-transition: all 0.2s ease-in-out;
  649. transition: all 0.2s ease-in-out;
  650. }
  651.  
  652.  
  653.  
  654. /*POST INFO*/
  655.  
  656.  
  657. #info {
  658. width:400px;
  659. text-align:right;
  660. font-family:arial black;
  661. margin-top:-7px;
  662. margin-left:-2px;
  663. letter-spacing:1px;
  664. color:{color:text};
  665. font-size:7px;
  666. font-style:none;
  667. padding:1px;
  668. line-height:10px;
  669. text-transform:uppercase;
  670. z-index:99999;
  671. }
  672.  
  673. #info a {
  674. font-style:none;
  675. background:{color:background};
  676. text-align:center;
  677. color:{color:Links};
  678. padding-right:5px;
  679. }
  680.  
  681. #info a:hover {
  682. -moz-transition-duration:0.3s;
  683. -webkit-transition-duration:0.3s;
  684. -o-transition-duration:0.3s;
  685. color:{color:accent1}
  686. }
  687.  
  688.  
  689.  
  690. #tags {
  691. float:left;
  692. width:30px;
  693. margin-top:6px;
  694. margin-left:0px;
  695. text-align:right;
  696. font-family:arial;
  697. font-size:8px;
  698. padding:5px;
  699. padding-bottom:10px;
  700. padding-left:30px;
  701. font-size:8px;
  702. opacity:1;
  703. transition-duration: 0.5s;
  704. -moz-transition-duration: 0.5s;
  705. -webkit-transition-duration: 0.5s;
  706. -o-transition-duration: 0.5s
  707. color:{color:Links};
  708. }
  709.  
  710. #tags a {
  711. letter-spacing:0px;
  712. font-size:8px;
  713. display:inline-block;
  714. text-align:right;
  715. font-family:arial black;
  716. text-decoration:none;
  717. color:{color:Links};
  718. }
  719.  
  720. #tags a:hover {
  721. -moz-transition-duration:0.3s;
  722. -webkit-transition-duration:0.3s;
  723. -o-transition-duration:0.3s;
  724. color:{color:accent1};
  725. }
  726.  
  727.  
  728. ol.notes {
  729. display:block;
  730. text-align:left;
  731. list-style-type:none;
  732. margin-left:15px;
  733. border-radius:3px;
  734. background-color:{color:Info Background};
  735. }
  736.  
  737. ol.notes li.note{
  738. margin-left:15px;
  739. margin-bottom:5px;
  740. background-color:{color:Info Background};
  741. }
  742.  
  743. .pagenotes {
  744. text-align:left;
  745. margin-top:15px;
  746. background:none;
  747. margin-left:15px;
  748. background-color:{color:Info Background};
  749. }
  750.  
  751. .pagenotes img{
  752. padding-right:5px;
  753. padding-top:5px;
  754. margin-bottom:-5px;
  755. }
  756.  
  757.  
  758.  
  759. /*CHAT*/
  760.  
  761. #chat {
  762. padding:1px;
  763. background-color:{color:accent1};
  764. margin-left:10px;
  765. padding-left:10px;
  766. border-radius:3px;
  767. border-top:solid 1px {color:border};
  768. margin-bottom:5px;
  769. }
  770.  
  771. #chat b{
  772. text-shadow:0px;
  773. }
  774.  
  775.  
  776. /*QUOTES*/
  777.  
  778. .quote{
  779. font-size:30px;
  780. font-family:arial black;
  781. text-align:left;
  782. line-height:100%;
  783. background:transparent;
  784. }
  785.  
  786. .qsource{
  787. text-align:right;
  788. margin-bottom:10px;
  789. color:{color:links};
  790. font-size:9px;
  791. font-family:arial;
  792. text-decoration:lowercase;
  793. padding:7px;
  794. background:{color:background};
  795. opacity:0.5;
  796. }
  797.  
  798. /*AUDIO*/
  799.  
  800. .playerbuttonbg {
  801. position: absolute;
  802. left: 20px;
  803. top: 20px;
  804. width: 19px;
  805. height: 19px;
  806. background-color:{color:background};
  807. padding: 10px;
  808. -webkit-border-radius: 40px;
  809. -moz-border-radius: 40px;
  810. border-radius: 40px;
  811. opacity: .4;
  812. filter: alpha(opacity=40);
  813. -moz-opacity: 0.4;
  814. -khtml-opacity: 0.4;
  815. transition: opacity .7s ease-in-out;
  816. -moz-transition: opacity .7s ease-in-out;
  817. -webkit-transition: opacity .7s ease-in-out;
  818. }
  819.  
  820. .playerbuttonbg:hover {
  821. opacity: .8;
  822. filter: alpha(opacity=100);
  823. -moz-opacity: 1;
  824. -khtml-opacity: 1;
  825. }
  826.  
  827. .newplayerbutton {
  828. position: relative;
  829. width: 19px;
  830. height: 19px;
  831. overflow: hidden;
  832. }
  833.  
  834. .playerbuttonhug {
  835. position: absolute;
  836. top: -18px;
  837. left: -7px;
  838. }
  839.  
  840. .tumblr_audio_player {
  841. height: 90px;
  842. width: 270px;
  843. -moz-transform: scale(0.60, 0.60);
  844. -webkit-transform: scale(0.60, 0.60);
  845. -o-transform: scale(0.60, 0.60);
  846. -ms-transform: scale(0.60, 0.60);
  847. transform: scale(0.60, 0.60);
  848. -moz-transform-origin: top left;
  849. -webkit-transform-origin: top left;
  850. -o-transform-origin: top left;
  851. -ms-transform-origin: top left;
  852. transform-origin: top left;
  853. }
  854.  
  855. .audioimgwrapper {
  856. position: absolute;
  857. left: 0px;
  858. top: 0px;
  859. -webkit-border-radius: 40px;
  860. -moz-border-radius: 40px;
  861. border-radius: 40px;
  862. overflow: hidden;
  863. width: 79px;
  864. height: 79px;
  865. }
  866.  
  867. .audioimgwrapper img {
  868. width: 100%;
  869. height: auto;
  870. -webkit-border-radius: 40px;
  871. -moz-border-radius: 40px;
  872. border-radius: 40px;
  873. }
  874.  
  875. .trackdetails {
  876. line-height:150%;
  877. background:{color:accent1};
  878. border: 1px solid {color:border};
  879. display:inline-block;
  880. width:287px;
  881. overflow:auto;
  882. padding:10px;
  883. font-family:arial;
  884. color:{color:text};
  885. margin-left: 90px;
  886. min-height: 60px;
  887. }
  888.  
  889. .trackdetails b {
  890. color:{color:post bold};
  891. }
  892.  
  893. .audiowrapper {
  894. position: relative;
  895. display:inline-block;
  896. }
  897.  
  898.  
  899. /*QUESTION*/
  900.  
  901. .asker{
  902. overflow:hidden;
  903. color:{color:accent1};
  904. padding:3px;
  905. text-transform:uppercase;
  906. font-family:arial black;
  907. font-size:10px;
  908. letter-spacing:0px;
  909. margin-left:-3px;
  910. margin-top:-6px;
  911. text-align:right;
  912. background:{color:accent2};
  913. }
  914.  
  915. .question {
  916. color:{color:desc text};
  917. }
  918.  
  919. .asker a {
  920. color:{color:accent1};
  921. }
  922.  
  923. .asker a:hover {
  924. font-style:none;
  925. font-family:arial black;
  926. color:{color:container};
  927. text-shadow:1px 1px 1px {color:shadow};
  928. -webkit-transition: all 0.4s ease-in-out;
  929. -moz-transition: all 0.4s ease-in-out;
  930. -o-transition: all 0.4s ease-in-out;
  931. -ms-transition: all 0.4s ease-in-out;
  932. transition: all 0.4s ease-in-out;
  933. }
  934.  
  935. .bubble {
  936. align:right;
  937. background: {color:container};
  938. margin:0px 0px 0px 65px;
  939. padding:10px;
  940. position: relative;
  941. overflow:auto;
  942. height:48px;
  943.  
  944. }
  945.  
  946. .bubble p {
  947. margin:1px 0px;
  948.  
  949. }
  950.  
  951. .askborder {
  952. float: left;
  953. margin: 0px 0px 0 0;
  954. padding: 2px;
  955. background:{color:border};
  956. border-radius:0px;
  957. }
  958.  
  959.  
  960.  
  961. /*PAGINATION*/
  962.  
  963. #pagination{
  964. width:600px;
  965. font-size:8px;
  966. z-index:999;
  967. text-align:center;
  968. color:{color:text};
  969. position:fixed;
  970. margin-left:-10px;
  971. background:transparent;
  972. height:15px;
  973. margin-top:456px;
  974. background:{color:accent2};
  975. }
  976.  
  977. #pagination a{
  978. color:{color:links};
  979. font-size:8px;
  980. font-family:arial;
  981. background-color:transparent;
  982. }
  983.  
  984.  
  985.  
  986. /*CREDIT*/
  987.  
  988. #cred {
  989. position:fixed;
  990. font-family:arial;
  991. text-transform:uppercase;
  992. font-size:12px;
  993. text-decoration:none;
  994. font-style:none;
  995. padding:4px;
  996. letter-spacing:1px;
  997. border-radius:3px;
  998. -webkit-transition: all 0.4s ease-in-out;
  999. -moz-transition: all 0.4s ease-in-out;
  1000. -o-transition: all 0.4s ease-in-out;
  1001. -ms-transition: all 0.4s ease-in-out;
  1002. transition: all 0.4s ease-in-out;
  1003. }
  1004.  
  1005.  
  1006. #cred a {
  1007. left:9px;
  1008. width:17px;
  1009. height:12px;
  1010. bottom:9px;
  1011. position:fixed;
  1012. text-decoration:none;
  1013. font-style:none;
  1014. font-family:arial;
  1015. text-transform:uppercase;
  1016. font-size:10px;
  1017. left:9px;
  1018. bottom:9px;
  1019. padding:4px;
  1020. letter-spacing:1px;
  1021. -webkit-transition: all 0.4s ease-in-out;
  1022. -moz-transition: all 0.4s ease-in-out;
  1023. -o-transition: all 0.4s ease-in-out;
  1024. -ms-transition: all 0.4s ease-in-out;
  1025. transition: all 0.4s ease-in-out;
  1026. }
  1027.  
  1028. #cred a:hover {
  1029. font-size:10px;
  1030. -webkit-transition: all 0.4s ease-in-out;
  1031. -moz-transition: all 0.4s ease-in-out;
  1032. -o-transition: all 0.4s ease-in-out;
  1033. -ms-transition: all 0.4s ease-in-out;
  1034. transition: all 0.4s ease-in-out;
  1035. }
  1036.  
  1037. .credit {
  1038. position:fixed;
  1039. font-family:arial;
  1040. text-transform:uppercase;
  1041. font-size:8px;
  1042. padding-bottom:5px;
  1043. left:-90px;
  1044. width:100px;
  1045. height:12px;
  1046. bottom:9px;
  1047. text-decoration:none;
  1048. font-style:none;
  1049. letter-spacing:1px;
  1050. opacity:0;
  1051. z-index:-99999;
  1052. -webkit-transition: all 0.4s ease-in-out;
  1053. -moz-transition: all 0.4s ease-in-out;
  1054. -o-transition: all 0.4s ease-in-out;
  1055. -ms-transition: all 0.4s ease-in-out;
  1056. transition: all 0.4s ease-in-out;
  1057. }
  1058.  
  1059. #cred:hover .credit {
  1060. opacity:1;
  1061. font-size:10px;
  1062. margin-left:120px;
  1063. -webkit-transition: all 0.4s ease-in-out;
  1064. -moz-transition: all 0.4s ease-in-out;
  1065. -o-transition: all 0.4s ease-in-out;
  1066. -ms-transition: all 0.4s ease-in-out;
  1067. transition: all 0.4s ease-in-out;
  1068. }
  1069.  
  1070. {CustomCSS}</style></head><body>
  1071.  
  1072.  
  1073.  
  1074. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1075. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  1076. <script>
  1077.  
  1078. (function($){
  1079.  
  1080. $(document).ready(function(){
  1081.  
  1082. $("a[title]").style_my_tooltips({
  1083.  
  1084. tip_follows_cursor:true,
  1085.  
  1086. tip_delay_time:50,
  1087.  
  1088. tip_fade_speed:600,
  1089.  
  1090. attribute:"title"
  1091.  
  1092. });
  1093.  
  1094. });
  1095.  
  1096. })(jQuery);
  1097.  
  1098. </script>
  1099.  
  1100.  
  1101.  
  1102.  
  1103. <div id="everything">
  1104.  
  1105. <div id="stats">{text:online now} ◆ {text:hit counter}</div>
  1106.  
  1107. <div id="header"><img src="{image:header}"></div>
  1108.  
  1109. <div id="sidebar">
  1110.  
  1111. <div id="title">{title}</div>
  1112.  
  1113. <div id="description">{description}
  1114. </div>
  1115.  
  1116. <div class="icons">
  1117. <img src="{image:icon1}" title="{text:admin1}">
  1118. <img src="{image:icon2}" title="{text:admin2}">
  1119. <img src="{image:icon3}" title="{text:admin3}">
  1120. </div>
  1121.  
  1122.  
  1123. <div id="pagination">{block:Pagination} {block:PreviousPage}
  1124. <a href="{PreviousPage}"><span class="lnr lnr-chevron-left"></span> back </a>
  1125. {/block:PreviousPage}
  1126. &nbsp; <span class="lnr lnr-cross"></span> &nbsp;
  1127. {block:NextPage}
  1128. <a href="{NextPage}">next <span class="lnr lnr-chevron-right"></span></a>
  1129. {/block:NextPage}
  1130. {/block:Pagination}</div>
  1131.  
  1132.  
  1133.  
  1134. <div id="links" >
  1135. <a href="/"><span class="lnr lnr-pointer-up"></span></a>
  1136. <a href="{text:link1}"><span class="lnr lnr-inbox"></span></a>
  1137. <a href="{text:link2}"><span class="lnr lnr-cog"></span></span></a>
  1138.  
  1139. </div>
  1140.  
  1141. <div id="subtitle">{text:subtitle}</div>
  1142.  
  1143.  
  1144.  
  1145. </div>
  1146.  
  1147.  
  1148.  
  1149.  
  1150.  
  1151.  
  1152. <div id="box">
  1153. <div id="entries">
  1154.  
  1155.  
  1156.  
  1157. {block:Posts}
  1158.  
  1159.  
  1160. <div id="post">
  1161.  
  1162. <div id="info" style="background:{color:info background};margin-left:-10px;margin-top:-10px;width:400px;padding:10px;">
  1163. <h9 style="background:{color:info background};padding:1px;color:{color:accent2}">
  1164. <span class="lnr lnr-history"></span> <a href="{Permalink}" style="background:{color:info background};">{TimeAgo}</a> <span class="lnr lnr-menu-circle"></span> <a href="{Permalink}" style="background:{color:info background};">{NoteCount}</a> <span class="lnr lnr-sync"></span> <a href=“{ReblogURL}” style="background:{color:info background};"><span>Reblog</span></a> <span class="lnr lnr-user"></span> {block:ContentSource}<a href="{SourceURL}" style="background:{color:info background};"> source</a>{/block:ContentSource}<br></h9>
  1165.  
  1166. </div>
  1167.  
  1168.  
  1169. {block:Text}
  1170. <br>
  1171. {block:Title}<h1>{Title}</h1>{/block:Title}
  1172. {Body}{/block:Text}
  1173.  
  1174. {block:Photo}<br>{LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}
  1175. {block:Caption}{Caption}{/block:Caption}{/block:Photo}
  1176.  
  1177. {block:Photoset}<br>{Photoset-400}{block:Caption}{Caption}
  1178. {/block:Caption}{/block:Photoset}
  1179.  
  1180. {block:Quote}<br><div class"quote" style="font-size:17px;font-family:arial;font-style:italic;text-transform:uppercase;text-align:justify;color:{color:desc text};line-height:100%;background:transparent;padding:15px;">❝ {Quote} ❞</div>
  1181. {block:Source}<div class="qsource"> — {Source}</div>
  1182. {/block:Source}{/block:Quote}
  1183.  
  1184. {block:Link}<br><h1><a href="{URL}" {Target}>——<b>{Name}</b></a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  1185.  
  1186. {block:Chat}<br>{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}<div id="chat">{block:Label}<b>{Label}</b>{/block:Label} {Line}<br></div>{/block:Lines}{/block:Chat}
  1187.  
  1188.  
  1189. {block:audio}<br>{block:AudioPlayer}<div class="audiowrapper">{block:AlbumArt}<div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}<div class="playerbuttonbg"><div class="newplayerbutton"><div class="playerbuttonhug">{AudioPlayerWhite}</div></div></div><div class="trackdetails" style="opacity:.7;">{block:TrackName}<b style="font-size:10px;">{TrackName}</b></b>{/block:TrackName}<br/>{block:Artist}<i>Artist:</i> {Artist}{/block:Artist}<br/>{block:Album}<i>Album:</i> {Album}{/block:Album}<br/><i style="font-size:9px;"> {PlayCountWithLabel}</i></div></div>{/block:AudioPlayer}{block:Caption}{Caption}{/block:Caption}{/block:audio}
  1190.  
  1191.  
  1192. {block:Video}<br>{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  1193.  
  1194. {block:Answer}<br><div class="asker">{asker}</div><img src="{AskerPortraitURL-64}" align="left" class="askborder" style="margin-left:-3px;"> <div class="bubble"> <div class="question">{Question}</div></div><br>{Answer}{/block:Answer}
  1195. <br>
  1196. <div style="text-shadow:0px;text-align:left;"><hr>
  1197. {block:HasTags}{block:Tags} <a href="{TagURL}" ><span class="lnr lnr-tag"></span> {Tag}</a> <i class="fa fa-circle" aria-hidden="true"></i> {/block:Tags}{/block:HasTags}</div>
  1198.  
  1199.  
  1200.  
  1201. </div>
  1202.  
  1203. {/block:Posts}
  1204. <br><br>{block:PostNotes}<div id="notes"><left>{PostNotes}</div>{/block:PostNotes}
  1205. {/block:Posts}</div></div>
  1206.  
  1207. <input type="checkbox" id="navigation" />
  1208. <label for="navigation">
  1209. <div style="margin-top:-2px;"><span class="lnr lnr-location"></span></div>
  1210. </label>
  1211.  
  1212. <nav>
  1213. <ul style="padding:15px;">
  1214.  
  1215. <!--- TOP IMAGE --->
  1216.  
  1217. <img src="https://66.media.tumblr.com/76e21f744b921cfe234d1f81b8fd5133/tumblr_inline_obry7aAHx21so943f_540.jpg"><br><br>
  1218.  
  1219. <!--- FIRST TITLE & BOX --->
  1220.  
  1221. <span> drunk off your kiss ;;</span><br><br>
  1222. <p style="width:350px;height:190px;padding:7px;overflow:auto;">
  1223.  
  1224. I found out the hard way that fairy tales and true love don't exist. It started with the death of my best friend in the whole world.
  1225. <br><br>
  1226. The truth that surfaces from the departion of one soul from another is enough to rock your world so hard you'll never want to leave your bed. I mean, it's bad enough that I thought the feel-good movies were faking how much heartache could hurt. You don't experience loss or pain until you actually cannot phsyically see someone anymore. <br><br>
  1227.  
  1228. He was twenty years old when he died. He was the boy with the brilliant smile, the enchanting brown eyes and the beautiful, dark skin. The boy who always said hi to people, even if he didn't know who they were. So you can say his passing was sudden and unexpected. It shook the town, turning it upside town and knocking us all on our asses. Everyone mourned the loss of Beck King.
  1229.  
  1230. <br><br>
  1231.  
  1232. A flyer appeared within the week for Beck's close friends and family: The Lonely Hearts Club. It gave most of us a chuckle, considering it was Beck's favourite book. No one denied that this is what he'd always wanted to do after breaking up with his boyfriend in January, so we went with it. That Saturday was the first meeting of The Lonely Heart's Club, and if I'm being honest it brought us together. No one knows who started the group, who originally posted the flyer or who even thought of the idea, but we're entirely grateful.
  1233.  
  1234. <br><br>
  1235.  
  1236. Six months has passed and we still think of Beck. Moving on is hard, but together we endure. Welcome to The Lonely Hearts Club, exclusively our own.
  1237. </P>
  1238.  
  1239. <br>
  1240.  
  1241. <!--- LINK TITLE & BOX --->
  1242.  
  1243. <span style="text-align:right;">life turned sideways ;; </span><Br> <br>
  1244.  
  1245. <a href="/">some</a>
  1246. <a href="/">links</a>
  1247. <a href="/">here</a>
  1248. <a href="/">just</a>
  1249. <a href="/">for u</a>
  1250. <a href="/">edit these in the html</a>
  1251. </div>
  1252.  
  1253. </ul>
  1254. </nav>
  1255.  
  1256. </div>
  1257. </div>
  1258.  
  1259. </div>
  1260.  
  1261.  
  1262. </div>
  1263.  
  1264.  
  1265.  
  1266.  
  1267. <div id="cred" style="font-style:none;">
  1268. <a href="http://www.musecentral.tumblr.com/"><span class="lnr lnr-code"></span></a> <div class="credit" style="color:{color:shadow};">musecentral</div>
  1269. </div>
  1270.  
  1271.  
  1272.  
  1273.  
  1274.  
  1275. </body>
  1276.  
  1277.  
  1278.  
  1279.  
  1280. </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!