API tools faq
paste
Advertisement
themesbygeorgia

Theme #41 Revamp - Penumbra

themesbygeorgia
Oct 6th, 2014
940
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.91 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. <head>
  4.  
  5. <!--Theme #41 Revamp - Penumbra by wonderfullythemes
  6.  
  7. don't touch my credit pls and thanks
  8. -->
  9.  
  10. <title>{Title}</title>
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  13.  
  14. <!--SCRIPT FOR TOOLTIPS-->
  15. <stsss>
  16. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  17. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  18. <script>
  19. (function($){
  20. $(document).ready(function(){
  21. $("a[title]").style_my_tooltips({
  22. tip_follows_cursor:true,
  23. tip_delay_time:200,
  24. tip_fade_speed:300,
  25. attribute:"title"
  26. });
  27. });
  28. })(jQuery);
  29. </script>
  30.  
  31. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  32. <script>
  33. $(document).ready(function(){
  34. $(".what").click(function(){
  35. $(".description").fadeToggle("slow");
  36. $(".rightlinks").fadeOut("slow");
  37. $(".updates").fadeOut("slow");
  38. });
  39. });
  40.  
  41. $(document).ready(function(){
  42. $(".idk").click(function(){
  43. $(".rightlinks").fadeToggle("slow");
  44. $(".description").fadeOut("slow");
  45. $(".updates").fadeOut("slow");
  46. });
  47. });
  48.  
  49. $(document).ready(function(){
  50. $(".whoknows").click(function(){
  51. $(".updates").fadeToggle("slow");
  52. $(".rightlinks").fadeOut("slow");
  53. $(".description").fadeOut("slow");
  54. });
  55. });
  56. </script>
  57.  
  58. <meta name="color:Background" content="#fff" />
  59. <meta name="color:Link" content="#1bcc5c" />
  60. <meta name="color:Hover" content="#444" />
  61. <meta name="color:Text" content="#444" />
  62. <meta name="color:Scrollbar" content="#444" />
  63. <meta name="color:Border" content="#ddd" />
  64. <meta name="color:Chat Bg Odd" content="#ddd" />
  65. <meta name="color:Chat Bg Even" content="#444" />
  66. <meta name="color:Post Background" content="#000" />
  67. <meta name="color:Tooltip Background" content="#fff" />
  68. <meta name="color:Tooltip Text" content="#444" />
  69. <meta name="color:Tooltip Shadow" content="#ddd" />
  70.  
  71. <meta name="image:Background" content="" />
  72. <meta name="image:Sidebar" content="" />
  73.  
  74. <meta name="if:FadedPosts" content="1" />
  75.  
  76. <meta name="text:Updates" content="your updates here" />
  77. <meta name="text:Link1" content="/" />
  78. <meta name="text:Link1 Text" content="Link 1" />
  79. <meta name="text:Link2" content="/" />
  80. <meta name="text:Link2 Text" content="Link 2" />
  81. <meta name="text:Link3" content="/" />
  82. <meta name="text:Link3 Text" content="Link 3" />
  83. <meta name="text:Link4" content="/" />
  84. <meta name="text:Link4 Text" content="Link 4" />
  85. <meta name="text:Link5" content="/" />
  86. <meta name="text:Link5 Text" content="Link 5" />
  87. <meta name="text:Link6" content="/" />
  88. <meta name="text:Link6 Text" content="Link 6" />
  89.  
  90.  
  91. <style type="text/css">
  92.  
  93. ::-webkit-scrollbar-thumb {
  94. height:auto;
  95. background-color:{color:Scrollbar};
  96. }
  97.  
  98. ::-webkit-scrollbar {
  99. height:4px;
  100. width:5px;
  101. padding-right:2px;
  102. background-color:transparent;
  103. }
  104.  
  105. #s-m-t-tooltip {
  106. max-width:200px;
  107. font-family:'calibri';
  108. font-size:11px;
  109. background-color:{color:Tooltip Background};
  110. color:{color:Tooltip Text};
  111. box-shadow:5px 5px 5px {color:Tooltip Shadow};
  112. line-height:15px;
  113. display:none;
  114. position:absolute;
  115. letter-spacing:2px;
  116. text-transform:uppercase;
  117. padding:10px;
  118. margin:15px 0px 0px 15px;
  119. z-index:99999999999999;
  120. }
  121.  
  122. body {
  123. background:{color:Background};
  124. color:{color:Text};
  125. font-family:'corbel';
  126. font-size:13px;
  127. text-decoration:none;
  128. text-transform:none;
  129. margin:0px;
  130. background-image: url({image:Background});
  131. background-attachment:fixed;
  132. background-repeat:no-repeat;
  133. background-size:cover;
  134. }
  135.  
  136. a {
  137. color:{color:Link};
  138. text-decoration:none;
  139. border-bottom:1px solid transparent;
  140. -moz-transition-duration:0.7s;
  141. -webkit-transition-duration:0.7s;
  142. -o-transition-duration:0.7s;
  143. }
  144.  
  145. a:hover {
  146. border-bottom:1px solid {color:Link};
  147. -moz-transition-duration:0.7s;
  148. -webkit-transition-duration:0.7s;
  149. -o-transition-duration:0.7s;
  150. }
  151.  
  152. h2 {
  153. font-family:arial black;
  154. color:{color:Link};
  155. }
  156.  
  157. h2 a {
  158. color:{color:Link};
  159. }
  160.  
  161. li {
  162. list-style:square;
  163. }
  164.  
  165. blockquote {
  166. border-left:2px solid {color:Text};
  167. padding-left:5px;
  168. }
  169.  
  170. img, blockquote, li, h2 {
  171. max-width:100%;
  172. }
  173.  
  174. {block:IfFadedPosts}
  175. img{
  176. -webkit-filter: grayscale(100%);
  177. -webkit-transition-duration: 0.8s;
  178. -moz-transition-duration: 0.8s;
  179. -o-transition-duration: 0.8s;
  180. -ms-transition-duration: 0.8s;
  181. }
  182.  
  183. img:hover{
  184. -webkit-filter: grayscale(0%);
  185. -webkit-transition-duration: 0.8s;
  186. -moz-transition-duration: 0.8s;
  187. -o-transition-duration: 0.8s;
  188. -ms-transition-duration: 0.8s;
  189. z-index: 2px;
  190. }
  191.  
  192. .html_photoset {
  193. -webkit-filter: grayscale(100%);
  194. -webkit-transition-duration: 0.8s;
  195. -moz-transition-duration: 0.8s;
  196. -o-transition-duration: 0.8s;
  197. -ms-transition-duration: 0.8s;
  198. }
  199.  
  200. .html_photoset:hover{
  201. -webkit-filter: grayscale(0%);
  202. -webkit-transition-duration: 0.8s;
  203. -moz-transition-duration: 0.8s;
  204. -o-transition-duration: 0.8s;
  205. -ms-transition-duration: 0.8s;
  206. z-index: 2px;
  207. }
  208. {/block:IfFadedPosts}
  209.  
  210. #entries {
  211. background: rgba(0,0,0,0.5);
  212. left:500px;
  213. width:345px;
  214. height:auto;
  215. position:relative;
  216. float:left;
  217. padding-right:5px;
  218. border-left:1px solid {color:Border};
  219. border-right:1px solid {color:Border};
  220. -webkit-transition-duration: 0.8s;
  221. -moz-transition-duration: 0.8s;
  222. -o-transition-duration: 0.8s;
  223. -ms-transition-duration: 0.8s;
  224. }
  225.  
  226. #entries:hover {
  227. background-color:{color:Post Background};
  228. -webkit-transition-duration: 0.8s;
  229. -moz-transition-duration: 0.8s;
  230. -o-transition-duration: 0.8s;
  231. -ms-transition-duration: 0.8s;
  232. }
  233.  
  234. .post {
  235. margin-top:30px;
  236. width:250px;
  237. padding:50px;
  238. margin-bottom:100px;
  239. border-top:1px solid transparent;
  240. border-bottom:1px solid transparent;
  241. -webkit-transition-duration: 0.8s;
  242. -moz-transition-duration: 0.8s;
  243. -o-transition-duration: 0.8s;
  244. -ms-transition-duration: 0.8s;
  245. }
  246.  
  247. .post:hover {
  248. border-top:1px solid {color:Border};
  249. border-bottom:1px solid {color:Border};
  250. -webkit-transition-duration: 0.8s;
  251. -moz-transition-duration: 0.8s;
  252. -o-transition-duration: 0.8s;
  253. -ms-transition-duration: 0.8s;
  254. }
  255.  
  256. #rightsidebar {
  257. left:870px;
  258. position:fixed;
  259. height:100%;
  260. border-left:7px solid {color:Link};
  261. }
  262.  
  263. .what:hover {
  264. cursor:crosshair;
  265. }
  266.  
  267. .description {
  268. font-size:10px;
  269. text-transform:uppercase;
  270. border:1px solid {color:Border};
  271. padding:10px;
  272. width:96px;
  273. height:100px;
  274. margin-left:15px;
  275. margin-top:60px;
  276. position:absolute;
  277. text-align:justify;
  278. overflow-y:scroll;
  279. z-index:10;
  280. display:none;
  281. }
  282.  
  283. .idk:hover {
  284. cursor:crosshair;
  285. }
  286.  
  287. .rightlinks {
  288. font-size:10px;
  289. text-transform:uppercase;
  290. width:116px;
  291. height:117px;
  292. margin-left:15px;
  293. margin-top:60px;
  294. padding-top:3px;
  295. position:absolute;
  296. text-align:center;
  297. border:1px solid white;
  298. z-index:3;
  299. display:none;
  300. }
  301.  
  302. .rightlinks a {
  303. padding:3px;
  304. display:block;
  305. color:{color:Link};
  306. border-bottom:none;
  307. }
  308.  
  309. .rightlinks a:hover {
  310. background-color:{color:Link};
  311. color:{color:Text};
  312. border-bottom:none;
  313. }
  314.  
  315. .whoknows:hover {
  316. cursor:crosshair;
  317. }
  318.  
  319. .updates {
  320. font-size:10px;
  321. text-transform:uppercase;
  322. border:1px solid {color:Border};
  323. padding:10px;
  324. width:96px;
  325. height:100px;
  326. margin-left:15px;
  327. margin-top:60px;
  328. position:absolute;
  329. text-align:justify;
  330. overflow-y:scroll;
  331. z-index:10;
  332. display:none;
  333. }
  334.  
  335. .sidebarpic {
  336. width:auto;
  337. height:auto;
  338. }
  339.  
  340. .sidebarpic img {
  341. width:145px;
  342. height:100%;
  343. }
  344.  
  345. /*--SIDEBAR--*/
  346.  
  347. #sidebar {
  348. width:130px;
  349. height:120px;
  350. position:fixed;
  351. bottom:20px;
  352. left:350px;
  353. background:transparent;
  354. border-right:5px solid {color:Link};
  355. }
  356.  
  357. .title {
  358. font-family:'courier new';
  359. float:right;
  360. letter-spacing:2px;
  361. text-align:right;
  362. text-transform:uppercase;
  363. font-size:13px;
  364. line-height:30px;
  365. margin-right:3px;
  366. }
  367.  
  368. .title a {
  369. border-bottom:none;
  370. }
  371.  
  372. .title a:hover {
  373. letter-spacing:6px;
  374. border-bottom:none;
  375. }
  376.  
  377. .links {
  378. font-size:10px;
  379. position:relative;
  380. font-style:none;
  381. text-align:right;
  382. text-decoration:none;
  383. margin-top:30px;
  384. margin-right:2px;
  385. letter-spacing:1px;
  386. text-transform:uppercase;
  387. }
  388.  
  389. .links a {
  390. text-align:center;
  391. padding:3px;
  392. color:{color:Link};
  393. border:1px solid transparent;
  394. }
  395.  
  396. .links a:hover {
  397. border:1px solid {color:Link};
  398. }
  399.  
  400. #pagination {
  401. margin-right:8px;
  402. margin-top:5px;
  403. font-size:10px;
  404. text-align:right;
  405. text-transform:uppercase;
  406. }
  407.  
  408. /*--POST TYPES--*/
  409. .question {
  410. padding-bottom:30px;
  411. border-bottom:1px solid {color:Border};
  412. }
  413.  
  414. .quote {
  415. font-size:16px;
  416. }
  417.  
  418.  
  419. .chat li {
  420. list-style:none;
  421. }
  422.  
  423. .line_odd {
  424. color:{color:Chat Bg Odd};
  425. font-size:11px;
  426. text-transform:uppercase;
  427. }
  428.  
  429. .line_even {
  430. font-size:11px;
  431. color:{color:Chat Bg Even};
  432. text-transform:uppercase;
  433. }
  434.  
  435. .playerbuttonbg {
  436. position: absolute;
  437. left: 20px;
  438. top: 20px;
  439. width: 19px;
  440. height: 19px;
  441. background-color: #fff;
  442. padding: 10px;
  443. opacity: .4;
  444. filter: alpha(opacity=40);
  445. -moz-opacity: 0.4;
  446. -khtml-opacity: 0.4;
  447. transition: opacity .7s ease-in-out;
  448. -moz-transition: opacity .7s ease-in-out;
  449. -webkit-transition: opacity .7s ease-in-out;
  450. }
  451.  
  452. .playerbuttonbg:hover {
  453. opacity: 1;
  454. filter: alpha(opacity=100);
  455. -moz-opacity: 1;
  456. -khtml-opacity: 1;
  457. }
  458.  
  459. .newplayerbutton {
  460. position: relative;
  461. width: 19px;
  462. height: 19px;
  463. overflow: hidden;
  464. }
  465.  
  466. .playerbuttonhug {
  467. position: absolute;
  468. top: -18px;
  469. left: -7px;
  470. }
  471.  
  472. .tumblr_audio_player {
  473. height: 90px;
  474. width: 270px;
  475. -moz-transform: scale(0.60, 0.60);
  476. -webkit-transform: scale(0.60, 0.60);
  477. -o-transform: scale(0.60, 0.60);
  478. -ms-transform: scale(0.60, 0.60);
  479. transform: scale(0.60, 0.60);
  480. -moz-transform-origin: top left;
  481. -webkit-transform-origin: top left;
  482. -o-transform-origin: top left;
  483. -ms-transform-origin: top left;
  484. transform-origin: top left;
  485. }
  486.  
  487. .audioimgwrapper {
  488. position: absolute;
  489. left: 0px;
  490. top: 0px;
  491. overflow: hidden;
  492. width: 79px;
  493. height: 79px;
  494. }
  495.  
  496. .audioimgwrapper img {
  497. width: 100%;
  498. height: auto;
  499. }
  500.  
  501. .trackdetails {
  502. width: auto;
  503. display:inline-block;
  504. margin-left: 90px;
  505. min-height: 85px;
  506. }
  507.  
  508. .audiowrapper {
  509. position: relative;
  510. display:inline-block;
  511. }
  512.  
  513. /*--INFO AND TAGS--*/
  514. #footer {
  515. font-family:'calibri';
  516. text-transform:uppercase;
  517. width:250px;
  518. font-size:10px;
  519. border-top:1px solid {color:Border};
  520. margin-top:5px;
  521. }
  522.  
  523. #footer a {
  524. color:{color:Link};
  525. }
  526.  
  527. #footer a:hover {
  528. background-color:transparent;
  529. }
  530.  
  531. /*--CREDIT--*/
  532. #spectrum {
  533. bottom:9px;
  534. right:7px;
  535. font-size:8px;
  536. font-family:'calibri';
  537. letter-spacing:1px;
  538. text-transform:uppercase;
  539. position:fixed;
  540. }
  541.  
  542. {CustomCSS}</style></head><body>
  543.  
  544. <div id="rightsidebar">
  545.  
  546. <div class="description">{Description}</div>
  547. <div class="rightlinks">
  548. <a href="{text:Link1}">{text:Link1 Text}</a>
  549. <a href="{text:Link2}">{text:Link2 Text}</a>
  550. <a href="{text:Link3}">{text:Link3 Text}</a>
  551. <a href="{text:Link4}">{text:Link4 Text}</a>
  552. <a href="{text:Link5}">{text:Link5 Text}</a>
  553. <a href="{text:Link6}">{text:Link6 Text}</a>
  554. </div>
  555. <div class="updates">{text:Updates}</div>
  556. <div class="sidebarpic"><img src="{image:Sidebar}" /></div>
  557.  
  558. </div>
  559.  
  560. <div id="sidebar">
  561. <br><br>
  562. <div class="title"><a href="/" title="refresh">{Title}</a></div>
  563.  
  564. <div class="links">
  565. <a class="what" title="description">I</a>
  566. <a class="idk" title="links">II</a>
  567. <a class="whoknows" title="updates">III</a>
  568. </div>
  569.  
  570. <div id="pagination">
  571. {block:Pagination}
  572. {block:PreviousPage}<a href="{PreviousPage}">back</a>{/block:PreviousPage} &nbsp;-&nbsp;
  573. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  574. {/block:Pagination}
  575. </div>
  576. </div>
  577.  
  578. <div id="entries">{block:Posts}<div class="post">
  579.  
  580. {block:Text}
  581. {block:Title}<h2>{Title}</h2>{/block:Title}
  582. {Body}
  583. {/block:Text}
  584.  
  585. {block:Answer}
  586. <div class="question"><span style="text-transform:uppercase;font-size:11px">{Asker} asked:</span> {Question}</div>
  587. <br>{Answer}<br>
  588. {/block:Answer}
  589.  
  590. {block:Quote}
  591. <span class="quote"><div style="font-size:20px;color:{color:Link};font-weight:bold;border-bottom:3px solid {color:Text};font-style:normal;text-align:center;float:center;width:100%;margin-bottom:10px">&#147;</div>
  592. {Quote}
  593. <div style="font-size:20px;color:{color:Link};font-weight:bold;border-top:3px solid {color:Text};font-style:normal;text-align:center;float:center;width:100%;margin-top:10px;padding-top:5px;line-height:30px;">&#148; </div></span>
  594. {block:Source}<div class="font-size:18px"> &mdash;{Source}</div>{/block:Source}
  595. {/block:Quote}
  596.  
  597. {block:Link}
  598. <h2><a href="{URL}">{Name}</a></h2>
  599. {block:Description}{Description}{/block:Description}
  600. {/block:Link}
  601.  
  602. {block:Chat}
  603. {block:Title}<h2>{Title}</h2>{/block:Title}
  604. {block:Lines}<span class="chat">
  605. <li><span class="line_{Alt}">{block:Label}<span class="label">{Label}</span></span>{/block:Label}</span> {Line}</li>
  606. {/block:Lines}
  607.  
  608.  
  609. {/block:Chat}
  610.  
  611. {block:Photo}
  612. {LinkOpenTag}<img src="{PhotoURL-250}" alt="{PhotoAlt}">{LinkCloseTag}
  613. {block:Caption}{Caption}{/block:Caption}
  614. {/block:Photo}
  615.  
  616. {block:Photoset}
  617. {Photoset-250}
  618. {block:Caption}{Caption}{/block:Caption}
  619. {/block:Photoset}
  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.  
  628. <div class="playerbuttonbg">
  629. <div class="newplayerbutton">
  630. <div class="playerbuttonhug">
  631.  
  632. {AudioPlayerWhite}
  633.  
  634. </div>
  635. </div>
  636. </div>
  637.  
  638. <div class="trackdetails">
  639.  
  640. {block:TrackName}{TrackName}</a><br>{/block:TrackName}
  641. {block:Artist}Artist: {Artist}<br>{/block:Artist}
  642. {block:Album}Album: {Album}<br>{/block:Album}
  643. {PlayCountWithLabel}
  644.  
  645. </div>
  646. </div>
  647. {/block:AudioPlayer}
  648.  
  649. {block:Caption}{Caption}{/block:Caption}
  650. {/block:Audio}
  651.  
  652. {block:Video}
  653. {Video-250}
  654. {block:Caption}{Caption}{/block:Caption}
  655. {/block:Video}
  656.  
  657. <div id="footer">
  658. {block:Date}<a href="{Permalink}">{ShortMonth} {DayOfMonthWithZero} {Year}</a>
  659. {block:NoteCount} | <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  660. {block:RebloggedFrom} | <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{/block:RebloggedFrom}
  661. {block:RebloggedFrom} | <a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:RebloggedFrom}
  662. {block:HasTags}
  663. <div style="text-transform:none">{block:Tags}#<a href="{URL}">{Tag}</a>&nbsp;{/block:Tags}</div>{/block:HasTags}
  664. {/block:Date}</div>
  665.  
  666. </div>{/block:Posts}
  667.  
  668. {block:PostNotes}{PostNotes}{/block:PostNotes}
  669. </div>
  670.  
  671. <div id="spectrum">
  672. <a href="http://wonderfullythemes.tumblr.com" title="wonderfullythemes">theme</a>
  673. </div>
  674.  
  675.  
  676.  
  677.  
  678. </body>
  679. </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!