API tools faq
paste
divakey

Irozuku theme with popup ask

divakey
Jan 24th, 2013
445
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.77 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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>{Title}</title>
  5.  
  6. <link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet' type='text/css'>
  7.  
  8. <link rel="shortcut icon" href="{Favicon}">
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10. {block:Description}
  11. <meta name="description" content="{MetaDescription}" />
  12. {/block:Description}
  13.  
  14. {block:IfEndlessScrolling}
  15. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:IfEndlessScrolling}
  16.  
  17.  
  18. <head>
  19.  
  20. <script type="text/javascript"
  21. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  22. <script>
  23. $(document).ready(function() {
  24. //
  25. $('a.poplight[href^=#]').click(function() {
  26. var popID = $(this).attr('rel'); //Get Popup Name
  27. var popURL = $(this).attr('href'); //Get Popup href to define size
  28. var query= popURL.split('?');
  29. var dim= query[1].split('&');
  30. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  31. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://i1119.photobucket.com/albums/k637/kawaiiscraps/dashboard.gif" class="btn_close" title="Close" alt="Close" /></a>');
  32. var popMargTop = ($('#' + popID).height() + 80) / 2;
  33. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  34. //Apply Margin to Popup
  35. $('#' + popID).css({
  36. 'margin-top' : -popMargTop,
  37. 'margin-left' : -popMargLeft
  38. });
  39. $('body').append('<div id="fade"></div>');
  40. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  41. return false;
  42. });
  43. $('a.close, #fade').live('click', function() {
  44. $('#fade , .popup_block').fadeOut(function() {
  45. $('#fade, a.close').remove(); //fade them both out
  46. });
  47. return false;
  48. });
  49. });
  50. </script>
  51.  
  52.  
  53. <meta name="image:Background" content=""/>
  54. <meta name="image:Sidebar" content="" />
  55.  
  56. <meta name="color:Background" content="#fdf3ee" />
  57. <meta name="color:Post Background" content="#ffffff" />
  58. <meta name="color:Sidebar Background" content="#ffffff" />
  59. <meta name="color:Title" content="#000000" />
  60. <meta name="color:Text" content="#4d4c4a" />
  61. <meta name="color:Links" content="#a09280" />
  62. <meta name="color:Italic" content="#a09280" />
  63. <meta name="color:Bold" content="#a09280" />
  64. <meta name="color:Links Hover" content="#CCCCCC" />
  65. <meta name="color:Info background" content="#d6dbdf" />
  66. <meta name="color:Info Border" content="#ffffff" />
  67. <meta name="color:scroll bar" content="#CCCCCC" />
  68. <meta name="color:Post title" content="#a09280" />
  69. <meta name="color:Navigation links" content="#000000" />
  70. <meta name="color:Navigation background" content="#ffffff" />
  71. <meta name="color:Navigation links hover" content="" />
  72. <meta name="color:Navigation background hover" content="#ffffff" />
  73. <meta name="color:Description background" content="#ffffff" />
  74.  
  75. <meta name="text:Link 1 Title" content="" />
  76. <meta name="text:Link 1" content="" />
  77. <meta name="text:Link 2 Title" content="" />
  78. <meta name="text:Link 2" content="" />
  79. <meta name="text:Link 3 Title" content="" />
  80. <meta name="text:Link 3" content="" />
  81. <meta name="text:Link 4" content ="" />
  82. <meta name="text:Link 4 Title" content="" />
  83. <meta name="text:Link 5" content="" />
  84. <meta name="text:Link 5 Title" content="" />
  85.  
  86. <meta name="if:EndlessScrolling" content="0"/>
  87. <meta name="if:ShowCaptions" content="0">
  88.  
  89. <style type="text/css">
  90.  
  91.  
  92. /* SCROLLBAR */
  93.  
  94. ::-webkit-scrollbar { width: 4px; height: 4px; }
  95. ::-webkit-scrollbar-button:start:decrement,
  96. ::-webkit-scrollbar-button:end:increment { height: 0px; display: block; background: #9C9C9C; }
  97. ::-webkit-scrollbar-track-piece { background-color: white; }
  98. ::-webkit-scrollbar-thumb { border-radius: 0px; height: 50px; background-color: {color:scroll bar}; }
  99.  
  100.  
  101. /* CONTENT */
  102.  
  103. body {background-color:{color:Background};
  104. background-image: url('{image:Background}');
  105. background-attachment:fixed;
  106. color:{color:Text};
  107. font-family:consolas;
  108. font-size:10px;
  109. margin: 0px;
  110. padding: 0px;}
  111.  
  112.  
  113. a {text-decoration:none;
  114. color:{color:links};
  115. opacity:;
  116. z-index:999;
  117. -webkit-transition: all 0.5s ease-in-out;
  118. -moz-transition: all 0.5s ease-in-out;
  119. -o-transition: all 0.5s ease-in-out; }
  120.  
  121.  
  122. a:hover{opacity: .5;
  123. -webkit-transition: all 0.5s ease-in-out;
  124. -moz-transition: all 0.5s ease-in-out;
  125. -o-transition: all 0.5s ease-in-out;}
  126.  
  127. b {color:{color:Bold};}
  128.  
  129. i {color:{color:italic};}
  130.  
  131.  
  132. .contentwhole {width:520px;
  133. margin-left:300px;
  134. height:100%;}
  135.  
  136.  
  137.  
  138.  
  139. /* POSTS */
  140.  
  141. .content {
  142. margin:15px;
  143. width: 250px;
  144. padding:5px;
  145. background-color:{color:post background};}
  146.  
  147. .ttitle{color:{color:post title};
  148. font-size: 15px;
  149. line-height: 15px;
  150. letter-spacing: 0px;
  151. text-align: left;
  152. text-transform: normal;}
  153.  
  154.  
  155.  
  156.  
  157. img { opacity:0.8;
  158. transition-duration: 2.0s;
  159. -moz-transition-duration: 0.6s;
  160. -webkit-transition-duration: 0.6s;
  161. -o-transition-duration: 0.6s}
  162.  
  163. img:hover{ opacity:1.0;
  164. transition-duration: 2.0s;
  165. -moz-transition-duration: 0.6s;
  166. -webkit-transition-duration: 0.6s;
  167. -o-transition-duration: 0.6s;}
  168.  
  169. .photoset { opacity:0.8;
  170. transition-duration: 2.0s;
  171. -moz-transition-duration: 0.6s;
  172. -webkit-transition-duration: 0.6s;
  173. -o-transition-duration: 0.6s}
  174.  
  175. .photoset:hover{ opacity:1.0;
  176. transition-duration: 2.0s;
  177. -moz-transition-duration: 0.6s;
  178. -webkit-transition-duration: 0.6s;
  179. -o-transition-duration: 0.6s;}
  180.  
  181.  
  182. blockquote{ padding-left: 5px; margin: 0px 0px 10px 0px; display: block;
  183. position: relative; border-left: 1px solid {color:bold}; }
  184.  
  185. blockquote img{ max-width: 100%!important; }
  186.  
  187.  
  188. /* Permalinks, the links that appear when you hover on a post */
  189.  
  190.  
  191. .permalink {
  192. width: 150px;
  193. height: auto;
  194. line-height: 10px;
  195. padding-left:5px;
  196. margin-left: 260px;
  197. margin-top: 0px;
  198. margin-bottom:20px;
  199. border-left: 1px solid white;
  200. font-family: calibri;
  201. text-align:left;
  202. font-size: 9px;
  203. color: {color:bold};
  204. text-transform: uppercase;
  205. letter-spacing: 1px;
  206. display:inline-block;
  207. position:absolute;
  208. opacity:0;
  209. -webkit-transition: all .7s ease-in-out;
  210. -moz-transition: all .7s ease-in-out;
  211. -o-transition: all .7s ease-in-out;
  212. -ms-transition: all .7s ease-in-out;
  213. transition: all .7s ease-in-out;}
  214.  
  215. .permalink a {
  216. color: {color:links};
  217. text-decoration: none;
  218. -webkit-transition: all .7s ease-in-out;
  219. -moz-transition: all .7s ease-in-out;
  220. -o-transition: all .7s ease-in-out;
  221. -ms-transition: all .7s ease-in-out;
  222. transition: all .7s ease-in-out;}
  223.  
  224. .permalink a:hover{
  225. color: {color:links hover};
  226. -webkit-transition: all .7s ease-in-out;
  227. -moz-transition: all .7s ease-in-out;
  228. -o-transition: all .7s ease-in-out;
  229. -ms-transition: all .7s ease-in-out;
  230. transition: all .7s ease-in-out;}
  231.  
  232. .content:hover .permalink{
  233. opacity:1;
  234. border-left: 1px solid {color:bold};
  235. -webkit-transition: all .7s ease-in-out;
  236. -moz-transition: all .7s ease-in-out;
  237. -o-transition: all .7s ease-in-out;
  238. -ms-transition: all .7s ease-in-out;
  239. transition: all .7s ease-in-out;}
  240.  
  241.  
  242. #tumblr_controls{ position:fixed!important; right: 0px; top:0px;}
  243.  
  244. i, em, .em {color:{color:Italic};}
  245.  
  246.  
  247.  
  248. /* Permalink Page */
  249.  
  250. #source{
  251. width: 250px;
  252. padding:0px 5px;
  253. margin-left:-5px!important;
  254. margin-top: 10px;
  255. font-size: 10px;
  256. font-family: calibri;
  257. color:{color:post text};
  258. text-transform: uppercase;
  259. text-align:center;}
  260.  
  261. #source a{
  262. color:{color:links};
  263. text-decoration:none;
  264. -webkit-transition: all 0.7s ease-in-out;
  265. -moz-transition: all 0.7s ease-in-out;
  266. -o-transition: all 0.7s ease-in-out;
  267. -ms-transition: all 0.7s ease-in-out;
  268. transition: all 0.7s ease-in-out;}
  269.  
  270. #source a:hover{
  271. color:{color:links hover};
  272. -webkit-transition: all 0.7s ease-in-out;
  273. -moz-transition: all 0.7s ease-in-out;
  274. -o-transition: all 0.7s ease-in-out;
  275. -ms-transition: all 0.7s ease-in-out;
  276. transition: all 0.7s ease-in-out;}
  277.  
  278.  
  279. #PostNotes {margin-left:0px;
  280. text-align:left;
  281. width:250px;
  282. height:250px;
  283. overflow:auto;}
  284.  
  285.  
  286.  
  287.  
  288. /* SIDEBAR */
  289.  
  290. #title { color:{color:title};
  291. font-size:20px;
  292. font-family: 'Petit Formal Script', cursive;
  293. text-align:center;
  294. letter-spacing:px;
  295. margin-bottom:5px;
  296. padding-bottom:0px;
  297. }
  298.  
  299. #sidebar {
  300. margin-left:110px;
  301. width:150px;
  302. position:fixed;
  303. top:0px;
  304. padding-left:0px;
  305. padding-right:0px;
  306. padding-top:50px;
  307. left:20px;}
  308.  
  309.  
  310. #navi{
  311. margin-top:70px;
  312. margin-left:60px;
  313. width:70px;
  314. padding-bottom:10px;
  315. position:fixed;}
  316.  
  317.  
  318. #navi a{ color:{color:navigation links};
  319. background-color:{color:navigation background};
  320. display:block;
  321. margin-top:5px;
  322. text-transform:uppercase;
  323. text-transform: uppercase;
  324. padding:1px 0px 1px 10px;
  325. letter-spacing: 1px;
  326. text-align: left;
  327. line-height: 15px;
  328. -webkit-transition: all 0.6s ease-in-out;
  329. -moz-transition: all 0.6s ease-in-out;
  330. -o-transition: all 0.6s ease-in-out;
  331. -ms-transition: all 0.6s ease-in-out;
  332. transition: all 0.6s ease-in-out;}
  333.  
  334. #navi a:hover {background-color: {color:navigation background hover};
  335. border-right:5px solid {color:bold};
  336. color: {color:links hover};
  337. -webkit-transition: all 0.6s ease-in-out;
  338. -moz-transition: all 0.6s ease-in-out;
  339. -o-transition: all 0.6s ease-in-out;
  340. -ms-transition: all 0.6s ease-in-out;
  341. transition: all 0.6s ease-in-out;}
  342.  
  343.  
  344. #sidebarimage img {
  345. width:150px;
  346. margin-right:2px;
  347. }
  348.  
  349.  
  350. #description {
  351.  
  352. width:140px;
  353. margin-top:10px;
  354. padding: 5px;
  355. padding-top:10px;
  356. padding-bottom: 15px;
  357. line-height: 9px;
  358. letter-spacing:2px;
  359. text-align:left;}
  360.  
  361.  
  362. /*Pop-up Ask Box */
  363. .popup_block{
  364. display: none;
  365. background: #FFFFFF;
  366. background-image: url();
  367. padding: 10px;
  368. font-family: consolas;
  369. float: left;
  370. font-size: 10px;
  371. position: fixed;
  372. top: 50%; left: 50%;
  373. z-index: 2;
  374. border: 1px solid #363636;
  375. -moz-box-shadow: 0 0 5px #CFCFCF;
  376. -webkit-box-shadow: 0 0 5px #CFCFCF;
  377. -webkit-border-radius: 10px;
  378. -moz-border-radius: 10px;
  379. border-radius: 10px;
  380. }
  381. img.btn_close {
  382. float: right;
  383. margin: -5px -5px 0 0;
  384. }
  385. *html .popup_block {
  386. position: absolute;
  387. }
  388.  
  389. /* CREDIT do not remove */
  390.  
  391. .credit { position: fixed;
  392. bottom: 5px;
  393. right: 5px;
  394. font-size: 12px;
  395. font-family: verdana;
  396. -webkit-transition: all 0.5s ease;
  397. -moz-transition: all 0.5s ease;
  398. -o-transition: all 0.5s ease;}
  399.  
  400. .credittext { height:10px;
  401. width:50px;
  402. overflow:hidden;
  403. -webkit-transition: all 0.5s ease;
  404. -moz-transition: all 0.5s ease;
  405. -o-transition: all 0.5s ease;
  406. font-family:calibri;
  407. font-size:10px;
  408. text-transform:lowercase;
  409. text-align:center;
  410. }
  411.  
  412. .credit:hover .credittext{
  413. height: 11px;
  414. -webkit-transition: all 0.5s ease;
  415. -moz-transition: all 0.5s ease;
  416. -o-transition: all 0.5s ease;}
  417.  
  418. .x {display:none;
  419. -webkit-transition: all 0.5s ease;
  420. -moz-transition: all 0.5s ease;
  421. -o-transition: all 0.5s ease;
  422. }
  423.  
  424.  
  425.  
  426. </style></head>
  427.  
  428.  
  429.  
  430.  
  431. <body>
  432. <div id="sidebar">
  433. <div align="center">
  434. <div id="title">{title}</div>
  435.  
  436. <div id="sideborder"><div id="sidebarimage">
  437. <img src="{image:sidebar}" ></div></div>
  438.  
  439. <div id="description">
  440. {Description}
  441. <br>
  442. {block:IfNotEndlessScrolling}
  443. <div class="pagination">
  444. {block:Pagination}
  445. {block:PreviousPage}<a href="{PreviousPage}">< </a>{/block:PreviousPage}{CurrentPage}/{TotalPages} {block:NextPage}<a href="{NextPage}">></a>{/block:NextPage}
  446. {/block:Pagination}
  447. </div>{/block:IfNotEndlessScrolling}
  448. </div></div></div>
  449.  
  450. <div id="navi"> <a href="/">Home</a> <a href="#?w=500" rel="02" class="poplight">Ask</a> <a href="/archive">Archive</a>
  451.  
  452. {block:ifLink1}<a href="{text:Link 1}">{text:Link 1 Title}</a>{/block:ifLink1}
  453. {block:ifLink2}<a href="{text:Link 2}">{text:Link 2 Title}</a>{/block:ifLink2}
  454. {block:ifLink3}<a href="{text:Link 3}">{text:Link 3 Title}</a>{/block:ifLink3}
  455. {block:ifLink4}<a href="{text:Link 4}">{text:Link 4 Title}</a>{/block:ifLink4}
  456. {block:ifLink5}<a href="{text:Link 5}">{text:Link 5 Title}</a>{/block:ifLink5}
  457.  
  458.  
  459. </div>
  460.  
  461.  
  462.  
  463.  
  464. </div>
  465. </div>
  466.  
  467.  
  468.  
  469.  
  470.  
  471. {block:IndexPage}
  472. {/block:IndexPage}
  473.  
  474.  
  475. <div class="contentwhole">
  476.  
  477. <div class = "autopagerize_page_element" >
  478.  
  479. {block:Posts}
  480.  
  481.  
  482. <!— {SourceURL}{block:SourceLogo}<img src=”{BlackLogoURL}”
  483.  
  484. width=”{LogoWidth}” height=”{LogoHeight}” alt=”{SourceTitle}” />
  485.  
  486. {/block:SourceLogo}
  487.  
  488. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} —>
  489.  
  490. {/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
  491.  
  492.  
  493.  
  494. <div class="content">
  495.  
  496. <div class="permalink">posted <a href="{Permalink}">{TimeAgo}</a>
  497. <br>{block:NoteCount} <a href="{Permalink}">{NoteCountWithLabel}</a> | {/block:NoteCount} <a href="{ReblogURL}" target="_blank">Reblog</a></br></div>
  498.  
  499.  
  500. {block:Text}
  501. {block:Title}
  502. <a href="{Permalink}" class="ttitle">{Title}</a>
  503. {/block:Title}
  504. {Body}
  505. {/block:Text}
  506.  
  507. {block:Photo}
  508. <img src="{PhotoURL-250}" class="center">
  509.  
  510. {block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
  511.  
  512. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  513. {Caption}
  514. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  515. {/block:Photo}
  516.  
  517.  
  518. {block:Photoset}
  519. {Photoset-250}
  520. {block:IfShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfShowCaptions}
  521. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  522. {Caption}
  523. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  524. {/block:Photoset}
  525.  
  526. {block:Quote}
  527. {Quote}<p>
  528. {block:Source}- {Source}{/block:Source}
  529. {/block:Quote}
  530.  
  531. {block:Link}
  532. <a href="{URL}" target="{Target}" class="ttitle"> {Name} (x) </a>
  533. {block:Description} {Description} {/block:Description}
  534. {/block:Link}
  535.  
  536. {block:Chat}
  537. {block:Title} {Title} {/block:Title}
  538. {block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
  539.  
  540. {/block:Lines}
  541. {/block:Chat}
  542.  
  543.  
  544. {block:Audio}
  545. {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
  546. <p>
  547. {block:AlbumArt}
  548. <img src="{AlbumArtURL}" width="100px" />
  549. {/block:AlbumArt}
  550. <p>
  551. {block:Caption}
  552. {Caption}
  553. {/block:Caption}
  554. {/block:Audio}
  555.  
  556.  
  557. {block:Video}
  558. {Video-500}
  559. {block:Caption}{Caption}{/block:Caption}
  560. {/block:Video}
  561.  
  562. {block:Answer}
  563. <table style="border-bottom:1px solid #a0a0a0;padding-bottom:5px;margin-bottom:5px;">
  564. <tr>
  565. <td style="vertical-align:top;padding-right:10px;"><img src="{AskerPortraitURL-64}" style="height:60px; width:60px; -moz-border-radius:30px; border-radius:30px; float:left"></td>
  566. <td style="vertical-align:top;"><strong>{Asker} asked:</strong> {Question}</td>
  567. </tr>
  568. </table>
  569. {Answer}
  570. {/block:Answer}
  571.  
  572.  
  573. {block:PermalinkPage}
  574.  
  575.  
  576. <div id="source"> {block:Date}posted {12Hour}:{Minutes} {AmPm} on {DayOfWeek}, {Month} {DayOfMonth}, {Year}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}
  577. <br>
  578. tags &raquo; {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}
  579. <div id="PostNotes">{block:PostNotes} {PostNotes} {/block:PostNotes}
  580. </div></div></div>
  581. {/block:PermalinkPage}
  582. </div>
  583. {/block:Posts}
  584. </div>
  585.  
  586.  
  587.  
  588.  
  589. <div class="credit"><a href="http://chinqu.tumblr.com">
  590. <div class="x">✖</div> <div class="credittext"> Theme
  591. </div></a></div>
  592.  
  593. </head></body>
  594.  
  595.  
  596. <div id="02" class="popup_block">
  597.  
  598. <Center><font size="5" color="#1C1C1C">Ask Me Anything<p></font><iframe frameborder="0" scrolling="yes" width="100%" height="150" src="http://www.tumblr.com/ask_form/YOURTUMBLRNAMEHERE.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form">
  599. </center></div>
  600.  
  601. </div></div></div></div></div></div></div></div></div></div>
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!