API tools faq
paste
Advertisement
midthemes

Theme 03 by Jenny

midthemes
Jun 6th, 2014
1,081
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.73 KB | None | 0 0
raw download clone embed print report
  1. <!--------
  2.  
  3. theme 03 by midthemes
  4.  
  5. don't steal, claim as your own or remove the credit
  6.  
  7. ------>
  8.  
  9.  
  10. <!DOCTYPE html>
  11. <head>
  12.  
  13. <title>{title}</title>
  14. <link rel="shortcut icon" href="{Favicon}"/>
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  17.  
  18. <link href='http://fonts.googleapis.com/css?family=IM+Fell+Great+Primer:400,400italic' rel='stylesheet' type='text/css'>
  19. <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600' rel='stylesheet' type='text/css'>
  20.  
  21. <meta name="image:sidebar" content="" />
  22.  
  23. <meta name="color:background" content="#ffffff" />
  24. <meta name="color:text" content="#888888" />
  25. <meta name="color:link" content="#666666" />
  26. <meta name="color:link hover" content="#a8a8a8" />
  27. <meta name="color:navigation" content="#dcecf5" />
  28. <meta name="color:scrollbar" content="#dcecf5" />
  29.  
  30. <meta name="if:Posts 500" content="" />
  31. <meta name="if:Posts 400" content="1" />
  32. <meta name="if:Show tags" content="1" />
  33. <meta name="if:Lazy load" content="1" />
  34.  
  35. <meta name="text:link 1" content="/" />
  36. <meta name="text:link 1 title" content="" />
  37. <meta name="text:link 2" content="/" />
  38. <meta name="text:link 2 title" content="" />
  39. <meta name="text:link 3" content="/" />
  40. <meta name="text:link 3 title" content="" />
  41. <meta name="text:link 4" content="/" />
  42. <meta name="text:link 4 title" content="" />
  43. <meta name="text:link 5" content="/" />
  44. <meta name="text:link 5 title" content="" />
  45. <meta name="text:link 6" content="/" />
  46. <meta name="text:link 6 title" content="" />
  47. <meta name="text:link 7" content="/" />
  48. <meta name="text:link 7 title" content="" />
  49. <meta name="text:link 8" content="/" />
  50. <meta name="text:link 8 title" content="" />
  51.  
  52. <style type="text/css">
  53.  
  54. ::-webkit-scrollbar-thumb:vertical {background-color:{color:scrollbar}; height:auto;}
  55. ::-webkit-scrollbar-thumb:horizontal {background-color:{color:scrollbar};height:10px !important;}
  56. ::-webkit-scrollbar {height:7px; width:7px; background-color:{color:background};}
  57.  
  58. #s-m-t-tooltip {
  59. max-width: 300px;
  60. background-color: {color:navigation};
  61. font-family: calibri;
  62. font-size: 8px;
  63. text-transform: uppercase;
  64. color: #ffffff;
  65. padding: 3px 5px;
  66. margin: 10px 0px 0px 20px;
  67. z-index: 9999999999999;
  68. }
  69.  
  70. body {
  71. font-family: arial;
  72. font-size: 9px;
  73. font-style: none;
  74. letter-spacing: 0px;
  75. color: {color:text};
  76. background-color: {color:background};
  77. }
  78.  
  79. a:link, a:active, a:visited {
  80. color: {color:link};
  81. text-decoration: none;
  82. -webkit-transition: all 0.2s ease-in-out;
  83. -moz-transition: all 0.2s ease-in-out;
  84. -o-transition: all 0.2s ease-in-out;
  85. transition: all 0.2s ease-in-out;
  86. }
  87.  
  88. a:hover {
  89. color: {color:link hover};
  90. -webkit-transition: all 0.2s ease-in-out;
  91. -moz-transition: all 0.2s ease-in-out;
  92. -o-transition: all 0.2s ease-in-out;
  93. transition: all 0.3s ease-in-out;
  94. }
  95.  
  96. #content {
  97. {block:ifPosts500}width: 500px;{/block:ifPosts500}
  98. {block:ifPosts400}width: 400px;{/block:ifPosts400}
  99. margin: 70px 440px;
  100. text-align: justify;
  101. }
  102.  
  103. #posts {
  104. {block:ifPosts500}width: 500px;{/block:ifPosts500}
  105. {block:ifPosts400}width: 400px;{/block:ifPosts400}
  106. margin-top: 80px;
  107. word-wrap: break-word;
  108. }
  109.  
  110. #sidebar {
  111. position: fixed;
  112. width: 180px;
  113. height: 100%;
  114. top: 0px;
  115. left: 100px;
  116. border-right: 1px solid #f0efef;
  117. }
  118.  
  119. #sbimg img {
  120. width: 60px;
  121. height: 60px;
  122. margin: 199px 112px;
  123. }
  124.  
  125. #line {
  126. position: fixed;
  127. margin-top: -195px;
  128. width: 200px;
  129. height: 1px;
  130. background: #f0efef;
  131. }
  132.  
  133. #description {
  134. position: fixed;
  135. width: 150px;
  136. margin-top: -190px;
  137. margin-left: 23px;
  138. text-align: right;
  139. }
  140.  
  141. #nav {
  142. width: 10px;
  143. margin: -191px 188px;
  144. }
  145.  
  146. #nav a {
  147. display: inline-block;
  148. height: 6px;
  149. width: 6px;
  150. padding: 0px;
  151. margin-top: 4px;
  152. font-family: 'Open Sans', sans-serif;
  153. font-size: 9px;
  154. color: transparent;
  155. line-height: 7px;
  156. background-color: {color:navigation};
  157. overflow: hidden;
  158. -webkit-transition: all 0.3s ease-in-out;
  159. -moz-transition: all 0.3s ease-in-out;
  160. -o-transition: all 0.3s ease-in-out;
  161. transition: all 0.5s ease-in-out;
  162. }
  163.  
  164. #nav a:hover {
  165. width: auto;
  166. padding: 5px;
  167. color: #ffffff;
  168. -webkit-transition: all 0.4s ease-in-out;
  169. -moz-transition: all 0.4s ease-in-out;
  170. -o-transition: all 0.4s ease-in-out;
  171. transition: all 0.3s ease-in-out;
  172. }
  173.  
  174.  
  175. #pagin {
  176. font-size: 8px;
  177. font-family: calibri;
  178. text-transform: uppercase;
  179. }
  180.  
  181. .question {
  182. {block:ifPosts500}width: 480px;{/block:ifPosts500}
  183. {block:ifPosts400}width: 380px;{/block:ifPosts400}
  184. padding: 10px;
  185. background-color: #fbfbfb;
  186. }
  187.  
  188. .quote {
  189. font-family: 'IM Fell Great Primer', serif;
  190. font-size: 12px;
  191. font-style: italic;
  192. font-weight: none;
  193. }
  194.  
  195. #info {
  196. {block:ifPosts500}width: 500px;{/block:ifPosts500}
  197. {block:ifPosts400}width: 400px;{/block:ifPosts400}
  198. font-size: 8px;
  199. font-family: calibri;
  200. text-transform: uppercase;
  201. margin-top: 8px;
  202. padding-top: 2px;
  203. border-top: 1px solid #f8f8f8;
  204. }
  205.  
  206. #dano {
  207. float: right;
  208. margin-top: -8px;
  209. margin-right: 10px;
  210. background-color: {color:background};
  211. }
  212.  
  213. #tags {
  214. {block:ifPosts500}width: 500px;{/block:ifPosts500}
  215. {block:ifPosts400}width: 400px;{/block:ifPosts400}
  216. margin-top: 5px;
  217. margin-left: 2px;
  218. font-family: georgia;
  219. font-size: 8px;
  220. font-style: italic;
  221. line-height: 15px;
  222. }
  223.  
  224. #tags a {
  225. padding: 2px;
  226. background-color: #f9f9f9;
  227. }
  228.  
  229. #mg {
  230. position: fixed;
  231. right: 7px;
  232. bottom: 10px;
  233. padding: 5px 7px;
  234. font-family: calibri;
  235. font-size: 9px;
  236. line-height: 8px;
  237. text-align: center;
  238. text-transform: uppercase;
  239. background-color: {color:scrollbar};
  240. border: 1px solid {color:scrollbar};
  241. -webkit-transition: all 0.2s ease-in;
  242. -moz-transition: all 0.2s ease-in;
  243. -o-transition: all 0.2s ease-in;
  244. transition: all 0.2s ease-in;
  245. }
  246.  
  247. #mg a {
  248. color: #ffffff;
  249. }
  250.  
  251. #mg:hover {
  252. background-color: {color:background};
  253. border: 1px solid {color:scrollbar};
  254. -webkit-transition: all 0.2s ease-in;
  255. -moz-transition: all 0.2s ease-in;
  256. -o-transition: all 0.2s ease-in;
  257. transition: all 0.2s ease-in;
  258. }
  259.  
  260. #mg:hover a {
  261. color: {color:scrollbar};
  262. }
  263.  
  264. .aart {
  265. position: absolute;
  266. }
  267.  
  268. .aart img {
  269. width: 80px;
  270. height: 80px;
  271. }
  272.  
  273. .aplayer {
  274. display: block;
  275. position: absolute;
  276. }
  277.  
  278. .audio {
  279. overflow: hidden;
  280. width: 27px;
  281. height: 28px;
  282. margin-top: 26px;
  283. margin-left: 26px;
  284. }
  285.  
  286. .ainfo {
  287. {block:ifPosts500}width: 420px;{/block:ifPosts500}
  288. {block:ifPosts400}width: 320px;{/block:ifPosts400}
  289. height: 47px;
  290. margin-left: 80px;
  291. padding-top: 33px;
  292. background-color: #f6f6f6;
  293. text-align: center;
  294. }
  295.  
  296. h1 {
  297. font-family: arial;
  298. font-size: 8px;
  299. text-decoration: none;
  300. font-style: none;
  301. font-weight: normal;
  302. letter-spacing: 2px;
  303. text-transform: uppercase;
  304. border-bottom: 1px solid #f8f8f8;
  305. padding-bottom: 5px;
  306. padding-left: 10px;
  307. }
  308.  
  309. blockquote {
  310. border-left: 1px solid {color:info};
  311. padding-left: 10px;
  312. margin-left: 10px;
  313. }
  314.  
  315. blockquote img {
  316. {block:ifPosts500}max-width: 480px;{/block:ifPosts500}
  317. {block:ifPosts400}max-width: 380px;{/block:ifPosts400}
  318. }
  319.  
  320. ul, ol, li {list-style: square;}
  321.  
  322. .notes {
  323. {block:ifPosts500}width: 500px;{/block:ifPosts500}
  324. {block:ifPosts400}width: 400px;{/block:ifPosts400}
  325. padding: 10px;
  326. line-height: 10px;
  327. margin-top: 5px;
  328. }
  329.  
  330. ol.notes, .notes li {
  331. {block:ifPosts500}width: 500px;{/block:ifPosts500}
  332. {block:ifPosts400}width: 400px;{/block:ifPosts400}
  333. list-style: none;
  334. padding-bottom: 5px;
  335. }
  336.  
  337. .notes img {
  338. width: 10px;
  339. padding-right: 5px;
  340. }
  341.  
  342. </style>
  343.  
  344. {block:ifLazyload}
  345. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  346. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  347. <script type="text/javascript" charset="utf-8">
  348. var $j = jQuery.noConflict();
  349. $j(function() {
  350. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  351. $j("img").lazyload({
  352. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  353. effect: "fadeIn",
  354. });
  355. });
  356. </script>
  357. {/block:ifLazyload}
  358.  
  359.  
  360. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  361. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  362. <script>
  363. (function($){
  364. $(document).ready(function(){
  365. $("a[title]").style_my_tooltips({
  366. tip_follows_cursor:true,
  367. tip_delay_time:40,
  368. tip_fade_speed:400,
  369. attribute:"title"
  370. });
  371. });
  372. })(jQuery);
  373. </script>
  374.  
  375.  
  376. </head>
  377. <body>
  378.  
  379. <div id="sidebar">
  380. <div id="sbimg"><img src="{image:sidebar}"/></div>
  381. <div id="line"></div>
  382. <div id="description">{Description}<br>
  383. {block:Pagination}<div id="pagin">
  384. {block:PreviousPage}<a href="{PreviousPage}">&laquo;</a>{/block:PreviousPage} {CurrentPage} of {TotalPages}
  385. {block:NextPage}<a href="{NextPage}">&raquo;</a>{/block:NextPage}
  386. </div>{/block:Pagination}
  387. </div>
  388. <div id="nav">
  389. {block:iflink1}<a href="{text:link 1}">{text:link 1 title}</a>{/block:iflink1}
  390. {block:iflink2}<a href="{text:link 2}">{text:link 2 title}</a>{/block:iflink2}
  391. {block:iflink3}<a href="{text:link 3}">{text:link 3 title}</a>{/block:iflink3}
  392. {block:iflink4}<a href="{text:link 4}">{text:link 4 title}</a>{/block:iflink4}
  393. {block:iflink5}<a href="{text:link 5}">{text:link 5 title}</a>{/block:iflink5}
  394. {block:iflink6}<a href="{text:link 6}">{text:link 6 title}</a>{/block:iflink6}
  395. {block:iflink7}<a href="{text:link 7}">{text:link 7 title}</a>{/block:iflink7}
  396. {block:iflink8}<a href="{text:link 8}">{text:link 8 title}</a>{/block:iflink8}
  397. </div>
  398. </div>
  399.  
  400. <a href="http://midthemes.tumblr.com/" target="_blank" title="theme credit"><div id="mg">T</a></div>
  401.  
  402. <div id="content">
  403. {block:Posts}
  404. <div id="posts">
  405.  
  406. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  407.  
  408. {block:Photo}
  409. {LinkOpenTag}
  410. {block:ifPosts500}<img src="{PhotoURL-500}" width="500px" alt="{PhotoAlt}"/>{/block:ifPosts500}
  411. {block:ifPosts400}<img src="{PhotoURL-500}" width="400px" alt="{PhotoAlt}"/>{/block:ifPosts400}
  412. {LinkCloseTag}
  413. {block:Caption}{Caption}{/block:Caption}
  414. {/block:Photo}
  415.  
  416. {block:Photoset}
  417. {block:ifPosts500}{Photoset-500}{/block:ifPosts500}
  418. {block:ifPosts400}{Photoset-400}{/block:ifPosts400}
  419. {block:Caption}{Caption}{/block:Caption}
  420. {/block:Photoset}
  421.  
  422. {block:Quote}
  423. <div class="quote">&rdquo;{Quote}</div>
  424. {block:Source}<div style="text-align:right" />- {Source}</div>{/block:Source}
  425. {/block:Quote}
  426.  
  427. {block:Link}
  428. <a href="{URL}" target="_blank" /><h1>{Name}</h1></a>
  429. {block:Description}{Description}{/block:Description}
  430. {/block:Link}
  431.  
  432. {block:Chat}
  433. {Title}
  434. {block:Lines}
  435. {block:Label}
  436. {Label}
  437. {/block:Label}
  438. {Line}<br>
  439. {/block:Lines}
  440. {/block:Chat}
  441.  
  442. {block:Audio}
  443. {block:AlbumArt}<div class="aart"><img src="{AlbumArtURL}"/></div>{/block:AlbumArt}
  444. <div class="aplayer"><div class="audio">{AudioPlayerWhite}</div></div>
  445. <div class="ainfo">{block:TrackName}{TrackName}{/block:TrackName}
  446. {block:Artist} by <b>{Artist}</b>{/block:Artist}</div>
  447. {block:Caption}{Caption}{/block:Caption}
  448. {/block:Audio}
  449.  
  450. {block:Video}
  451. {block:ifPosts500}{Video-500}{/block:ifPosts500}
  452. {block:ifPosts400}{Video-400}{/block:ifPosts400}
  453. {block:Caption}{Caption}{/block:Caption}
  454. {/block:Video}
  455.  
  456. {block:Answer}
  457. <div class="question">{Asker} said: {Question}</div>
  458. {Answer}
  459. {/block:Answer}
  460.  
  461.  
  462. <div id="info">
  463. <div id="dano">{block:Date}<a href="{Permalink}">{DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear}</a>{/block:Date}{block:NoteCount},&nbsp; <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount} {block:RebloggedFrom}<a href="{ReblogParentURL}"> &nbsp;/&nbsp; via</a>{block:ContentSource}<a href="{SourceURL}">,&nbsp; source</a>{/block:ContentSource}{/block:RebloggedFrom}</div>
  464. </div>
  465.  
  466. {block:ifShowtags}
  467. <div id="tags">
  468. {block:HasTags}{block:Tags}<a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;&nbsp;{/block:Tags}{/block:HasTags}</div>
  469. {/block:ifShowtags}
  470.  
  471.  
  472. {block:PermalinkPage}{block:PostNotes}{PostNotes}{/block:PostNotes}{/block:PermalinkPage}
  473.  
  474. </div>
  475. {/block:Posts}
  476.  
  477. </div>
  478.  
  479. </body>
  480. </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!