Advertisement
cocoofrps

THEME 22 'STRANDED'

Jun 25th, 2014
1,033
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.18 KB | None | 0 0
  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. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  4. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  5. <script>
  6. (function($){
  7. $(document).ready(function(){
  8. $("[title]").style_my_tooltips({
  9. tip_follows_cursor:true,
  10. tip_delay_time:200,
  11. tip_fade_speed:300
  12. }
  13. );
  14. });
  15. })(jQuery);
  16. </script>
  17.  
  18. <head><title>{Title}</title>
  19.  
  20.  
  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. <!--- THEME BY @cocoofrps --->
  26.  
  27. <meta name="color:Background" content="#9994aa"/>
  28. <meta name="color:Text" content="#b1b7c1"/>
  29. <meta name="color:PostBG" content="#58474a"/>
  30. <meta name="color:SidebarBorder" content="#867c90" />
  31. <meta name="color:Border" content="#928aa1"/>
  32. <meta name="color:Hover" content="#786b7b"/>
  33. <meta name="color:Scrollbar" content="#786b7b"/>
  34. <meta name="color:ScrollbarBg" content="#b0b5c0"/>
  35. <meta name="color:Post Links" content="#b0b5c0"/>
  36. <meta name="color:DescriptionText" content="#b0b5c0"/>
  37. <meta name="color:Sidebar" content="#bfcdcc"/>
  38.  
  39. <meta name="image:Background" content=""/>
  40. <meta name="image:AskBG" content=""/>
  41. <meta name="image:Header" content=""/>
  42. <meta name="image:Sidebar" content=""/>
  43. <meta name="image:SidebarBG" content=""/>
  44. <meta name="image:HomeLink" content=""/>
  45. <meta name="image:AskLink" content=""/>
  46. <meta name="image:NavLink" content=""/>
  47.  
  48. <meta name="text:Quote" content="Put your quote in here and voila!"/>
  49.  
  50. <meta name="text:MusicPlayer" content=""/>
  51. <meta name="text:Counter" content="">
  52. <meta name="text:AskLink" content=""/>
  53. <meta name="text:NavLink" content=""/>
  54.  
  55. <meta name="if:CoverBackgroundImage" content="0"/>
  56.  
  57. <style type="text/css">
  58.  
  59. @font-face {
  60. font-family: "Dixel";
  61. src: url('http://static.tumblr.com/jdjsstr/8ovm78cbb/pf_arma_five_1_.ttf');
  62. }
  63.  
  64. ::-webkit-scrollbar-thumb {
  65. height:auto;
  66. border:{color:ScrollbarBg};
  67. border:1px solid {color:Scrollbar};
  68. background-color:{color:Scrollbar};
  69. }
  70.  
  71. ::-webkit-scrollbar {
  72. height:9px;
  73. width:4px;
  74. border:1px solid {color:Scrollbar};
  75. background-color:{color:ScrollbarBg};
  76. }
  77.  
  78.  
  79. ::selection {
  80. background: {color:Background};
  81. color: {color:PostBG};
  82. }
  83.  
  84. ::-moz-selection {
  85. background: {color:Background};
  86. color: {color:PostBG};
  87. }
  88.  
  89. ::-webkit-selection {
  90. background: {color:Background};
  91. color: {color:PostBG};
  92. }
  93.  
  94. body {
  95. background:{color:Background};
  96. margin:0px;
  97. color:{color:Text};
  98. font-family:'arial';
  99. font-size:11px;
  100. line-height:110%;
  101. letter-spacing:1px;
  102. text-align:justify;
  103. {block:ifNotCoverBackgroundImage}
  104. background-image:url('{image:Background}');
  105. background-attachment:fixed;
  106. {block:ifNotCoverBackgroundImage}
  107. {block:IfCoverBackgroundImage}
  108. background: url('{image:Background}') no-repeat center center fixed;
  109. -webkit-background-size: cover;
  110. -moz-background-size: cover;
  111. -o-background-size: cover;
  112. background-size: cover;
  113. {block:IfCoverBackgroundImage}
  114. }
  115.  
  116. small,big,code {
  117. font-size:11px;
  118. font-family:'Courier New';
  119. }
  120.  
  121. pre {
  122. font-family:'Courier New';
  123. font-size:8px;
  124. width:auto;
  125. padding:5px 8px;
  126. background-color:{color:SidebarBorder};
  127. color:{color:Background};
  128. }
  129.  
  130. a {
  131. text-decoration:none;
  132. outline:none;
  133. -moz-outline-style:none;
  134. -webkit-transition: all 0.4s ease-in-out;
  135. -moz-transition: all 0.4s ease-in-out;
  136. -o-transition: all 0.4s ease-in-out;
  137. -ms-transition: all 0.4s ease-in-out;
  138. transition: all 0.4s ease-in-out;
  139. color:{color:Post Links};
  140. }
  141.  
  142. b {
  143. color:{color:Hover};
  144. font-weight:100;
  145. }
  146.  
  147. a:hover {
  148. color:{color:Hover};
  149. -webkit-transition: all 0.4s ease-in-out;
  150. -moz-transition: all 0.4s ease-in-out;
  151. -o-transition: all 0.4s ease-in-out;
  152. -ms-transition: all 0.4s ease-in-out;
  153. transition: all 0.4s ease-in-out;
  154. }
  155.  
  156. img {
  157. border:none;
  158. width:auto;
  159. }
  160.  
  161. blockquote {
  162. margin-left:5px;
  163. width:auto;
  164. padding-left:5px;
  165. border-left:5px solid {color:Border};
  166. }
  167.  
  168. blockquote blockquote {
  169. padding-left:5px;
  170. border-left:5px solid {color:Border};
  171. }
  172.  
  173. h1 {
  174. font-size:11px;
  175. letter-spacing:2px;
  176. text-transform:uppercase;
  177. font-style:none;
  178. line-height:10px;
  179. text-align:center;
  180. padding:0px;
  181. }
  182.  
  183. /*ENTRIES*/
  184.  
  185. .quote {
  186. background-color:{color:Border};
  187. width:500px;
  188. padding:20px;
  189. font-size:12px;
  190. text-transform:uppercase;
  191. border:4px solid {color:Border};
  192. font-family:'courier new';
  193. margin-bottom:20px;
  194. }
  195.  
  196. #entries {
  197. position:absolute;
  198. margin-left:100px;
  199. margin-top:50px;
  200. letter-spacing:1px;
  201. padding-bottom:0px;
  202. overflow-y:auto;
  203. padding-right:20px;
  204. font-weight:100;
  205. font-size:11px;
  206. }
  207.  
  208. #post {
  209. background-color:{color:PostBG};
  210. width:500px;
  211. padding:20px;
  212. border:4px solid {color:Border};
  213. margin-bottom:20px;
  214. }
  215.  
  216. /*SIDEBAR*/
  217.  
  218. #side {
  219. width:100%;
  220. border-left:4px solid {color:SidebarBorder};
  221. height:100%;
  222. background-color:{color:Sidebar};
  223. position:fixed;
  224. margin-left:760px;
  225. -webkit-transition: all 0.4s ease-in-out;
  226. -moz-transition: all 0.4s ease-in-out;
  227. -o-transition: all 0.4s ease-in-out;
  228. -ms-transition: all 0.4s ease-in-out;
  229. transition: all 0.4s ease-in-out;
  230. }
  231.  
  232. .links {
  233. position:absolute;
  234. margin-top:65px;
  235. margin-left:50px;
  236. z-index:9999999;
  237. }
  238.  
  239. .links img {
  240. display:inline-block;
  241. margin-right:5px;
  242. background-color:{color:Background};
  243. }
  244.  
  245. .image {
  246. width:400px;
  247. position:absolute;
  248. height:300px;
  249. border:2px solid {color:SidebarBorder};
  250. margin-left:50px;
  251. margin-top:140px;
  252. }
  253.  
  254. .bottom {
  255. bottom:-2px;
  256. position:absolute;
  257. }
  258.  
  259. .desc {
  260. position:absolute;
  261. margin-top:460px;
  262. border:2px solid {color:Border};
  263. background-color:{color:Border};
  264. font-family:'courier new';
  265. text-transform:uppercase;
  266. width:175px;
  267. height:53px;
  268. overflow-y:auto;
  269. font-size:10px;
  270. padding:5px;
  271. margin-left:50px;
  272. }
  273.  
  274. #box {
  275. margin-left:255px;
  276. position:absolute;
  277. margin-top:460px;
  278. }
  279.  
  280. .musicplayer {
  281. width:200px;
  282. height:20px;
  283. background-color:{color:PostBG};
  284. }
  285.  
  286. .visitors {
  287. text-align:center;
  288. padding:5px;
  289. height:12px;
  290. padding-bottom:6px;
  291. background-color:{color:Background};
  292. width:190px;
  293. font-family:'courier new';
  294. -webkit-transition: all 0.4s ease-in-out;
  295. -moz-transition: all 0.4s ease-in-out;
  296. -o-transition: all 0.4s ease-in-out;
  297. -ms-transition: all 0.4s ease-in-out;
  298. transition: all 0.4s ease-in-out;
  299. }
  300.  
  301. .admins {
  302. margin-top:540px;
  303. position:absolute;
  304. color:{color:PostBG};
  305. font-weight:bold;
  306. text-align:center;
  307. margin-left:50px;
  308. width:385px;
  309. font-family:'courier new';
  310. background-color:{color:Border};
  311. padding:10px;
  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. -ms-transition: all 0.4s ease-in-out;
  316. transition: all 0.4s ease-in-out;
  317. }
  318.  
  319. .admins img {
  320. border:2px solid {color:Sidebar};
  321. margin-right:10px;
  322. }
  323.  
  324.  
  325. .pagi {
  326. width:190px;
  327. padding:5px;
  328. position:absolute;
  329. background-color:{color:Hover};
  330. }
  331.  
  332. .pagi a {
  333. color:{color:Border};
  334. font-weight:bold;
  335. font-size:14px;
  336. }
  337.  
  338.  
  339. /*AUDIO INFO*/
  340.  
  341. .playerbuttonbg {
  342. position: absolute;
  343. left: 20px;
  344. top: 15px;
  345. width: 30px;
  346. height: 30px;
  347. background-color: #ffffff;
  348. padding: 10px;
  349. opacity: .4;
  350. filter: alpha(opacity=40);
  351. -moz-opacity: 0.4;
  352. -khtml-opacity: 0.4;
  353. transition: opacity .7s ease-in-out;
  354. -moz-transition: opacity .7s ease-in-out;
  355. -webkit-transition: opacity .7s ease-in-out;
  356. }
  357.  
  358. .playerbuttonbg:hover {
  359. opacity: 1;
  360. filter: alpha(opacity=100);
  361. -moz-opacity: 1;
  362. -khtml-opacity: 1;
  363. }
  364.  
  365. .newplayerbutton {
  366. position: relative;
  367. width:30px;
  368. height:30px;
  369. margin-top:-4px;
  370. overflow: hidden;
  371. }
  372.  
  373. .playerbuttonhug {
  374. position: absolute;
  375. top: -25px;
  376. left: -10px;
  377. }
  378.  
  379. .tumblr_audio_player {
  380. height: 90px;
  381. width: 270px;
  382. -moz-transform-origin: top left;
  383. -webkit-transform-origin: top left;
  384. -o-transform-origin: top left;
  385. -ms-transform-origin: top left;
  386. transform-origin: top left;
  387. }
  388.  
  389. .audioimgwrapper {
  390. position: absolute;
  391. left: 0px;
  392. top: 0px;
  393. overflow: hidden;
  394. width: 79px;
  395. height: 79px;
  396. border-left:5px solid {color:Post Links};
  397. }
  398.  
  399. .audioimgwrapper img {
  400. width: 100%;
  401. height: auto;
  402. }
  403.  
  404. .trackdetails {
  405. text-transform:uppercase;
  406. width: auto;
  407. display:inline-block;
  408. margin-top:23px;
  409. margin-left: 90px;
  410. border-left:5px solid {color:Text};
  411. padding:5px;
  412. }
  413.  
  414. .audiowrapper {
  415. position: relative;
  416. display:inline-block;
  417. padding-bottom:10px;
  418. }
  419.  
  420. /*POST INFO*/
  421.  
  422. #info {
  423. text-align:right;
  424. font-family:'Dixel';
  425. letter-spacing:1px;
  426. font-size:8px;
  427. font-style:none;
  428. color:{color:Background};
  429. z-index:99999;
  430. line-height:10px;
  431. text-transform:uppercase;
  432. padding:5px;
  433. background-color:{color:Post Links};
  434. border-color:{color:Border};
  435. }
  436.  
  437. #info a {
  438. text-align:right;
  439. color:{color:Background};
  440. }
  441.  
  442. #info a:hover {
  443. -moz-transition-duration:0s;
  444. -webkit-transition-duration:0s;
  445. -o-transition-duration:0s;
  446. color:{color:PostBG};
  447. }
  448.  
  449. #tags {
  450. text-align:right;
  451. opacity:0;
  452. font-size:8px;
  453. z-index:-1;
  454. font-family:'arial';
  455. margin-top:-20px;
  456. padding:0px;
  457. text-transform:lowercase;
  458. transition-duration: 0.5s;
  459. -moz-transition-duration: 0.5s;
  460. -webkit-transition-duration: 0.5s;
  461. -o-transition-duration: 0.5s;
  462. background-color:{color:Border};
  463. }
  464.  
  465. #post:hover #tags {
  466. opacity:1;
  467. margin-top:0;
  468. }
  469.  
  470.  
  471. #tags a {
  472. padding:5px;
  473. color:{color:Post Links};
  474. letter-spacing:0px;
  475. font-family:'helvetica';
  476. text-decoration:none;
  477. display:inline-block;
  478. }
  479.  
  480. #tags a:hover {
  481. -moz-transition-duration:0.3s;
  482. -webkit-transition-duration:0.3s;
  483. -o-transition-duration:0.3s;
  484. color:{color:Hover};
  485. }
  486.  
  487. /*QUESTION*/
  488.  
  489. .question {
  490. width:490px;
  491. padding:5px;
  492. padding-top:10px;
  493. background-image:url('{image:AskBG}');
  494. background-color:{color:SidebarBorder};
  495. }
  496.  
  497. .asker {
  498. font-family:'Courier New';
  499. font-size:10px;
  500. text-transform:uppercase;
  501. color:{color:Background};
  502. }
  503.  
  504. .asker a {
  505. padding:5px;
  506. color:{color:Background};
  507. background-color:{color:SidebarBorder};
  508. }
  509.  
  510. .q {
  511. font-size:8px;
  512. margin-top:-7px;
  513. background-color:{color:Text};
  514. color:{color:PostBg};
  515. padding:5px;
  516. }
  517.  
  518. .q small,.q big,.q code {
  519. background-color:{color:Background};
  520. }
  521.  
  522. /*CREDIT*/
  523.  
  524. #cred {
  525. position:fixed;
  526. font-family:'helvetica';
  527. text-transform:uppercase;
  528. font-size:20px;
  529. background-color:{color:PostBG};
  530. width:10px;
  531. bottom:10px;
  532. right:10px;
  533. height:10px;
  534. border-radius:20px;
  535. padding:5px;
  536. border:2px solid {color:Border};
  537. }
  538.  
  539. #cred a {
  540. color:{color:PostBG};
  541. }
  542.  
  543. #notes {
  544. font-family:helvetica;
  545. text-transform:uppercase;
  546. font-size:8px;
  547. margin-left:-50px;
  548. }
  549.  
  550. #notes li{
  551. list-style-type:none;
  552. background-color:{color:PostBG};
  553. padding:2px;
  554. }
  555.  
  556. #notes img {
  557. opacity:0;
  558. }
  559.  
  560. #s-m-t-tooltip{
  561. position:absolute;
  562. background-color:{color:PostBG};
  563. padding:3px 5px 3px;
  564. z-index:99999999999999999999999999999999;
  565. margin-top:-30px;
  566. margin-left:-30px;
  567. font-family:'Courier New';
  568. display:block;
  569. text-transform:uppercase;
  570. font-size:8px;
  571. color:{color:text};
  572. }
  573.  
  574.  
  575. {CustomCSS}</style>
  576. </head>
  577. <body>
  578. <div id="side">
  579. <div class="links">
  580. <a href="/"><img src="{image:HomeLink}"></a>
  581. <a href="{text:AskLink}"><img src="{image:AskLink}"></a>
  582. <a href="{text:NavLink}"><img src="{image:NavLink}"></a>
  583. </div>
  584. <div class="bottom"><img src="{image:SidebarBG}"></div>
  585. <div class="image"><img src="{image:Sidebar}"></div>
  586. <div class="desc">{Description}</div>
  587. <div class="admins">ADMINS<br/><br/>
  588. <img src="PUTURLHERE" title="NAME/TIMEZONE"><img src="PUTURLHERE" title="NAME/TIMEZONE">
  589. </div>
  590. <div id="box">
  591. <div class="musicplayer">{text:MusicPlayer}</div>
  592. <div class="visitors">{text:Counter}<br/></div>
  593. {block:Pagination}<div class="pagi">
  594. {block:PreviousPage}<a href="{PreviousPage}" title="back">ยซ</a> {/block:PreviousPage}{block:NextPage}<a href="{NextPage}" title="next">ยป</a>{/block:NextPage}
  595. </div>
  596. {/block:Pagination}
  597. </div>
  598. </div>
  599. <!-- POSTS START -->
  600. <div id="entries">
  601. <img src="{image:Header}" style="border:4px solid {color:Border};border-bottom:0px;">
  602. <div class="quote">{text:Quote}</div>
  603. {block:Posts}
  604. <div id="post">
  605.  
  606. {block:Text}
  607. <h1>{block:Title}<a href="{Permalink}" title="{Title}"><div style="font-weight:100;font-size:12px;font-family:'Courier New';text-transform:uppercase;padding:5px 7px 7px 8px;background-color:{color:Background};color:{color:Text};">{Title}</div></a>{/block:Title}</h1>
  608. {Body}<br>{/block:Text}
  609.  
  610. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}
  611. {block:Caption}{Caption}{/block:Caption}<br/><br/>{/block:Photo}
  612.  
  613. {block:Photoset}{Photoset-500}{block:Caption}{Caption}
  614. {/block:Caption}<br>{/block:Photoset}
  615.  
  616. {block:Quote}<div style="width:490px;font-size:11px;padding:5px;background-color:{color:Border};color:{color:Background};">"{Quote}"</div><br/>
  617. {block:Source}<div class="qsource"> โ€”{Source}</div>
  618. {/block:Source}<br>{/block:Quote}
  619.  
  620. {block:Link}<a href="{URL}" {Target} title="{Name}"><div style="border-top:5px solid {color:SidebarBorder};font-size:8px;font-family:'Courier New';text-tranform:uppercase;padding:5px 7px 7px 8px;background-color:{color:Background};color:{color:Text};">{Name}</div></a>{block:Description}{Description}{/block:Description}{/block:Link}
  621.  
  622. {block:Chat}{block:Title}{Title}{/block:Title}{block:Lines}{block:Label}<span style="font-size:15px;text-transform:uppercase;"><b>{Label}</b></span>{/block:Label} {Line}<br>{/block:Lines}<br>{/block:Chat}
  623.  
  624. {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">{block:TrackName}{TrackName}{/block:TrackName}<br/>{block:Artist}{Artist}{/block:Artist}<br/>{block:Album}{Album}{/block:Album}<br/></div></div>{block:Caption}{Caption}{/block:Caption}{/block:AudioPlayer}
  625.  
  626.  
  627. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}<br>{/block:Video}
  628.  
  629. <!--- Please don't steal anything. I find it rude and unethical. -->
  630. {block:Answer}<div id="answer">
  631. <div class="question">
  632. <div class="asker">{Asker}</div><br/><div class="q">{Question}</div></div>
  633. {block:Answerer}<br/><br/><div class="question"><div class="asker">{Answerer}</div><br/><div class="q">{Answer}</div></div>{/block:Answerer}{Replies}</div>{/block:Answer}
  634.  
  635. <div id="info">
  636. <a href="{Permalink}" title="{ShortMonth}.{DayOfMonth}.{Year}">{TimeAgo}</a>
  637. {block:NoteCount}
  638. | <a href="{Permalink}">{NoteCountWithLabel}{/block:NoteCount}</a>{block:RebloggedFrom} | <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{/block:RebloggedFrom} {block:ContentSource} |
  639. <a href="{SourceURL}" title="{SourceTitle}">source</a>{/block:ContentSource}
  640. {block:RebloggedFrom} <a href="{ReblogParentURL}" title="Reblogged From" target="_blank"></a>{/block:RebloggedFrom}
  641. </div>
  642. {block:HasTags}<div id="tags">
  643. {block:Tags} <a href="/tagged/{Tag}">#{Tag}</a>{/block:Tags}
  644. </div>{block:HasTags}
  645. </div>
  646. {/block:Posts}{block:PostNotes}<br><br><div id="notes"><left>{PostNotes}</div>{/block:PostNotes}
  647. {/block:Posts}</div></div></div>
  648.  
  649. <div id="cred">
  650. <a href="http://cocoofrps.tumblr.com/" title="THEME 22 BY COCO">#</a>
  651. </div>
  652. </div>
  653. </body>
  654. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement