Advertisement
midthemes

Theme 05 by Jenny

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