Advertisement
sofiiayala

Theme 26 by Sofi for Tumblr

May 31st, 2014
525
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.43 KB | None | 0 0
  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. <head><title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  7.  
  8. <!---- Theme 26 by Sofi (doctorwatsn.tumblr.com). DON'T REMOVE THE CREDIT OR CLAIM THE THEME AS YOURS. DON'T USE IT AS A BASE --->
  9.  
  10. <meta name="color:top background" content="#eee"/>
  11. <meta name="color:bottom background" content="#fff"/>
  12. <meta name="color:Text" content="#605f5f"/>
  13. <meta name="color:Link" content="#b8b8b8"/>
  14. <meta name="color:border" content="#dcdbdb"/>
  15. <meta name="color:scrollbar" content="#999"/>
  16. <meta name="image:top background" content=""/>
  17.  
  18. <meta name="if:Info on hover" content="0"/>
  19.  
  20. <meta name="text:title" content=""/>
  21. <meta name="text:askbox title" content="Ask me something"/>
  22. <meta name="text:askbox link" content="mail"/>
  23. <meta name="text:link 1 message" content="link 1"/>
  24. <meta name="text:link 1 url" content="/"/>
  25. <meta name="text:link 2 message" content="link 2"/>
  26. <meta name="text:link 2 url" content="/ask"/>
  27. <meta name="text:link 3 message" content="link 3"/>
  28. <meta name="text:link 3 url" content="/"/>
  29. <meta name="text:link 4 message" content="link 4"/>
  30. <meta name="text:link 4 url" content="/"/>
  31. <meta name="text:link 5 message" content="link 5"/>
  32. <meta name="text:link 5 url" content="/"/>
  33.  
  34. <script type="text/javascript">
  35. WebFontConfig = {
  36. google: { families: [ 'Lato:400,300,500:latin' ] }
  37. };
  38. (function() {
  39. var wf = document.createElement('script');
  40. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  41. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  42. wf.type = 'text/javascript';
  43. wf.async = 'true';
  44. var s = document.getElementsByTagName('script')[0];
  45. s.parentNode.insertBefore(wf, s);
  46. })(); </script>
  47.  
  48. <style type="text/css">
  49.  
  50.  
  51. ::-webkit-scrollbar {width: 4px; height: 4px; background: {color:bottom background}; }
  52. ::-webkit-scrollbar-thumb { background-color: {color:scrollbar}; -webkit-border-radius: 0ex; }
  53.  
  54. body {
  55. background:{color:bottom background};
  56. margin:0px;
  57. color:{color:text};
  58. font-family:times;
  59. font-size:9px;
  60. line-height:110%;
  61. letter-spacing: 0.5px;
  62. }
  63.  
  64. body, a, a:hover {cursor: url(http://media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), auto;}
  65.  
  66. a {
  67. text-decoration:none;
  68. outline:none;
  69. -moz-outline-style:none;
  70. color:{color:link};
  71. }
  72.  
  73. img {
  74. border:none;
  75. }
  76.  
  77. blockquote {
  78. padding-left:5px;
  79. border-left:1px solid;
  80. margin-left: 2px;
  81. }
  82.  
  83. h1 {
  84. font-size:16px;
  85. font-family:'Lato', sans-serif;
  86. font-weight: 300;
  87. letter-spacing: 1.5px;
  88. line-height: 130%;
  89. }
  90.  
  91. .hr {
  92. color: #f0eded;
  93. }
  94.  
  95. #background {
  96. background-color: {color:top background};
  97. width: 100%;
  98. height: 55%;
  99. position: fixed;
  100. z-index: -99;
  101. background-image:url("{image:top background}");
  102. background-size:contain;
  103. background-position:left top;
  104. background-attachment:fixed;
  105. }
  106.  
  107. #entries {
  108. padding-bottom:10px;
  109. width:420px;
  110. margin-top:100px;
  111. padding-left: 30px;
  112. z-index: 99;
  113.  
  114. }
  115.  
  116. #post {
  117. width:400px;
  118. margin-top:60px;
  119. margin-bottom:0px;
  120. text-align: left;
  121. overflow:hidden;
  122. background-color: {color:bottom background};
  123. position: relative;
  124. }
  125.  
  126. #cont {
  127. background-color: {color:bottom background};
  128. }
  129.  
  130. {block:indexpage}
  131. #cont:hover #info {
  132. margin-top: 0px;
  133. transition: all 0.3s linear;
  134. -webkit-transition: opacity 0.3s linear;
  135. -webkit-transition: all 0.3s linear;
  136. -moz-transition: all 0.3s linear;
  137. }
  138. {block:indexpage}
  139.  
  140. #post:hover #tags {
  141. opacity: 1;
  142. transition: all 0.3s linear;
  143. -webkit-transition: opacity 0.3s linear;
  144. -webkit-transition: all 0.3s linear;
  145. -moz-transition: all 0.3s linear;
  146. }
  147.  
  148. #title {
  149. width:440px;
  150. margin-top:30px;
  151. height: auto;
  152. font-size:22px;
  153. margin-left: 30px;
  154. font-family: 'Lato', sans-serif;
  155. letter-spacing: 1px;
  156. margin-bottom: 5px;
  157. border-bottom: 1px solid {color:border};
  158. padding-bottom: 3px;
  159. line-height: 130%;
  160. text-align: left;
  161. font-weight: bolder;
  162. }
  163.  
  164. #sidebar {
  165. width:500px;
  166. padding-top:40px;
  167. height: auto;
  168. margin-bottom:40px;
  169. text-align: center;
  170. background-color: transparent;
  171. }
  172.  
  173. #links {
  174. width: 440px;
  175. display:block;
  176. text-align: right;
  177. font-family: 'Lato', sans-serif;
  178. margin-left: 30px;
  179. background-color: transparent;
  180. height: auto;
  181. padding-bottom: 15px;
  182. text-transform: uppercase;
  183. letter-spacing: 0.3px;
  184. font-size: 10px;
  185. z-index: 9999999999999999;
  186. transition: all 0.5s linear;
  187. -webkit-transition: opacity 0.5s linear;
  188. -webkit-transition: all 0.5s linear;
  189. -moz-transition: all 0.5s linear;
  190. }
  191.  
  192. #links a {
  193. color: {color:text};
  194. margin-left: 10px;
  195. padding-bottom: 3px;
  196. border-bottom: 1px solid transparent;
  197. transition: all 0.2s linear;
  198. -webkit-transition: opacity 0.2s linear;
  199. -webkit-transition: all 0.2s linear;
  200. -moz-transition: all 0.2s linear;
  201. }
  202.  
  203. #links a:hover {
  204. border-bottom: 1px solid {color:text};
  205. transition: all 0.2s linear;
  206. -webkit-transition: opacity 0.2s linear;
  207. -webkit-transition: all 0.2s linear;
  208. -moz-transition: all 0.2s linear;
  209. }
  210.  
  211. #description {
  212. width:440px;
  213. text-align: center;
  214. height: auto;
  215. margin-top: 5px;
  216. font-size: 10px;
  217. letter-spacing: 0.3px;
  218. line-height: 140%;
  219. margin-left:30px;
  220. font-family: helvetica;
  221. background-color: transparent;
  222. }
  223.  
  224. #pagination {
  225. width:440px;
  226. margin-top: 60px;
  227. line-height: 130%;
  228. height:20px;
  229. text-align:center;
  230. background-color:{color:bottom background};
  231. font-size:11px;
  232. bottom:0px;
  233. opacity: 0.8;
  234. color:{color:text};
  235. letter-spacing: 5px;
  236. font-family: 'Lato', sans-serif;
  237. -webkit-transition: opacity 0.5s linear;
  238. -webkit-transition: all 0.5s linear;
  239. -moz-transition: all 0.5s linear;
  240. transition: all 0.s linear;
  241. }
  242.  
  243. #pagination:hover {
  244. opacity: 1;
  245. -webkit-transition: opacity 0.5s linear;
  246. -webkit-transition: all 0.5s linear;
  247. -moz-transition: all 0.5s linear;
  248. transition: all 0.s linear;
  249. }
  250.  
  251. #pagination a {
  252. color:{color:text};
  253. opacity: 1;
  254. -webkit-transition: opacity 0.5s linear;
  255. -webkit-transition: all 0.5s linear;
  256. -moz-transition: all 0.5s linear;
  257. transition: all 0.s linear;
  258. }
  259.  
  260. #pagination a:hover {
  261. color:{color:bottom background};
  262. opacity: 1;
  263. -webkit-transition: opacity 0.5s linear;
  264. -webkit-transition: all 0.5s linear;
  265. -moz-transition: all 0.5s linear;
  266. transition: all 0.s linear;
  267. }
  268.  
  269. #info {
  270. {block:permalink}
  271. text-align:right;
  272. margin-top:0px;
  273. border-bottom: 1px solid {color:border};
  274. border-left: 1px solid {color:border};
  275. border-right: 1px solid {color:border};
  276. padding: 10px;
  277. font-family: helvetica;
  278. width: 416px;
  279. opacity:1;
  280. {/block:permalink}
  281. {block:indexpage}
  282. float: right;
  283. margin-right: -18px;
  284. background-color: {color:bottom background};
  285. padding: 10px;
  286. padding-top: 8px;
  287. padding-bottom: 8px;
  288. margin-top: 0px;
  289. border-bottom: 1px solid {color:border};
  290. border-left: 1px solid {color:border};
  291. border-right: 1px solid {color:border};
  292. font-family: helvetica;
  293. {block:ifInfoonhover}
  294. margin-top: -30px;
  295. -webkit-transition: opacity 0.3s linear;
  296. -webkit-transition: all 0.3s linear;
  297. -moz-transition: all 0.3s linear;
  298. transition: all 0.3s linear;
  299. {/block:ifInfoonhover}
  300. {/block:indexpage}
  301. }
  302.  
  303. #tags {
  304. font-size: 7px;
  305. text-transform: uppercase;
  306. font-family: helvetica;
  307. text-align: right;
  308. margin-top: 5px;
  309. line-height: 130%;
  310. letter-spacing: 0.5px;
  311. transition: all 0.3s linear;
  312. -webkit-transition: opacity 0.3s linear;
  313. -webkit-transition: all 0.3s linear;
  314. -moz-transition: all 0.3s linear;
  315. {block:permalinkpage}
  316. opacity: 1;
  317. {/block:permalinkpage}
  318. }
  319.  
  320. #tags a {
  321. color: {color:text};
  322. margin-left: 5px;
  323. }
  324.  
  325. #tags a:hover {
  326. color: {color:link};
  327. text-decoration: underline;
  328. transition: all 0.3s linear;
  329. -webkit-transition: opacity 0.3s linear;
  330. -webkit-transition: all 0.3s linear;
  331. -moz-transition: all 0.3s linear;
  332. }
  333.  
  334. #asker {
  335. float:left;
  336. }
  337.  
  338. .question{
  339. text-align: center;
  340. background-color: {color:top background};
  341. padding:8px;
  342. }
  343.  
  344. .answer{
  345. text-align: left;
  346. letter-spacing:1px;
  347. }
  348.  
  349.  
  350. #credit {
  351. font-size:9px;
  352. font-family:georgia;
  353. letter-spacing:1px;
  354. z-index: 99999999999999999999999999999999999999999;
  355. -moz-transition-duration:0.5s;
  356. -webkit-transition-duration:0.5s;
  357. -o-transition-duration:0.5s;
  358. }
  359.  
  360. #credit a {
  361. background-color:#fff;
  362. padding:5px;
  363. border:1px solid #e9e9e9;
  364. position:fixed;
  365. right:15px;
  366. bottom:10px
  367.  
  368. }
  369.  
  370. .sources
  371. {
  372. filter:alpha(opacity=0);
  373. opacity:0;
  374. font-size: 0px;
  375. }
  376.  
  377. #con {
  378. width:500px;
  379. margin: 0 auto -12px auto;
  380. text-align: center;
  381. }
  382.  
  383. #quote {
  384. font-size:16px;
  385. font-family:'Lato', sans-serif;
  386. text-align: justify;
  387. font-weight: 300;
  388. letter-spacing: 1.5px;
  389. line-height: 130%;
  390. padding: 10px;
  391. padding-left:12px;
  392. padding-right:12px;
  393. }
  394.  
  395. #cover {
  396. position: relative;
  397. z-index: 1;
  398. height: 80px;
  399. float:left;
  400. border:1px solid #f0f0f0;
  401. padding:4px;
  402. }
  403.  
  404. #button {
  405. width:20px;
  406. height:30px;
  407. overflow: hidden;
  408. position: relative;
  409. z-index: 99;
  410. margin: 15px 24px 13px 16px;
  411. }
  412.  
  413. #buttons {
  414. background-color: #fff;
  415. position: absolute;
  416. z-index: 99;
  417. margin-top: 15px;
  418. margin-left: 15px;
  419. opacity: 0;
  420. -webkit-transition: opacity 0.5s linear;
  421. -webkit-transition: all 0.5s linear;
  422. -moz-transition: all 0.5s linear;
  423. -o-transition: all 0.5s linear;
  424. }
  425.  
  426. #post:hover #buttons {
  427. opacity:0.5;
  428. }
  429.  
  430. #musicinfo {
  431. margin-top:-5px;
  432. margin-left: 100px;
  433. font-size:12px;
  434. min-height:70px;
  435. text-align:center;
  436. }
  437.  
  438. #notez {
  439. text-align: left;
  440. }
  441.  
  442.  
  443. #border {
  444. border-top: solid 1px #f0eded;
  445. }
  446.  
  447. #pagination a {
  448. color:{color:link};
  449. }
  450.  
  451. #notez {
  452. list-style:lower-roman;
  453. padding-bottom:5px;
  454. padding-top:5px;
  455. margin-left:0px;
  456. font-size:8px;
  457. display:inline-block;
  458. float: left;
  459. text-align: left;
  460. }
  461.  
  462. #notez a {
  463. display:inline-block;
  464. padding-bottom:10px;
  465. }
  466.  
  467. #notez img {
  468. display:none;
  469. }
  470.  
  471. .border {
  472. padding-top: 3px;
  473. margin-top: 4px;
  474. border-top: 1px solid #f0f0f0;
  475. }
  476.  
  477. .sources
  478. {
  479. filter:alpha(opacity=0);
  480. opacity:0;
  481. font-size: 0px;
  482. }
  483.  
  484. #fade {
  485. display: none;
  486. background: #000;
  487. position: fixed;
  488. left: 0;
  489. top: 0;
  490. width: 100%;
  491. height: 100%;
  492. opacity: .80;
  493. z-index: 9999;
  494. }
  495.  
  496. .popup_block{
  497. display: none;
  498. background:transparent;
  499. padding: 20px;
  500. float: left;
  501. position: fixed;
  502. top: 50%;
  503. left: 52%;
  504. z-index: 99999;
  505. }
  506.  
  507. *html #fade {
  508. position: absolute;
  509. }
  510.  
  511. *html .popup_block {
  512. position: absolute;
  513. }
  514.  
  515. </style>
  516.  
  517. <script type="text/javascript"
  518. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  519.  
  520. <script>
  521. $(document).ready(function() {
  522. //When you click on a link with class of poplight and the href starts with a #
  523. $('a.poplight[href^=#]').click(function() {
  524. var popID = $(this).attr('rel'); //Get Popup Name
  525. var popURL = $(this).attr('href'); //Get Popup href to define size
  526. //Pull Query & Variables from href URL
  527. var query= popURL.split('?');
  528. var dim= query[1].split('&');
  529. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  530. //Fade in the Popup and add close button
  531. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img class="btn_close"/></a>');
  532. //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
  533. var popMargTop = ($('#' + popID).height() + 80) / 2;
  534. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  535. //Apply Margin to Popup
  536. $('#' + popID).css({
  537. 'margin-top' : -popMargTop,
  538. 'margin-left' : -popMargLeft
  539. });
  540. //Fade in Background
  541. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  542. $('#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
  543. return false;
  544. });
  545. //Close Popups and Fade Layer
  546. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  547. $('#fade , .popup_block').fadeOut(function() {
  548. $('#fade, a.close').remove(); //fade them both out
  549. });
  550. return false;
  551. });
  552. });
  553. </script>
  554.  
  555. </style></head><body>
  556.  
  557. <div id="background"></div>
  558.  
  559. <div id="con">
  560.  
  561. <div id="sidebar">
  562.  
  563. <div id="title">{text:title}</div>
  564.  
  565. <div id="links">
  566. <a href="#?w=440" rel="01" class="poplight">{text:askbox link}</a>
  567. <a href="{text:link 1 url}">{text:link 1 message}</a>
  568. <a href="{text:link 2 url}">{text:link 2 message}</a>
  569. <a href="{text:link 3 url}">{text:link 3 message}</a>
  570. </div>
  571.  
  572. <div id="description">{description}</div>
  573.  
  574. </div>
  575.  
  576. <div id="entries">
  577. {block:Posts}
  578.  
  579. {block:ContentSource}
  580.  
  581. <!--{SourceURL}{block:SourceLogo}<img src=”{BlackLogoURL}”
  582.  
  583. width=”{LogoWidth}” height=”{LogoHeight}” alt=”{SourceTitle}” />
  584.  
  585. {/block:SourceLogo}
  586.  
  587. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}-->
  588.  
  589. {/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
  590.  
  591. <div id="cont">
  592.  
  593. <div id="post" style="padding: 18px; border: 1px solid {color:border}; background-color: {color:bottom background};">
  594.  
  595. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  596.  
  597. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  598.  
  599. {block:Photoset}{Photoset-400}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  600.  
  601. {block:Quote}{block:Source}<b><div style="font-family: courier new; font-size: 13px; text-align: center;">{Source}</div></b>{/block:Source}<br><div id="quote">{Quote}</div>{/block:Quote}
  602.  
  603. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  604.  
  605. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}<font size="2">{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br><br>{/block:Lines}</font>{/block:Chat}
  606.  
  607. {block:Audio}
  608. <div id="buttons"><div id="button">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div></div>
  609. {block:AlbumArt}<img src="{AlbumArtURL}" id="cover">{/block:AlbumArt}
  610. <div id="musicinfo">
  611. {block:TrackName}<h1><div style="text-transform: none; padding-bottom: 4px; margin-bottom: 0px; border-bottom: 1px solid #f0f0f0; text-align: right;">{TrackName}</div></h1>{/block:Trackname}
  612. {block:Artist}by {Artist}{/block:Artist}<br><br>
  613. {block:PlayCount}►played {PlayCount} times{/block:PlayCount}
  614. </div>
  615. <div style="margin-top:20px;">{block:caption}{Caption}{/block:caption}</div>
  616. {/block:Audio}
  617.  
  618. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  619.  
  620. {block:Answer}
  621. <div class="question"><b>{Asker}</b> says: <i>{Question}</i></div><blockquote><div class="answer"{Answer}</div></blockquote>{/block:Answer}
  622.  
  623. </div>
  624.  
  625. {block:permalink}
  626. <div id="info">
  627. <span style="padding-top: 3px;">{block:Date}{DayOfMonthWithZero} . {MonthNumberWithZero} . {ShortYear}{/block:Date} (<span style="color:#e17e66;">♥</span><a href="{Permalink}">
  628. {NoteCount}</a>)</span>
  629.  
  630. <div id="tags">{block:HasTags}{block:Tags} <a href="{TagURL}">{Tag} -</a>{/block:Tags}{/block:HasTags}</div>
  631. </div>
  632. {/block:permalink}
  633.  
  634. {block:indexpage}
  635. <div id="info">
  636. <span style="padding-top: 3px;">{block:Date}{DayOfMonthWithZero} . {MonthNumberWithZero} . {ShortYear}{/block:Date} (<span style="color:#e17e66;">♥</span><a href="{Permalink}">
  637. {NoteCount}</a>)</span>
  638. </div>
  639. {block:indexpage}
  640.  
  641. </div>
  642.  
  643. {block:PostNotes}<div id="notez">{PostNotes}</div>{/block:PostNotes}
  644. {/block:Posts}
  645.  
  646. <div id="pagination">
  647. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">NEWER</a>{/block:PreviousPage} -
  648. {block:NextPage}<a href="{NextPage}">OLDER</a>{/block:NextPage}{/block:Pagination}
  649. </div>
  650.  
  651. </div></div>
  652.  
  653. </div>
  654.  
  655. <div id="credit"><a href="http://www.castiiel.tumblr.com">221b</div>
  656.  
  657. </body>
  658.  
  659. <div id="01" class="popup_block" style="color: #fff; background-color: transparent; font-size: 10px; line-height: 150%; letter-spacing: 1px">
  660.  
  661. <center>
  662. <h1>{text:askbox title}</h1>
  663. <iframe frameborder="0" border="0" scrolling="no" width="100%" height="190" allowtransparency="true" opacity="1" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe>
  664. </center>
  665.  
  666. </div>
  667.  
  668. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement