API tools faq
paste
laeverdeens

Theme 04 version 2

laeverdeens
Feb 24th, 2013
7,771
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.58 KB | None | 0 0
raw download clone embed print report
  1. <head>
  2.  
  3. <script type="text/javascript"
  4. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  5.  
  6. <script>
  7.  
  8.  
  9.  
  10. $(document).ready(function() {
  11.  
  12. //
  13.  
  14.  
  15.  
  16. //When you click on a link with class of poplight and the href starts with a #
  17.  
  18. $('a.poplight[href^=#]').click(function() {
  19.  
  20. var popID = $(this).attr('rel'); //Get Popup Name
  21.  
  22. var popURL = $(this).attr('href'); //Get Popup href to define size
  23.  
  24.  
  25.  
  26. //Pull Query & Variables from href URL
  27.  
  28. var query= popURL.split('?');
  29.  
  30. var dim= query[1].split('&');
  31.  
  32. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  33.  
  34.  
  35.  
  36. //Fade in the Popup and add close button
  37.  
  38. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://tiny.cc/closeimg" class="btn_close" title="Close Window" alt="Close" /></a>');
  39.  
  40.  
  41. //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
  42.  
  43. var popMargTop = ($('#' + popID).height() + 80) / 2;
  44.  
  45. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  46.  
  47.  
  48.  
  49. //Apply Margin to Popup
  50.  
  51. $('#' + popID).css({
  52.  
  53. 'margin-top' : -popMargTop,
  54.  
  55. 'margin-left' : -popMargLeft
  56.  
  57. });
  58.  
  59.  
  60.  
  61. //Fade in Background
  62.  
  63. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  64.  
  65. $('#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
  66.  
  67.  
  68.  
  69. return false;
  70.  
  71. });
  72.  
  73.  
  74.  
  75. //Close Popups and Fade Layer
  76.  
  77. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  78.  
  79. $('#fade , .popup_block').fadeOut(function() {
  80.  
  81. $('#fade, a.close').remove(); //fade them both out
  82.  
  83. });
  84.  
  85. return false;
  86.  
  87. });
  88.  
  89.  
  90.  
  91.  
  92.  
  93. });
  94.  
  95. </script>
  96.  
  97.  
  98. <!--
  99. THEME BY CLARAOSMIN
  100.  
  101. -->
  102.  
  103. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  104.  
  105. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  106.  
  107. <!-- DEFAULT VARIABLES -->
  108. <meta name="color:Background" content="#ffffff" />
  109. <meta name="color:Posts" content="#ffffff" />
  110. <meta name="color:Text" content="#282727" />
  111. <meta name="color:Linkhover" content="#ffffff"/>
  112. <meta name="color:Link" content="#cc9999" />
  113. <meta name="color:Scrollbar" content="#cc9999" />
  114. <meta name="color:QuestionBg" content="#f8f8f8" />
  115.  
  116. <meta name="text:Link 1 URL" content="">
  117. <meta name="text:Link 1" content="">
  118. <meta name="text:Link 2 URL" content="">
  119. <meta name="text:Link 2" content="">
  120. <meta name="text:Link 3 URL" content="">
  121. <meta name="text:Link 3" content="">
  122.  
  123. <meta name="text:firstletter" content="">
  124.  
  125. <meta name="image:1Sidebar" content="" />
  126. <meta name="image:2Sidebar" content="" />
  127.  
  128. <title>{Title}</title>
  129. <link rel="shortcut icon" href="{Favicon}">
  130. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  131. {block:Description}
  132. <meta name="description" content="{MetaDescription}" />
  133. {/block:Description}
  134.  
  135. <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  136.  
  137.  
  138.  
  139. </head>
  140.  
  141. <style type="text/css">
  142.  
  143. body { background:url('http://assets.tumblr.com/images/x.gif') repeat;
  144. line-height:140%;
  145. font-family: times;
  146. font-size:11px;
  147. text-align:justify;
  148. background-color:{color:background};
  149. color:{color:text}; }
  150.  
  151. a, a:active, a:visited{
  152. text-decoration: none;
  153. color: {color:link};}
  154.  
  155. small {font-size: 11px; }
  156.  
  157.  
  158. a:hover{
  159. color: {color:linkhover};
  160. -webkit-transition: all 0.3s ease-in-out;
  161. -moz-transition: all 0.3s ease-in-out;
  162. opacity: 1;
  163. -o-transition: all 0.3s ease-in-out;
  164. -ms-transition: all 0.3s ease-in-out;
  165. transition: all 0.3s ease-in-out;}
  166.  
  167.  
  168. big { font-size: 12px; }
  169.  
  170. #fade {
  171. display: none;
  172. background: #000;
  173. position: fixed;
  174. left: 0;
  175. top: 0;
  176. width: 100%;
  177. height: 100%;
  178. opacity: .80;
  179. z-index: 9999;
  180. }
  181.  
  182. .popup_block{
  183. display: none; width: 400px;
  184. background: #000;
  185. padding: 55px;
  186. float: left; height: 310px; color: #313131;
  187. position: fixed;
  188. top: 50%; overflow-y: auto; overflow-x: no scroll;
  189. left: 50%;
  190. z-index: 99999;
  191. }
  192.  
  193.  
  194.  
  195. img.btn_close {
  196. float: right;
  197. margin: -55px -55px 0 0; opacity: 0;
  198. }
  199.  
  200.  
  201. #continue {
  202. margin-top:10px;
  203. }
  204.  
  205. #titless { display:inline-block;
  206. width:480px; font-family: times;
  207. padding:10px;
  208. color:#ffffff; font-style: italic;
  209. letter-spacing:2px;
  210. font-size:20px;
  211. text-transform:uppercase;
  212. text-align:center; }
  213.  
  214. #continue a {
  215. display:inline-block;
  216. background-color:#928a24;
  217. width:70px; font-family: times;
  218. padding:5px;
  219. color:#ffffff;
  220. letter-spacing:2px;
  221. font-size:10px;
  222. text-transform:uppercase;
  223. text-align:center;
  224. border-bottom:2px solid transparent;
  225. -webkit-transition: all 0.3s ease-in-out;
  226. -moz-transition: all 0.3s ease-in-out;
  227. transition: all 0.3s ease-in-out;
  228. }
  229.  
  230. .links2 { font-family: times; font-size: 11px; font-style:italic; letter-spacing:2px; color: #8b8888;text-transform: lowercase; }
  231.  
  232. .links2 a { display: block; text-align:center;padding: 10px; margin: 5px;color:#fff; font-style:italic; letter-spacing:2px; color: #fff;}
  233.  
  234. blockquote {text-align:left;padding-left:10px; border-color:{color:border}; border-left:2px solid #d6d4ce;}
  235. blockquote img{max-width:485px;}
  236.  
  237. /* POSTS */
  238.  
  239. #container {
  240. width: 850px;
  241. margin-left: 420px; margin-top: 100px;
  242. margin-bottom: 50px;
  243. }
  244.  
  245. .quote { font-size:14px; font-style:italic; text-align:center; }
  246. .source { width:400px; float:center; margin:auto; margin-top:10px; padding-top:5px; text-align:center; border-top:3px double #f1f1f1; }
  247.  
  248. .quote-source { margin-top:-40px; text-align:center; margin-bottom:20px; }
  249. .source { letter-spacing:1px;background-color:#ffffff; padding:5px;}
  250. .quote-border { border-top:3px double #dddddd; padding:10px;margin:20px 0 10px 0; }
  251.  
  252.  
  253. #pagey { font-size: 6px; }
  254. #pagey:a { font-size: 6px; }
  255.  
  256. h1{ font-weight: 500;
  257. font-size: 15px!important; font-family: times; text-transform: lowercase; line-height: 100%; font-style: italic;
  258. }
  259.  
  260.  
  261.  
  262. #post {
  263. font-size:11px;
  264. margin-bottom: 15px; padding: 10px;
  265. width: 500px;
  266. background-color:{color:background};
  267. color:{color:text};
  268. text-align: justify;
  269. }
  270.  
  271. .iuu { opacity: 1; color: #747474; margin-bottom: -10px;}
  272.  
  273. .iuu a { color: #747474; }
  274.  
  275. .credit {right: 1px;bottom: 5px;text-transform: uppercase; position: fixed; font-size: 8px; right: 7px;}
  276.  
  277.  
  278. /* SIDEBAR */
  279.  
  280. #top {
  281. margin-top:-115px;
  282. width:550px;
  283. margin-left:430px; padding: 30px; padding-bottom: 15px;
  284. position:fixed; background-color: #fff;
  285. }
  286.  
  287. #menu a {
  288. padding:5px; color:#fff; background-color: #030303;
  289. margin:0 10px;
  290. font-size: 8px;
  291. letter-spacing: 1px; font-family: calibri;
  292. text-transform: uppercase;
  293. -webkit-transition: all 0.2s ease-out;
  294. -o-transition: all 0.2s ease-out;
  295. -webkit-transition: all 0.2s ease-out;
  296. -moz-transition: all 0.2s ease-out;
  297. }
  298.  
  299. #blogtitle {background-color: transparent; margin-top:5px; height:auto; padding:4px; font-family:Calibri; font-size:15px; text-transform:lowercase; font-style:none; width:500px; margin-left:6px; margin-bottom: 5px;}
  300.  
  301. #blogtitle a {padding:2px; color: {color:text}; font-size:20px; font-style:italic; font-family: times;}
  302.  
  303. /* AUDIO */
  304.  
  305. .audiobox {
  306. width:500px;
  307. opacity:0.5;
  308. background-color:#f0f0f0;
  309.  
  310.  
  311. }
  312.  
  313. .audio {
  314. height:26px;
  315. width:26px;
  316. margin-left:237px;
  317. overflow:hidden;
  318.  
  319.  
  320.  
  321. }
  322.  
  323.  
  324. /* ANSWERS */
  325.  
  326. #question {padding:10px;background-color: {color:questionbg};position: relative;border: 4px solid #f2f2f2;}
  327. #question:after, #demo:before {border: solid transparent;content: ' ';height: 0;left: 100%;position: absolute;width: 0;}
  328. #question:after {border-width: 9px;border-left-color: #f2f2f2;top: 15px;}
  329. #question:before {border-width: 14px;border-left-color: #f2f2f2;top: 10px;}
  330.  
  331.  
  332. .la { opacity: 0; margin-top: -10px; }
  333.  
  334. /* INFO */
  335.  
  336.  
  337. .ask {
  338. text-align:justify;
  339. padding:0px;
  340. line-height:14px;
  341. text-transform:lowercase;
  342. font-size:10px;
  343. }
  344.  
  345. .ask a:hover {
  346. background-color:transparent;
  347. }
  348.  
  349.  
  350.  
  351.  
  352. /* CONTROLS */
  353.  
  354. iframe#tumblr_controls {
  355. right:3px !important;
  356. position: fixed !important;
  357. -webkit-transition: opacity 0.7s linear;
  358. opacity: 0.2;
  359. -webkit-transition: all 0.8s ease-out;
  360. -moz-transition: all 0.8s ease-out;
  361. transition: all 0.8s ease-out;}
  362.  
  363. iframe#tumblr_controls:hover{
  364. -webkit-transition: opacity 0.7s linear;
  365. opacity: 1;
  366. -webkit-transition: all 0.4s ease-out;
  367. -moz-transition: all 0.4s ease-out;
  368. transition: all 0.4s ease-out;}
  369.  
  370. iframe#tumblr_controls {
  371. top: 0% !important;
  372. right:0% !important;
  373. position: fixed !important;}
  374.  
  375. /* PAGINATION */
  376.  
  377. #pagination {
  378. width:200px; padding-top: 240px;
  379. font-size:10px;
  380. word-spacing:7px; }
  381.  
  382. .jump_page {
  383. padding:3px;
  384. background-color:#transparent; }
  385.  
  386. .current_page {
  387. padding:3px;
  388. background-color:#transparent;
  389. color:{color:text};}
  390.  
  391. #leftcolumn {
  392. position:fixed;
  393. width:130px;
  394. padding:10px;
  395. margin-left:0px;
  396. text-align:right;
  397. }
  398.  
  399.  
  400.  
  401. /* SCROLLBAR */
  402.  
  403. ::-webkit-scrollbar-thumb:vertical {
  404. background-color:{color:scrollbar};
  405. height:30px;}
  406.  
  407. ::-webkit-scrollbar-thumb:horizontal {
  408. background-color:{color:scrollbar};
  409. height:10px!important;}
  410.  
  411. ::-webkit-scrollbar {
  412. background-color:{color:background};
  413. height:10px;width:08px;}
  414.  
  415.  
  416. .links { opacity: 1; width: 125px; }
  417.  
  418.  
  419. .links a, .links a:link, .links a:active, .links a:visited {
  420. width: 70px; margin: 2px;
  421. text-align: center; text-transform: uppercase;
  422. font-family: calibri; background-color: #333;
  423. font-size: 8px;
  424. letter-spacing: 1px; padding: 3px;
  425. color: #fff; margin-top: 9px; line-height: 250%;
  426. }
  427.  
  428.  
  429.  
  430. @font-face { font-family: "baskere"; src: url('http://static.tumblr.com/ihkaswt/EfYmids2v/new_baskerville_italic.ttf'); }
  431.  
  432.  
  433. .tags {
  434. margin-left: 0; opacity: 1; color: 747474;
  435. padding-left: 2px; padding-top: 5px; text-transform: lowercase;}
  436.  
  437. .tags a { color: {color:text}; font-family: baskere; }
  438.  
  439.  
  440.  
  441. #pagination1 {font-family:trebuchet ms; font-size:8px; float: left; margin-left: 2px; padding: 2px; padding-right: 5px; padding-left: 5px; }
  442.  
  443. #pagination {font-family:trebuchet ms; font-size:8px; float: left;}
  444.  
  445. #pagination a{font-family:trebuchet ms;
  446. font-size:8px; float: left; margin-left: 2px; padding: 2px; padding-left: 5px; padding-right: 5px;}
  447.  
  448. #pagination a:hover{color:{color:link hover};}
  449.  
  450.  
  451. #pagination a:hover{color:{color:link hover};}
  452.  
  453.  
  454. ol.notes li {
  455. width: 500px; color: {color:text};
  456. padding: 10px; margin-top: -40px;
  457. margin: 0 0 3px -50px;
  458. border-bottom: 1px solid #f2f2f2; }
  459.  
  460. ol.notes li img {
  461. padding-right: 10px;
  462. margin-bottom: -5px;
  463. opacity: 0.85;
  464. filter:alpha(opacity=85); }
  465.  
  466. ol.notes li:hover { border-bottom: 1px solid #f2f2f2; }
  467. ol.notes li img:hover { opacity: 1; filter:alpha(opacity=100); }
  468.  
  469. .nav2 {position: fixed;width: 500px; padding: 10px 20px; background-color: #fff; color: #777; bottom: 0px; margin-left: 420px; text-align: center; font-size: 9px;}
  470.  
  471.  
  472. {CustomCSS}
  473. </style>
  474.  
  475. <body><div id="top">
  476.  
  477. <div id="blogtitle"><a href="/">{title}</a></div>
  478.  
  479. <div id="menu">
  480. <a href="/">index</a> <a href="/ask">message</a> <a href="{text:Link 1 URL}">{text:Link 1}</a>
  481. <a href="{text:Link 2 URL}">{text:Link 2}</a>
  482. <a href="{text:Link 3 URL}">{text:Link 3}</a>
  483. </div>
  484. </div>
  485.  
  486.  
  487. <div style="width: 379px; position: fixed; top: 0px; bottom: 0px; background-repeat: repeat-y; background-position: center center; right: 0px; left: -10px; text-align: center; padding: 0px 6px 0px 7px;">
  488.  
  489. <script language="JavaScript">
  490. <!--
  491.  
  492. /*
  493. Random Image Script- By JavaScript Kit (http://www.javascriptkit.com)
  494. Over 400+ free JavaScripts here!
  495. Keep this notice intact please
  496. */
  497.  
  498. function random_imglink(){
  499. var myimages=new Array()
  500. //specify random images below. You can have as many as you wish
  501. myimages[1]="{image:1sidebar}"
  502. myimages[2]="{image:2sidebar}"
  503.  
  504.  
  505.  
  506. var ry=Math.floor(Math.random()*myimages.length)
  507. if (ry==0)
  508. ry=1
  509. document.write('<img src="'+myimages[ry]+'" border=0>')
  510. }
  511. random_imglink()
  512. //-->
  513. </script>
  514.  
  515. <p>
  516. </div></center>
  517.  
  518. <div style="position: fixed; top: 240px; right: 0px; background-color: #fff; text-align: justify; left: 100px; line-height: 140%; font-weight: 400; font-size: 11px; font-family: times; width: 125px; padding: 30px; color: #5c5b5b;">
  519.  
  520. <div style="background-color: #333; padding: 5px; padding-top: 2px; padding-bottom: 2px; color: #fff; font-size: 36px; font-style: none; float: left; margin-right: 8px; line-height: 100%; padding-right: 8px; font-family: times; font-style: italic"> {text:firstletter}</div> {Description}
  521.  
  522. </div>
  523.  
  524.  
  525.  
  526.  
  527.  
  528. <div id="container">
  529.  
  530.  
  531. {block:Posts}
  532. <div id="post">
  533.  
  534.  
  535.  
  536. {block:ContentSource}
  537. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  538. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  539. {/block:SourceLogo}
  540. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  541. {/block:ContentSource}
  542.  
  543.  
  544. {block:Text}
  545. {block:Title}<h1>{Title}</h1>{/block:Title}
  546. {Body}
  547. {/block:Text}
  548.  
  549. {block:Photo}
  550. {LinkOpenTag}<img src="{PhotoURL-500}"/>{LinkCloseTag}
  551. {Caption}
  552. {/block:Photo}
  553.  
  554. {block:Photoset}
  555. {Photoset-500}
  556. {Caption}
  557. {/block:Photoset}
  558.  
  559. {block:Quote}
  560. <div class="quote">"{Quote}"</div>
  561. {block:Source}
  562. <div class="source">- {Source}</div>
  563. {/block:Source}
  564. {/block:Quote}
  565.  
  566. {block:Link}
  567. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  568. {block:Description}{Description}{/block:Description}
  569. {/block:Link}
  570.  
  571.  
  572. {block:Video}
  573. {Video-500}
  574. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  575. {/block:Video}
  576.  
  577.  
  578. {block:Chat}
  579. {block:Title}<h1>{Title}</h1>{/block:Title}
  580. {block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}
  581. {/block:Chat}
  582.  
  583.  
  584. {block:Answer}
  585. <div class="ask" style="font-size: 8px; font-family: cambria; text-transform: uppercase"><table><td width="74px"><img src="{AskerPortraitURL-64}"> </img><td><td width="456px">
  586. <font style="font-size: 9px; width: 64px;">{Asker} ASKED:</font><br>
  587.  
  588. {Question} </td></table>
  589. </div><div style="margin-left: 10px; margin-top: -5px;">
  590. {Answer}</div>
  591. {/block:Answer}
  592.  
  593. {block:Audio}
  594. <div class="audiobox"><div class="audio"><center>{AudioPlayerWhite}</center></div></div><div style="border-top:2px solid {color:#f5f5f5};"></div>
  595. {block:Caption}
  596. <span class="caption">{Caption}</span>
  597. {/block:Caption}
  598. {/block:Audio}
  599.  
  600.  
  601.  
  602.  
  603. <div style="">
  604.  
  605. <div class="iuu"><div style="font-size:8px;
  606. text-transform: uppercase;
  607. letter-spacing: 1px;
  608. width: 500px; border-top: 1px solid #f1f1f1;
  609. font-family: calibri; padding-bottom: 3px; padding-top: 5px;
  610. color: #797979; margin-top: 4px;
  611.  
  612. line-height: 100%;"> <a href="{Permalink}"> {TimeAgo} {block:NoteCount} · {NoteCount}{/block:NoteCount} </a> <div style="float:right;">{block:RebloggedFrom}<a href="{ReblogParentURL}">VIA</a> · <a href="{ReblogRootURL}"title="{ReblogRoottitle}">SOURCE</a>{/block:RebloggedFrom} </div></div></div>
  613.  
  614.  
  615. </div> </div>
  616.  
  617.  
  618. <div class="tags" style="font-size:10px; line-height: 150%; margin-left: 10px; border-top: 1px solid #f1f1f1; width: 500px; margin-bottom: 55px; margin-top: -12px; text-align: center;">{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag} &nbsp;</a>
  619. {/block:Tags}{/block:HasTags}</div>
  620.  
  621.  
  622.  
  623. {block:PermalinkPage}{block:PostNotes}<div style="width:500px;"><div style="text-align:left;padding-bottom:10px; ">
  624. <ol class="notes">{PostNotes}</div></div>{/block:PostNotes}{/block:PermalinkPage}
  625.  
  626. {/block:Posts}
  627.  
  628.  
  629. </div>
  630.  
  631. <div class="nav2"> {block:Pagination}<center>
  632. {block:PreviousPage}
  633. <a href="{PreviousPage}"><big>←</big></a>
  634. {/block:PreviousPage}
  635.  
  636.  
  637. {block:NextPage}
  638. <a href="{NextPage}"><big>→</big></a>
  639. {/block:NextPage}<br>
  640. {/block:Pagination}</div>
  641.  
  642. </div>
  643.  
  644. </div>
  645. <a href="{ReblogRootURL}" title="{ReblogRootName}"></a>
  646. <div style="float: center;">{block:RebloggedFrom} via <a href="{ReblogParentURL}" title="{ReblogParentName}">{ReblogParentName}</a> (© <a href="{ReblogRootURL}" title="{ReblogRootName}">{ReblogRootName}</a>) {/block:RebloggedFrom}</div><div class="credit" style="font-family: calibri; font-size: 8px;"><a href="http://claraosmin.tumblr.com/">CLARAOSMIN</a></div>
  647. </body>
  648. </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!