Advertisement
cocoofrps

THEME 1 'BABY BLUE'

Nov 6th, 2013
589
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.96 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.  
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  5. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  6. <script>
  7. (function($){
  8. $(document).ready(function(){
  9. $("[title]").style_my_tooltips({
  10. tip_follows_cursor:true,
  11. tip_delay_time:200,
  12. tip_fade_speed:300
  13. }
  14. );
  15. });
  16. })(jQuery);
  17. </script>
  18.  
  19. <head><title>{Title}</title>
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  23.  
  24.  
  25.  
  26. <!--- THEME 1 BY @cocoofrps --->
  27.  
  28. <meta name="color:Background" content="#ffffff"/>
  29. <meta name="color:Text" content="#a8a8a8"/>
  30. <meta name="color:postbg" content="#b8b8b8"/>
  31. <meta name="color:postborder" content="#817261" />
  32. <meta name="color:sidebarborder" content="#817261" />
  33. <meta name="color:DescriptionText" content="#b8b8b8"/>
  34. <meta name="color:Border" content="#dddddd"/>
  35. <meta name="color:Hover" content="#f2f2f2"/>
  36. <meta name="color:Scrollbar" content="#000000"/>
  37. <meta name="color:ScrollbarBg" content="#ffffff"/>
  38. <meta name="color:Post Links" content="#c0bfbf"/>
  39. <meta name="color:Answer Backg" content="#000000"/>
  40. <meta name="image:leftsidebar1" content=""/>
  41. <meta name="image:leftsidebar2" content=""/>
  42. <meta name="image:Background" content=""/>
  43. <meta name="image:link1" content=""/>
  44. <meta name="image:link2" content=""/>
  45. <meta name="image:link3" content=""/>
  46. <meta name="text:link1" content=""/>
  47. <meta name="text:link2" content=""/>
  48. <meta name="text:link3" content=""/>
  49. <meta name="image:png" content=""/>
  50. <meta name="if:ShowDescription" content="1"/>
  51. <meta name="if:ShowUpdates" content="1"/>
  52. <style type="text/css">
  53.  
  54. ::-webkit-scrollbar-thumb {
  55. height:auto;
  56. background-color:{color:Scrollbar};
  57. }
  58.  
  59. ::-webkit-scrollbar {
  60. height:9px;
  61. width:4px;
  62. background-color:{color:ScrollbarBg};
  63. }
  64.  
  65. ::selection {
  66. background: {color:postbg};
  67. color: {color:background};
  68. }
  69.  
  70. ::-moz-selection {
  71. background: {color:postbg};
  72. color: {color:background};
  73. }
  74.  
  75. ::-webkit-selection {
  76. background: {color:postbg};
  77. color: {color:background};
  78. }
  79.  
  80. body {
  81. overflow-y:scroll;
  82. background:{color:background};
  83. margin:0px;
  84. color:{color:text};
  85. font-family:calibri;
  86. font-size:10px;
  87. line-height:100%;
  88. letter-spacing:0px;
  89. text-align:justify;
  90. background-image:url('{image:Background}');
  91. }
  92.  
  93. a {
  94. text-decoration:none;
  95. outline:none;
  96. -moz-outline-style:none;
  97. color:{color:Post Links};
  98. }
  99.  
  100. img {
  101. border:none;
  102. }
  103.  
  104. blockquote {
  105. margin-left:5px;
  106. padding-left:5px;
  107. border-left:2px solid;
  108. }
  109.  
  110. blockquote blockquote {
  111. padding-left:5px;
  112. border-left:2px solid;
  113. }
  114.  
  115. h1 {
  116. font-size:8px;
  117. letter-spacing:2px;
  118. text-transform:uppercase;
  119. font-family:'calibri';
  120. font-style:none;
  121. line-height:10px;
  122. text-align:center;
  123. padding:0px;
  124. }
  125.  
  126. a:hover {
  127. color:{color:hover};
  128. -moz-transition-duration:0.3s;
  129. -webkit-transition-duration:0.3s;
  130. -o-transition-duration:0.3s;
  131. }
  132.  
  133.  
  134. /*ENTRIES*/
  135.  
  136. #entries {
  137. padding:10px;
  138. width:500px;
  139. margin-left:400px;
  140. margin-top:5px;
  141. font-size:10px;
  142. font-family:'arial';
  143. letter-spacing:0px;
  144. }
  145.  
  146. #post {
  147. border:1px solid {color:postborder};
  148. background-color:{color:postbg};
  149. width:500px;
  150. padding-bottom:40px;
  151. padding:25px;
  152. margin-top:50px;
  153. }
  154.  
  155. /*SIDEBAR*/
  156.  
  157. #sidebar {
  158. position:fixed;
  159. margin-left:100px;
  160. margin-top:200px;
  161. margin-left:170px;
  162. }
  163.  
  164. #one {
  165. background-image:url('{image:leftsidebar1}');
  166. width:200px;
  167. height:200px;
  168. background-color:{color:background};
  169. position:fixed;
  170. border:1px solid {color:sidebarborder};
  171. margin-left:-80px;
  172. }
  173.  
  174. #two {
  175. background-image:url('{image:leftsidebar2}');
  176. width:200px;
  177. height:200px;
  178. background-color:{color:background};
  179. position:fixed;
  180. border:1px solid {color:sidebarborder};
  181. margin-top:200px;
  182. margin-left:-80px;
  183. -webkit-transition: all 0.4s ease-in-out;
  184. -moz-transition: all 0.4s ease-in-out;
  185. -o-transition: all 0.4s ease-in-out;
  186. -ms-transition: all 0.4s ease-in-out;
  187. transition: all 0.4s ease-in-out;
  188. }
  189.  
  190. #desc {
  191. padding:10px;
  192. color:{color:DescriptionText};
  193.  
  194. {block:ifNotShowDescription}
  195. opacity:0;
  196. overflow:hidden;
  197. {/block:ifNotShowDescription}
  198. width:180px;
  199. height:180px;
  200. overflow-y:auto;
  201.  
  202. }
  203. #desc h3 {
  204. font-weight:400;
  205. font-size:20px;
  206. }
  207.  
  208. #desc p {
  209. {block:ifShowDescription}
  210. background-color:{color:Background};
  211. {/block:ifShowDescription}
  212. opacity:0.7;
  213. padding:5px;
  214. text-align:justify;
  215. }
  216.  
  217. .links{
  218. position:fixed;
  219. margin-left:140px;
  220. margin-top:-15px;
  221. }
  222.  
  223. #link1 img {
  224. width:80px;
  225. }
  226.  
  227. #link2 img {
  228. width:80px;
  229. margin-top:50px;
  230. }
  231.  
  232. #link3 img {
  233. width:80px;
  234. margin-top:60px;
  235. }
  236. #description {
  237. text-align:justify;
  238. font-family:'Arial';
  239. width:160px;
  240. margin-top:7px;
  241. margin-left:-3px;
  242. font-size:9px;
  243. position:fixed;
  244. text-transform:none;
  245. color:{color:DescriptionText};
  246. }
  247.  
  248. #pagination {
  249. font-style:bold;
  250. position:fixed;
  251. background-color:{color:postbg};
  252. padding:10px;
  253. font-family:'arial';
  254. letter-spacing:0px;
  255. font-size:9px;
  256. text-align:center;
  257. border:1px solid {color:sidebarborder};
  258. width:180px;
  259. margin-left:-80px;
  260. margin-top:-30px;
  261. text-transform:lowercase;
  262. height:100px;
  263. z-index:-111;
  264. -webkit-transition: all 0.4s ease-in-out;
  265. -moz-transition: all 0.4s ease-in-out;
  266. -o-transition: all 0.4s ease-in-out;
  267. -ms-transition: all 0.4s ease-in-out;
  268. transition: all 0.4s ease-in-out;
  269. }
  270.  
  271. #pagination:hover {
  272. margin-top:-40px;
  273. -webkit-transition: all 0.4s ease-in-out;
  274. -moz-transition: all 0.4s ease-in-out;
  275. -o-transition: all 0.4s ease-in-out;
  276. -ms-transition: all 0.4s ease-in-out;
  277. transition: all 0.4s ease-in-out;
  278. }
  279. {block:ifShowUpdates}
  280. #updates {
  281. position:fixed;
  282. margin-top:-180px;
  283. width:200px;
  284. padding:10px;
  285. text-align:left;
  286. height:200px;
  287. margin-left:1000px;
  288. background-color:{color:PostBG};
  289. border:1px solid {color:sidebarborder};
  290. -webkit-transition: all 0.4s ease-in-out;
  291. -moz-transition: all 0.4s ease-in-out;
  292. -o-transition: all 0.4s ease-in-out;
  293. -ms-transition: all 0.4s ease-in-out;
  294. transition: all 0.4s ease-in-out;
  295.  
  296. }
  297.  
  298. #updates:hover {
  299. margin-top:-10px;
  300. -webkit-transition: all 0.4s ease-in-out;
  301. -moz-transition: all 0.4s ease-in-out;
  302. -o-transition: all 0.4s ease-in-out;
  303. -ms-transition: all 0.4s ease-in-out;
  304. transition: all 0.4s ease-in-out;
  305. }
  306.  
  307.  
  308. #titleofupdates{
  309. font-size:10px;
  310. display:block;
  311. position:fixed;
  312. text-align:center;
  313. width:200px;
  314. margin-top:190px;
  315.  
  316. }
  317.  
  318. #updateinfo {
  319. position:fixed;
  320. text-align:left;
  321. margin-top:40px;
  322. overflow:auto;
  323. margin-left:-10px;
  324. width:200px;
  325. height:100px;
  326. padding-right:4px;
  327.  
  328. }
  329. {/block:ifShowUpdates}
  330. #png {
  331. position:fixed;
  332. width:350px;
  333. height:700px;
  334. margin-left:1000px;
  335. margin-top:100px;
  336. z-index:-1;
  337. }
  338.  
  339.  
  340. /*POST INFO*/
  341. .playerbuttonbg {
  342. position: absolute;
  343. left: 20px;
  344. top: 20px;
  345. width: 19px;
  346. height: 19px;
  347. -webkit-border-radius: 40px;
  348. -moz-border-radius: 40px;
  349. border-radius: 40px;
  350. background-color: #ffffff;
  351. padding: 10px;
  352. opacity: .4;
  353. filter: alpha(opacity=40);
  354. -moz-opacity: 0.4;
  355. -khtml-opacity: 0.4;
  356. transition: opacity .7s ease-in-out;
  357. -moz-transition: opacity .7s ease-in-out;
  358. -webkit-transition: opacity .7s ease-in-out;
  359. }
  360.  
  361. .playerbuttonbg:hover {
  362. opacity: 1;
  363. filter: alpha(opacity=100);
  364. -moz-opacity: 1;
  365. -khtml-opacity: 1;
  366. }
  367.  
  368. .newplayerbutton {
  369. position: relative;
  370. width: 19px;
  371. height: 19px;
  372. overflow: hidden;
  373. }
  374.  
  375. .playerbuttonhug {
  376. position: absolute;
  377. top: -17px;
  378. left: -4px;
  379. }
  380.  
  381. .tumblr_audio_player {
  382. height: 90px;
  383. width: 270px;
  384. -moz-transform: scale(0.60, 0.60);
  385. -webkit-transform: scale(0.60, 0.60);
  386. -o-transform: scale(0.60, 0.60);
  387. -ms-transform: scale(0.60, 0.60);
  388. transform: scale(0.60, 0.60);
  389. -moz-transform-origin: top left;
  390. -webkit-transform-origin: top left;
  391. -o-transform-origin: top left;
  392. -ms-transform-origin: top left;
  393. transform-origin: top left;
  394. }
  395.  
  396. .audioimgwrapper {
  397. position: absolute;
  398. left: 0px;
  399. top: 0px;
  400. overflow: hidden;
  401. width: 79px;
  402. height: 79px;
  403. }
  404.  
  405. .audioimgwrapper img {
  406. width: 100%;
  407. height: auto;
  408. }
  409.  
  410. .trackdetails {
  411. width: auto;
  412. display:inline-block;
  413. margin-top:20px;
  414. margin-left: 90px;
  415. min-height: 85px;
  416. }
  417.  
  418. .audiowrapper {
  419. position: relative;
  420. display:inline-block;
  421. }
  422.  
  423. #info {
  424. width:500px;
  425. text-align:center;
  426. font-family:'trebuchet ms';
  427. margin-top:3px;
  428. margin-left:px;
  429. letter-spacing:1px;
  430. font-size:7px;
  431. font-style:none;
  432. padding:1px;
  433. line-height:10px;
  434. text-transform:uppercase;
  435. border-top:1px solid;
  436. border-color:{color:Border};
  437. }
  438.  
  439. #info a {
  440. text-align:center;
  441. color:{color:Post Links};
  442. }
  443.  
  444. #info a:hover {
  445. -moz-transition-duration:0.3s;
  446. -webkit-transition-duration:0.3s;
  447. -o-transition-duration:0.3s;
  448. color:{color:Hover}
  449. }
  450.  
  451. #tags {
  452. float:left;
  453. width:489px;
  454. margin-top:-7px;
  455. margin-left:-5px;
  456. text-align:left;
  457. font-size:7px;
  458. padding:5px;
  459. font-size:8px;
  460. opacity:1;
  461. transition-duration: 0.5s;
  462. -moz-transition-duration: 0.5s;
  463. -webkit-transition-duration: 0.5s;
  464. -o-transition-duration: 0.5s
  465. color:{color:Post Links};
  466. }
  467.  
  468. #tags a {
  469. letter-spacing:0px;
  470. font-size:8px;
  471. text-align:center;
  472. font-family:'CALIBRI';
  473. text-decoration:none;
  474. display:inline-block;
  475. color:#ddd;
  476. }
  477.  
  478. #tags a:hover {
  479. -moz-transition-duration:0.3s;
  480. -webkit-transition-duration:0.3s;
  481. -o-transition-duration:0.3s;
  482. color:{color:Hover};
  483. }
  484.  
  485. /*QUESTION*/
  486.  
  487. #asker {
  488. color:{color:background};
  489. padding:14px;
  490. font-family:'arial';
  491. font-size:11px;
  492. letter-spacing:0px;
  493. text-align:left;
  494. margin-top:0px;
  495. text-transform:lowercase;
  496. line-height:100%;
  497. background-color:{color:Answer Backg}
  498. }
  499.  
  500. /*CREDIT*/
  501.  
  502. #cred {
  503. position:fixed;
  504. font-family:'Calibri';
  505. text-transform:uppercase;
  506. font-size:8px;
  507. right:9px;
  508. bottom:9px;
  509. padding:4px;
  510. letter-spacing:1px;
  511. }
  512.  
  513.  
  514.  
  515. #s-m-t-tooltip{
  516. position:absolute;
  517. background-color:{color:background};
  518. padding:3px;
  519. z-index:9999;border:1px solid {color:border};
  520. margin-top:-10px;
  521. margin-left:5px;
  522. display:block;
  523. text-transform:uppercase;
  524. font-size:8px;
  525. color:{color:postbg};
  526. }
  527.  
  528.  
  529. {CustomCSS}</style></head><body>
  530. {block:ifShowUpdates}
  531. <div id="updates">
  532. <div id="titleofupdates"><h1>UPDATES/TODO</h1></div>
  533. <div id="updateinfo">
  534. <ul>
  535. <li><b>80/50/1250:</b> It's not actually this time. I'm pretty sure they didn't have the Internet in 1250.</li>
  536. <li><b>07/14/1998:</b> There we go, that seems like a more suitable date, don't you think? Oh, wait. Tumblr wasn't even invented yet.</li>
  537. <li><b>10/22/2015:</b> Oh, wait. That's in the future. Why do I keep messing up?</li>
  538. <li><b>11/2/2013:</b> Ah, there. That seems more like it.</li>
  539. </ul>
  540. <ul>
  541. <li>Buy a phone.</li>
  542. <li>Buy a Rolls Royce.</li>
  543. <li>Get a fantastic job.</li>
  544. <li>Stay forever young (mentally).</li>
  545. </ul>
  546. </div>
  547. </div>
  548. {/block:ifShowUpdates}
  549. <div id="png">
  550. <img src="{image:png}">
  551. </div>
  552.  
  553. <div id="sidebar">
  554. <div id="one"></div>
  555. <div id="two">
  556. <div id="desc">
  557. <h3><code>{Title}</code></h3>
  558. <p>{Description}</p></div>
  559. </div>
  560. <div class="links">
  561. <div id="link1"><a href="{text:link1}"
  562. ><img title="{text:link1}" src="{image:link1}"></a></div>
  563. <div id="link2"><a href="{text:link2}"
  564. ><img title="{text:link2}" src="{image:link2}"></a></div>
  565. <div id="link3"><a href="{text:link3}"
  566. ><img title="{text:link3}" src="{image:link3}"></a></div>
  567. </div>
  568.  
  569.  
  570. {block:Pagination}
  571. <div id="pagination">
  572. {block:PreviousPage}<a href="{PreviousPage}" title="click this too">new</a>{/block:PreviousPage}
  573. — {block:NextPage}<a href="{NextPage}" title="click it">older</a>{/block:NextPage}
  574. </div>
  575. {/block:Pagination}
  576. </div>
  577.  
  578. <div id="entries">
  579. {block:Posts}
  580. <div id="post">
  581.  
  582. {block:Text}
  583. <h1>{block:Title}{Title}{/block:Title}</h1>
  584. {Body}{/block:Text}
  585.  
  586. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}
  587. {block:Caption}{Caption}{/block:Caption}{/block:Photo}
  588.  
  589. {block:Photoset}{Photoset-500}{block:Caption}{Caption}
  590. {/block:Caption}{/block:Photoset}
  591.  
  592. {block:Quote}<h2>"{Quote}"</h2>
  593. {block:Source}<div class="qsource"> —{Source}</div>
  594. {/block:Source}{/block:Quote}
  595.  
  596. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  597.  
  598. {block:Chat}{block:Title}{Title}{/block:Title}{block:Lines}{block:Label}<b><u>{Label}</u></b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  599.  
  600. {block:AudioPlayer}
  601. <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}
  602.  
  603. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  604.  
  605. {block:Answer}<div id="asker">"{Question}" <span style="text-align:lowercase; color:{color:post links};"><b>✉{Asker}</b><br></span> </div><left><div style="padding:4px;margin-top:3px;font-size:11px;"><font face="arial">{Answer}</font></div>{/block:Answer}
  606.  
  607. <div id="info">
  608. <a href="{Permalink}" title="Permalink">{TimeAgo}</a>
  609. {block:RebloggedFrom} — <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} {block:ContentSource} and
  610. <a href="{SourceURL}" title="Source">{SourceLink}</a>{/block:ContentSource}
  611. {block:RebloggedFrom} <a href="{ReblogParentURL}" title="Reblogged From" target="_blank"></a>{/block:RebloggedFrom}{block:NoteCount}
  612. with <a href="{Permalink}">{NoteCountWithLabel}{/block:NoteCount}</a>
  613. {block:HasTags}<div id="tags">
  614.  
  615. {block:Tags}<a href="/tagged/{Tag}">#{Tag}</a>&nbsp;{/block:Tags}
  616. </div>{block:HasTags}
  617. </div>
  618. </div>
  619. {/block:Posts}
  620. <br><br>{block:PostNotes}<div id="notes"><left>{PostNotes}</div>{/block:PostNotes}
  621. {/block:Posts}</div></div></div>
  622. <br><br><br><br>
  623.  
  624. <div id="cred">
  625. <a href="http://cocoofrps.tumblr.com/">♚</a>
  626. </div>
  627. </div>
  628.  
  629.  
  630.  
  631. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement