API tools faq
paste
Advertisement
harreyeh

theme 16: loaded gun

harreyeh
Sep 2nd, 2014
787
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.44 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. <!--
  4.  
  5.  
  6. theme 16: loaded gun
  7. hardziam // themesbyzsu
  8.  
  9.  
  10. ---->
  11.  
  12. <!DOCTYPE html>
  13. <head>
  14.  
  15.  
  16. <title>{Title}</title>
  17.  
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  21.  
  22. <!--Default Variables-->
  23.  
  24. <meta name="color:Background" content="#ffffff"/>
  25. <meta name="color:Text" content="#aaaaaa"/>
  26. <meta name="color:Link" content="#000000"/>
  27. <meta name="color:Header" content="#000000"/>
  28. <meta name="color:Header Text" content="#ffffff"/>
  29. <meta name="color:Description Text" content="#eee"/>
  30. <meta name="color:Accent" content="#00aaee"/>
  31.  
  32. <meta name="image:Sidebar" content=""/>
  33.  
  34. <meta name="text:Link 1 URL" content="" />
  35. <meta name="text:Link 1" content="" />
  36. <meta name="text:Link 2 URL" content="" />
  37. <meta name="text:Link 2" content="" />
  38. <meta name="text:Link 3 URL" content="" />
  39. <meta name="text:Link 3" content="" />
  40. <meta name="text:Link 4 URL" content="" />
  41. <meta name="text:Link 4" content="" />
  42. <meta name="text:Link 5 URL" content="" />
  43. <meta name="text:Link 5" content="" />
  44. <meta name="text:Link 6 URL" content="" />
  45. <meta name="text:Link 6" content="" />
  46.  
  47. <meta name="if:Pop Up Links" content="1" />
  48.  
  49.  
  50. <!-- jquery for tooltips-->
  51.  
  52. <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Lato' rel='stylesheet' type='text/css'>
  53.  
  54. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  55.  
  56. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  57.  
  58. <script>
  59.  
  60. (function($){
  61.  
  62. $(document).ready(function(){
  63.  
  64. $("a[title]").style_my_tooltips({
  65.  
  66. tip_follows_cursor:true,
  67.  
  68. tip_delay_time:30,
  69.  
  70. tip_fade_speed:300,
  71.  
  72. attribute:"title"
  73.  
  74. });
  75.  
  76. });
  77.  
  78. })(jQuery);
  79.  
  80. </script>
  81.  
  82.  
  83. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  84. <script language="javascript">
  85. $(document).ready(function() {
  86. $('a#buttonsend').click(function() {
  87. $('.t',this).toggle();
  88. });
  89.  
  90. $("#side").css({"bottom": "-300px"});
  91.  
  92. $("#buttonsend").toggle(
  93. function () {
  94. $("#side").animate({"bottom": "0px"}, "slow");
  95. },
  96. function () {
  97. $("#side").animate({"bottom": "-300px"}, "slow");
  98. });
  99. });
  100. </script>
  101.  
  102.  
  103.  
  104. <!--CSS customization here. -->
  105.  
  106. <style type="text/css">
  107.  
  108. ::-webkit-scrollbar-thumb {background-color: {color:Accent}; height: auto;}
  109. ::-webkit-scrollbar {background-color: #000; height:3px; width:4px;}
  110.  
  111. #s-m-t-tooltip{
  112. position:absolute;
  113. margin-top: 15px;
  114. z-index:9999;
  115. background:{color:background};
  116. }
  117.  
  118. pre {
  119. white-space: pre-wrap;
  120. white-space: -moz-pre-wrap;
  121. white-space: -pre-wrap;
  122. white-space: -o-pre-wrap;
  123. word-wrap: break-word;
  124. }
  125.  
  126.  
  127.  
  128. /*basics*/
  129. blockquote {
  130. padding:8px;
  131. margin:0;
  132. border-top:1px solid #eee;
  133. }
  134.  
  135. blockquote blockquote{
  136. border-bottom:1px solid #eee;
  137. }
  138.  
  139. body {
  140. background:{color:background};
  141. color:{color:text};
  142. font-family:Lato;
  143. font-weight:400;
  144. font-size:11px;
  145. text-align:left;
  146. margin:0;
  147. line-height:16px;}
  148.  
  149.  
  150. a {
  151. color:{color:link};
  152. text-decoration:none;
  153. }
  154.  
  155. a:hover {
  156. }
  157.  
  158. img{opacity:1;
  159. border:none;
  160. text-decoration:none}
  161.  
  162.  
  163. small {
  164. font-size:9px;}
  165.  
  166. big {
  167. font-size:12px;}
  168.  
  169.  
  170. #title {font-size:12px;
  171. line-height:18px;
  172. font-weight:bold;
  173. margin-bottom:10px;
  174. text-transform:uppercase;
  175. text-align:left;}
  176.  
  177.  
  178. /*header*/
  179. #header{
  180. background:{color:Header};
  181. height:350px;
  182. text-align:center;
  183. top:0;
  184. z-index:9999;
  185. left:0px;
  186. position:absolute;
  187. display:inline-block;
  188. width:100%;
  189. transition-duration:.5s;
  190. }
  191.  
  192. #desc{
  193. padding-top:125px;
  194. width:300px;
  195. text-align:left;
  196. display:inline-block;
  197. transition-duration:.5s;
  198. color:{color:Description Text};
  199. }
  200.  
  201. #tit{
  202. font: 20px Montserrat;
  203. color:{color:Header Text};
  204. display:block;
  205. margin-top:5px;
  206. margin-bottom:-3px;
  207. text-transform:uppercase;
  208. }
  209.  
  210. #header img{
  211. padding-right:10px;
  212. float:left;
  213. width:100px;
  214. }
  215.  
  216. #bg{
  217. width:100%;
  218. left:0;
  219. top:0;
  220. height:0;
  221. background:white;
  222. }
  223.  
  224.  
  225. #links a {
  226. margin-right:5px;
  227. display:inline-block;
  228. margin-bottom:5px;
  229. }
  230.  
  231. #description {
  232. margin:20px 0;
  233. }
  234.  
  235. #button a{
  236. display:inline-block;
  237. background:#eee;
  238. position:fixed;
  239. left:70%;
  240. top:30px;
  241. width:20px;
  242. padding:10px 20px;
  243. height:;
  244. }
  245.  
  246. #button img{
  247. width:20px;
  248. }
  249.  
  250.  
  251. /*pagination*/
  252. #pagination {
  253. margin:50px 0;
  254. text-transform:lowercase;
  255. font-weight:bold;
  256. }
  257. #pagination a {
  258. padding:0 15px;
  259. }
  260.  
  261. /*container*/
  262. #con {
  263. left:50%;
  264. margin-left:-250px;
  265. position:absolute;
  266. }
  267.  
  268.  
  269.  
  270. /*posts*/
  271.  
  272. #entries {
  273. margin-top:500px;
  274. width:500px;
  275. }
  276.  
  277.  
  278.  
  279. #posts {
  280. width:500px;
  281. {block:IndexPage}
  282. margin-bottom:135px;
  283. {/block:IndexPage}
  284. {block:PermalinkPage}
  285. margin-bottom:50px;
  286. {/block:PermalinkPage}
  287.  
  288. }
  289. #posts img {
  290. max-width:500px;
  291. }
  292.  
  293. #posts img, #posts li, #posts blockquote {max-width: 100%;}
  294. .caption {width:100%;
  295. margin-top:10px;
  296.  
  297. }
  298.  
  299. /*quote*/
  300.  
  301. #titlequote{text-align:left;
  302. padding-left:10px;
  303. margin-left:10px;
  304. border-left:3px solid #eee;
  305. line-height:18px;
  306. font:16px Montserrat;
  307. }
  308. #source {
  309. margin-top:15px;
  310. margin-left:15px;}
  311.  
  312. /*audio*/
  313.  
  314. .player {
  315. width:25px;
  316. height:25px;
  317. border:15px solid white;
  318. margin-left:72px;
  319. margin-top:72px;
  320. overflow:hidden;
  321. position:absolute;
  322. opacity:0.4;
  323. background:white;
  324. transition-duration:.5s;
  325. }
  326.  
  327. #audio:hover .player{
  328. opacity:1;
  329. }
  330.  
  331. .audioinfo {
  332. height:200px;
  333. font-family:Montserrat;
  334. overflow:hidden;
  335. padding:20px;
  336. }
  337.  
  338. #audio{height:200px}
  339.  
  340. #albumart img{
  341. width:200px;
  342. height:200px;
  343. }
  344.  
  345. #albumart{
  346. width:200px;
  347. height:200px;
  348. float:left;
  349. background-image:url('http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg');
  350. background-size:200px;
  351. }
  352.  
  353. .audioinfo span{
  354. display:block;
  355. text-align:center;
  356. padding:4px;
  357. }
  358.  
  359. .audioinfo span:first-child{
  360. color:{color:Accent};
  361. margin-top:25px;
  362.  
  363. }
  364.  
  365.  
  366. /*asks*/
  367. .q {margin-bottom:10px;
  368. padding:20px;
  369. line-height:200%;
  370. color:#333;
  371. background:#eee;
  372. }
  373.  
  374. .q:after{
  375. content:'';
  376. position:absolute;
  377. width: 0;
  378. height: 0;
  379. border-left: 20px solid transparent;
  380. border-right: 20px solid transparent;
  381. border-top: 20px solid #eee;
  382. margin-top:40px;
  383. margin-left:-35px;
  384. z-index:-100;
  385.  
  386. }
  387.  
  388. .as a{
  389. color:#000; font-family:Montserrat; text-transform:uppercase;
  390. }
  391. .as {
  392. font-weight:bold; color:#000;text-align:center;}
  393.  
  394. .a {
  395. margin-top:20px;
  396. line-height:200%;
  397. }
  398.  
  399.  
  400. /*chat*/
  401.  
  402. .chat ol {
  403. padding:0;
  404. list-style:none;
  405. }
  406. .line {padding:5px 0;border-bottom:1px dotted #eee;}
  407.  
  408. .label {font-weight:bold;color:{color:Accent};
  409. }
  410.  
  411.  
  412.  
  413.  
  414.  
  415. /*permalink and notes*/
  416.  
  417. #permalink {
  418. margin-top:15px;
  419. font-family:Montserrat;
  420. font-size:9px;
  421. text-transform:uppercase;
  422. }
  423. #permalink a {margin-right:10px;
  424. color:#000;
  425. }
  426.  
  427. #permalink a:hover{
  428. color:#aaa;
  429. text-decoration:none;
  430. }
  431.  
  432. .tags {
  433. word-break:break-all;
  434. font-size:9px;
  435. }
  436.  
  437. .pagenotes {
  438. {block:IndexPage}
  439. display: none!important;
  440. {/block:IndexPage}
  441. width:500px;
  442. background:black;
  443. color:#eee;
  444. text-transform:uppercase;
  445. font-size:8px;
  446. text-align:left;
  447. height:250px;
  448. overflow:auto;
  449. }
  450.  
  451.  
  452. .notecount{
  453. float:left;
  454. padding:8px 5px;
  455. color:{color:Accent};
  456. margin-right:10px;
  457. font:12px Montserrat;
  458. }
  459.  
  460. .pagenotes .notes{
  461. background:white;
  462. color:#999;
  463. border:1px solid #f9f9f9;
  464. font-size:9px;
  465. }
  466. .pagenotes img {
  467. display:none!important;}
  468. .pagenotes li {
  469. list-style-type:none;
  470. padding:5px 0px;
  471. text-align:left;
  472. }
  473.  
  474. #one, #two, #three, #buttonsend, #four, #five{
  475. width:30px;
  476. height:3px;
  477. position:fixed;
  478. bottom:38px;
  479. left:10px;
  480. background:white;
  481. z-index:999;
  482. }
  483.  
  484. #two{
  485. bottom:22px;
  486. }
  487.  
  488. #three{
  489. bottom:30px;
  490. }
  491.  
  492. #buttonsend{
  493. height:24px;
  494. bottom:17px;
  495. background:black;
  496. }
  497.  
  498. #side {
  499. width:100%;
  500. background:{color:Header};
  501. left:0px;
  502. bottom:-200px;
  503. padding:20px;
  504. padding-bottom:5px;
  505. z-index:99;
  506. text-align:center;
  507. position:fixed;
  508. }
  509.  
  510. #side a{
  511. display:inline-block;
  512. margin:5px;
  513. text-transform:uppercase;
  514. padding:10px 30px;
  515. color:{color:Header Text};
  516. margin-top:-5px;
  517. text-align:center;
  518. font-weight:700;
  519. transition-duration:.5s;
  520. border-bottom:1px solid transparent;
  521. }
  522.  
  523. #side a:hover{
  524. color:{color:Header Text};
  525. transition-duration:.5s;
  526. box-shadow:0px -5px {color:Header Text} inset;
  527. }
  528. #close{
  529. background:#eee;
  530. position:fixed;
  531. top:10px;
  532. left:10px;
  533. width:30px;
  534. height:40px;
  535. /*-webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
  536. /*transform: rotateY(60deg);*/
  537. }
  538.  
  539. #four{
  540. transform: rotate(45deg);
  541. /*Firefox*/
  542. -moz-transform: rotate(45deg);
  543. /*Microsoft Internet Explorer*/
  544. -ms-transform: rotate(45deg);
  545. /*Chrome, Safari*/
  546. -webkit-transform: rotate(45deg);
  547. /*Opera*/
  548. -o-transform: rotate(45deg);
  549. margin-top:13px;
  550. }
  551.  
  552.  
  553. #five{
  554. transform: rotate(-45deg);
  555. /*Firefox*/
  556. -moz-transform: rotate(-45deg);
  557. /*Microsoft Internet Explorer*/
  558. -ms-transform: rotate(-45deg);
  559. /*Chrome, Safari*/
  560. -webkit-transform: rotate(-45deg);
  561. /*Opera*/
  562. -o-transform: rotate(-45deg);
  563. margin-top:13px;
  564. }
  565.  
  566.  
  567.  
  568.  
  569. /* ------ POP UP LINKS STYLING ------*/
  570.  
  571. #fade { /*--Transparent background layer--*/
  572. display: none; /*--hidden by default--*/
  573. background: #000;
  574. position: fixed; left: 0; top: 0;
  575. width: 100%; height: 100%;
  576. opacity: .80;
  577. z-index: 9999;
  578. }
  579. .popup_block{
  580. display: none; /*--hidden by default--*/
  581. background: #fff;
  582. padding: 20px;
  583. text-style: bold;
  584. float: left;
  585. font-size: 10px;
  586. font-family: ;
  587. line-height:15px;
  588. position: fixed;
  589. top: 50%; left: 50%;
  590. z-index: 99999;
  591. }
  592. img.btn_close {
  593. float: right;
  594. width:25px;
  595. margin: -5px -5px 0 0;
  596. }
  597. /*--Making IE6 Understand Fixed Positioning--*/
  598. *html #fade {
  599. position: absolute;
  600. }
  601. *html .popup_block {
  602. position: absolute;
  603.  
  604. }
  605.  
  606. #linkessssss{
  607. font-size:9px;
  608. height:400px;
  609. overflow:auto;
  610. }
  611.  
  612. #linkessssss a{
  613. display:inline-block;
  614. color:{color:Accent};
  615. font-size:9px;
  616. font-family:Montserrat;
  617. text-transform:uppercase;
  618. text-decoration:none;
  619. padding:3px;
  620. -webkit-transition: all 0s ease-in-out;
  621. -moz-transition: all 0s ease-in-out;
  622. -o-transition: all 0s ease-in-out;
  623. }
  624.  
  625. #linkessssss a:hover{
  626. color:black;
  627. -webkit-transition: all 0s ease-in-out;
  628. -moz-transition: all 0s ease-in-out;
  629. -o-transition: all 0s ease-in-out;
  630. }
  631.  
  632.  
  633. #linkessssss h1, #linkessssss big{
  634. font-family:Montserrat;
  635. text-transform:uppercase;
  636. font-weight:bold;
  637. color:black;
  638. }
  639.  
  640. #linkessssss ul{
  641. list-style:none;
  642. margin-left:10px;
  643. }
  644.  
  645. #linkessssss li{
  646. border-left:1px solid #eee;
  647. padding-left:10px;
  648. margin-left:-40px;
  649. }
  650.  
  651. #linkessssss li:hover{
  652. border-color:black;
  653. }
  654. /* ------ POP UP LINKS END ------*/
  655.  
  656.  
  657.  
  658. #cred{
  659. position:fixed;
  660. bottom:15px;
  661. right:15px;
  662. text-align:right;
  663. }
  664.  
  665. #cred a{
  666. background:white;
  667. color:black;
  668. text-transform:uppercase;
  669. padding:5px;
  670. font-family:Montserrat;
  671. display:inline-block;
  672. font-size:9px;
  673. -webkit-transition: all 0.5s ease-in-out;
  674. -moz-transition: all 0.5s ease-in-out;
  675. -o-transition: all 0.5s ease-in-out;
  676. }
  677.  
  678. #cred a:hover{
  679. background:black;
  680. color:white;
  681. -webkit-transition: all 0.5s ease-in-out;
  682. -moz-transition: all 0.5s ease-in-out;
  683. -o-transition: all 0.5s ease-in-out;
  684. }
  685.  
  686.  
  687. {CustomCSS}
  688.  
  689.  
  690. </style>
  691.  
  692.  
  693.  
  694. </head>
  695.  
  696. <body>
  697.  
  698.  
  699. <a id="buttonsend" class="t" style="cursor:pointer; display:inline-block">
  700.  
  701. <span class="t" style="display:inline-block">
  702. <div id="one"></div>
  703. <div id="two"></div>
  704. <div id="three"></div></span>
  705.  
  706. <span class="t" style="display:none">
  707. <div id="one"></div>
  708. <div id="two"></div>
  709. <div id="three"></div>
  710. </span></a>
  711.  
  712. <div id="side">
  713. <a href="{text:Link 1 URL}">{text:Link 1}</a>
  714. <a href="{text:Link 2 URL}">{text:Link 2}</a>
  715. <a href="{text:Link 3 URL}">{text:Link 3}</a>
  716. <a href="{text:Link 4 URL}">{text:Link 4}</a>
  717. <a href="{text:Link 5 URL}">{text:Link 5}</a>
  718. {block:ifnotPopUpLinks}
  719. <a href="{text:Link 6 URL}">{text:Link 6}</a>
  720. {/block:ifnotPopUpLinks}
  721. {block:ifPopUpLinks}
  722. <a href="#?w=500" rel="02" class="poplight">More</a>
  723. {/block:ifPopUpLinks}
  724. </div>
  725.  
  726. <div id="header">
  727. <div id="desc">
  728. <a href="/"><img src="{image:Sidebar}"></a>
  729. <div id="tit"><a href="/" style="color:{color:Header Text}">{Title}</a></div>
  730. {Description}
  731. </div>
  732.  
  733. </div>
  734.  
  735.  
  736. <div id="con">
  737.  
  738.  
  739. <div id="entries">
  740.  
  741. {block:Posts}
  742. <div id="posts">
  743.  
  744.  
  745. {block:Quote}
  746.  
  747.  
  748. <div id="titlequote">“{Quote}”</div>
  749. {block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
  750. {/block:Quote}
  751.  
  752.  
  753.  
  754. {block:Text}
  755.  
  756. {block:Title}
  757. <div id="title">{Title}</div>{/block:Title}
  758. {Body}
  759. {/block:Text}
  760.  
  761. {block:Link}
  762. <div id="title"><a href="{URL}">{Name}</a></div>{block:Description}{Description}{/block:Description}
  763. {/block:Link}
  764.  
  765. {block:Chat}
  766. {block:Title}
  767. <h1>{Title}</h1>
  768. {/block:Title}
  769. <div class="chat">
  770. <ol>{block:Lines}
  771. <li class="line {Alt}">
  772. {block:Label}
  773. <span class="label">
  774. {Label}</span>
  775. {/block:Label}{Line}</li>
  776. {/block:Lines}
  777. </ol></div>
  778. {/block:Chat}
  779.  
  780. {block:Photo}
  781. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
  782. {/block:Photo}
  783.  
  784. {block:Photoset}
  785. {Photoset-500}
  786. {/block:Photoset}
  787.  
  788. {block:Video}
  789. {Video-500}
  790. {/block:Video}
  791.  
  792. {block:Audio}
  793. <div id="audio">
  794. <div id="albumart">
  795. {block:AlbumArt}
  796. <img src="{AlbumArtURL}">
  797. {/block:AlbumArt}</div>
  798. <div class="player">{AudioPlayerWhite}</div>
  799. <div class="audioinfo">
  800. {block:TrackName}<span>{TrackName}</span>{/block:TrackName}
  801. {block:Artist}<span>{Artist}</span>{/block:Artist}
  802. {block:Album}<span>{Album}</span>{/block:Album}
  803. {block:PlayCount}<span>{PlayCountWithLabel}</span>{/block:PlayCount}
  804. </div>
  805. </div>
  806. {/block:Audio}
  807.  
  808. {block:Answer}
  809. <div class="q">
  810. <div class="as">{Asker} said: </div>
  811. {Question}</div>
  812. <div class="a">{Answer}</div>
  813. {/block:Answer}
  814.  
  815. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  816.  
  817.  
  818. {block:Date}
  819. <div id="permalink">
  820. <div class="notecount">{FormattedNoteCount}</div>
  821. <a href="{Permalink}" >{12Hour}:{Minutes} {AmPm}</a>{block:NoteCount}<a href="{Permalink}">+ {NoteCount}</a>{/block:NoteCount}{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:ContentSource}{/block:RebloggedFrom}
  822. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  823. </div>
  824.  
  825. {/block:Date}
  826.  
  827.  
  828. </div>
  829.  
  830.  
  831. {block:PostNotes}
  832. <div class="pagenotes">
  833. {PostNotes}
  834. </div>
  835. {/block:PostNotes}
  836.  
  837.  
  838. {/block:Posts}
  839.  
  840. <div id="pagination">
  841. {block:Pagination}
  842. {block:PreviousPage}
  843. <a href="{PreviousPage}">&larr; previous </a>
  844. {/block:PreviousPage}
  845.  
  846.  
  847. {block:NextPage}
  848. <a href="{NextPage}">next &rarr;</a>
  849. {/block:NextPage}
  850. {/block:Pagination}
  851. </div>
  852.  
  853.  
  854.  
  855. </div>
  856.  
  857. </div>
  858.  
  859.  
  860. {block:ContentSource}
  861. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  862. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  863. {/block:SourceLogo}
  864. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  865. {/block:ContentSource}
  866.  
  867.  
  868. <div id="cred">
  869. <a href="http://hardziam.tumblr.com">th.</a>
  870. </div>
  871.  
  872.  
  873.  
  874. </body>
  875.  
  876. <!------ POP UP LINKS ------>
  877.  
  878. <div id="02" class="popup_block">
  879.  
  880. <div id="linkessssss">
  881.  
  882. <h1>navigate this site.</h1>
  883.  
  884. <ul>
  885. <li><a href="/">put in lots of links here</a></li>
  886. <li><a href="/">a scrollbar will appear</a></li>
  887. <li><a href="/">you could make it an about page if you'd like</a></li>
  888.  
  889. </ul><ul>
  890. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
  891.  
  892. </ul>
  893. <a href="/">subtitle link</a>
  894. <ul>
  895. <li>
  896. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  897. </li>
  898. </ul>
  899.  
  900. this box is optional. You can use it as a popup navi/about it's really versatile.
  901.  
  902. </div>
  903.  
  904. </div>
  905.  
  906. </div></div></div></div></div></div></div></div></div></div>
  907.  
  908. <!------ POP UP LINKS ------>
  909.  
  910.  
  911. <!------ POP UP BOX SCRIPTS ------->
  912.  
  913.  
  914. <script type="text/javascript"
  915. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  916. <script>
  917. $(document).ready(function() {
  918. //
  919. $('a.poplight[href^=#]').click(function() {
  920. var popID = $(this).attr('rel'); //Get Popup Name
  921. var popURL = $(this).attr('href'); //Get Popup href to define size
  922. var query= popURL.split('?');
  923. var dim= query[1].split('&');
  924. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  925. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-22-128.png" class="btn_close" title="Close" alt="Close" /></a>');
  926. var popMargTop = ($('#' + popID).height() + 80) / 2;
  927. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  928. //Apply Margin to Popup
  929. $('#' + popID).css({
  930. 'margin-top' : -popMargTop,
  931. 'margin-left' : -popMargLeft
  932. });
  933. $('body').append('<div id="fade"></div>');
  934. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  935. return false;
  936. });
  937. $('a.close, #fade').live('click', function() {
  938. $('#fade , .popup_block').fadeOut(function() {
  939. $('#fade, a.close').remove(); //fade them both out
  940. });
  941. return false;
  942. });
  943. });
  944. </script>
  945.  
  946. <!------ POP UP BOX END ------->
  947.  
  948. </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!