API tools faq
paste
Advertisement
MAThemes

Theme #19

MAThemes
Jan 25th, 2014
6,540
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.64 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. THEME #19
  3. by: myackles.tumblr.com / ma-themes.tumblr.com
  4.  
  5. Editing is okay as long as you:
  6. DO NOT CLAIM AS YOUR OWN OR REMOVE/MOVE THE CREDIT!!
  7. -->
  8. <!DOCTYPE html>
  9. <html>
  10. <head>
  11. <!--
  12. Theme: Base sidebar by Build Themes
  13. Base code: Build Themes (http://buildthemes.tumblr.com/code/base-sidebar)
  14. Version: 1.4
  15. -->
  16.  
  17. <meta name="color:Background" content="#f5f5f5" />
  18. <meta name="color:Links" content="#c48aa2" />
  19. <meta name="color:Font" content="#868383" />
  20. <meta name="color:Sidebar background" content="#f8f8f8" />
  21. <meta name="color:Post color" content="#ffffff" />
  22. <meta name="color:Text highlight" content="#353434" />
  23. <meta name="color:Borders" content="#dfdfdf"/>
  24. <meta name="color:Scrollbar" content="#2f2f2f"/>
  25.  
  26. <meta name="image:Sidebar Background" content="https://24.media.tumblr.com/cd5001bfb8de89a41337dce9a77a7d85/tumblr_mj77t2OgYd1r9c5eeo2_250.png"/>
  27. <meta name="image:Sidebar Image" content=""/>
  28.  
  29. <meta name="text:Home url" content="/" />
  30. <meta name="text:Home Title" content="home" />
  31. <meta name="text:Ask url" content="/ask" />
  32. <meta name="text:Ask title" content="ask" />
  33. <meta name="text:Link 1 url" content="/" />
  34. <meta name="text:Link 1 title" content="link" />
  35. <meta name="text:Link 2 url" content="/" />
  36. <meta name="text:Link 2 title" content="link" />
  37. <meta name="text:Link 3 url" content="/" />
  38. <meta name="text:Link 3 title" content="link" />
  39. <meta name="text:Link 4 url" content="/" />
  40. <meta name="text:Link 4 title" content="link" />
  41.  
  42. <meta name="text:SIDEBAR HEIGHT" content="150"/>
  43. <meta name="if:Ask Background Image" content="1"/>
  44. <meta name="image:Background" content="" />
  45. <meta name="image:Sidebar Image" content="" />
  46.  
  47. <meta name="text:Font size" content='0.8em'/>
  48. <meta name="text:Post margin" content='10px'/>
  49. <meta name="text:Post width" content='38%'/>
  50.  
  51.  
  52. {block:Description}
  53. <meta name="description" content="{MetaDescription}" />
  54. {/block:Description}
  55.  
  56. <meta charset="utf-8">
  57. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  58. <title>{block:TagPage}{Tag} posts - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
  59. <link rel="shortcut icon" href="{Favicon}">
  60. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  61. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  62. <style type="text/css">
  63.  
  64.  
  65. /*Scrollbar*/
  66.  
  67. ::-webkit-scrollbar-thumb:vertical {
  68. height:10px;
  69. background-color: {color:Scrollbar};}
  70. ::-webkit-scrollbar-thumb:horizontal {
  71. height:10px;
  72. background-color: {color:Scrollbar};}
  73.  
  74. ::-webkit-scrollbar {
  75. height: 10px;
  76. width: 2px;
  77. background-color: {color:Post Background};}
  78.  
  79. /*Basic styles*/
  80. ::-moz-selection {
  81. background: {color:Text highlight};
  82. color: #fff;
  83. }
  84. ::selection {
  85. background: {color:Text highlight};
  86. color: #fff;
  87. }
  88. #content {
  89. margin: 2%;
  90. width: 64%;
  91. float: right;
  92. }
  93. body {
  94. background: {color:Background} url('{image:Background}');
  95. color: {color:Font};
  96. font-family:calibri;
  97. font-size: {text:Font size};
  98. margin: 0;
  99. padding: 0;
  100. }
  101. a {
  102. color: {color:links};
  103. text-decoration: none;
  104. }
  105. a:hover{text-decoration:underline;}
  106. blockquote {
  107.  
  108. border-left: 2px solid {color:borders};
  109. margin:0;
  110. padding: 10px;
  111. }
  112. iframe, img, embed, object, video {
  113. max-width: 100%;
  114. }
  115. img {
  116. height: auto;
  117. width: auto;
  118. }
  119.  
  120. #title {
  121. font: 14px arial;font-weight:bold;}
  122.  
  123. .bck{
  124. display: inline-block;{block:IfAskBackgroundImage}
  125. background-image: url('{image:Sidebar Background}');
  126. {/block:IfAskBackgroundImage}
  127. background-color:{color:background};
  128. }
  129.  
  130. .question{
  131. display: inline-block;
  132. display: inline-block;
  133. padding-top:10px;
  134. text-align:left;
  135. padding-top:-50px;
  136. }
  137.  
  138.  
  139. /*Sidebar*/
  140.  
  141. #pic {
  142. max-width:200px;
  143. margin-left: -4px;
  144. padding: 20px; position: absolute;
  145. background-color:{color:Post Background};
  146. }
  147.  
  148. #sbarb {
  149. padding:10px;
  150. background-color:{color:post color};
  151. border:1px solid {color:borders};
  152. margin-bottom:-20px;
  153. }
  154.  
  155. #position1 {
  156. position: fixed;
  157. left:0px; margin-top:-10px;
  158. padding:5px;
  159. background-color: {color:scrollbar};
  160. width:32px;
  161. height:101%;
  162. }
  163.  
  164. #position {
  165. position: fixed;
  166. left:45px;
  167. padding:5px;
  168. background-color:{color:Sidebar Background};
  169. background-image: url('{image:Sidebar Background}');
  170. border-left:4px solid {color:scrollbar};
  171. border-right:1px solid {color:borders};
  172. width: 230px;
  173. height:100%;
  174. }
  175.  
  176.  
  177. .margin { margin-top:40%;}
  178.  
  179. .ttl {
  180. margin-top:{text:SIDEBAR HEIGHT}px;
  181. width: 200px;
  182. font-family:arial;
  183. text-transform:uppercase;
  184. font-size:11px; font-weight:bold;
  185. margin-bottom:-35px;
  186. text-shadow:1px 1px 0px {color:post color};
  187. }
  188.  
  189. #description {
  190. position: fixed;
  191. opacity: 0.9;
  192. overflow: hidden;
  193. width: 200px;
  194. margin-top:20px;
  195. font-family:arial;
  196. padding: 10px;
  197. margin-left:-10px;
  198. text-align:left;
  199. color: {color:Font};
  200. }
  201.  
  202. #desc {
  203. padding-top:10px;
  204. padding-bottom:10px;
  205. font-size:10px;
  206. border:1px solid {color:borders};
  207. background:{color:post color};
  208. }
  209.  
  210. /*Sublinks*/
  211.  
  212. .sublinks {
  213. font-family:arial;
  214. border:1px solid {color:borders};
  215. font-size: 10px;
  216. background-color:{color:scrollbar};
  217. padding:5px;
  218. text-align:left;
  219. margin-bottom:10px;
  220. }
  221.  
  222. .sublinks a {
  223. padding-left:4px;
  224. text-shadow: 0px 1px 5px rgba(0,0,0,0.13);
  225. text-transform:lowercase;
  226. letter-spacing: 0px;
  227. color:{color:post color};
  228. padding-bottom: 4px;
  229. }
  230.  
  231. .sublinks a:hover{
  232. text-decoration:underline;
  233. -webkit-transition: all 0.5s ease-out;
  234. -moz-transition: all 0.5s ease-out;
  235. transition: all 0.5s ease-out;
  236. }
  237.  
  238. /*Article*/
  239.  
  240. article {
  241. border:1px solid {color:borders};
  242. background: {color:Post color};
  243. margin: {text:Post margin};
  244. padding: 3%;
  245. width: {text:Post width};
  246. }
  247.  
  248. .chat span {
  249. float: left;
  250. padding-left:-150px;
  251. }
  252.  
  253. /*Metadata*/
  254. .stuff { margin-top:3px; border-top:1px solid {color:borders};text-transform:uppercase; font-size:10px; padding:3px; background-image: url('{image:Sidebar Background}');}
  255.  
  256.  
  257. /*Custom CSS*/
  258. {CustomCSS}
  259. </style>
  260. </head>
  261. <body>
  262. <!--Sidebar/masthead-->
  263. <div id="position"><div id="position1"></div>
  264. <div class="margin"></div>
  265.  
  266. <div id="sbar">
  267. <center><div class="ttl">{title}</div><br><br>
  268. <div id="pic">
  269. <a href="/"><div id="sbarb"><img src="{image:Sidebar Image}" >
  270. </div> </a>
  271.  
  272. <div id="description">
  273. <div class="sublinks">
  274. <a href="{text:Home url}">{text:Home Title}</a>
  275. <a href="{text:Ask url}">{text:Ask title}</a>
  276. <a href="{text:Link 1 url}">{text:Link 1 title}</a>
  277. <a href="{text:Link 2 url}">{text:Link 2 title}</a>
  278. <a href="{text:Link 3 url}">{text:Link 3 title}</a>
  279. <a href="{text:Link 4 url}">{text:Link 4 title}</a>
  280. <a href="http://www.ma-themes.tumblr.com">theme</a>
  281. </div>
  282.  
  283. <center>
  284. <div id="desc">{description}</div><br></center>
  285.  
  286. <div class="sublinks">
  287. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">go back</a>&nbsp;+ {/block:PreviousPage}{block:NextPage}<a href="{NextPage}">proceed</a>{/block:NextPage}{/block:Pagination}</div>
  288. {/block:IfnotInfiniteScrolling}</div>
  289.  
  290. </div>
  291. </div>
  292. </div>
  293. </div>
  294. </div></div>
  295.  
  296. <!--Content holder-->
  297. <div id="content">
  298. {block:Posts}
  299. <article>
  300.  
  301. {block:Text}
  302. <div class="text">
  303. <div id="title"> {block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}</div>
  304. {Body}
  305. {/block:Text}
  306.  
  307. {block:Photo}
  308. <div class="photo">
  309. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
  310. {block:Caption}{Caption}{/block:Caption}
  311. {/block:Photo}
  312.  
  313. {block:Photoset}
  314. <div class="photoset">
  315. {block:IndexPage}{Photoset-250}{/block:IndexPage}
  316. {block:PermalinkPage}{Photoset-700}{/block:PermalinkPage}
  317. {block:Caption}{Caption}{/block:Caption}
  318. {/block:Photoset}
  319.  
  320. {block:Quote}
  321. <div class="quote">
  322. <blockquote>{Quote}</blockquote>
  323. {block:Source} {Source}{/block:Source}
  324. {/block:Quote}
  325.  
  326. {block:Link}
  327. <div class="link">
  328. <div id="title"><a href="{URL}">{Name}</a></div>
  329. {block:Description}{Description}{/block:Description}
  330. {/block:Link}
  331.  
  332. {block:Chat}
  333. <div class="chat">
  334. <ul>
  335. {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
  336. </ul>
  337. {/block:Chat}
  338.  
  339. {block:Audio}
  340. <div class="audio">
  341. {block:TrackName}<div id="title"><a href="{Permalink}">{TrackName}</a></div>{/block:TrackName}
  342. <div class="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}</div>
  343. <div class="player">{AudioPlayerBlack}</div>
  344. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  345. {block:Caption}{Caption}{/block:Caption}
  346. {/block:Audio}
  347.  
  348. {block:Video}
  349. <div class="video">
  350. <div class="video-player">{Video-500}</div>
  351. {block:Caption}{Caption}{/block:Caption}
  352. {/block:Video}
  353.  
  354. {block:Answer}
  355.  
  356. <div class="question"><div class="bck">{Asker} said: {Question}</div>{Answer}
  357.  
  358. {/block:Answer}
  359. </div>
  360. <footer class="details">
  361.  
  362. <div class="stuff">
  363. <a href="{Permalink}">{TimeAgo}</a>{/block:Date}{block:NoteCount}&nbsp;+&nbsp;<a href="{Permalink}">♡{NoteCount} notes</a>{/block:NoteCount}{block:RebloggedFrom}&nbsp;&nbsp;+&nbsp;<a href="{ReblogParentURL}"><a href="{ReblogParentURL}"> via</a>{/block:RebloggedFrom}
  364. {block:ContentSource}&nbsp;+&nbsp;<a href="{SourceURL}">source </a>&nbsp;+&nbsp;<a href="{ReblogURL}" target="_blank">reblog</a>
  365. </a>{block:ContentSource}{/block:RebloggedFrom}<br>{block:IfItalicTags}<i>{/block:IfItalicTags}
  366. {block:HasTags}{block:Tags}# <a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}
  367. </i></div>
  368.  
  369. {block:Permalink}
  370.  
  371. {block:PostNotes}
  372. <div id="notes">
  373. {PostNotes}
  374. </div>
  375. {/block:PostNotes}
  376. {/block:Permalink}
  377. </footer>
  378. </article>
  379. {/block:Posts}
  380. <!--Close of article-->
  381. </div>
  382.  
  383. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  384. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  385. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  386. {block:IfInfiniteScroll}
  387. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  388. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  389. {/block:IfInfiniteScroll}
  390. <!--Code for infinite scroll and grid layout-->
  391. <script>
  392. (function() {
  393. var $tumblelog = $('#content');
  394. {block:IfInfiniteScroll}
  395. $tumblelog.infinitescroll({
  396. navSelector : ".pagination",
  397. nextSelector : ".pagination a:first",
  398. itemSelector : "article",
  399. bufferPx : 50,
  400. done : "",
  401. loading: {
  402. img : "",
  403. msgText: ""
  404. },
  405. },
  406. function( newElements ) {
  407. var $newElems = $( newElements ).css({ opacity: 0 });
  408. $newElems.imagesLoaded(function(){
  409. $newElems.animate({ opacity: 1 });
  410. $tumblelog.masonry( 'appended', $newElems);
  411. });
  412. }
  413. );
  414. {/block:IfInfiniteScroll}
  415. $tumblelog.imagesLoaded( function(){
  416. $tumblelog.masonry({
  417. columnWidth: function( containerWidth ) {
  418. return containerWidth / 100;
  419. }
  420. });
  421. });
  422. })();
  423. </script>
  424.  
  425.  
  426. </body>
  427. </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!