API tools faq
paste
Advertisement
pictochat

theme 2 : black squared

pictochat
Mar 9th, 2014
191
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.90 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. black squared theme by lauren (sinnohs) @ tumblr
  3.  
  4. shoot me an ask if somethings wrong
  5. -->
  6.  
  7. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  8. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  9.  
  10. <head>
  11. <title>{Title}</title>
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14. {block:Description}
  15. <meta name="description" content="{MetaDescription}" />
  16. {/block:Description}
  17.  
  18. <meta name="color:Background" content="#fcfcfc" />
  19. <meta name="color:Text" content="#818181" />
  20. <meta name="color:ScrollbarThumb" content="#e0e0e0" />
  21. <meta name="color:PostBackground" content="#fff" />
  22. <meta name="color:SidebarBackground" content="#000" />
  23. <meta name="color:Border" content="#f0f0f0" />
  24. <meta name="color:Link" content="#ccc" />
  25. <meta name="color:LinkHover" content="#aaa" />
  26. <meta name="color:PostTitle" content="#838383" />
  27. <meta name="color:SidebarTitle" content="#fff" />
  28. <meta name="color:SidebarText" content="#fff" />
  29.  
  30. <meta name="if:400pxPosts" content="0" />
  31. <meta name="if:WhiteIframe" content="1" />
  32.  
  33. <meta name="text:Link1Name" content="link 1" />
  34. <meta name="text:Link1URL" content="/" />
  35. <meta name="text:Link2Name" content="link 2" />
  36. <meta name="text:Link2URL" content="/" />
  37. <meta name="text:Link3Name" content="link 3" />
  38. <meta name="text:Link3URL" content="/" />
  39. <meta name="text:Link4Name" content="link 4" />
  40. <meta name="text:Link4URL" content="/" />
  41.  
  42. <meta name="text:PostMarginTop" content="50" />
  43.  
  44. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  45.  
  46. <style type="text/css">
  47.  
  48. /* body, iframe, scrollbar, link */
  49. body {
  50. background:{color:Background};
  51. font:9px helvetica;
  52. line-height:10px;
  53. color:{Color:Text};
  54. word-wrap:break-word;
  55. text-align:left;
  56. margin:0;
  57. border:0;
  58. padding:0;
  59. }
  60.  
  61. iframe#tumblr_controls {
  62. top:0px;
  63. right:0px;
  64. position:fixed;
  65. z-index:99999999;
  66. {block:IfWhiteIframe}
  67. -webkit-filter:invert(100%);
  68. {/block:IfWhiteIframe}
  69. {block:IfNotWhiteIframe}
  70. -webkit-filter:invert(0%);
  71. {/block:IfNotWhiteIframe}
  72. }
  73.  
  74. ::-webkit-scrollbar {
  75. width:4px;
  76. height:auto;
  77. background-color:{color:Background};
  78. }
  79.  
  80. ::-webkit-scrollbar-thumb {
  81. background-color:{color:ScrollbarThumb};
  82. }
  83.  
  84. ::-webkit-scrollbar-thumb:horizontal {
  85. height:0px;
  86. }
  87.  
  88. /* link, image, blockquote, ordered/unordered lists, blockquote, pre */
  89. a {
  90. color:{color:Link};
  91. -webkit-transition: all 0.3s ease-in-out;
  92. -moz-transition: all 0.3s ease-in-out;
  93. -o-transition: all 0.3s ease-in-out;
  94. transition: all 0.3s ease-in-out;
  95. text-decoration:none;
  96. }
  97.  
  98. a:hover {
  99. color:{color:LinkHover};
  100. }
  101.  
  102. img {
  103. max-width:100%;
  104. display:block;
  105. }
  106.  
  107. ol,ul {
  108. list-style-type:square;
  109. margin-left:-25px;
  110. }
  111.  
  112. blockquote {
  113. border:1px solid {color:Border};
  114. background:rgba(240,240,240,0.05);
  115. margin-left:auto;
  116. margin-right:auto;
  117. padding:2px 10px;
  118. }
  119.  
  120. pre {
  121. background-color:#fafafa;
  122. color:#666;
  123. font-family:courier new;
  124. width:95%;
  125. padding:3px;
  126. }
  127.  
  128. /* post formatting */
  129. #wrapper {
  130. margin-top:{text:PostMarginTop}px;
  131. margin-left:auto;
  132. margin-right:auto;
  133. }
  134.  
  135. .post {
  136. z-index:1;
  137. margin-top:5px;
  138. margin-bottom:3px;
  139. margin-left:auto;
  140. margin-right:auto;
  141. background-color:{color:PostBackground};
  142. {block:IfNot400pxPosts}
  143. width:250px;
  144. padding:10px;
  145. {/block:IfNot400pxPosts}
  146. {block:If400pxPosts}
  147. width:400px;
  148. padding:15px;
  149. {/block:If400pxPosts}
  150. }
  151.  
  152. .post:hover .indexpermalink {
  153. z-index:0;
  154. margin-top:4px;
  155. opacity:1.0;
  156. transition: all 0.7s ease-in-out;
  157. }
  158.  
  159.  
  160. .post h1 {
  161. font:11px consolas;
  162. line-height:105%;
  163. color:{color:PostTitle};
  164. }
  165.  
  166. #audioplayer {
  167. width:26px;
  168. height:26px;
  169. overflow:hidden;
  170. border:7px solid #fff;
  171. }
  172.  
  173. .indexpermalink {
  174. position:absolute;
  175. width:60px;
  176. {block:IfNot400pxPosts}
  177. margin-left:265px;
  178. {/block:IfNot400pxPosts}
  179. {block:If400pxPosts}
  180. margin-left:415px;
  181. {/block:If400pxPosts}
  182. margin-top:7px;
  183. opacity:0;
  184. line-height:15px;
  185. font:9px consolas;
  186. transition: all 0.7s ease-in-out;
  187. z-index:0;
  188. }
  189.  
  190. .permalink {
  191. border-top:1px solid #f0f0f0;
  192. padding-top:5px;
  193. margin-top:5px;
  194. text-align:left;
  195. font:9px consolas;
  196. text-transform:none;
  197. margin-bottom:5px;
  198. }
  199.  
  200. .postnotes {
  201. {block:IfNot400pxPosts}
  202. width:250px;
  203. {/block:IfNot400pxPosts}
  204. {block:If400pxPosts}
  205. width:400px;
  206. {/block:If400pxPosts}
  207. font:9px helvetica;
  208. text-transform:none;
  209. text-align:left;
  210. margin-left:-5px;
  211. }
  212.  
  213. .note img {
  214. display:none;
  215. }
  216.  
  217. .note ol {
  218. list-style-type:none;
  219. }
  220.  
  221. /* sidebar */
  222. #sidebarpositioning {
  223. width:100%;
  224. top:0px;
  225. position:fixed;
  226. z-index:999;
  227. }
  228.  
  229. .sidebar {
  230. margin-left:auto;
  231. margin-right:auto;
  232. {block:IfNot400pxPosts}
  233. width:250px;
  234. padding:20px;
  235. {/block:IfNot400pxPosts}
  236. {block:If400pxPosts}
  237. width:400px;
  238. padding:25px;
  239. {/block:If400pxPosts}
  240. background-color:{color:SidebarBackground};
  241. color:{color:SidebarText};
  242. }
  243.  
  244. .sidebartitle {
  245. font:15px consolas;
  246. color:{color:SidebarTitle};
  247. text-align:center;
  248. }
  249.  
  250. .sidebarnav {
  251. font:9px consolas;
  252. color:{color:SidebarTitle};
  253. text-align:center;
  254. }
  255.  
  256. .pagination {
  257. padding-top:3px;
  258. font-size:7px consolas;
  259. letter-spacing:1px;
  260. text-align:center;
  261. }
  262.  
  263. .pagination a {
  264. color:{color:SidebarTitle};
  265. border-bottom:1px dotted {color:SidebarTitle};
  266. }
  267.  
  268. .description {
  269. {block:IfNot400pxPosts}
  270. width:250px;
  271. padding:5px;
  272. {/block:IfNot400pxPosts}
  273. {block:If400pxPosts}
  274. width:390px;
  275. padding:10px;
  276. {/block:If400pxPosts}
  277. }
  278.  
  279. .sidebarlinks {
  280. padding-top:3px;
  281. }
  282.  
  283. .sidebarlinks a {
  284. color:{color:Link};
  285. font:9px consolas;
  286. letter-spacing:1px;
  287. }
  288.  
  289. .sidebarlinks a:hover {
  290. color:{color:LinkHover};
  291. }
  292.  
  293. </style>
  294. </head>
  295. <body>
  296.  
  297. <div id="sidebarpositioning">
  298. <div class="sidebar">
  299. <div class="sidebartitle">{Title}</div>
  300. <div class="description">
  301. {Description}
  302. </div>
  303. <script type="text/javascript">
  304. jQuery(document).ready(function() {
  305. jQuery(".sidebarlinks").hide();
  306. //toggle the componenet with class msg_body
  307. jQuery(".sidebarnav").click(function()
  308. {
  309. jQuery(this).next(".sidebarlinks").slideToggle(500);
  310. });});
  311. </script>
  312. <a href="#" style="cursor:help;" class="sidebarnav"><center>navigation</center></a>
  313. <div class="sidebarlinks">
  314. <a href="/">index</a> &nbsp;
  315. <a href="/ask">message</a> &nbsp;
  316. <a href="/archive">archive</a> &nbsp;
  317. <a href="{text:Link1URL}">{text:Link1Name}</a> &nbsp;
  318. <a href="{text:Link2URL}">{text:Link2Name}</a> &nbsp;
  319. <a href="{text:Link3URL}">{text:Link3Name}</a> &nbsp;
  320. <a href="{text:Link4URL}">{text:Link4Name}</a> &nbsp;
  321. <a href="http://sinnohs.tumblr.com" title="theme by lauren">theme</a>
  322. </div>
  323. {block:Pagination}<div class="pagination">{block:PreviousPage}<a href="{PreviousPage}">prev</a> &#8211; {/block:PreviousPage}{CurrentPage} / {TotalPages}{block:NextPage} &#8211; <a href="{NextPage}">next</a>{/block:NextPage}</div>{/block:Pagination}
  324. </div>
  325. </div>
  326. <div id="wrapper">
  327. {block:Posts}
  328. <div class="post">
  329.  
  330. {block:IndexPage}
  331. <div class="indexpermalink"><a href="{Permalink}">{ShortMonth} {DayOfMonthWithZero}
  332. </a></br>
  333. {NoteCount} [<a href="{ReblogURL}">R</a>]</div>
  334. {/block:IndexPage}
  335.  
  336. <!-- text posts: text, quote, link, chat, answer -->
  337.  
  338. {block:Text}
  339. <h1>{Title}</h1>
  340. {Body}
  341. {/block:Text}
  342.  
  343. {block:Quote}
  344. <h1 style="padding:3px 3px 0px 3px;">{Quote}</h1>
  345. {block:Source}
  346. <div style="text-align:right">&#8211; {Source}</div>
  347. {/block:Source}
  348. {/block:Quote}
  349.  
  350. {block:Link}
  351. <h1><a href="{URL}" target="_blank">{Name}</a></h1>
  352. {block:Description}
  353. {Description}
  354. {/block:Description}
  355. {/block:Link}
  356.  
  357. {block:Chat}
  358. {block:Title}
  359. <h1>{Title}</h1>
  360. {/block:Title}
  361. {block:Lines}
  362. {block:Label}
  363. <b>{Label}</b>
  364. {/block:Label}
  365. {Line}</br>
  366. {/block:Lines}
  367. {/block:Chat}
  368.  
  369. {block:Answer}
  370. <table style="padding-bottom:1px;margin-bottom:1px;">
  371. <tr>
  372. <td style="vertical-align:top;padding:0px 3px 0px 2px;width:36px;">
  373. <img style="padding:2px;border:1px solid {Color:Border};width:30px!important;height:30px;" src="{AskerPortraitURL-128}">
  374. </td>
  375. <td style="vertical-align:top;">{Asker}: {Question}</td>
  376. </tr>
  377. </table>
  378. {Answer}
  379. {/block:Answer}
  380.  
  381. <!-- media posts: photo, video, photoset, audio -->
  382.  
  383. {block:Photo}
  384. {block:IfNot400pxPosts}
  385. {LinkOpenTag}<img src="{PhotoURL-250}">{LinkCloseTag}
  386. {/block:IfNot400pxPosts}
  387. {block:If400pxPosts}
  388. {LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}
  389. {/block:If400pxPosts}
  390. {block:PermalinkPage}
  391. {block:Caption}{Caption}{/block:Caption}
  392. {/block:PermalinkPage}
  393. {/block:Photo}
  394.  
  395. {block:Video}
  396. {block:IfNot400pxPosts}
  397. {VideoEmbed-250}
  398. {/block:IfNot400pxPosts}
  399. {block:If400pxPosts}
  400. {VideoEmbed-400}
  401. {/block:If400pxPosts}
  402. {block:PermalinkPage}
  403. {block:Caption}{Caption}{/block:Caption}
  404. {/block:PermalinkPage}
  405. {/block:Video}
  406.  
  407. {block:Photoset}
  408. {block:IfNot400pxPosts}
  409. {Photoset-250}
  410. {/block:IfNot400pxPosts}
  411. {block:If400pxPosts}
  412. {Photoset-400}
  413. {/block:If400pxPosts}
  414. {block:PermalinkPage}
  415. {block:Caption}{Caption}{/block:Caption}
  416. {/block:PermalinkPage}
  417. {/block:Photoset}
  418.  
  419. {block:Audio}
  420. <table style="padding:3px">
  421. <tr>
  422. <td style="vertical-align:top;">
  423. <div id="audioplayer">{AudioPlayerWhite}</div>
  424. </td>
  425. <td style="vertical-align:top:margin-top:auto;margin-bottom:auto;">
  426. {block:TrackName}{TrackName}{/block:TrackName}{block:Artist} &#8211; {Artist}{/block:Artist}</td>
  427. </tr>
  428. </table>
  429. {block:PermalinkPage}
  430. {block:Caption}{Caption}{/block:Caption}
  431. {/block:PermalinkPage}
  432. {/block:Audio}
  433.  
  434. <!-- permalink page -->
  435.  
  436. {block:PermalinkPage}
  437. {block:Date}<div class="permalink">{Month} {DayOfMonth}, {Year} {block:NoteCount} - {NoteCountWithLabel}{/block:NoteCount}
  438. {block:RebloggedFrom} - <a href="{ReblogParentURL}">via</a> - <a href="{ReblogRootURL}">org</a>{block:ContentSource} (<a href="{SourceURL}">src</a>){/block:ContentSource} {/block:RebloggedFrom}
  439. {block:HasTags}<div style="text-transform:none;">{block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}</div>{/block:HasTags}
  440. </div>{/block:Date}
  441.  
  442. {block:PostNotes}
  443. <div class="postnotes">{PostNotes}</div>
  444. {/block:PostNotes}
  445. {/block:PermalinkPage}
  446.  
  447. </div>
  448. {/block:Posts}
  449. </div>
  450. </body>
  451. </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!