API tools faq
paste
chissy_

HPLS 01 (HAPILYS @ TUMBLR )

chissy_
Jan 30th, 2014
155
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.52 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--[if lt IE 7]><html class="lt-ie10 lt-ie9 lt-ie8 lt-ie7"><![endif]-->
  3. <!--[if IE 7]><html class="lt-ie10 lt-ie9 lt-ie8"><![endif]-->
  4. <!--[if IE 8]><html class="lt-ie10 lt-ie9"> <![endif]-->
  5. <!--[if IE 9]><html class="lt-ie10"> <![endif]-->
  6. <!--[if gt IE 9]><!--> <html> <!--<![endif]-->
  7.  
  8. <!--
  9.  
  10. (hapilys.tumblr.com)
  11.  
  12. don't remove the credit
  13.  
  14. don't copy dont fu#$%&/copy:-)
  15.  
  16. message me with any problems
  17.  
  18.  
  19. -->
  20.  
  21. <script type="text/javascript"
  22. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  23.  
  24. <script>
  25.  
  26.  
  27.  
  28. $(document).ready(function() {
  29.  
  30. //
  31.  
  32.  
  33.  
  34. //When you click on a link with class of poplight and the href starts with a #
  35.  
  36. $('a.poplight[href^=#]').click(function() {
  37.  
  38. var popID = $(this).attr('rel'); //Get Popup Name
  39.  
  40. var popURL = $(this).attr('href'); //Get Popup href to define size
  41.  
  42.  
  43.  
  44. //Pull Query & Variables from href URL
  45.  
  46. var query= popURL.split('?');
  47.  
  48. var dim= query[1].split('&');
  49.  
  50. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  51.  
  52.  
  53.  
  54. //Fade in the Popup and add close button
  55.  
  56. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
  57.  
  58.  
  59. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  60.  
  61. var popMargTop = ($('#' + popID).height() + 80) / 2;
  62.  
  63. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  64.  
  65.  
  66.  
  67. //Apply Margin to Popup
  68.  
  69. $('#' + popID).css({
  70.  
  71. 'margin-top' : -popMargTop,
  72.  
  73. 'margin-left' : -popMargLeft
  74.  
  75. });
  76.  
  77.  
  78.  
  79. //Fade in Background
  80.  
  81. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  82.  
  83. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  84.  
  85.  
  86.  
  87. return false;
  88.  
  89. });
  90.  
  91.  
  92. //Close Popups and Fade Layer
  93.  
  94. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  95.  
  96. $('#fade , .popup_block').fadeOut(function() {
  97.  
  98. $('#fade').remove(); //fade them both out
  99.  
  100. });
  101.  
  102. return false;
  103.  
  104. });
  105.  
  106.  
  107.  
  108.  
  109.  
  110. });
  111.  
  112. </script>
  113.  
  114.  
  115. <head>
  116. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  117.  
  118. <meta name="color:entries" content="#ffffff" />
  119. <meta name="color:text" content="#091010" />
  120. <meta name="color:link" content="#545353" />
  121. <meta name="color:link hover" content="#e7dcdc" />
  122. <meta name="color:background" content="#ffffff" />
  123. <meta name="color:sidebar" content="#070707" />
  124. <meta name="color:scrollbar" content="#adff98" />
  125.  
  126. <meta name="text:link1" content="link 1" />
  127. <meta name="text:link1 url" content="/" />
  128. <meta name="text:link2" content="link 2" />
  129. <meta name="text:link2 url" content="/" />
  130. <meta name="text:link3" content="link 3" />
  131. <meta name="text:link3 url" content="/" />
  132.  
  133. <link rel='stylesheet' href='path/to/typicons.min.css' />
  134. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  135. <title>{Title}{block:SearchPage}, Search results for: {SearchQuery}{/block:SearchPage}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
  136. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  137. <link rel="shortcut icon" href="{Favicon}"/>
  138. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  139.  
  140. <style type="text/css">
  141.  
  142. @font-face {font-family:"fontello"; src: url("http://static.tumblr.com/p98azdo/0XFn07wea/fontello.ttf")}
  143.  
  144.  
  145. iframe#tumblr_controls {right:3px !important; -webkit-transition: opacity 0.7s linear;opacity: 0.5;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  146.  
  147. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: 1;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
  148.  
  149. body {
  150. background-color:{color:background};
  151. color:{color:text};
  152. font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  153. font-size:10px;
  154. line-height:100%;
  155. text-align:justify;}
  156.  
  157. a:link, a:active, a:visited {
  158. cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress;
  159. color:{color:Link};
  160. text-decoration:none;
  161. -webkit-transition:all 0.5s ease-out;
  162. -moz-transition:all 0.5s ease-out;
  163. transition:all 0.5s ease-out}
  164.  
  165. b{color:{color:link hover};}
  166.  
  167. a:hover {
  168. color:{color:link hover};text-decoration:underline;}
  169.  
  170. h1{
  171. text-transform:lowercase;
  172. font-size: 15px;
  173. font-weight:bold;
  174. line-height:30px;
  175. letter-spacing:0px;
  176. text-align:left;
  177. font-family:arial;
  178. background-color:transparent;
  179. }
  180.  
  181. h2 {
  182. text-transform:lowercase;
  183. font-size:15px;
  184. line-height:30px;
  185. letter-spacing:0px;
  186. text-align:left;
  187. }
  188.  
  189.  
  190. #entries {
  191. margin-left:450px;
  192. margin-top:50px;
  193. width:510px;
  194. padding:5px;}
  195.  
  196. #posts{
  197. width:500px;
  198. padding:5px;
  199. overflow:hidden;
  200. background:white;
  201. margin-bottom:20px;}
  202.  
  203. #info{
  204. border-radius: 4px;
  205. padding: 5px;
  206. background-color:transparent;
  207. font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  208. font-size:9px;
  209. width: 490px;
  210. letter-spacing:1px;
  211. text-transform:uppercase;
  212. font-style:normal;
  213. opacity:1;
  214. text-align:left;}
  215.  
  216.  
  217. #tags {
  218. border-top:#fafafa solid 1px;
  219. border-bottom:#fafafa solid 1px;
  220. margin-top:5px;
  221. color:black;
  222. opacity:1;
  223. margin-left:0px;
  224. background-color:transparent;
  225. width:500px;
  226. text-align:left;
  227. position:absolute;
  228. }
  229.  
  230. #tags a{ padding:2px;}
  231.  
  232. #sidebar {
  233. background-color:black;
  234. float:top;
  235. position:fixed;
  236. margin-top:-80px;
  237. width:80px;
  238. height:2500px;
  239. margin-left:-20px;
  240. opacity:1;
  241. }
  242.  
  243. #sidebar img {
  244. max-width:160px;}
  245.  
  246.  
  247.  
  248. .links{
  249. font-family:"fontello";
  250. position:fixed;
  251. margin-top:200px;
  252. width:70px;
  253. height:2000px;
  254. margin-left:35px;
  255. line-height:16px;
  256. letter-spacing:1px;
  257. background-color:transparent;
  258. font-size:12px;
  259. opacity:1;
  260. -moz-transition:0.5s ease-in;
  261. -webkit-transition:0.5s ease-in;-o-transition:0.5s ease-in;
  262. transition:0.5s ease-in;}
  263.  
  264. .links a{float:left;width:50px;color:white;
  265. line-height:60px;
  266. padding-left:3px;margin-right:5px;margin-bottom:5px;}
  267.  
  268.  
  269. #description{
  270. font-size:19px;
  271. position:fixed;
  272. background:black;
  273. font-family:"fontello";
  274. font-style:normal;
  275. margin-top:40px;
  276. width:25px;
  277. margin-left:30px;
  278. text-align:left;
  279. padding:10px;}
  280.  
  281. #description a{color:#545353;}
  282.  
  283. .pagination {
  284. font-family:"fontello";
  285. background-color:transparent;
  286. margin-left:20px;
  287. width:30px;
  288. margin-top:10px;
  289. float:bottom;
  290. font-size:10px;
  291. padding:10px;
  292. color:{color:text};
  293. text-decoration:none;}
  294.  
  295. .pagination {
  296. background-color:transparent;
  297. margin-left:250px;
  298. width:50px;
  299. margin-top:20px;
  300. float:bottom;
  301. font-size:11px;
  302. padding:10px;
  303. color:{color:text};
  304. text-decoration:none;}
  305.  
  306. #question {
  307. color:{color:text};
  308. text-align:left;
  309. }
  310.  
  311. #asker {
  312. float:left;
  313. margin-right:5px;
  314. }
  315.  
  316. #agree {text-align:center; margin-top:10px; font-weight:bold;}
  317. #agree a {width:100px;height:100px;background-color:#000; color:#FFFFFF; padding:5px; text-align:center; font-style:normal; font-size:11px; }
  318.  
  319.  
  320. .popup_block{display: none; background:white; padding: 20px; float: left; position: fixed; top: 50%; left: 55%; z-index:99999;text-align:center;}
  321. *html #fade {position: absolute;}
  322. *html .popup_block {position: absolute;}
  323. #fade {display: none; background: #000; left: 0; top: 0; width: 100%; height: 100%; opacity: .60; z-index:1;position:fixed;}
  324.  
  325. ,themes {width:1500px;background-color:black;padding:5px; text-align:left; font-size:9px; line-height:16px; font-weight:bold; color:{color:text;};}
  326.  
  327.  
  328. .player {
  329. width:25px;
  330. height:25px;
  331. overflow:hidden;
  332. margin-left:12px;
  333. padding:5px;
  334. position:absolute;
  335. margin-top:12px;
  336. background:white;
  337. z-index:2;}
  338.  
  339. .audioinfo {
  340. text-align:right;
  341. z-index:2;
  342. position:absolute;
  343. padding-top:15px;
  344. text-transform:uppercase;
  345. width:430px;
  346. font-size:10px;
  347. margin-left:50px;
  348. }
  349.  
  350.  
  351. .playerback {height:58px;
  352. background-color:{color:Accents};
  353. }
  354.  
  355.  
  356.  
  357.  
  358. blockquote {border-left:0px solid {color:sidebar};width:480px;background-color:transparent;padding:0px;margin-left:0px;padding-left:10px;}
  359.  
  360. .user_1, .user_3, .user_5, .user_7, .user_7, .user_9, .user_11 {
  361. margin-right:25px;text-transform:lowercase}
  362. .user_2, .user_4, .user_6, .user_8, .user_10, .user_12 {background-color:transparent;margin-right:25px;text-transform:lowercase}
  363. ul.chat, .chat ol, .chat li { list-style:none; margin:0px; padding:5px;}
  364.  
  365. ol.notes {margin-top:50px;list-style-type: none;text-align:right;}
  366. ol.notes li.note {padding: 0px;list-style-type: none;text-align:left;margin-top:10px;margin-left:0px;width:400px;font-size:9px;font-weight:none;}
  367.  
  368. ::-webkit-scrollbar-thumb:vertical {background-color:{color:Scrollbar}; height:50px;}
  369. ::-webkit-scrollbar {background-color:#ffffff; height:5px; width:5px;}
  370. ::-moz-selection {background-color:transparent; color:{color:Link};}
  371. ::selection {background-color:transparent; color:{color:link};}
  372.  
  373. #credit {font-family:cambria;font-weight:italic;text-align:center;text-transform:lowercase;opacity:1;font-size:9px; letter-spacing:0px;bottom:10px; right:11px; position:fixed;}
  374.  
  375.  
  376. </style>
  377. </head>
  378.  
  379.  
  380. <style type="text/css">{CustomCSS}
  381. </style>
  382.  
  383. <body>
  384. <div id="sidebar">
  385.  
  386. <div id="tnn" class="popup_block">
  387.  
  388. <div style="background:#fafafa; font-weight:bold; font-size:18px; text-transform:uppercase; padding:20px; text-align:center;">welcome to my blog</div>
  389.  
  390. <div style="padding:10px 5px 5px 5px; font-weight:bold; color:b0b1b0; font-size:13px;">about:</div>
  391. <div style="padding:5px;">{block:Description}{Description}{/block:Description}<br>
  392. (click if u want to exit)
  393. </div>
  394.  
  395. </div>
  396.  
  397.  
  398.  
  399. <div class="links">
  400.  
  401. <a title="refresh" href ="/"></a>
  402. <a title="message" href ="/ask"></a>
  403. {block:ifLink1}<a title="{text:link1}" href ="{text:link1 url}"></a>{/block:ifLink1}
  404. {block:ifLink2}<a title="{text:link2}" href ="{text:link2 url}"></a>{/block:ifLink2}
  405. {block:ifLink3}<a title="{text:link3}" href ="{text:link3 url}"></a>{/block:ifLink3}
  406. </div>
  407.  
  408.  
  409.  
  410. <div id="description"><br>
  411. <a href="#?w=500" rel="tnn" class="poplight"></a>
  412.  
  413. <br>
  414.  
  415. </div>
  416.  
  417. </div>
  418. </div>
  419.  
  420. <div id="credit"> <a title="THEME CREDIT" href="http://hapilys.tumblr.com/"> <br>
  421. ♥
  422. </a></div>
  423.  
  424. <div id="entries">
  425. {block:Posts}
  426. <div id="posts">
  427.  
  428. {block:Text}{block:Title}<h2>{Title}</h2>{/block:title}{body}{/block:Text}
  429. {block:Link}<h2>{Name}</h2>{block:Description}{Description}{/block:Description}{/block:Link}
  430.  
  431. {block:Photo}<a href="{Permalink}"><img src="{PhotoURL-500}"></a><br>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  432.  
  433. {block:Photoset}<center>{Photoset-500}</center>
  434. {block:Caption}{Caption}{/block:Caption}<br>{/block:Photoset}
  435.  
  436. {block:Quote}<h1>"{Quote}"</h1><div style="padding-bottom:5px;"> {block:Source}<div id="source"> — {Source}</div>{/block:Source}</div>{/block:Quote}
  437.  
  438. {block:Chat}<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}{Line}</li>{/block:Lines}</ul>{/block:Chat}
  439.  
  440.  
  441. {block:Audio}
  442.  
  443. <div class="audioinfo">
  444. {block:TrackName}{TrackName}{/block:TrackName}{block:Artist}<br>{Artist}{/block:Artist}
  445. </div>
  446. <div class="playerback">
  447. <div class="player">{AudioPlayerWhite}</div>
  448. </div>
  449. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  450. {/block:Audio}
  451.  
  452.  
  453. {block:Video}{Video-500}<br /> {block:Caption}{Caption}{/block:Caption}{/block:Video}
  454.  
  455. {block:Answer}<div id="asker"><img src="{AskerPortraitURL-24}"></div>{Asker}:<br>{Question}<br>{Answer}{/block:Answer}
  456.  
  457.  
  458. {block:IndexPage}
  459. <br>
  460. <div id="info">
  461. {block:Date}<a href="{Permalink}">{DayOfMonth}/{MonthNumber}</a>&nbsp;{/block:Date}{block:NoteCount}+{NoteCount}{/block:NoteCount}</a>
  462. <div style="text-align:right;font-size:8px;">{block:RebloggedFrom}<a href="{ReblogParentURL}"><a href="{ReblogParentURL}">VIA </a>{/block:RebloggedFrom}{block:ContentSource} <a href="{SourceURL}">(&copy;)</a>{/block:ContentSource}</div></div>
  463. </div> {/block:IndexPage}
  464.  
  465. {block:PermalinkPage}
  466.  
  467. <div id="tags"><br>
  468. <div style="background:#fafafa; font-weight:bold; font-size:9px; text-transform:uppercase;font-family:calibri;">{12Hour}:{Minutes}{AmPm} {block:NoteCount}{NoteCountWithLabel} {/block:NoteCount}<br></div>{block:HasTags}
  469. <img src="http://media.tumblr.com/tumblr_mf1q086pET1ruid57.png">{block:Tags} <a href="{TagURL}">{Tag}</a>{/block:Tags}{/block:HasTags} </div><br>
  470. </div> {/block:PermalinkPage}
  471.  
  472.  
  473.  
  474. {/block:Posts}
  475. {block:PostNotes}
  476. {PostNotes}{/block:PostNotes}
  477.  
  478.  
  479. {block:Pagination}
  480. <div class="pagination">
  481. {block:PreviousPage}
  482. <a href="{PreviousPage}"></a>
  483. {/block:PreviousPage}
  484. {block:NextPage}
  485. <a href="{NextPage}"></a>
  486. {/block:NextPage}
  487. </div>
  488. {/block:Pagination}
  489.  
  490.  
  491. </div>
  492.  
  493. </body>
  494.  
  495. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!