API tools faq
paste
Advertisement
harreyeh

theme 09: oceans

harreyeh
May 9th, 2014
891
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.26 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6.  
  7. <head>
  8.  
  9. <title>{title}</title>
  10. <link rel="shortcut icon" href="{Favicon}">
  11. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  12.  
  13. <meta name="text:Link1" content="link" />
  14. <meta name="text:Link1 URL" content="/" />
  15. <meta name="text:Link2" content="link" />
  16. <meta name="text:Link2 URL" content="/" />
  17. <meta name="text:Link3" content="link" />
  18. <meta name="text:Link3 URL" content="/" />
  19. <meta name="text:Link4" content="link" />
  20. <meta name="text:Link4 URL" content="/" />
  21.  
  22. <meta name="if:Pop Up Links" content="1" />
  23. <meta name="if:400px Posts" content="1" />
  24.  
  25. <meta name="image:Sidebar" content="" />
  26.  
  27. <meta name="text:Font Size" content="11px" />
  28. <meta name="text:Links Title" content="links" />
  29.  
  30. <meta name="color:Color 1" content="#0BCBD9" />
  31. <meta name="color:Color 2" content="#EB2D6F" />
  32. <meta name="color:Links" content="#333" />
  33. <meta name="color:Links Hover" content="#ddd" />
  34. <meta name="color:Highlight Text" content="#fff" />
  35.  
  36. <meta name="font:Body" content="Cambria" />
  37.  
  38.  
  39. <!------- tooltip script & fonts ------>
  40. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  41.  
  42. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  43. <script>
  44. (function($){
  45. $(document).ready(function(){
  46. $("[title]").style_my_tooltips({
  47. tip_follows_cursor:true,
  48. tip_delay_time:100,
  49. tip_fade_speed:300
  50. }
  51. );
  52. });
  53. })(jQuery);
  54. </script>
  55.  
  56. <link href='http://fonts.googleapis.com/css?family=Kreon:300,400,700' rel='stylesheet' type='text/css'>
  57.  
  58. <style type="text/css">
  59.  
  60. /* ~~~~~~~ styling: scrollbars, tooltips. ~~~~~~~*/
  61.  
  62. #s-m-t-tooltip{
  63. max-width:300px;
  64. color:white;
  65. background:black;
  66. margin: -5px 0 0 10px;
  67. border-radius: 2px;
  68. letter-spacing:1px;
  69. font-weight:300;
  70. z-index:999999;
  71. font-size:10px;
  72. padding:4px;
  73. font-family: 'times', cursive;
  74. font-style:italic;
  75. text-transform:lowercase;
  76. }
  77.  
  78.  
  79.  
  80. /* ~~~~~~~ body: text, links, blockquotes. ~~~~~~~*/
  81.  
  82. body {
  83. background-color: {color:Background};
  84. background-size:cover;
  85. font-family: {font:Body};
  86. font-size: {text:Font Size};
  87. text-align: left;
  88. color: {color:Text};
  89. line-height: 140%;
  90. }
  91.  
  92. a:link, a:active, a:visited {
  93. color: {color:Links};
  94. text-decoration: none;
  95. -moz-transition-duration:0.5s;-webkit-transition-duration:0.5s;-o-transition-duration:0.5s
  96. }
  97.  
  98. a:hover {
  99. color: {color:Links Hover};
  100. text-decoration: none;
  101. -moz-transition-duration:0.5s;-webkit-transition-duration:0.5s;-o-transition-duration:0.5s
  102. }
  103.  
  104. em{color:{color:Color 1};}
  105. strong{color:{color:Color 2};}
  106.  
  107. blockquote {
  108. border-left:3px solid #f2f2f2;
  109. padding-left:10px;
  110. margin-left:15px;
  111. }
  112.  
  113. blockquote blockquote {
  114. margin-left:20px;
  115. }
  116.  
  117. h1{
  118. text-align:center;
  119. font-weight:lighter;
  120. line-height:150%;
  121. font-size:15px;
  122. background:{color:Color 2};
  123. padding:15px 20px 15px 20px;
  124. color:#fff;
  125. font-family:'Kreon', Cambria, Serif;
  126. }
  127.  
  128. h4 {
  129. text-align:center;
  130. border-bottom:1px solid #eee;
  131. padding:5px;
  132. color:black;
  133. }
  134.  
  135. h4 a{
  136. color:#ddd;
  137. }
  138.  
  139.  
  140. /* ~~~~~~~ body: sidebaar content ~~~~~~~*/
  141.  
  142. #side{
  143. position:fixed;
  144. top:0;
  145. right:0;
  146. width:15px;
  147. height:100%;
  148. background:#ddd;
  149. z-index:50;
  150. }
  151.  
  152. #cont {
  153. left:35%;
  154. position:absolute;
  155. }
  156.  
  157. #sidebar {
  158. width:210px;
  159. position:fixed;
  160. top:150px;
  161. left:50px;
  162. z-index:100;
  163. }
  164.  
  165. #sidebar h1{
  166. background:{color:Color 1};
  167. font-family:Kreon, Serif;
  168. padding:3px;
  169. font-size:13px;
  170. line-height:18px;
  171. }
  172.  
  173. #sidebar img{
  174. width:190px;
  175. margin-bottom:0px;
  176. margin-left:10px;
  177. }
  178.  
  179. #desc{
  180. color:#333;
  181. margin:10px 0;
  182. font-family:corbel;
  183. text-align:center;
  184. }
  185.  
  186. #content2{
  187. font-size:9px;
  188. color:#333;
  189. font-family:corbel;
  190. height:20px;
  191. text-align:center;
  192. margin-top:-5px;
  193. }
  194.  
  195. #content2 a{
  196. display:inline-block;
  197. color:black;
  198. width:55px;
  199. text-transform:uppercase;
  200. margin:5px;
  201. padding:2px 6px 2px 6px;
  202. -moz-transition-duration:0.5s;-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;
  203. }
  204.  
  205. #content2 a:hover{
  206. box-shadow:80px 0 {color:Color 1} inset;
  207. color:white;
  208. -moz-transition-duration:0.5s;-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;
  209. }
  210.  
  211. #content2 a:last-child:hover{
  212. box-shadow:80px 0 {color:Color 2} inset;
  213. }
  214.  
  215. #content2 a:first-child:hover{
  216. box-shadow:80px 0 {color:Color 2} inset;
  217. }
  218.  
  219. /* ~~~~~~~ posts: entries, post information and notes ~~~~~~~*/
  220.  
  221. #entries {
  222. width:508px;
  223. {block:If400pxPosts}
  224. width:408px;
  225. {/block:If400pxPosts}
  226. position:absolute;
  227. margin-top:65px;
  228. padding:10px;
  229. }
  230.  
  231. #post {
  232. width:500px;
  233. {block:If400pxPosts}
  234. width:400px;
  235. {/block:If400pxPosts}
  236. padding:5px;
  237. margin-bottom:30px;
  238. }
  239.  
  240. #post img{
  241. max-width:100%;
  242. }
  243.  
  244. #postinfo {
  245. text-align:left;
  246. margin-top:10px;
  247. padding:5px;
  248. color:white;
  249. font-family:Kreon, Times, Serif;
  250. text-transform:uppercase;
  251. font-size:10px;
  252. }
  253.  
  254. #postinfo a{
  255. color:{color:Color 1};
  256. display:inline-block;
  257. font-size:10px;
  258. opacity:0;
  259. margin-left:-1px;
  260. margin-right:-2px;
  261. border-bottom:3px solid #eee;
  262. padding:3px;
  263. }
  264.  
  265. #postinfo:hover a{
  266. opacity:1;
  267. }
  268.  
  269. #postinfo a:first-child{
  270. padding-left:10px;
  271. opacity:1;
  272. font-weight:bold;
  273. color:#8e8e8e;
  274. border-left:3px solid {color:Color 1};
  275. }
  276.  
  277. #postinfo a:last-child{
  278. padding-right:40px;
  279. }
  280.  
  281. #tags{
  282. text-align:center;
  283. }
  284.  
  285. #tags a{
  286. color:#333;
  287. font-family:corbel;
  288. font-size:10px;
  289. }
  290.  
  291. #postinfo a:hover{
  292. color:{color:Color 2};
  293. }
  294.  
  295. ol.notes {
  296. padding: 0px;
  297. margin: 10px 10px;
  298. list-style:none;
  299. text-align:left;
  300. position: relative;
  301. z-index: 2;
  302. font-size: 9px;
  303. clear:both;}
  304.  
  305. ol.notes a {
  306. color: {color:Color 1};
  307. font-weight:bold;
  308. font-style:italic;}
  309.  
  310. ol.notes li.note:nth-of-type(2n+0) a{
  311. color: {color:Color 2};
  312. }
  313.  
  314. ol.notes li.note {padding: 5px;}
  315.  
  316. ol.notes li.note img.avatar {
  317. vertical-align: -4px;
  318. margin-right: 10px;
  319. outline:2px solid {color:Color 2};
  320. width: 16px;
  321. height: 16px;}
  322.  
  323. ol.notes img.avatar:nth-of-type(2n+0){
  324. border-color: {color:Color 2};
  325. }
  326.  
  327.  
  328. ol.notes li.note span.action {font-weight: normal;}
  329.  
  330. ol.notes li.note .answer_content {font-weight: normal;}
  331.  
  332. ol.notes li.note blockquote {
  333. border-color: {color:Color 1};
  334. padding: 4px 10px;
  335. margin: 10px 0px 0px 25px;}
  336.  
  337. ol.notes li.note blockquote a {text-decoration: none; color:{color:Color 2};}
  338.  
  339. /* ~~~~~~~ posts: answers ~~~~~~~*/
  340.  
  341. #question {
  342. background:{color:Color 2};
  343. min-height:20px;
  344. text-align:center;
  345. line-height:20px;
  346. padding:20px;
  347. color:{color:Highlight Text};
  348. }
  349.  
  350. .asker {
  351. letter-spacing:3px;
  352. font-weight:900;
  353. color:{color:Highlight Text};
  354. text-transform:uppercase;
  355. font-family:Kreon;
  356. padding:10px;
  357. border-bottom:1px solid white;
  358. margin-bottom:10px;
  359. }
  360.  
  361. .asker a{
  362. color:{color:Highlight Text};
  363. }
  364.  
  365. .answer{
  366. border:2px dotted #eee;
  367. padding:0 10px 0 10px;
  368. margin:10px;
  369. }
  370.  
  371.  
  372. h2 a{
  373. text-align:center;
  374. display:block;
  375. font-weight:lighter;
  376. line-height:150%;
  377. font-size:15px;
  378. background:{color:Color 1};
  379. padding:15px 20px 15px 20px;
  380. color:#fff;
  381. font-family:Cambria;
  382. }
  383.  
  384. h2 a{
  385. border:1px solid {color:Color 1};
  386. }
  387.  
  388. h2 a:hover{
  389. color:{color:Color 1};
  390. background:white;
  391. }
  392.  
  393.  
  394. #audio {
  395. background:white;
  396. height:100px;
  397. }
  398.  
  399. .image{
  400. width:100px;
  401. height:100px;
  402. float:left;
  403. background:url("http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg");
  404. background-size:cover;
  405. }
  406.  
  407. #audio img{
  408. width:100px;
  409. margin-right:20px;
  410. }
  411.  
  412. .details{
  413. height:100px;
  414. overflow:hidden;
  415. }
  416.  
  417. #audio span{
  418. background:#f9f9f9;
  419. display:block;
  420. height:10px;
  421. padding:6px;
  422. margin-bottom:3px;
  423. }
  424.  
  425.  
  426. .track{
  427. font-family:Kreon;
  428. color:black;
  429. text-transform:uppercase;
  430. font-weight:600;
  431.  
  432. }
  433.  
  434. #pagination a{
  435. font-family:Calibri, sans-serif;
  436. text-transform:uppercase;
  437. display:inline-block;
  438. padding:3px;
  439. color:{color:Highlight Text};
  440. background:{color:Color 1};
  441. }
  442.  
  443. #pagination a:hover{
  444. color:{color:Color 1};
  445. background:white;
  446. }
  447.  
  448. .current_page{
  449. font-family:Calibri, sans-serif;
  450. display:inline-block;
  451. padding:3px;
  452. background:{color:Highlight Text};
  453. color:{color:Color 2};
  454. border:1px solid {color:Color 2};
  455. }
  456.  
  457.  
  458.  
  459. /* ----- PLEASE DON'T TOUCH THIS!!! ------*/
  460.  
  461. #credit a{position:fixed;right:30px;bottom:30px;padding:5px;letter-spacing:1px;font-size:9px;border:1px solid #ddd;color:#ddd;-moz-transition-duration:1s;-webkit-transition-duration:1s;-o-transition-duration:1s;
  462. }
  463.  
  464. #credit a:hover {opacity:1;border-color:black;color:black;-moz-transition-duration:0.5s;-webkit-transition-duration:0.5s;-o-transition-duration:0.5s;
  465. }
  466.  
  467. /* ------ POP UP -----*/
  468.  
  469. #fade { /*--Transparent background layer--*/
  470. display: none; /*--hidden by default--*/
  471. background: #fff;
  472. position: fixed; left: 0; top: 0;
  473. width: 100%; height: 100%;
  474. z-index: 9999;
  475. }
  476. .popup_block{
  477. display: none; /*--hidden by default--*/
  478. padding: 20px;
  479. float: left;
  480. font-size: 1.2em;
  481. position: fixed;
  482. top: 50%; left: 50%;
  483. z-index: 99999;
  484. background:white;
  485. }
  486. img.btn_close {
  487. float: right;
  488. width:10px;
  489. margin: -5px -5px 0 0;
  490. }
  491. /*--Making IE6 Understand Fixed Positioning--*/
  492. *html #fade {
  493. position: absolute;
  494. }
  495. *html .popup_block {
  496. position: absolute;
  497. }
  498.  
  499. #top1{
  500. width:440px;
  501. padding:30px;
  502. margin-top:10px;
  503. margin-left:5px;
  504. background:{color:Color 1};
  505. }
  506.  
  507. #top1 a{
  508. color:white;
  509. }
  510.  
  511. #top1 a:hover{
  512. border-bottom:1px solid #fff;
  513. }
  514.  
  515. #title {
  516. padding:20px 0px 5px 0px;
  517. font-size:19px;
  518. font-family:Kreon;
  519. text-transform:uppercase;
  520. letter-spacing:1px;
  521. }
  522.  
  523. #searchbox {
  524. font-family:Cambria;
  525. color:#333;
  526. border:0px;
  527. padding:5px;
  528. width:200px;
  529. }
  530.  
  531. #searchbutton {
  532. padding:6px 10px 6px 10px;
  533. line-height:9px;
  534. font-size:11px;
  535. border:1px solid white;
  536. text-transform:uppercase;
  537. font-family:Cambria;
  538. color:#aaa;
  539. margin-left:-2px;
  540. background-color:#fff;
  541. -moz-transition-duration:0.5s;
  542. -webkit-transition-duration:0.5s;
  543. -o-transition-duration:0.5s;
  544. }
  545.  
  546. #searchbutton:hover {
  547. color:white;
  548. background:#333;
  549. cursor:pointer;
  550. border-color:#333;
  551. }
  552.  
  553. #popup_navigate {
  554. display:table;
  555. margin:3px 0 20px 10px;
  556. }
  557.  
  558. .links {
  559. border:1px solid #f0f0f0;
  560. border-bottom:none;
  561. border-top:none;
  562. display:table-cell;
  563. vertical-align:top;
  564. margin:1px;
  565. font-size:9px;
  566. text-transform:uppercase;
  567. width:150px;
  568. text-align:center;
  569. }
  570.  
  571. .links a {
  572. padding:5px 0px 5px 0px;
  573. margin-bottom:1px;
  574. background:#fff;
  575. display:inline-block;
  576. letter-spacing:2px;
  577. color:#aaa;
  578. border:1px solid transparent;
  579. width:148px;
  580. -moz-transition-duration:0.5s;
  581. -webkit-transition-duration:0.5s;
  582. -o-transition-duration:0.5s;
  583. }
  584.  
  585. .links a:hover {
  586. color:{color:Color 1};
  587. letter-spacing:0;
  588. border-bottom:1px solid {color:Color 1};
  589. }
  590.  
  591. #titles {
  592. margin:1px 0px 1px 0px;
  593. color:#fff;
  594. background-color:{color:Color 1};
  595. font-family:Kreon;
  596. text-transform:uppercase;
  597. letter-spacing:1px;
  598. opacity:0.5;
  599. padding:5px 0px 5px 0px;
  600. }
  601.  
  602. #navup{
  603. background:#eee;
  604. width:450px;
  605. }
  606.  
  607. #search {
  608. background-color:#eee;
  609. margin-left:10px;
  610. padding:30px;
  611. width:420px;
  612. }
  613. {CustomCSS}
  614. </style>
  615.  
  616. </head>
  617.  
  618. <body>
  619.  
  620. <div id="side"></div>
  621.  
  622.  
  623. <div id="cont">
  624. <div id="sidebar">
  625. <a href="/">
  626. <img src="{image:Sidebar}"></a>
  627. <h1>{Title}</h1>
  628. <div id="desc">
  629. {block:Description}{Description}{/block:Description}</div>
  630. <center><img style="width:20px; margin:5px; margin-bottom:5px" src="http://static.tumblr.com/3yblkz0/0ibn284kd/eee.png"></center>
  631. <div id="content2">
  632. <a href="{text:Link1 URL}"><span style="color:white">✘</span> {text:Link1}</a>
  633. <a href="{text:Link2 URL}"><span style="color:white">✘</span> {text:Link2}</a>
  634. <a href="{text:Link3 URL}"><span style="color:white">✘</span> {text:Link3}</a>
  635.  
  636. {block:IfNotPopUpLinks}
  637. <a href="{text:Link4 URL}"><span style="color:white">✘</span> {text:Link4}</a>
  638. {block:IfNotPopUpLinks}
  639.  
  640. {block:IfPopUpLinks}
  641. <a href="#?w=500" rel="03" class="poplight" ><span style="color:white">✘</span> {text:Links Title}</a>
  642. {/block:IfPopUpLinks}
  643. </div>
  644. </div>
  645.  
  646. <div id="entries">
  647. {block:Posts}
  648. <div id="post">
  649.  
  650. {block:Text}
  651. {block:Title}<h1>{Title}</h1>{/block:Title}
  652. {Body}
  653. {/block:Text}
  654.  
  655. {block:Quote}<h3>“{Quote}” </h3>
  656. <div style="text-align:right; padding-bottom:5px;">— {Source}</div>{/block:Quote}
  657.  
  658.  
  659. {block:Link}<h2><a href="{URL}" class="link" {Target}>{Name}</a></h2>
  660. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  661.  
  662.  
  663. {block:Photo}
  664. {block:IfNot400pxPosts}
  665. <center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>
  666. {/block:IfNot400pxPosts}
  667. {block:If400pxPosts}
  668. <center>{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>
  669. {block:If400pxPosts}
  670. {block:Caption}{Caption}{/block:Caption}
  671. {/block:Photo}
  672.  
  673.  
  674. {block:Photoset}<center>
  675. {block:IfNot400pxPosts}{Photoset-500}{/block:IfNot400pxPosts}
  676. {block:If400pxPosts}{Photoset-400}{/block:If400pxPosts}</center>
  677. {block:Caption}{Caption}{/block:Caption}
  678. {/block:Photoset}
  679.  
  680.  
  681. {block:Chat}
  682. {block:Title}<h1>{Title}</h1><br>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}
  683. {/block:Chat}
  684.  
  685.  
  686. {block:Video}
  687. {block:IfNot400pxPosts}{Video-500}{/block:IfNot400pxPosts}
  688. {block:If400pxPosts}{Video-400}{/block:If400pxPosts}
  689. {block:Caption}{Caption}{/block:Caption}
  690. {/block:Video}
  691.  
  692.  
  693. {block:Audio}
  694. {block:AudioEmbed}{AudioEmbed-250}{/block:AudioEmbed}
  695. {block:AudioPlayer}
  696. <div style="width:20px; height:20px; background:#fff; overflow:hidden; margin-right:-40px; padding:0 5px 5px 0; float:left; border:5px solid #f3f3f3">{AudioPlayerWhite}</div>{/block:AudioPlayer}
  697. <div id="audio">
  698.  
  699. <div class="image">
  700. {block:AlbumArt}
  701. <img class="cover" src="{AlbumArtURL}" />
  702. {/block:AlbumArt}
  703. </div>
  704. <div class="details">
  705. {block:TrackName}<span class="track">{TrackName}</span>{/block:TrackName}
  706. {block:Artist}<span>{Artist}</span>{/block:Artist}
  707. {block:Album}<span>{Album}</span>{/block:Album}
  708. {block:Playcount}<span>{FormattedPlayCount} plays</span>{/block:Playcount}
  709. </div></div>
  710. {block:Caption}{Caption}{/block:Caption}
  711. {/block:Audio}
  712.  
  713.  
  714. {block:Answer}
  715. <div id="question">
  716. <span class="asker">{Asker}</span><br><br>{Question}</div>
  717. <div class="answer">{Answer}</div>
  718. {/block:Answer}
  719.  
  720.  
  721.  
  722. <div id="postinfo">
  723. <a href="{Permalink}">{NoteCountWithLabel}</a>
  724. <a href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
  725. {block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">src</a>{/block:ContentSource}{/block:RebloggedFrom}
  726. </div>
  727.  
  728.  
  729. {block:HasTags}
  730. <div id="tags">
  731. {block:Tags}
  732. <a href="{TagURL}">#{Tag}</a>
  733. {/block:Tags}
  734. </div>
  735. {/block:HasTags}
  736.  
  737.  
  738. </div>
  739. {/block:Posts}
  740. {block:PostNotes}{PostNotes}{/block:PostNotes}
  741.  
  742.  
  743. {block:Pagination}
  744. <center><div id="pagination">
  745. {block:PreviousPage}<a href="{PreviousPage}">Previous</a>{/block:PreviousPage}
  746. {block:JumpPagination length="5"}
  747. {block:CurrentPage}
  748. <span class="current_page">{PageNumber}</span>
  749. {/block:CurrentPage}{block:JumpPage}
  750. <a class="jump_page" href="{URL}">{PageNumber}</a>
  751. {/block:JumpPage}
  752. {/block:JumpPagination}
  753. {block:NextPage}<a href="{NextPage}">Next</a>{/block:NextPage}
  754. </div></center>
  755. {/block:Pagination}
  756.  
  757.  
  758.  
  759.  
  760. </div>
  761. </div>
  762. </div>
  763. <div id="credit">
  764. <a href="http://bonruffians.tumblr.com" title="theme credit" target="blank">BR</a></div>
  765. </body>
  766.  
  767.  
  768. <div id="03" class="popup_block">
  769. <center>
  770. <div id="navup"></div>
  771. <div id="top1">
  772. <div id="title">navigate<br>
  773. <div style="border-bottom:1px solid #eee; width:120px; margin:5px"></div>
  774. <span style="color:white; font-size:9px"><a href="/">index</a> - <a href="/ask">message</a> - <a href="/archive">history</a> - <a href="/random">random</a></span>
  775. </div>
  776. </div>
  777. <div id="popup_navigate">
  778. <div class="links">
  779. <div id="titles">TITLE 1</div>
  780. <a href="/">link</a>
  781. <a href="/">link</a>
  782. <a href="/">link</a>
  783. <a href="/">link</a>
  784. <a href="/">link</a>
  785. <a href="/">link</a>
  786. <a href="/">link</a>
  787. </div>
  788.  
  789. <div class="links">
  790. <div id="titles">TITLE 2</div>
  791. <a href="/">link</a>
  792. <a href="/">link</a>
  793. <a href="/">link</a>
  794. <a href="/">link</a>
  795. <a href="/">link</a>
  796. <a href="/">link</a>
  797. <a href="/">link</a>
  798. </div>
  799.  
  800. <div class="links">
  801. <div id="titles">TITLE 3</div>
  802. <a href="/">link</a>
  803. <a href="/">link</a>
  804. <a href="/">link</a>
  805. <a href="/">link</a>
  806. <a href="/">link</a>
  807. <a href="/">link</a>
  808. <a href="/">link</a>
  809. </div>
  810.  
  811. </div>
  812.  
  813. <div id="search">
  814. <form action="/search" method="get" class="search">
  815. <input type="text" name="q" value="{SearchQuery}" id="searchbox"/>
  816. <input type="submit" value="Search tags" id="searchbutton"/>
  817. </form></div>
  818.  
  819.  
  820.  
  821. <small><br>
  822. theme: ©<a href="http://themesbyzsu.tumblr.com">bonruffians</a></small>
  823. </center>
  824.  
  825. </div>
  826.  
  827. </div>
  828.  
  829. <script type="text/javascript"
  830. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  831. <script>
  832. $(document).ready(function() {
  833. //
  834. $('a.poplight[href^=#]').click(function() {
  835. var popID = $(this).attr('rel'); //Get Popup Name
  836. var popURL = $(this).attr('href'); //Get Popup href to define size
  837. var query= popURL.split('?');
  838. var dim= query[1].split('&');
  839. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  840. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="https://cdn3.iconfinder.com/data/icons/iconic-1/28/x-128.png" class="btn_close" title="Close" alt="Close" /></a>');
  841. var popMargTop = ($('#' + popID).height() + 80) / 2;
  842. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  843. //Apply Margin to Popup
  844. $('#' + popID).css({
  845. 'margin-top' : -popMargTop,
  846. 'margin-left' : -popMargLeft
  847. });
  848. $('body').append('<div id="fade"></div>');
  849. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  850. return false;
  851. });
  852. $('a.close, #fade').live('click', function() {
  853. $('#fade , .popup_block').fadeOut(function() {
  854. $('#fade, a.close').remove(); //fade them both out
  855. });
  856. return false;
  857. });
  858. });
  859. </script>
  860. </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!