API tools faq
paste
Advertisement
thematchgirl

Theme 10: Picture This

thematchgirl
May 15th, 2013
1,334
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 16.38 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
  5.   <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
  6.   <link rel="shortcut icon" href="{Favicon}">
  7.     <meta name="color:Background" content="#f4f4f4" />
  8.     <meta name="color:Text" content="#333333" />
  9.     <meta name="color:Blockquote" content="#333333" />
  10.     <meta name="color:Links" content="#ff007d" />
  11.     <meta name="color:Links Hover" content="#ffffff" />
  12.     <meta name="color:Blog Info" content="#ff007d" />
  13.     <meta name="color:Icon Border" content="#ffffff" />
  14.     <meta name="color:Description BG" content="#ff5bab" />
  15.     <meta name="color:Posts" content="#f4f4f4" />
  16.     <meta name="color:Blog Title" content="#ff5bab" />
  17.     <meta name="color:Menu Icons" content="#ffffff" />
  18.     <meta name="color:Post Title" content="#ffffff" />
  19.     <meta name="color:Description" content="#ffffff" />
  20.     <meta name="color:Post Info" content="#ffffff" />
  21.     <meta name="color:Menu Icons Border" content="#ff007d" />
  22.     <meta name="color:Post Title BG" content="#ffa8d3" />
  23.     <meta name="color:Post Info BG" content="#ffa8d3" />
  24.     <meta name="color:Quote BG" content="#ffffff" />
  25.     <meta name="color:Quote" content="#333333" />
  26.     <meta name="color:Quote Source" content="#ffffff" />
  27.     <meta name="color:Quote Source BG" content="#ffa8d3" />
  28.     <meta name="color:Quote Source Border" content="#ffa8d3" />
  29.     <meta name="color:Blockquote Border" content="#ffa8d3" />
  30.     <meta name="color:Chat 1 BG" content="#ffa8d3" />
  31.     <meta name="color:Blockquote BG" content="#ffffff" />
  32.     <meta name="color:Chat 1" content="#ffffff" />
  33.     <meta name="color:Chat 2 BG" content="#ffffff" />
  34.     <meta name="color:Chat 2" content="#333333" />
  35.     <meta name="color:Audio BG" content="#ffa8d3" />
  36.     <meta name="color:Audio Text" content="#ffa8d3" />
  37.     <meta name="color:Scrollbar" content="#ff007d" />
  38.  
  39.     <meta name="image:Background" content="http://25.media.tumblr.com/tumblr_lzju29VxIR1r9g6hvo2_100.png" />
  40.     <meta name="image:Content" content="http://i.imgur.com/QNEv9q3.png" />
  41.     <meta name="image:Home" content="http://i.imgur.com/Cx47og2.png" />
  42.     <meta name="image:Ask" content="http://i.imgur.com/KFXNBYu.png" />
  43.     <meta name="image:Archive" content="http://i.imgur.com/dVOHLuf.png" />
  44.     <meta name="image:Music" content="http://i.imgur.com/SwZnw7E.png" />
  45.     <meta name="image:Additional Links" content="http://i.imgur.com/R1znZCx.png" />
  46.  
  47.     <meta name="if:Fading Images" content="1" />
  48.     <meta name="if:Music Player" content="1" />
  49.     <meta name="if:Show Caption" content="1" />
  50.  
  51.     <meta name="text:Link1" content="" />
  52.     <meta name="text:Link1URL" content=""/>
  53.     <meta name="text:Link2" content="" />
  54.     <meta name="text:Link2URL" content=""/>
  55.     <meta name="text:Link3" content="" />
  56.     <meta name="text:Link3URL" content=""/>
  57.     <meta name="text:Link4" content="" />
  58.     <meta name="text:Link4URL" content="" />
  59.     <meta name="text:Link5" content="" />
  60.     <meta name="text:Link5URL" content="" />
  61.     <meta name="text:Music" content="" />
  62.  </head>
  63.  <style>
  64. body {
  65. background:url({image:background}) #f4f4f4 fixed;
  66. color:#333;
  67. font-family:calibri;
  68. font-size:13px;
  69. }
  70.  
  71. a {
  72. color:{color:links};
  73. text-decoration:none;
  74. -webkit-transition:all 1s ease-in-out;
  75. -moz-transition:all 1s ease-in-out;
  76. -o-transition:all 1s ease-in-out;
  77. -ms-transition:all 1s ease-in-out;
  78. transition:all 1s ease-in-out;
  79. }
  80.  
  81. a:hover {
  82. color:{color:links hover};
  83. text-decoration:underline;
  84. }
  85.  
  86. ::-webkit-scrollbar-thumb:horizontal {
  87.         background-color: {color:scrollbar};
  88.         width: auto;
  89.         height: 5px;
  90. }
  91.  
  92. ::-webkit-scrollbar-thumb:vertical {
  93.         background-color: {color:scrollbar};
  94.         height: auto;
  95.         width: 5px;
  96.         margin-left: 10px;
  97. }
  98.  
  99. ::-webkit-scrollbar {
  100.         height: 5px;
  101.         width: 5px;
  102.         background-color: {color:background};
  103. }
  104.  
  105. #content {
  106. top:125px;
  107. right:150px;
  108. text-align:justify;
  109. width:915px;
  110. height:468px;
  111. display:block;
  112. background:url({image:content});
  113. margin-left:100px;
  114. padding:20px 30px 20px 20px;
  115. }
  116.  
  117. #post {
  118. width:715px;
  119. height:455px;
  120. display:block;
  121. overflow:auto;
  122. float:right;
  123. padding:5px 15px 5px 5px;
  124. }
  125.  
  126. #description {
  127. float:left;
  128. width:150px;
  129. height:455px;
  130. color:#fff;
  131. display:block;
  132. margin-left:10px;
  133. overflow:auto;
  134. background:{color:blog info};
  135. }
  136.  
  137. #iconed {
  138. margin-top:50%;
  139. text-align:center;
  140. margin-bottom:10px;
  141. }
  142.  
  143. #iconed img {
  144. border:10px solid {color:icon border};
  145. width:100px;
  146. }
  147.  
  148. .desc {
  149. background:{color:description bg};
  150. color:{color:description};
  151. border-radius:10px;
  152. max-height:150px;
  153. font-size:10px;
  154. overflow:auto;
  155. padding:10px;
  156. }
  157.  
  158. .post {
  159. {block:IndexPage}width:310px;{/block:IndexPage}
  160. {block:PermalinkPage}width:560px;{/block:PermalinkPage}
  161. float:left;
  162. margin-left:30px;
  163. margin-bottom:15px;
  164. border-radius:10px;
  165. word-break:break-word;
  166. }
  167.  
  168. {block:IfFadingImages}.post .photo {
  169. opacity:.7;
  170. -webkit-transition:all 1s ease-in-out;
  171. -moz-transition:all 1s ease-in-out;
  172. -o-transition:all 1s ease-in-out;
  173. -ms-transition:all 1s ease-in-out;
  174. transition:all 1s ease-in-out;
  175. }
  176.  
  177. .post .photo:hover {
  178. opacity:1;
  179. }{/block:IfFadingImages}
  180.  
  181. .posted {
  182. background:{color:posts};
  183. padding:30px;
  184. }
  185.  
  186. #title {
  187. font-family:'Gloria Hallelujah', cursive;
  188. font-size:50px;
  189. width:950px;
  190. text-align:center;
  191. color:{color:blog title};
  192. height:100px;
  193. display:block;
  194. margin-left:100px;
  195. }
  196.  
  197. #link {
  198. position:fixed;
  199. left:25px;
  200. top:170px;
  201. }
  202.  
  203. .link {
  204. display:block;
  205. width:35px;
  206. margin-bottom:10px;
  207. background:{color:Menu Icons};
  208. border:5px solid {color:Menu Icons Border};
  209. border-radius:50%;
  210. padding:10px;
  211. }
  212.  
  213. #dua a {
  214. width:100px;
  215. display:block;
  216. background:{color:Menu Icons};
  217. color:{color:Menu Icons Border};
  218. text-align:center;
  219. padding:5px;
  220. }
  221.  
  222. #pagination {
  223. text-align:center;
  224. color:{color:description};
  225. font-family:'Gloria Hallelujah', cursive;
  226. }
  227.  
  228. #pagination a {
  229. color:{color:description};
  230. font-family:'Gloria Hallelujah', cursive;
  231. font-size:20px;
  232. text-decoration:none;
  233. }
  234.  
  235. .title {
  236. text-align:center;
  237. font-family:'Gloria Hallelujah', cursive;
  238. font-size:25px;
  239. background:{color:Post Title BG};
  240. line-height:18px;
  241. {block:IndexPage}width:290px;{/block:IndexPage}
  242. {block:PermalinkPage}width:540px;{/block:PermalinkPage}
  243. color:{color:Post Title};
  244. border-radius:10px 10px 0 0;
  245. padding:10px;
  246. }
  247.  
  248. .info {
  249. background:{color:Post Info BG};
  250. line-height:18px;
  251. {block:IndexPage}width:300px;{/block:IndexPage}
  252. {block:PermalinkPage}width:550px;{/block:PermalinkPage}
  253. color:{color:Post Info};
  254. text-transform:uppercase;
  255. font-weight:700;
  256. text-align:center;
  257. border-radius:0 0 10px 10px;
  258. padding:5px;
  259. }
  260.  
  261. .info a:hover {
  262. text-decoration:none;
  263. }
  264.  
  265. h4,.ask {
  266. font-size:20px;
  267. text-align:center;
  268. background:{color:Quote BG};
  269. text-transform:uppercase;
  270. font-style:italic;
  271. color:{color:Quote};
  272. margin-top:-5px;
  273. padding:10px;
  274. }
  275.  
  276. h4:first-letter {
  277. font-size:30px;
  278. color:{color:Blockquote Border};
  279. margin-right:-10px;
  280. }
  281.  
  282. .ask {
  283. font-size:12px;
  284. text-transform:none;
  285. }
  286.  
  287. .name {
  288. background:{color:Quote Source BG};
  289. color:{color:Quote Source};
  290. text-transform:uppercase;
  291. {block:IndexPage}width:240px;{/block:IndexPage}
  292. {block:PermalinkPage}width:490px;{/block:PermalinkPage}
  293. padding:5px;
  294. }
  295.  
  296. blockquote,pre {
  297. background:{color:Blockquote BG};
  298. border-left:5px solid {color:Blockquote Border};
  299. border-top:1px dashed {color:Blockquote Border};
  300. border-right:1px dashed {color:Blockquote Border};
  301. border-bottom:1px dashed {color:Blockquote Border};
  302. color:{color:Blockquote}
  303. padding:5px;
  304. }
  305.  
  306. pre {
  307. word-break:break-word;
  308. width:96%;
  309. }
  310.  
  311. blockquote:first-letter {
  312. color:{color:Blockquote Border};
  313. font-size:30px;
  314. margin-right:2px;
  315. font-style:italic;
  316. }
  317.  
  318. blockquote img {
  319. max-width:95%;
  320. }
  321.  
  322. .chat ul {
  323. list-style:none;
  324. margin:0;
  325. padding:0;
  326. }
  327.  
  328. .chat .odd {
  329. background:{color:chat 1 BG};
  330. color:{color:chat 1};
  331. padding:5px;
  332. }
  333.  
  334. .chat .even {
  335. background:{color:chat 2 BG};
  336. color:{color:chat 2};
  337. padding:5px;
  338. }
  339.  
  340. .audio {
  341. color:{color:Audio Text};
  342. text-align:center;
  343. text-transform:uppercase;
  344. padding:5px;
  345. }
  346.  
  347. .audio h2 {
  348. font-size:20px;
  349. }
  350.  
  351. .post td {
  352. background:{color:Audio BG};
  353. }
  354.  
  355. #albumart {
  356. width:100px;
  357. background:{color:Audio BG};
  358. padding:5px;
  359. }
  360.  
  361. #audioplayer {
  362. {block:IndexPage}width:150px;{/block:IndexPage}
  363. {block:PermalinkPage}width:400px;{/block:PermalinkPage}
  364. display:block;
  365. width:25px;
  366. height:25px;
  367. overflow:hidden;
  368. position:absolute;
  369. background:#fff;
  370. margin-top:5px;
  371. margin-left:5px;
  372. opacity:0;
  373. -webkit-transition:all 1s ease-in-out;
  374. -moz-transition:all 1s ease-in-out;
  375. -o-transition:all 1s ease-in-out;
  376. -ms-transition:all 1s ease-in-out;
  377. transition:all 1s ease-in-out;
  378. padding:37.5px 65px 37.5px 10px;
  379. }
  380.  
  381. .post:hover #audioplayer {
  382. opacity:.7;
  383. }
  384.  
  385. #credit {
  386. position:fixed;
  387. right:60px;
  388. bottom:20px;
  389. width:10px;
  390. height:20px;
  391. display:block;
  392. color:{color:Links};
  393. font-size:20px;
  394. font-family:'Gloria Hallelujah', cursive;
  395. }
  396.  
  397. .hidden {
  398. display:none;
  399. }
  400.  
  401. .info a {
  402. color:{color:Post Info};
  403. }
  404.  
  405. .desc a {
  406. color:{color:Description};
  407. }
  408.  
  409. .name a {
  410. color:{color:Quote Source};
  411. }
  412.  
  413. #satu,#dua {
  414. background:{color:Menu Icons Border};
  415. text-transform:uppercase;
  416. border-radius:20px;
  417. padding:15px;
  418. }
  419.  
  420. #albumart img,.unhidden {
  421. display:block;
  422. }
  423.  
  424. #music {
  425. background:#fff;
  426. }
  427.  
  428. </style>
  429. <script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
  430. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  431. <script type="text/javascript">
  432. $(window).load(function () {
  433. $('#post').masonry({
  434. itemSelector : ".post",
  435. },
  436. function() { $('#content').masonry({ appendedContent: $(this) }); }
  437. );
  438. });
  439. </script>
  440. <script type="text/javascript">
  441.  function unhide(divID) {
  442.  var item = document.getElementById(divID);
  443.  if (item) {
  444.  item.className=(item.className=='hidden')?'unhidden':'hidden';
  445.  }
  446.  }
  447. </script>
  448.  
  449.  <body>
  450.  
  451. <a href="http://hellolittlered.org"><div id="credit">theme</div></a>
  452.  
  453. <div id="link">
  454.   <a href="/"><div class="link"><img src="{image:home}"></div></a>
  455.   <a href="/ask"> <div class="link"><img src="{image:ask}"></div></a>
  456.   <a href="/archive"><div class="link"><img src="{image:archive}"></div></a>
  457.   {block:ifMusicPlayer}<table>
  458.     <tr>
  459.       <td><a href="javascript:unhide('satu');">
  460.           <div class="link"><img src="{image:Music}"></div>
  461.         </a>
  462.       </td>
  463.       <td>
  464.         <div id="satu" class="hidden">
  465.           <div id="music">{text:Music}</div>
  466.         </div>
  467.       </td>
  468.     </tr>
  469.   </table>{/block:ifMusicPlayer}
  470.   <table>
  471.     <tr>
  472.       <td valign="top">
  473.         <a href="javascript:unhide('dua');">
  474.           <div class="link"><img src="{image:Additional Links}"></div>
  475.         </a>
  476.       </td>
  477.       <td>
  478.         <div id="dua" class="hidden">
  479.             {block:iflink1}<a href="{text:Link1URL}">{text:Link1}</a>{/block:iflink1}
  480.             {block:iflink2}<a href="{text:Link2URL}">{text:Link2}</a>{/block:iflink2}
  481.             {block:iflink3}<a href="{text:Link3URL}">{text:Link3}</a>{/block:iflink3}
  482.             {block:iflink4}<a href="{text:Link4URL}">{text:Link4}</a>{/block:iflink4}
  483.             {block:iflink4}<a href="{text:Link5URL}">{text:Link5}</a>{/block:iflink4}
  484.         </div>
  485.       </td>
  486.     </tr>
  487.   </table>
  488. </div>
  489.  
  490. <div id="title">{title} ♥</div>
  491.  
  492. <div id="content">
  493.   <div id="description">
  494.     <div id="iconed">
  495.       <img src="{PortraitURL-128}" width="100px">
  496.     </div>
  497.     {block:description}<div class="desc">{description}
  498.     </div>{/block:description}
  499.     {block:Pagination}
  500.     <div id="pagination">
  501.       {block:PreviousPage}<a href="{PreviousPage}"><<</a>{/block:PreviousPage}
  502.       {CurrentPage}/{TotalPages}
  503.       {block:NextPage}<a href="{NextPage}">>></a>{/block:NextPage}
  504.     </div>
  505.     {/block:Pagination}
  506.       </div>
  507.      
  508.       <div id="post">
  509.         {block:posts}
  510.         <div class="post">
  511.          
  512.           <!-- Text -->
  513.           {block:Text}
  514.           {block:Title}<div class="title">{Title}</div>{/block:Title}
  515.           <div class="posted">{Body}</div>
  516.           {/block:Text}
  517.          
  518.           <!-- Photo -->
  519.           {block:Photo}
  520.           {LinkOpenTag}
  521.           <div class="posted">
  522.             <div class="photo">
  523.               {block:IndexPage}<img src="{PhotoURL-250}" alt="{PhotoAlt}">{/block:IndexPage}
  524.               {block:PermalinkPage}<img src="{PhotoURL-500}" alt="{PhotoAlt}">{/block:PermalinkPage}
  525.             </div>
  526.             {LinkCloseTag}
  527.             {block:IndexPage}{block:ifShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaption}{/block:IndexPage}
  528.             {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
  529.           </div>
  530.           {/block:Photo}
  531.          
  532.           <!-- Photoset -->
  533.           {block:Photoset}
  534.           <div class="posted">
  535.             <div class="photo">
  536.               {block:IndexPage}{Photoset-250}{/block:IndexPage}
  537.               {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  538.             </div>
  539.             {block:IndexPage}{block:ifShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaption}{/block:IndexPage}
  540.             {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
  541.           </div>
  542.           {/block:Photoset}
  543.          
  544.           <!-- Quote -->
  545.           {block:Quote}
  546.           <div class="posted">
  547.             <h4>❝{Quote}</h4>
  548.             <center>{block:Source}<div class="name" style="margin-top:-30px">{Source}</div>{/block:Source}</center>
  549.           </div>
  550.           {/block:Quote}
  551.          
  552.           <!-- Link -->
  553.           {block:Link}
  554.           <a href="{URL}" target="_blank"><div class="title">{Name} →</div> </a>
  555.           <div class="posted">
  556.             {block:Description}{Description}{/block:Description}
  557.           </div>
  558.           {/block:Link}
  559.          
  560.           <!-- Chat -->
  561.           {block:Chat}
  562.           {block:Title}<div class="title">{Title}</div>{/block:Title}
  563.           <div class="posted">
  564.             <div class="chat">
  565.               <ul>
  566.                 {block:Lines}
  567.                 <li class="{Alt}">
  568.                   {block:Label}<b>{Label}</b> {/block:Label}{Line}
  569.                 </li>
  570.                 {/block:Lines}
  571.               </ul>
  572.             </div>
  573.           </div>
  574.           {/block:Chat}
  575.          
  576.           <!-- Audio -->
  577.           {block:Audio}
  578.           <div class="posted">
  579.             <table>
  580.               <tr>
  581.                 <td>
  582.                   <div id="audioplayer">{AudioPlayerWhite}</div>
  583.                   <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div>
  584.                 </td>
  585.                 <td>
  586.                   <div class="audio">
  587.                     <h2>{block:TrackName}{TrackName}{/block:TrackName}</h2>
  588.                   </div>
  589.                 </td>
  590.               </tr>
  591.             </table>
  592.             {block:IndexPage}{block:ifShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaption}{/block:IndexPage}
  593.             {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
  594.           </div>
  595.           {/block:Audio}
  596.          
  597.           <!-- Video -->
  598.           {block:Video}
  599.           <div class="posted">
  600.             <div class="photo">
  601.               {block:IndexPage}{Video-250}{/block:IndexPage}
  602.               {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
  603.             </div>
  604.             {block:IndexPage}{block:ifShowCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaption}{/block:IndexPage}
  605.             {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
  606.           </div>
  607.           {/block:Video}
  608.          
  609.           <!-- Message -->
  610.           {block:Answer}
  611.           <div class="posted">
  612.             <div class="ask">{Question}</div>
  613.             <div class="name">asked {Asker}</div>
  614.             {Answer}
  615.           </div>
  616.           {/block:Answer}
  617.          
  618.           <div class="info">
  619.             <a href="{Permalink}">
  620.               {block:Date}posted on {Month} {DayOfMonthWithZero}{DayOfMonthSuffix}{/block:Date} {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</a>
  621.               {block:PermalinkPage}{block:HasTags}<br>{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}{/block:HasTags}{/block:permalinkpage}
  622.           </div>
  623.           {block:PostNotes}{PostNotes}{/block:PostNotes}
  624.         </div>
  625.        
  626.         {/block:posts}
  627.        
  628.       </div>
  629.     </div>
  630.  </body>
  631. </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!