Advertisement
lydsiamartin

Theme #15: Do You Wanna Build a Snowman?

Feb 23rd, 2014
123
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.09 KB | None | 0 0
  1. <!--
  2. Base code made by tomkirk.tumblr.com
  3. Theme #15 by Badwolfthemes. Please, don't steal this one. I'll send Marshmallow after you if you do.
  4. -->
  5. <link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'>
  6. <link href='http://fonts.googleapis.com/css?family=Ropa+Sans|Tulpen+One|Elsie' rel='stylesheet' type='text/css'>
  7.  
  8.  
  9. <html>
  10. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  11. <html xmlns="http://www.w3.org/1999/xhtml">
  12.  
  13. <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  14. <script>
  15. $(function(){ // document ready
  16.  
  17. var stickyTop = $('.links').offset().top; // returns number
  18.  
  19. $(window).scroll(function(){ // scroll event
  20.  
  21. var windowTop = $(window).scrollTop(); // returns number
  22.  
  23. if (stickyTop < windowTop) {
  24. $('.links').css({ position: 'fixed', top: 0 });
  25. }
  26. else {
  27. $('.links').css('position','static');
  28. }
  29.  
  30. });
  31.  
  32. });
  33. </script>
  34. <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  35.  
  36. <head>
  37.  
  38. <script type="text/javascript"
  39. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  40. <script>
  41. $(document).ready(function() {
  42. //
  43. $('a.poplight[href^=#]').click(function() {
  44. var popID = $(this).attr('rel'); //Get Popup Name
  45. var popURL = $(this).attr('href'); //Get Popup href to define size
  46. var query= popURL.split('?');
  47. var dim= query[1].split('&');
  48. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  49. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="https://www.padmapper.com/images/closeButton1.png" class="btn_close" title="Close" alt="Close" /></a>');
  50. var popMargTop = ($('#' + popID).height() + 80) / 2;
  51. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  52. //Apply Margin to Popup
  53. $('#' + popID).css({
  54. 'margin-top' : -popMargTop,
  55. 'margin-left' : -popMargLeft
  56. });
  57. $('body').append('<div id="fade"></div>');
  58. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  59. return false;
  60. });
  61. $('a.close, #fade').live('click', function() {
  62. $('#fade , .popup_block').fadeOut(function() {
  63. $('#fade, a.close').remove(); //fade them both out
  64. });
  65. return false;
  66. });
  67. });
  68. </script>
  69.  
  70. <!--Default Variables-->
  71. <!--Colors-->
  72. <meta name="color:Background" content="#ffffff"/>
  73. <meta name="color:Text" content="#828282"/>
  74. <meta name="color:Link" content="#8ea089"/>
  75. <meta name="color:Hover" content="#e8e8e8"/>
  76. <meta name="color:Post" content="#FAFAFA"/>
  77. <meta name="color:Border" content="#4d4949"/>
  78. <meta name="color:Title" content="#ababab"/>
  79. <meta name="color:Header" content="#ababab"/>
  80. <meta name="color:Column" content="#ababab"/>
  81. <meta name="color:Nav" content="#4d4949"/>
  82. <meta name="color:Navhover" content="#4d4949"/>
  83. <meta name="color:Navbg" content="#ababab"/>
  84. <meta name="color:Pagination" content="#ababab"/>
  85. <meta name="color:Scrollbar" content="#ababab"/>
  86. <meta name="color:Ask bg" content="#ababab"/>
  87. <meta name="color:Infobg" content="#ababab"/>
  88. <meta name="color:Notes" content="#ababab"/>
  89. <!--Images-->
  90. <meta name="image:Background" content""/>
  91. <meta name="image:Header" content""/>
  92. <meta name="image:Column1" content""/>
  93. <meta name="image:Column2" content""/>
  94.  
  95. <!--Options-->
  96. <meta name="text:Link One" content="/"/>
  97. <meta name="text:Link One Name" content=""/>
  98. <meta name="text:Link Two" content="/"/>
  99. <meta name="text:Link Two Name" content=""/>
  100. <meta name="text:Link Three" content="/"/>
  101. <meta name="text:Link Three Name" content=""/>
  102. <meta name="text:Link Four" content="/"/>
  103. <meta name="text:Link Four Name" content=""/>
  104. <meta name="text:ask text" content="asked"/>
  105.  
  106. {block:Description}
  107. <meta name="description" content="{MetaDescription}" />{/block:Description}
  108. <title>
  109. {block:PostSummary}
  110. {PostSummary} - {/block:PostSummary}{Title}</title>
  111.  
  112.  
  113. <style type="text/css">
  114. @font-face{font-family:WebSymbolsRegular; src:url(http://static.tumblr.com/xgofl0y/yqZm3m5if/websymbols-regular-webfont.ttf);}
  115. @font-face{font-family:Sosa; src:url(http://static.tumblr.com/imnherg/QIamo364v/sosa.ttf);}
  116.  
  117. ::-webkit-scrollbar-thumb:vertical {
  118. background: {color:scrollbar};
  119. height:40px;
  120. border:5px solid {color:column};
  121. z-index:9999999999999;
  122. }
  123.  
  124. ::-webkit-scrollbar {
  125. background: {color:scrollbar};
  126. height:10px;
  127. width:15px;
  128. border: 7px solid{color:column};
  129. z-index:9999999999999;
  130. }
  131.  
  132. body{
  133. background-color: {color:Background};
  134. background-image: url({image:background});
  135. background-attachment: fixed;
  136. background-repeat: repeat;
  137. background-position: center;
  138. font-family:'cambria';
  139. font-size:11px;
  140. line-height:12px;
  141. color:{color:Text};
  142.  
  143. }
  144.  
  145. #post{
  146. padding:25px;
  147. background-color:{color:post};
  148. width:500px;
  149. margin-left:35px;
  150. margin-top:25px;
  151. margin-bottom:15px;
  152. border:5px solid;
  153. border-color:{color:border};
  154. -moz-box-shadow:5px 5px 5px rgba(0,0,0,0.1);
  155. -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.1);
  156. box-shadow:5px 5px 5px rgba(0,0,0,0.1);
  157. }
  158.  
  159. a:link, a:active, a:visited{
  160. color: {color:Link};
  161. text-decoration:none;
  162. -moz-transition: all 0.5s ease-out;
  163. transition: all 0.5s ease-out;
  164. }
  165.  
  166. a:hover{
  167. color:{color:hover};
  168. -moz-transition: all 0.5s ease-out;
  169. transition: all 0.5s ease-out;}
  170.  
  171. #container {
  172. margin:auto;
  173. width:700px;
  174. margin-top:0px;
  175. }
  176.  
  177.  
  178. #permalink{
  179. position:relative;
  180. margin-top:5px;
  181. padding:2px;
  182. font-size:8px;
  183. text-transform:uppercase;
  184. }
  185.  
  186. .tag {
  187. background-color:#000000;
  188. height:20px;
  189. width:500px;
  190. }
  191.  
  192. #column1 {
  193. height:155%;
  194. margin-left:-10px;
  195. position:fixed;
  196. margin-top:-330px;
  197. width:175px;
  198. background: {color:column};
  199. background-image: url({image:column1});
  200. z-index:999;
  201. -moz-box-shadow:5px 5px 5px rgba(0,0,0,0.2);
  202. -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.2);
  203. box-shadow:5px 5px 5px rgba(0,0,0,0.2);
  204. }
  205. #column2 {
  206. height:155%;
  207. right:-10px;
  208. position:fixed;
  209. margin-top:-330px;
  210. width:175px;
  211. z-index:999;
  212. background: {color:column};
  213. background-image: url({image:column2});
  214. -moz-box-shadow:-5px -5px -5px rgba(0,0,0,0.2);
  215. -webkit-box-shadow:-5px- 5px -5px rgba(0,0,0,0.2);
  216. box-shadow:-5px -5px 3px rgba(0,0,0,0.2);
  217.  
  218. }
  219.  
  220. #topbar {
  221. text-align:center;
  222. width:auto;
  223. height:300px;
  224. position:static;
  225. margin-left:0px;
  226. margin-top:-10px;
  227. background: {color:header};
  228. background-image:url({image:Header});
  229. background-repeat: repeat;
  230. background-position: center;
  231. z-index:1;
  232. -moz-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
  233. -webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);
  234. box-shadow:5px 5px 5px rgba(0,0,0,0.3);
  235. padding:4px;
  236. }
  237.  
  238.  
  239. .blogtitle{
  240. font-size:20px;
  241. line-height:20px;
  242. margin-top:274px;
  243.  
  244. }
  245.  
  246. .blogtitle a{
  247. font-family: 'Elsie', serif;
  248. font-size:35px;
  249. letter-spacing:5px;
  250. color: {color:title};
  251. text-transform:uppercase;
  252. -moz-transition: all 0.5s ease-out;
  253. transition: all 0.5s ease-out;
  254.  
  255. }
  256.  
  257. .blogtitle a:hover{
  258. font-family: 'Elsie', serif;
  259. font-size:35px;
  260. letter-spacing:5px;
  261. color: {color:title};
  262. text-transform:uppercase;
  263. -moz-transition: all 0.5s ease-out;
  264. transition: all 0.5s ease-out;
  265. }
  266.  
  267. .posttitle{
  268. font-size: 18px;
  269. line-height: 20px;
  270.  
  271. }
  272.  
  273. .links {
  274. margin-top:-9px;
  275. font-size:10px;
  276. text-transform:uppercase;
  277. text-align:center;
  278. position:relative;
  279. letter-spacing:2px;
  280. line-height:300%;
  281. height:30px;
  282. margin-left:-5px;
  283. width:100%;
  284. background-color:{color:navbg};
  285. z-index:999;
  286. }
  287.  
  288. .links a{
  289. padding-top:10px;
  290. padding-left:6px;
  291. padding-right:6px;
  292. color:{color:nav};
  293. font-family: 'Cardo', serif;
  294. letter-spacing:1px;
  295. text-decoration:none;
  296. -moz-transition-duration:1s;
  297. -webkit-transition-duration:1s;
  298. -o-transition-duration:1s;
  299. }
  300.  
  301. .links a:hover{
  302. color:{color:navhover};
  303. letter-spacing:5px;
  304. -moz-transition-duration:1s;
  305. -webkit-transition-duration:1s;
  306. -o-transition-duration:1s;
  307. }
  308.  
  309. #pagination {
  310. margin-top:200px;
  311. z-index:9999;
  312. margin-left:60px;
  313. position:fixed;
  314. }
  315.  
  316. #pagination a{
  317. font-size:200px;
  318. font-family:"Elsie";
  319. color:{color:Pagination};
  320. -moz-transition: all 0.5s ease-out;
  321. transition: all 0.5s ease-out;
  322. }
  323.  
  324. #pagination a:hover{
  325. text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;
  326. color:{color:Pagination};
  327. -moz-transition: all 0.5s ease-out;
  328. transition: all 0.5s ease-out;}
  329. }
  330.  
  331.  
  332. #simg img{
  333. width:300px;
  334. height:200px;
  335. margin-top:60px;
  336. border-top:3px solid #fff;
  337. padding-bottom:-10px;
  338. opacity:1;
  339. }
  340.  
  341.  
  342.  
  343. .caption {
  344. width:500px;
  345. text-align:justify;
  346. line-height:120%;
  347. }
  348.  
  349. .ask {
  350. padding:10px;
  351. text-align:left;
  352. color:{color:text};
  353. background-color:{color:ask bg};
  354. -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
  355. }
  356.  
  357. .ans {
  358. text-align:left;
  359. padding:10px;
  360. color:{color:text};
  361. }
  362.  
  363. .audio {
  364. width:500px;
  365. padding-bottom:10px;
  366. }
  367.  
  368. .albumart {
  369. float:left;
  370. padding:0px 10px 10px 0px;
  371. }
  372.  
  373. .albumart img {
  374. width:45px;
  375. height:45px;
  376. }
  377.  
  378. .playercontainer {
  379. text-align:left;
  380. padding:10px;
  381. background-color:#ffffff;
  382. width:480px;
  383. }
  384.  
  385. .audioinfo {
  386. padding:10px;
  387. color:{color:text};
  388. }
  389.  
  390. #postinfo {
  391. width:490px;
  392. padding:5px;
  393. font-size:7px;
  394. color:{color:notes};
  395. text-transform:uppercase;
  396. font-style:normal;
  397. font-family:cambria;
  398. background-color:{color:infobg};
  399. letter-spacing:2px;
  400. text-align:left;
  401. -moz-transition-duration:0.5s;
  402. -webkit-transition-duration:0.5s;
  403. -o-transition-duration:0.5s;
  404. }
  405.  
  406. #postinfo a {
  407. color:{color:notes};
  408. text-align:center;
  409. font-style:normal;
  410. text-transform:uppercase;
  411. font-size:8px;
  412. font-family:cambria;
  413. }
  414.  
  415. #postinfo a:hover {
  416. color:{color:hover};
  417. }
  418.  
  419. .note {
  420. text-transform:uppercase;
  421. font-style:normal;
  422. letter-spacing:0px;
  423. font-size: 9px;
  424. text-align:left;
  425. line-height:90%;
  426. margin-left:-40px;
  427. }
  428.  
  429. .note li {
  430. list-style-type:none;
  431. border-bottom:1px solid {color:border};
  432. padding:10px 25px 10px 25px;
  433. text-align:left;
  434. margin:0px;
  435. -moz-transition-duration:0.5s;
  436. -webkit-transition-duration:0.5s;
  437. -o-transition-duration:0.5s;
  438. }
  439.  
  440. .tags {
  441. font-style:normal;
  442. width:500px;
  443. text-transform:uppercase;
  444. font-style:normal;
  445. color:{color:tags};
  446. letter-spacing:2px;
  447. line-height:120%;
  448. font-size:8px;
  449. text-align:left;
  450. padding:2px;
  451. -moz-transition-duration:0.5s;
  452. -webkit-transition-duration:0.5s;
  453. -o-transition-duration:0.5s;
  454. }
  455.  
  456. .tags a {
  457. color:{color:tags};
  458. letter-spacing:1px;
  459. padding:1px;
  460. }
  461.  
  462. .tags a:hover {
  463. color:{color:link};
  464. }
  465.  
  466. ul.chat, .chat ol, .chat li {
  467. list-style:none;
  468. margin:0px;
  469. padding:2px;
  470. }
  471.  
  472. .label {
  473. text-decoration:none;
  474. font-weight:700;
  475. background-color:{color:post};
  476. margin-right:5px;
  477. }
  478.  
  479.  
  480. #credit {position:fixed;
  481. font-size:10px;
  482. font-weight:normal;
  483. line-height:150%;
  484. font-family:calibri;
  485. letter-spacing:0px;
  486. right:10px;
  487. bottom:10px;
  488. text-transform:uppercase;
  489. text-align:center;
  490. z-index:999;}
  491.  
  492.  
  493. #credit a {
  494. padding:3px;
  495. color:{color:text}
  496. -moz-transition-duration:0.5s;
  497. -webkit-transition-duration:0.5s;
  498. -o-transition-duration:0.5s; }
  499.  
  500.  
  501.  
  502.  
  503. {CustomCSS}
  504.  
  505. #fade { /*--Transparent background layer--*/
  506. display: none; /*--hidden by default--*/
  507. background: #000;
  508. position: fixed; left: 0; top: 0;
  509. width: 100%; height: 100%;
  510. opacity: .80;
  511. z-index: 9999;
  512. }
  513. .popup_block{
  514. display: none; /*--hidden by default--*/
  515. background: #fff;
  516. padding: 20px;
  517. border: 20px solid #ddd;
  518. float: left;
  519. font-size: 1.2em;
  520. position: fixed;
  521. top: 50%; left: 50%;
  522. z-index: 99999;
  523. /*--CSS3 Box Shadows--*/
  524. -webkit-box-shadow: 0px 0px 20px #000;
  525. -moz-box-shadow: 0px 0px 20px #000;
  526. box-shadow: 0px 0px 20px #000;
  527. /*--CSS3 Rounded Corners--*/
  528. -webkit-border-radius: 0px;
  529. -moz-border-radius: 0px;
  530. border-radius: 0px;
  531. }
  532. img.btn_close {
  533. float: right;
  534. margin: -5px -5px 0 0;
  535. }
  536. /*--Making IE6 Understand Fixed Positioning--*/
  537. *html #fade {
  538. position: absolute;
  539. }
  540. *html .popup_block {
  541. position: absolute;
  542. }
  543.  
  544. </style>
  545.  
  546. <link rel="shortcut icon" href="{Favicon}">
  547. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" /><meta name="viewport" content="width=820" />
  548.  
  549. </head>
  550. <body>
  551.  
  552. <center><div id="topbar">
  553. <div class="blogtitle"><a href="/">{Title}</a></div></div>
  554. <div class="links">
  555. <a href="/">refresh</a>
  556. <a href="/ask">message</a>
  557. <a href="{text:Link One}">{text:Link One Name}</a>
  558. <a href="{text:link two}">{text:link two name}</a>
  559. <a href="{text:link three}">{text:link three name}</a>
  560. <a href="{text:link four}">{text:link four name}</a>
  561. <a href="#?w=500" rel="03" class="poplight">More</a>
  562.  
  563.  
  564. </div>
  565. </center>
  566. <div id="column1">{block:pagination} <div id="pagination">{block:previouspage}<a href="{PreviousPage}">«</a>{/block:previouspage}</div>{/block:pagination}</div>
  567. <div id="column2">{block:pagination}<div id="pagination">{block:nextpage}<a href="{NextPage}">»</a>{/block:nextpage}</div>{/block:pagination}</div>
  568.  
  569. </div>
  570.  
  571.  
  572.  
  573.  
  574.  
  575. <br>
  576.  
  577. <div id="container">
  578.  
  579. {block:Posts}
  580.  
  581. <div id="post">
  582.  
  583. {block:Text}{block:Title}<h2>{Title}</h2>{/block:Title}{Body}{/block:Text}
  584.  
  585. {block:Quote}<h2>“{Quote}”</h2><h1>{Source}</h1>{/block:Quote}
  586.  
  587. {block:Link}<a href="{URL}"><h2>{Name}</h2></a>
  588. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  589.  
  590. {block:Photo}<center><img src="{PhotoURL-500}"/></center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  591.  
  592. {block:Photoset}<center>{Photoset-500}</center>
  593. {block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  594.  
  595. {block:Chat}<ul class="chat">{block:Title}<h2>{Title}</h2>{/block:Title}{block:Lines}<li>{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
  596.  
  597. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  598.  
  599. {block:Answer}<div class="ask">{Asker} {text:ask text}: {Question}</div><div class="ans">{Answer}</div>{/block:answer}
  600.  
  601. {block:Audio}<div class="audio">{block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"/></div>{/block:AlbumArt}
  602. <div class="audioinfo">{block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName}{block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist}
  603. {/block:ExternalAudio}<b>Played:</b> {PlayCount} times</div>
  604. <br><div class="playercontainer">{AudioPlayerWhite}</div></div>
  605. {block:Caption}{Caption}{/block:Caption}<br>{/block:Audio}
  606.  
  607.  
  608.  
  609.  
  610. {block:Date}<div id="postinfo"> {block:NoteCount} <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} Posted: <a href="{Permalink}"> {TimeAgo}</a>{block:RebloggedFrom} via: <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  611. {block:ContentSource} source: <a href="{SourceURL}">{SourceLink}</a>{/block:ContentSource}
  612. </div>{/block:Date}
  613. {block:HasTags}
  614. <div class="tags">
  615. {block:Tags}<a href="{TagURL}">#&nbsp;{Tag}</a>{/block:Tags}</div>
  616. {/block:HasTags}
  617. <div class="note">
  618. {block:PostNotes}{PostNotes}{/block:PostNotes}
  619. </div>
  620. </div>
  621.  
  622.  
  623. {/block:Posts}
  624.  
  625. <div id="credit"><a href="http://badwolfthemes.tumblr.com">B A D W O L F</a>
  626. </div>
  627.  
  628. <div id="03" class="popup_block">
  629.  
  630. {Description}
  631.  
  632. </div>
  633. </body>
  634. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement