Advertisement
sofiiayala

Theme 20 by Sofi for Tumblr

Mar 15th, 2014
2,387
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.95 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 20 by Sofi (castiiel.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:Background" content="#ffffff"/>
  11. <meta name="color:Text" content="#838282"/>
  12. <meta name="color:Link" content="#b8b8b8"/>
  13. <meta name="color:border" content="#ccc"/>
  14. <meta name="color:links background" content="#eee"/>
  15. <meta name="color:scrollbar" content="#999"/>
  16. <meta name="image:header" content=""/>
  17.  
  18. <meta name="if:Info on hover" content="1"/>
  19. <meta name="if:Fixed header" content="0"/>
  20.  
  21. <meta name="text:title text" content=""/>
  22.  
  23. <meta name="text:home link" content="index"/>
  24. <meta name="text:askbox link" content="mailbox"/>
  25. <meta name="text:askbox url" content="/ask"/>
  26. <meta name="text:navigation link" content="navigate"/>
  27. <meta name="text:link 1" content="Link 1"/>
  28. <meta name="text:link 1 url" content="/"/>
  29. <meta name="text:link 2" content="Link 2"/>
  30. <meta name="text:link 2 url" content="/"/>
  31. <meta name="text:link 3" content="Link 3"/>
  32. <meta name="text:link 3 url" content="/"/>
  33. <meta name="text:link 4" content="Link 4"/>
  34. <meta name="text:link 4 url" content="/"/>
  35.  
  36. <script type="text/javascript">
  37. WebFontConfig = {
  38. google: { families: [ 'Lato:400,300:latin' ] }
  39. };
  40. (function() {
  41. var wf = document.createElement('script');
  42. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  43. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  44. wf.type = 'text/javascript';
  45. wf.async = 'true';
  46. var s = document.getElementsByTagName('script')[0];
  47. s.parentNode.insertBefore(wf, s);
  48. })(); </script>
  49.  
  50. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  51. <script type="text/javascript">
  52. $(document).ready(function () {
  53. $(".navi").toggle(function() {
  54. $("#navi").show(); $("").hide();
  55. }, function() {
  56. $("#navi").hide();
  57. });
  58. });
  59. </script>
  60.  
  61. <style type="text/css">
  62.  
  63.  
  64. ::-webkit-scrollbar {width: 4px; height: 4px; background: transparent; }
  65. ::-webkit-scrollbar-thumb { background-color: {color:scrollbar}; -webkit-border-radius: 0ex; }
  66.  
  67. body {
  68. background:{color:background};
  69. margin:0px;
  70. color:{color:text};
  71. font-family:garamond;
  72. font-size:11px;
  73. line-height:115%;
  74. letter-spacing: 0.8px;
  75. }
  76.  
  77. body, a, a:hover {cursor: url(http://media.tumblr.com/tumblr_lqs4idHqTZ1qfoi4t.png), auto;}
  78.  
  79. a {
  80. text-decoration:none;
  81. outline:none;
  82. -moz-outline-style:none;
  83. color:{color:link};
  84. }
  85.  
  86. img {
  87. border:none;
  88. }
  89.  
  90. blockquote {
  91. padding-left:5px;
  92. border-left:1px solid;
  93. margin-left: 2px;
  94. }
  95.  
  96. h1 {
  97. font-size:16px;
  98. font-family:'Lato', sans-serif;
  99. font-weight: 300;
  100. letter-spacing: 1.5px;
  101. line-height: 130%;
  102. }
  103.  
  104. .hr {
  105. color: #f0eded;
  106. }
  107.  
  108. #entries {
  109. padding-bottom:10px;
  110. width:400px;
  111. margin-top:200px;
  112. padding-left: 50px;
  113. {block:ifFixedheader}
  114. margin-top: 240px;
  115. {block:ifFixedheader}
  116. }
  117.  
  118. #post {
  119. width:400px;
  120. padding-bottom:20px;
  121. margin-top:40px;
  122. margin-bottom:0px;
  123. text-align: left;
  124. overflow: hidden;
  125.  
  126. }
  127.  
  128. #post:hover .info {
  129. opacity: 1;
  130. transition: all 0.3s linear;
  131. -webkit-transition: opacity 0.3s linear;
  132. -webkit-transition: all 0.3s linear;
  133. -moz-transition: all 0.3s linear;
  134. }
  135.  
  136. #title {
  137. width:276px;
  138. float: right;
  139. margin-top:5px;
  140. height: auto;
  141. text-align: right;
  142. margin-left: 1px;
  143. font-size:20px;
  144. font-family: 'Lato', sans-serif;
  145. letter-spacing: 1px;
  146. border-bottom: 1px solid {color:border};
  147. margin-bottom: 8px;
  148. padding-bottom: 12px;
  149. font-weight: 300;
  150. }
  151.  
  152. #sidebar {
  153. width:400px;
  154. padding-top:70px;
  155. height: auto;
  156. margin-bottom:40px;
  157. text-align: center;
  158. margin-left: 50px;
  159. background-color: {color:background};
  160. {block:ifFixedheader}
  161. position: fixed;
  162. padding-top: 50px;
  163. margin-top: -250px;
  164. {/block:ifFixedheader}
  165. }
  166.  
  167. #sidebarimage img {
  168. width: 101px;
  169. height: 101px;
  170. padding: 10px;
  171. background-color: #fff;
  172. overflow:hidden;
  173. float:left;
  174. border: 1px solid {color:border};
  175. background-position:left top;
  176. }
  177.  
  178. #navi {
  179. margin-top:1px;
  180. margin-left: 1px;
  181. width: 121px;
  182. height: 117px;
  183. background-color: {color:background};
  184. opacity: 1;
  185. overflow:hidden;
  186. float:left;
  187. position: absolute;
  188. display: none;
  189. }
  190.  
  191. #navi a {
  192. margin: 5px;
  193. padding: 6px;
  194. height: 12px;
  195. display:block;
  196. background-color: {color:links background};
  197. font-family: 'Lato', sans-serif;
  198. font-size: 9px;
  199. letter-spacing: 2px;
  200. overflow: hidden;
  201. color: {color:text};
  202. transition: all 0.2s linear;
  203. -webkit-transition: opacity 0.2s linear;
  204. -webkit-transition: all 0.2s linear;
  205. -moz-transition: all 0.2s linear;
  206. }
  207.  
  208. #navi a:hover {
  209. letter-spacing: 4px;
  210. transition: all 0.2s linear;
  211. -webkit-transition: opacity 0.2s linear;
  212. -webkit-transition: all 0.2s linear;
  213. -moz-transition: all 0.2s linear;
  214. }
  215.  
  216. #links {
  217. width: 276px;
  218. text-align: center;
  219. height: auto;
  220. padding-top: 5px;
  221. font-family:'Lato', sans-serif;
  222. float: right;
  223. text-transform: uppercase;
  224. background-color: transparent;
  225. letter-spacing: 1px;
  226. font-size: 10px;
  227. transition: all 0.2s linear;
  228. -webkit-transition: opacity 0.2s linear;
  229. -webkit-transition: all 0.2s linear;
  230. -moz-transition: all 0.2s linear;
  231. }
  232.  
  233. #links a {
  234. color: {color:text};
  235. padding-left:5px;
  236. padding-right: 4px;
  237. padding-top:2px;
  238. padding-bottom: 3px;
  239. margin-left:3px;
  240. margin-right: 3px;
  241. transition: all 0.2s linear;
  242. -webkit-transition: opacity 0.2s linear;
  243. -webkit-transition: all 0.2s linear;
  244. -moz-transition: all 0.2s linear;
  245. }
  246.  
  247. #links a:hover {
  248. color: {color:background};
  249. background-color: {color:text};
  250. transition: all 0.2s linear;
  251. -webkit-transition: opacity 0.2s linear;
  252. -webkit-transition: all 0.2s linear;
  253. -moz-transition: all 0.2s linear;
  254. }
  255.  
  256. #description {
  257. width:266px;
  258. padding-left: 5px;
  259. padding-right:5px;
  260. height: 55px;
  261. overflow: auto;
  262. background-color: transparent;
  263. text-align: center;
  264. margin-top: 10px;
  265. font-size: 9px;
  266. letter-spacing: 1px;
  267. line-height: 150%;
  268. float: right;
  269. font-family: helvetica;
  270. }
  271.  
  272. #description::-webkit-scrollbar{
  273. height:auto;
  274. width:2px;
  275. background-color:{color:scrollbar};
  276. }
  277.  
  278. #pagination {
  279. width:440px;
  280. margin-top: 60px;
  281. line-height: 130%;
  282. height:20px;
  283. text-align:center;
  284. background-color:{color:background};
  285. font-size:11px;
  286. bottom:0px;
  287. opacity: 0.8;
  288. color:{color:text};
  289. letter-spacing: 5px;
  290. font-family: 'Lato', sans-serif;
  291. -webkit-transition: opacity 0.5s linear;
  292. -webkit-transition: all 0.5s linear;
  293. -moz-transition: all 0.5s linear;
  294. transition: all 0.s linear;
  295. }
  296.  
  297. #pagination:hover {
  298. opacity: 1;
  299. -webkit-transition: opacity 0.5s linear;
  300. -webkit-transition: all 0.5s linear;
  301. -moz-transition: all 0.5s linear;
  302. transition: all 0.s linear;
  303. }
  304.  
  305. #pagination a {
  306. color:{color:text};
  307. padding-bottom: 3px;
  308. border-bottom: 1px solid transparent;
  309. opacity: 1;
  310. -webkit-transition: opacity 0.5s linear;
  311. -webkit-transition: all 0.5s linear;
  312. -moz-transition: all 0.5s linear;
  313. transition: all 0.s linear;
  314. }
  315.  
  316. #pagination a:hover {
  317. border-bottom: 1px solid {color:border};
  318. opacity: 1;
  319. -webkit-transition: opacity 0.5s linear;
  320. -webkit-transition: all 0.5s linear;
  321. -moz-transition: all 0.5s linear;
  322. transition: all 0.s linear;
  323. }
  324.  
  325. .info {
  326. font-size:8px;
  327. padding-left:7px;
  328. margin-left:415px;
  329. position:absolute;
  330. width:100px;
  331. letter-spacing: 2px;
  332. overflow: hidden;
  333. font-family: 'Lato', sans-serif;
  334. line-height: 150%;
  335. {block:ifInfoonhover}
  336. opacity: 0;
  337. transition: all 0.3s linear;
  338. -webkit-transition: opacity 0.3s linear;
  339. -webkit-transition: all 0.3s linear;
  340. -moz-transition: all 0.3s linear;
  341. {/block:ifInfoonhover}
  342.  
  343. }
  344.  
  345. .info a {
  346. color: {color:text};
  347. }
  348.  
  349. #tags {
  350. font-size: 8px;
  351. text-align: center;
  352. letter-spacing: 1px;
  353. word-spacing: 0.5px;
  354. opacity: 0;
  355. margin-top: 10px;
  356. transition: all 0.3s linear;
  357. -webkit-transition: opacity 0.3s linear;
  358. -webkit-transition: all 0.3s linear;
  359. -moz-transition: all 0.3s linear;
  360. }
  361.  
  362. #tags a {
  363. margin-left: 4px;
  364. margin-right: 4px;
  365. }
  366.  
  367. #asker {
  368. float:left;
  369. }
  370.  
  371. .question{
  372. text-align: center;
  373. letter-spacing:1px;
  374. padding:6px;
  375. }
  376.  
  377. .answer{
  378. background-color:transparent;
  379. line-height: 10px;
  380. text-align: left;
  381. letter-spacing:1px;
  382. }
  383.  
  384.  
  385. #credit {
  386. font-size:8px;
  387. font-family:georgia;
  388. line-height: 100%;
  389. letter-spacing:1px;
  390. z-index: 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
  391. -moz-transition-duration:0.5s;
  392. -webkit-transition-duration:0.5s;
  393. -o-transition-duration:0.5s;
  394. }
  395.  
  396. #credit a {
  397. background-color:#fff;
  398. padding:5px;
  399. border:1px solid {color:border};
  400. position:fixed;
  401. right:15px;
  402. bottom:10px
  403. }
  404.  
  405. .sources
  406. {
  407. filter:alpha(opacity=0);
  408. opacity:0;
  409. font-size: 0px;
  410. }
  411.  
  412. #con {
  413. width:500px;
  414. margin: auto;
  415. text-align: center;
  416. }
  417.  
  418. #quote {
  419. font-size:16px;
  420. font-family:'Lato', sans-serif;
  421. font-weight: 300;
  422. letter-spacing: 1.5px;
  423. line-height: 130%;
  424. }
  425.  
  426. #cover {
  427. position: relative;
  428. z-index: 1;
  429. height: 80px;
  430. float:left;
  431. border:1px solid {color:border};
  432. padding:4px;
  433. }
  434.  
  435. #button {
  436. width:20px;
  437. height:30px;
  438. overflow: hidden;
  439. position: relative;
  440. z-index: 99;
  441. margin: 15px 24px 13px 16px;
  442. }
  443.  
  444. #buttons {
  445. background-color: #fff;
  446. position: absolute;
  447. z-index: 99;
  448. margin-top: 15px;
  449. margin-left: 15px;
  450. opacity: 0;
  451. -webkit-transition: opacity 0.5s linear;
  452. -webkit-transition: all 0.5s linear;
  453. -moz-transition: all 0.5s linear;
  454. -o-transition: all 0.5s linear;
  455. }
  456.  
  457. #post:hover #buttons {
  458. opacity:0.5;
  459. }
  460.  
  461. #musicinfo {
  462. margin-left: 100px;
  463. font-size:12px;
  464. min-height:70px;
  465. text-align:center;
  466. }
  467.  
  468. #notez {
  469. text-align: left;
  470. }
  471.  
  472.  
  473. #border {
  474. border-top: solid 1px {color:border};
  475. }
  476.  
  477. #notez {
  478. list-style:lower-roman;
  479. padding-bottom:5px;
  480. padding-top:5px;
  481. margin-left:0px;
  482. font-size:8px;
  483. display:inline-block;
  484. float: left;
  485. text-align: left;
  486. }
  487.  
  488. #notez a {
  489. display:inline-block;
  490. padding-bottom:10px;
  491. }
  492.  
  493. #notez img {
  494. display:none;
  495. }
  496.  
  497. .border {
  498. padding-top: 3px;
  499. margin-top: 4px;
  500. border-top: 1px solid {color:border};
  501. }
  502.  
  503. .sources
  504. {
  505. filter:alpha(opacity=0);
  506. opacity:0;
  507. font-size: 0px;
  508. }
  509.  
  510. {CustomCSS}</style></head><body>
  511.  
  512. <div id="con">
  513.  
  514. <div id="sidebar">
  515.  
  516. <div id="title">{text:title text}</div>
  517.  
  518. <div id="sidebarimage">
  519.  
  520. <div id="navi">
  521. <a href="{text:link 1 url}">{text:link 1}</a>
  522. <a href="{text:link 2 url}">{text:link 2}</a>
  523. <a href="{text:link 3 url}">{text:link 3}</a>
  524. <a href="{text:link 4 url}">{text:link 4}</a>
  525. </div>
  526.  
  527. <img src="{image:header}">
  528. </div>
  529.  
  530. <div id="links">
  531. <a href="/">{text:home link}</a>
  532. <a href="{text:askbox url}">{text:askbox link}</a>
  533. <a class="navi">{text:navigation link}</a>
  534.  
  535. </div>
  536.  
  537. <div id="description">{description}</div>
  538.  
  539. </div>
  540.  
  541. <div id="entries">
  542. {block:Posts}
  543.  
  544. {block:ContentSource}
  545.  
  546. <!--{SourceURL}{block:SourceLogo}<img src=”{BlackLogoURL}”
  547.  
  548. width=”{LogoWidth}” height=”{LogoHeight}” alt=”{SourceTitle}” />
  549.  
  550. {/block:SourceLogo}
  551.  
  552. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}-->
  553.  
  554. {/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
  555.  
  556. <div id="post">
  557.  
  558. <div class="info">
  559. {block:Date}{12HourWithZero}:{Minutes} {ShortMonth} {DayOfMonthWithZero}{DayOfMonthSuffix}{/block:Date}<br>
  560. <a href="{Permalink}">with {NoteCountWithLabel}</a><br>
  561. {block:RebloggedFrom}<a href="{ReblogRootURL}">source</a> / <a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}
  562. <div class="border"></div>
  563. {block:HasTags}file under:<br>{block:Tags}<a href="{TagURL}" style="margin-right: 5px;">{Tag},</a>{/block:Tags}{/block:HasTags}
  564. </div>
  565.  
  566. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  567.  
  568. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  569.  
  570. {block:Photoset}{Photoset-400}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  571.  
  572. {block:Quote}<div id="quote">"{Quote}"</div>{block:Source}<br><br> —<b><font size="1.5">{Source}</font></b>{/block:Source}{/block:Quote}
  573.  
  574. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  575.  
  576. {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}
  577.  
  578. {block:Audio}
  579. <div id="buttons"><div id="button">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div></div>
  580. {block:AlbumArt}<img src="{AlbumArtURL}" id="cover">{/block:AlbumArt}
  581. <div id="musicinfo">
  582. {block:TrackName}<h1><div style="text-transform: none; padding-bottom: 4px; margin-bottom: 0px; border-bottom: 1px solid {color:border}; text-align: right;">{TrackName}</div></h1>{/block:Trackname}
  583. {block:Artist}by {Artist}{/block:Artist}<br><br>
  584. {block:PlayCount}►played {PlayCount} times{/block:PlayCount}
  585. </div>
  586. <div style="margin-top:20px;">{block:caption}{Caption}{/block:caption}</div>
  587. {/block:Audio}
  588.  
  589. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  590.  
  591. {block:Answer}
  592. <div class="question"><b>{Asker}</b> says: <i>{Question}</i></div><blockquote><div class="answer"{Answer}</div></blockquote>{/block:Answer}
  593.  
  594. </div>
  595. {block:PostNotes}<div id="notez">{PostNotes}</div>{/block:PostNotes}
  596. {/block:Posts}
  597.  
  598. <div id="pagination">
  599. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">NEWER</a>{/block:PreviousPage} -
  600. {block:NextPage}<a href="{NextPage}">OLDER</a>{/block:NextPage}{/block:Pagination}
  601. </div>
  602.  
  603. </div></div>
  604.  
  605. </div>
  606.  
  607. <div id="credit"><a href="http://www.castiiel.tumblr.com">221b</a></div>
  608.  
  609. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement