API tools faq
paste
blowstagram

Theme Twenty by derekhayl

blowstagram
Aug 18th, 2013
174
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.71 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!--theme by derekhayl, please don't claim as your own-->
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  7. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  8.  
  9. <style>
  10. div#qTip {
  11. padding: 3px;
  12. display: none;
  13. text-align: center;
  14. position: absolute;
  15. font-size:7px;
  16. font-family:arial;
  17. z-index: 1000;
  18. background-color:#eee;
  19. color: #454545;
  20. text-transform:uppercase;
  21. letter-spacing: 1px;
  22. }
  23. </style>
  24. <head>
  25. <link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
  26. <meta name="color:bg" content="#FFFFFF">
  27. <meta name="color:link" content="#E6E4E4">
  28. <meta name="color:hover" content="#454545">
  29. <meta name="color:infobg" content="#FCFCFC">
  30. <meta name="color:text" content="#9A9A9A">
  31. <meta name="color:tags" content="#EDEDED">
  32. <meta name="color:scrollbar" content="#D6D5D5">
  33. <meta name="color:pagi" content="#E6E4E4">
  34. <meta name="color:posthover}" content="#000000">
  35.  
  36. <meta name="image:sidebar" content=""/>
  37.  
  38. <meta name="text:linkA" content="">
  39. <meta name="text:linkA url" content="/">
  40. <meta name="text:linkB" content="">
  41. <meta name="text:linkB url" content="/">
  42. <meta name="text:linkC" content="">
  43. <meta name="text:linkC url" content="/">
  44. <meta name="text:linkD" content="">
  45. <meta name="text:linkD url" content="/">
  46.  
  47. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  48. <title>{Title}</title> {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  49. <link rel="shortcut icon" href="{Favicon}" />
  50. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  51.  
  52. <style type="text/css">
  53.  
  54. a {
  55. color:{color:link};
  56. text-decoration:none;
  57. -moz-transition-duration:0.5s;
  58. -webkit-transition-duration:0.5s;
  59. -o-transition-duration:0.5s;
  60. }
  61.  
  62. a:hover {
  63. color:{color:hover};
  64. text-decoration:none;
  65. -moz-transition-duration:0.5s;
  66. -webkit-transition-duration:0.5s;
  67. -o-transition-duration:0.5s;
  68. }
  69.  
  70.  
  71. ::-webkit-scrollbar {background-color:{color:infobg}; height:8px; width:3px}
  72. ::-webkit-scrollbar-thumb:vertical {background-color:{color:scrollbar}; height:50px}
  73. ::-webkit-scrollbar-thumb:horizontal {background-color:{color:scrollbar}; height:8px!important}
  74.  
  75. body {
  76. background-color:{color:bg};
  77. font-family:arial;
  78. font-weight:normal;
  79. }
  80.  
  81. h1 {
  82. font-weight:normal;
  83. font-size:10px;
  84. text-align:center;
  85. font-style:normal;
  86. line-height:80%;
  87. letter-spacing:1px;
  88. text-transform:uppercase;
  89. color:{color:text};
  90. }
  91.  
  92. h2 {
  93. font-size:15px;
  94. text-align:center;
  95. line-height:100%;
  96. letter-spacing:-0.5px;
  97. color:{color:text};
  98. font-weight:normal;
  99. padding:5px;
  100. padding-bottom:2px;
  101. }
  102.  
  103.  
  104. blockquote {
  105. border-left:1px solid {color:text};
  106. padding-left:5px;
  107. margin:5px;
  108. }
  109.  
  110. #theme {
  111. background-color:{color:bg};
  112. width:700px;
  113. margin: 0 auto -12px auto;
  114. text-align: center;
  115. }
  116.  
  117. /*-----sidebar-----*/
  118.  
  119. #sidebar {
  120. color:{color:text};
  121. position:fixed;
  122. width:200px;
  123. max-height:500px;
  124. margin-top:100px;
  125. margin-left:-200px;
  126. }
  127.  
  128. #sidebarimage img{
  129. opacity:1;
  130. width:200px;
  131. padding:5px;
  132. position:fixed;
  133. margin-top:60px;
  134. margin-left:0px;
  135. -webkit-transition: opacity 0.6s linear;
  136. -webkit-transition: all 0.5s ease-out;
  137. -moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
  138. }
  139.  
  140. #sidebarimage {
  141. -webkit-transition: opacity 0.6s linear;
  142. -webkit-transition: all 0.5s ease-out;
  143. -moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
  144. }
  145.  
  146. /*---links---*/
  147.  
  148. .links {
  149. margin-left:105px;
  150. margin-top:65px;
  151. width:200px;
  152. opacity:.7;
  153. background:#000;
  154. padding-top:10px;
  155. padding-bottom:10px;
  156. font-family:arial;
  157. font-size:10px;
  158. text-transform:lowercase;
  159. text-align:center;
  160. position:fixed;
  161. letter-spacing:0px;
  162. line-height:170%;
  163. -moz-transition-duration:.5s;
  164. -webkit-transition-duration:.5s;
  165. -o-transition-duration:.5s;
  166. }
  167.  
  168. .links a{
  169. padding:10px;
  170. position:justify;
  171. color:#f2f2f2;
  172. letter-spacing:0px;
  173. text-decoration:none;
  174. -moz-transition-duration:.5s;
  175. -webkit-transition-duration:.5s;
  176. -o-transition-duration:.5s;
  177. }
  178.  
  179. .links a:hover {
  180. color:#000;
  181. }
  182.  
  183. /*---pagination---*/
  184.  
  185. .pagi {
  186. margin-top:40px;
  187. margin-left:105px;
  188. width:200px;
  189. }
  190.  
  191. .jump_page {
  192. padding: 4px 8px;
  193. background-color: #eee;
  194. color:#454545;
  195. font-family:arial;
  196. font-size:8px;
  197. }
  198.  
  199. .current_page, .jump_page:hover {
  200. padding: 4px 8px;
  201. background-color: #000;
  202. color: #ffffff;
  203. font-family:arial;
  204. font-size:8px;
  205. }
  206.  
  207. /*---ask&answer---*/
  208.  
  209. .ask {
  210. padding:10px;
  211. font-family:'Libre Bakerville', serif;
  212. text-align:left;
  213. min-height:60px;
  214. width:480px;
  215. color:#fff;
  216. font-style:italic;
  217. background:#000;
  218. }
  219.  
  220. .asktext {
  221. padding-left:70px;
  222. margin-top:0px;
  223. padding-top:10px;
  224. width:500px;
  225. color:#fff;
  226. font-style:italic;
  227. font-family:'Libre Bakerville', serif;
  228. text-align:left;
  229. }
  230.  
  231. .askimage {
  232. width:48px;
  233. height:48px;
  234. padding:5px;
  235. border:#fff 2px solid;
  236. -webkit-border-radius:48px;
  237. -moz-border-radius:48px;
  238. border-radius:48px;
  239. }
  240.  
  241. .askimage img {
  242. width:48px;
  243. height:48px;
  244. -webkit-border-radius:48px;
  245. -moz-border-radius:48px;
  246. border-radius:48px;
  247. opacity:1;
  248. }
  249.  
  250. .askurl {
  251. margin-top:-50px;
  252. padding-left:70px;
  253. font-size:20px;
  254. color:#fff;
  255. font-family:'Playball', cursive;
  256. text-transform:normal;
  257. text-align:left;
  258. }
  259.  
  260. .reply {
  261. font-size:20px;
  262. color:{color:text};
  263. font-family:'Playball', cursive;
  264. text-transform:normal;
  265. text-align:right;
  266. }
  267.  
  268. .ans {
  269. text-align:right;
  270. font-family:'Libre Bakerville', serif;
  271. padding:10px;
  272. background:#fff;
  273. width:480px;
  274. min-height:20px;
  275. color:{color:text};
  276. }
  277.  
  278. /*---entries---*/
  279.  
  280. #stuffcontainer {
  281. float:left;
  282. margin-left:200px;
  283. margin-top:75px;
  284. text-align:justify;
  285. background-color:{color:bg};
  286. color:{color:text};
  287. margin-bottom: 45px;
  288. }
  289.  
  290. #stuff {
  291. width:500px;
  292. margin-top:0px;
  293. padding:30px 15px 30px 15px;
  294. text-align:justify;
  295. font-size:11px;
  296. line-height:90%;
  297. letter-spacing:0px;
  298. color:{color:text};
  299. -moz-transition-duration:.5s;
  300. -webkit-transition-duration:.5s;
  301. -o-transition-duration:.5s;
  302. }
  303.  
  304. #stuff:hover .tags {
  305. opacity:1;
  306. }
  307.  
  308. .caption {
  309. width:500px;
  310. font-family:trebuchet ms;
  311. text-align:justify;
  312. line-height:120%;
  313. }
  314.  
  315. #audio {
  316. min-height:100px;
  317. width:500px;
  318. padding-bottom:10px;
  319. background-color:{color:infobg};
  320. }
  321.  
  322. #music {
  323. font-family:'Libre Bakerville', serif;
  324. font-style:italic;
  325. font-size:15px;
  326. padding-bottom:30px;
  327. color:{color:text};
  328. }
  329.  
  330. #albumart {
  331. float:left;
  332. padding:0px 10px 10px 0px;
  333. }
  334.  
  335. #albumart img {
  336. width:100px;
  337. height:100px;
  338. float:left;
  339. border-radius:100px;
  340. margin:0px 7px;
  341. }
  342.  
  343. #audioplayer {
  344. text-align:center;
  345. padding:10px;
  346. background-color:#ffffff;
  347. width:20px;
  348. height:20px;
  349. border-radius:20px;
  350. opacity:.5;
  351. overflow:hidden;
  352. position:absolute;
  353. margin-left:35px;
  354. margin-top:35px;
  355. margin-bottom:45px;
  356. }
  357.  
  358. #audioinfo {
  359. padding:10px;
  360. color:{color:text};
  361. }
  362.  
  363. .note {
  364. text-transform:uppercase;
  365. font-family:trebuchet ms;
  366. font-style:normal;
  367. letter-spacing:0px;
  368. font-size: 9px;
  369. text-align:left;
  370. line-height:90%;
  371. margin-top:10px;
  372. margin-left:-40px;
  373. }
  374.  
  375. .note li {
  376. list-style-type:decimal;
  377. padding:10px 25px 10px 25px;
  378. font-size:8px;
  379. text-align:left;
  380. margin:0px;
  381. -moz-transition-duration:0.5s;
  382. -webkit-transition-duration:0.5s;
  383. -o-transition-duration:0.5s;
  384. }
  385.  
  386. .tags {
  387. font-style:normal;
  388. margin-left:0px;
  389. margin-top:10px;
  390. width:500px;
  391. opacity:0;
  392. font-family:georgia;
  393. text-transform:uppercase;
  394. color:{color:tags};
  395. letter-spacing:2px;
  396. line-height:100%;
  397. font-size:7px;
  398. text-align:center;
  399. padding:10px 15px 10px 15px;
  400. -moz-transition-duration:0.5s;
  401. -webkit-transition-duration:0.5s;
  402. -o-transition-duration:0.5s;
  403. }
  404.  
  405. .tags a {
  406. color:{color:tags};
  407. letter-spacing:1px;
  408. padding:1px;
  409. }
  410.  
  411. .tags a:hover {
  412. color:{color:link};
  413. }
  414.  
  415. ul.chat, .chat ol, .chat li {
  416. color:#454545;
  417. list-style:none;
  418. margin:0px;
  419. padding:10px;
  420. }
  421.  
  422. .label {
  423. color:#454545;
  424. padding:4px;
  425. text-decoration:underline;
  426. font-weight:700;
  427. background-color:#eee;
  428. margin-right:5px;
  429. }
  430.  
  431. #info {
  432. width:500px;
  433. text-align:left;
  434. font-family:arial;
  435. margin-top:-3px;
  436. margin-left:-9px;
  437. letter-spacing:1px;
  438. font-size:7px;
  439. font-style:none;
  440. padding:9px;
  441. line-height:10px;
  442. text-transform:uppercase;
  443. -moz-transition-duration:0.5s;
  444. -webkit-transition-duration:0.5s;
  445. -o-transition-duration:0.5s;
  446. }
  447.  
  448. #info a {
  449. text-align:center;
  450. color:#bebcbc;
  451. }
  452.  
  453. #info a:hover {
  454. color:#000;
  455. }
  456.  
  457. #cred img {
  458. width:30px;
  459. position:fixed;
  460. padding:3px;
  461. opacity: .9;
  462. bottom:5px;
  463. right:5px;
  464. z-index:999999999999999999999999999999999999999999;
  465. }
  466.  
  467. {CustomCSS}
  468.  
  469. </style></head>
  470.  
  471. <body>
  472. <div id="theme">
  473. <script type="text/javascript">
  474. jQuery(document).ready(function() {
  475. jQuery(".sub").hide();
  476. //toggle the componenet with class msg_body
  477. jQuery(".cthrough").click(function()
  478. {
  479. jQuery(this).next(".sub").slideToggle(500);
  480. });});
  481. </script>
  482. <div id="sidebar">
  483. <div id="sidebarimage"><img src="{image:sidebar}"></div>
  484. <div class="links">
  485. {block:IfLinkA}
  486. <a href="{text:linkA url}">{text:linkA}</a>
  487. {/block:IfLinkA}
  488. {block:IfLinkB}
  489. <a href="{text:linkB url}">{text:linkB}</a>
  490. {/block:IfLinkB}
  491. {block:IfLinkC}
  492. <a href="{text:linkC url}">{text:linkC}</a>
  493. {/block:IfLinkC}
  494. {block:IfLinkD}
  495. <a href="{text:linkD url}">{text:linkD}</a>
  496. {/block:IfLinkD}
  497. <a href="#" class="cthrough" style="cursor:help" title="description">+</a>
  498. <div class="sub" style="font-family:arial; padding:5px;
  499. font-size:10px; text-align:justify;">
  500. {description}
  501. </div>
  502. </div>
  503. <div class="pagi">
  504. {block:Pagination}
  505. {block:PreviousPage}<a href="{PreviousPage}" class="jump_page">&laquo;</a>{/block:PreviousPage}
  506. {block:JumpPagination length="5"}
  507. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  508. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  509. {block:NextPage}<a href="{NextPage}" class="jump_page">&raquo;</a>{/block:NextPage}
  510. {/block:Pagination}
  511. </div>
  512.  
  513. </div>
  514.  
  515. <div id="stuffcontainer">
  516.  
  517. {block:Posts}
  518.  
  519. <div id="stuff">
  520. {block:Text}{block:Title}<h2>{Title}</h2>{/block:Title}{Body}{/block:Text}
  521.  
  522. {block:Quote}<h2>“{Quote}”</h2><h1>{Source}</h1>{/block:Quote}
  523.  
  524. {block:Link}<a href="{URL}"><h2>{Name}</h2></a>
  525. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  526.  
  527. {block:Photo}<center><img src="{PhotoURL-500}"/></center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  528.  
  529. {block:Photoset}<center>{Photoset-500}</center>
  530. {block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  531.  
  532. {block:Chat}<ul class="chat">{block:Title}<h2>{Title}</h2>{/block:Title}{block:Lines}<li>{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
  533.  
  534. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  535.  
  536. {block:Answer}<div class="ask"><div class="askimage"><img src="{AskerPortraitURL-48}"></div><div class="askurl">{Asker}:</div><div class="asktext">{Question}</div></div><br><div class="ans"><div class="reply">and the queen replied:</div>{Answer}</div>{/block:answer}
  537.  
  538. {block:Audio}
  539. <div id="audioplayer">{AudioPlayerWhite} </div>
  540. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div><div id="music">{block:TrackName}{TrackName}{/block:TrackName}<br><br>{block:Artist}{Artist}{/block:Artist}</div>
  541. {/block:Audio}
  542.  
  543.  
  544. <div id="info">
  545. <span style="background-color:#000;padding:3px;"><a href="{Permalink}">{MonthNumberWithZero}.{DayOfMonthWithZero}</a></span> {block:RebloggedFrom} via: <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}{block:ContentSource}| <a href="{SourceURL}">source</a>{/block:ContentSource}❤{NoteCount}</a>
  546. {block:HasTags}<div class="tags">
  547. {block:Tags}<a href="{tagURL}">#{Tag}</a>{/block:Tags}
  548. </div>{block:HasTags}
  549. </div>
  550. </div>
  551. {/block:Posts}
  552. <br><br>{block:PostNotes}{PostNotes}{/block:PostNotes}
  553. {/block:Posts}
  554. </div></div></div>
  555. <br><br><br>
  556.  
  557. </div>
  558. <div id="cred"><a href="http://derekhayl.tumblr.com"><img src="http://puu.sh/3yfFw.png"></a></div>
  559.  
  560. </div>
  561. </div>
  562. </div>
  563. </body>
  564. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!