Advertisement
skyroleplays

THEME 002: WAX WNGS

Oct 15th, 2014
489
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.13 KB | None | 0 0
  1. <!---
  2. WAX WINGS, THEME 002 ladyhummelrps
  3. theme base by hardziam
  4. This is my second theme (it turned out way better
  5. than my first). It's based off of one of my fav
  6. mythology characters as well as my fav Bastille
  7. song! If you have any questions, feel free to ask,
  8. Enjoy the theme! (✿◠‿◠)
  9.  
  10. NOTE: you are, of course, free to edit as much as you like, but this is not a base code, do not remove credit or redistribute as your own.
  11. --->
  12.  
  13. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  14.  
  15. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  16.  
  17. <head>
  18.  
  19. <title>{Title}</title>
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23.  
  24. <meta name="color:background" content="#97c5e0" />
  25. <meta name="color:bg" content="#97c5e0" />
  26. <meta name="color:text" content="#000000" />
  27. <meta name="color:title" content="#315f7a" />
  28. <meta name="color:subtitle" content="#000000" />
  29. <meta name="color:link" content="#dcecf5" />
  30. <meta name="color:hover" content="#102029" />
  31. <meta name="color:borders" content="#000000" />
  32. <meta name="color:pre text" content="#dcecf5" />
  33. <meta name="color:pre bg" content="#315f7a" />
  34. <meta name="color:sidebars" content="#97c5e0" />
  35. <meta name="color:entries" content="#97c5e0" />
  36. <meta name="color:info bg" content="#315f7a" />
  37. <meta name="color:nav link" content="#315f7a" />
  38. <meta name="color:nav link hover" content="#97c5e0" />
  39. <meta name="color:nav link text" content="#000000" />
  40. <meta name="color:nav link text hover" content="#315f7a" />
  41. <meta name="color:scroll bar" content="#315f7a" />
  42. <meta name="color:scroll bar bg" content="#97c5e0" />
  43. <meta name="color:ask bg" content="#315f7a" />
  44. <meta name="image:photo" content="" />
  45. <meta name="image:background" content="" />
  46. <meta name="image:bg" content="" />
  47. <meta name="text:link 1" content="link" />
  48. <meta name="text:link 1 url" content="/" />
  49. <meta name="text:link 2" content="link" />
  50. <meta name="text:link 2 url" content="/" />
  51. <meta name="text:link 3" content="link" />
  52. <meta name="text:link 3 url" content="/" />
  53. <meta name="text:link 4" content="link" />
  54. <meta name="text:link 4 url" content="/" />
  55. <meta name="text:link 5" content="link" />
  56. <meta name="text:link 5 url" content="/" />
  57. <meta name="text:title" content="icarus is flying too close to the sun," />
  58. <meta name="text:subtitle" content="and icarus's life, it has only just begun." />
  59. <meta name="text:header" content="flight." />
  60. <meta name="text:quote" content="And this is how it feels to take a fall.
  61. Icarus is flying towards an early grave." />
  62.  
  63. <style>
  64. @font-face {
  65. font-family: 'mademoiselle';
  66. src: url('http://static.tumblr.com/2wkt6zc/9yandgps0/mademoiselle_camille.ttf') format('truetype');
  67. font-weight: normal;
  68. font-style: normal;
  69.  
  70. }
  71.  
  72. </style>
  73.  
  74. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  75.  
  76. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  77.  
  78. <script>
  79.  
  80. (function($){
  81.  
  82. $(document).ready(function(){
  83.  
  84. $(“a[title]”).style_my_tooltips({
  85.  
  86. tip_follows_cursor:true,
  87.  
  88. tip_delay_time:30,
  89.  
  90. tip_fade_speed:300,
  91.  
  92. attribute:”title”
  93.  
  94. });
  95.  
  96. });
  97.  
  98. })(jQuery);
  99.  
  100. </script>
  101.  
  102. <style type="text/css">
  103.  
  104. #s-m-t-tooltip {
  105. margin-top: 5px;
  106. font-family: georgia;
  107. font-size: 9px;
  108. text-transform:lowercase;
  109. padding:3px;
  110. background-color:{color:background};
  111. color:{color:text};
  112. border:1px solid {color:borders};
  113. z-index:9999;
  114. }
  115.  
  116. ::-webkit-scrollbar-thumb {
  117. height:auto;
  118. background-color:{color:scroll bar};
  119. }
  120.  
  121. ::-webkit-scrollbar {
  122. height:7px;
  123. width:5px;
  124. background-color:{color:scroll bar bg};
  125. }
  126.  
  127. body {
  128. background: {color:background};
  129. background-image: url('{image:background}');
  130. background-attachment:fixed;
  131. font-size:11px;
  132. font-family:georgia;
  133. color:{color:text};
  134. }
  135.  
  136. blockquote {
  137. border-left:2px solid {color:link};
  138. margin:0px 2px 0px 12px;
  139. padding-left:6px;
  140. text-align:left;
  141. }
  142.  
  143. a {
  144. text-decoration:none;
  145. outline:none;
  146. color:{color:link};
  147. }
  148.  
  149. a:hover {
  150. color:{color:hover};
  151. letter-spacing:1px;
  152. font-style:italic;
  153. -webkit-transition: all 0.4s ease-in-out;
  154. -moz-transition: all 0.4s ease-in-out;
  155. -o-transition: all 0.4s ease-in-out;
  156. }
  157.  
  158. b,strong {
  159. color:{color:title};
  160. text-shadow:1px 1px 1px #000000;
  161. }
  162.  
  163. h1 {
  164. font-family:'mademoiselle';
  165. font-style:none;
  166. font-weight:normal;
  167. color:{color:title};
  168. margin-top:-5px;
  169. margin-bottom:-5px;
  170. text-shadow:1px 1px 1px #000;
  171. text-align:center;
  172. font-size:58px;
  173. }
  174.  
  175. h2 {
  176. text-align:justify;
  177. font-family:georgia;
  178. text-transform:uppercase;
  179. font-size:16px;
  180. color:{color:text};
  181. }
  182.  
  183. img {
  184. max-width:100%;
  185. margin-bottom:5px;
  186. }
  187.  
  188. pre {
  189. font-family:cambria;
  190. text-transform:uppercase;
  191. text-align:center;
  192. font-size:10px;
  193. color:{color:pre text};
  194. background-color:{color:pre bg};
  195. border-left:3px solid {color:borders};
  196. border-right:3px solid {color:borders};
  197. }
  198.  
  199. #title1 {
  200. font-family:'mademoiselle', serif;
  201. color:{color:title};
  202. padding:5px;
  203. font-size:60px;
  204. line-height:24px;
  205. margin-top:-7px;
  206. font-style:bold;
  207. text-shadow:1px 1px 1px #000;
  208. text-align:center;
  209. text-decoration:none;
  210. }
  211.  
  212. #title2 {
  213. font-family:georgia;
  214. color:{color:subtitle};
  215. font-size:12px;
  216. margin-top:0px;
  217. font-style:italic;
  218. text-align:center;
  219. text-decoration:none;
  220. }
  221.  
  222. #titlebar {
  223. position:fixed;
  224. margin-top:5px;
  225. margin-left:5px;
  226. width:240px;
  227. height:65px;
  228. padding:5px;
  229. border:1px solid {color:borders};
  230. background-color:{color:sidebars};
  231. }
  232.  
  233. #bg {
  234. float:left;
  235. margin-top:40px;
  236. margin-left:60px;
  237. position:fixed;
  238. width:480px;
  239. height:495px;
  240. border:1px solid {color:borders};
  241. background-color:{color:bg};
  242. background-image:url('{image:bg}');
  243. }
  244.  
  245. #photo {
  246. float:left;
  247. margin-top:87px;
  248. margin-left:5px;
  249. position:fixed;
  250. width:250px;
  251. height:400px;
  252. border:1px solid {color:borders};
  253. background-image:url('{image:photo}');
  254. background-size:auto;
  255. background-repeat:no-repeat;
  256. }
  257.  
  258. #navbar {
  259. margin-top:250px;
  260. margin-left:263px;
  261. position:fixed;
  262. width:210px;
  263. height:123px;
  264. border:1px solid {color:borders};
  265. background-color:{color:sidebars};
  266. }
  267.  
  268. #descbox {
  269. float:left;
  270. padding:5px;
  271. margin-top:5px;
  272. margin-left:263px;
  273. position:fixed;
  274. width:200px;
  275. height:228px;
  276. border:1px solid {color:borders};
  277. background-color:{color:sidebars};
  278. }
  279.  
  280. #header {
  281. font-family:georgia;
  282. color:{color:title};
  283. font-size:16px;
  284. font-style:italic;
  285. text-align:center;
  286. margin-top:3px;
  287. text-decoration:none;
  288. }
  289.  
  290. #description {
  291. font-size:11px;
  292. font-family:georgia;
  293. color:{color:text};
  294. padding-top:1px;
  295. text-align:justify;
  296. margin-top:3px;
  297. border: 1px solid {color:sidebars};
  298. overflow:auto;
  299. max-height:170px;
  300. }
  301.  
  302. #pagination {
  303. text-align:center;
  304. margin-top: 2px;
  305. font-size:14px;
  306. font-style:italic;
  307. }
  308.  
  309. #links {
  310. text-align:center;
  311. margin-top:5px;
  312. }
  313.  
  314.  
  315. #links a {
  316. display:inline-block;
  317. width:200px;
  318. height:14px;
  319. margin-top:0px;
  320. background-color:{color:nav link};
  321. padding:2px 0;
  322. margin-bottom:3px;
  323. color:{color:nav link text};
  324. font:10px 'cambria';
  325. text-transform:uppercase;
  326. border:1px solid {color:borders};}
  327.  
  328. #links a:hover {
  329. border:1px solid {color:borders};
  330. background-color:{color:nav link hover};
  331. letter-spacing:.5px;
  332. color:{color:nav link text hover};
  333. text-shadow:1px 1px #000;
  334. transition: all 0.4s ease-out }
  335.  
  336. #qbox {
  337. float:left;
  338. padding:15px;
  339. margin-top:380px;
  340. margin-left:263px;
  341. position:fixed;
  342. width:180px;
  343. height:77px;
  344. border:1px solid {color:borders};
  345. background-color:{color:sidebars};
  346. }
  347.  
  348. #quote {
  349. font-size:16px;
  350. font-style:italic;
  351. text-align:center;
  352. }
  353.  
  354.  
  355. #entries {
  356. position:absolute;
  357. width:530px;
  358. margin-left:600px;
  359. padding:11px;}
  360.  
  361. #postbg {
  362. padding:3px;
  363. margin-bottom:30px;
  364. margin-top:30px;
  365. background-color:{color:bg};
  366. border:1px solid {color:borders};
  367. background-image:url('{image:bg}');
  368. }
  369.  
  370. #post {
  371. background-color:{color:entries};
  372. padding:10px;
  373. border:1px solid {color:borders}}
  374.  
  375. #info {
  376. padding:5px;
  377. border:1px solid {color:borders};
  378. background-color:{color:info bg};
  379. font-size:11px;
  380. font-style:italic;
  381. }
  382.  
  383.  
  384. .playerbuttonbg {
  385. position: absolute;
  386. left: 20px;
  387. top: 20px;
  388. width: 19px;
  389. height: 19px;
  390. background-color: #ffffff;
  391. padding: 10px;
  392. -webkit-border-radius: 40px;
  393. -moz-border-radius: 40px;
  394. border-radius: 40px;
  395. opacity: .4;
  396. filter: alpha(opacity=40);
  397. -moz-opacity: 0.4;
  398. -khtml-opacity: 0.4;
  399. transition: opacity .7s ease-in-out;
  400. -moz-transition: opacity .7s ease-in-out;
  401. -webkit-transition: opacity .7s ease-in-out;
  402. }
  403.  
  404. .playerbuttonbg:hover {
  405. opacity: 1;
  406. filter: alpha(opacity=100);
  407. -moz-opacity: 1;
  408. -khtml-opacity: 1;
  409. }
  410.  
  411. .newplayerbutton {
  412. position: relative;
  413. width: 19px;
  414. height: 19px;
  415. overflow: hidden;
  416. }
  417.  
  418. .playerbuttonhug {
  419. position: absolute;
  420. top: -18px;
  421. left: -7px;
  422. }
  423.  
  424. .tumblr_audio_player {
  425. height: 90px;
  426. width: 270px;
  427. -moz-transform: scale(0.60, 0.60);
  428. -webkit-transform: scale(0.60, 0.60);
  429. -o-transform: scale(0.60, 0.60);
  430. -ms-transform: scale(0.60, 0.60);
  431. transform: scale(0.60, 0.60);
  432. -moz-transform-origin: top left;
  433. -webkit-transform-origin: top left;
  434. -o-transform-origin: top left;
  435. -ms-transform-origin: top left;
  436. transform-origin: top left;
  437. }
  438.  
  439. .audioimgwrapper {
  440. position: absolute;
  441. left: 0px;
  442. top: 0px;
  443. -webkit-border-radius: 40px;
  444. -moz-border-radius: 40px;
  445. border-radius: 40px;
  446. overflow: hidden;
  447. width: 79px;
  448. height: 79px;
  449. }
  450.  
  451. .audioimgwrapper img {
  452. width: 100%;
  453. height: auto;
  454. -webkit-border-radius: 40px;
  455. -moz-border-radius: 40px;
  456. border-radius: 40px;
  457. }
  458.  
  459. .trackdetails {
  460. width: auto;
  461. display:inline-block;
  462. margin-left: 90px;
  463. min-height: 85px;
  464. }
  465.  
  466. .audiowrapper {
  467. position: relative;
  468. display:inline-block;
  469. }
  470.  
  471. .audiotitle {
  472. font-size:48px;
  473. line-height:20px;
  474. font-family:'mademoiselle';
  475. text-shadow:1px 1px #000;
  476. }
  477.  
  478. #asks {
  479. text-align:center;
  480. padding:5px 5px 5px 8px;
  481. border: 3px double {color:borders};
  482. background-color:{color:ask bg};
  483. min-height:50px;
  484. margin-left:5px;
  485. }
  486.  
  487. #askerbg {
  488. height:55px;
  489. width:55px;
  490. color:{color:borders};
  491. float:left;
  492. margin-top:0px;
  493. border-radius: 55px;
  494. }
  495.  
  496. .asker {
  497. margin-bottom:-5px;
  498. margin-left:5px;
  499. font-size:16px;
  500. color:{color:link};
  501. text-align:left;
  502. text-transform:lowercase;
  503. border-bottom:3px double {color:borders};
  504. letter-spacing:1px;
  505. font-style:normal}
  506.  
  507. #answers {
  508. margin-top:10px;}
  509.  
  510. .chat {
  511. margin-bottom:5px;
  512. }
  513.  
  514.  
  515.  
  516. #credit a{
  517. position:fixed;
  518. right:3px;
  519. bottom:3px;
  520. padding:4px;
  521. background:{color:background};
  522. font-size:9px;
  523. color:black;
  524. -moz-transition-duration:1s;
  525. -webkit-transition-duration:1s;
  526. -o-transition-duration:1s;
  527. }
  528.  
  529. #credit a:hover {
  530. opacity:.8;
  531. letter-spacing:0px;
  532. color:{color:nav link text hover};
  533. background:transparent;
  534. -moz-transition-duration:1s;
  535. -webkit-transition-duration:1s;
  536. -o-transition-duration:1s;
  537. }
  538.  
  539.  
  540. </style>
  541. <style type="text/css">{CustomCSS}</style>
  542. </head>
  543.  
  544. <body>
  545.  
  546. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  547.  
  548. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  549.  
  550. <script>
  551.  
  552. (function($){
  553.  
  554. $(document).ready(function(){
  555.  
  556. $("a[title]").style_my_tooltips({
  557.  
  558. tip_follows_cursor:true,
  559.  
  560. tip_delay_time:10,
  561.  
  562. tip_fade_speed:60,
  563.  
  564. attribute:"title"
  565.  
  566. });
  567.  
  568. });
  569.  
  570. })(jQuery);
  571.  
  572. </script>
  573.  
  574. <div id="bg">
  575.  
  576. <div id="photo"></div>
  577.  
  578. <div id="titlebar">
  579. <div id="title1">{text:title}</div>
  580. <div id="title2">{text:subtitle}</div>
  581. </div>
  582.  
  583. <div id="descbox"><div style="text-shadow:1px 1px #000; text-transform:uppercase;font-size:18px;text-align:center; letter-spacing:3px;color:{color:title};">{text:header}</div><hr noshade><div id="description">{Description}</div><div id="pagination">{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">«</a>{/block:PreviousPage} page {CurrentPage} out of {TotalPages} {block:NextPage}<a href="{NextPage}">»</a>{/block:NextPage}{/block:Pagination}</div></div>
  584.  
  585. <div id="navbar">
  586. <div id="links">
  587. <a href="{text:Link 1 URL}">{text:link 1}</a><br>
  588. <a href="{text:Link 2 URL}">{text:link 2}</a><br>
  589. <a href="{text:Link 3 URL}">{text:link 3}</a><br>
  590. <a href="{text:Link 4 URL}">{text:link 4}</a><br>
  591. <a href="{text:Link 5 URL}">{text:link 5}</a>
  592. </div></div>
  593.  
  594. <div id="qbox"><div id="quote">❝{text:quote}❞</div></div>
  595.  
  596. </div>
  597.  
  598.  
  599. <div id="entries">
  600. {block:Posts}
  601. <div id="postbg">
  602. <div id="post">
  603.  
  604. {block:Text}<h1>{title}</h1>{Body}{/block:Text}
  605.  
  606. {block:Link}
  607. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  608. {block:Description}{Description}{/block:Description}
  609. {/block:Link}
  610.  
  611. {block:Quote}<h2>“{Quote}” </h2>
  612. <div style="text-align:right; padding-bottom:5px;">— {Source}</div>{/block:Quote}
  613.  
  614. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  615. {block:Photoset}<center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  616.  
  617. {block:Chat}{block:Title}<h1>{Title}</h1><br>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}<br>
  618.  
  619. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  620.  
  621. {block:Audio}
  622. {block:AudioPlayer}
  623. <div class="audiowrapper">
  624. {block:AlbumArt}
  625. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  626. {/block:AlbumArt}
  627. <div class="playerbuttonbg"><div class="newplayerbutton"><div class="playerbuttonhug">{AudioPlayerWhite}</div></div></div>
  628. <div class="trackdetails">{block:TrackName}<div class="audiotitle">{TrackName}</div>{/block:TrackName}<br/>{block:Artist}<strong>Artist:</strong> {Artist}{/block:Artist}<br/>{block:Album}<strong>Album:</strong> {Album}{/block:Album}<br/><strong>Plays:</strong> {PlayCount}</div></div>
  629. {/block:AudioPlayer}
  630. {block:Caption}{Caption}{/block:Caption}
  631. {/block:Audio}
  632.  
  633. {block:Answer}
  634.  
  635. <div id="asks"><div id="asker img"><img src="{AskerPortraitURL-64}" style="height:50px; width:50px; float:left; margin-top:0px; border-radius: 50px;"></div><div class="asker"> {Asker} asked:</div>
  636. <br>{Question}</div>
  637. <div id="answers">{Answer}</div>
  638. {/block:Answer}
  639.  
  640.  
  641.  
  642. <div id="info">
  643. <center> {block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}
  644. {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}{/block:NoteCount} {block:RebloggedFrom} ● <a href="{ReblogParentURL}">via</a>{block:ContentSource} - <a href="{SourceURL}">source</a>{block:ContentSource}{/block:RebloggedFrom}<br>
  645. {block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:HasTags}</center></div>
  646.  
  647. </div></div>
  648. {/block:Posts}
  649.  
  650. {block:PostNotes}{PostNotes}{/block:PostNotes}
  651.  
  652. </div>
  653.  
  654.  
  655.  
  656. <!----- DO NOT DELETE ---->
  657. <div id="credit"><a href="http://ladyhummelrps.tumblr.com/">ladyhummelrps</a></div>
  658. </body>
  659. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement