API tools faq
paste
wallflwers

Theme 31 JD

wallflwers
Apr 23rd, 2013
1,171
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.09 KB | None | 0 0
raw download clone embed print report
  1. <!--THEME BY JOSHDEVIN, PLEASE DO NOT USE AS A BASE OR REDISTRIBUTE IN ANYWAY.-->
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4.  
  5.  
  6. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  7. <head>
  8. <title>{Title}</title>
  9. <link rel="shortcut icon" href="{Favicon}">
  10. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  11.  
  12. <link href='http://fonts.googleapis.com/css?family=Text+Me+One' rel='stylesheet' type='text/css'>
  13.  
  14.  
  15. <div style="font-size: 11px; letter-spacing: 2px; float: right; position: fixed; bottom: 10px; right: 10px; color:{color:text};font-family:inconsolata;"><a href="http://joshdevin.tumblr.com">©<i>j</i>D</a></div>
  16.  
  17. <meta name="color:sidelinks" content="#000000"/>
  18. <meta name="color:sidelinkshover" content="#e4e2e2"/>
  19. <meta name="color:links" content="#000000"/>
  20. <meta name="color:linkshover" content="#e4e2e2"/>
  21. <meta name="color:text" content="#000000"/>
  22. <meta name="color:border" content="#eeeeee"/>
  23. <meta name="color:background" content="#ffffff"/>
  24. <meta name="color:linkback" content="#000000"/>
  25. <meta name="color:desc" content="#000000"/>
  26.  
  27.  
  28.  
  29. <meta name="image:side" content=""/>
  30.  
  31.  
  32.  
  33. <meta name="text:Link 1 URL" content="/"/>
  34. <meta name="text:Link 2 URL" content="/"/>
  35. <meta name="text:Link 3 URL" content="/"/>
  36. <meta name="text:Link 4 URL" content="/"/>
  37.  
  38. <meta name="text:title2" content=""/>
  39.  
  40.  
  41.  
  42. <style type="text/css">
  43.  
  44.  
  45. iframe#tumblr_controls { width:50%; white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); opacity:.2;transition: .8s ease-in-out; -webkit-transition: .8s ease-in-out;-moz-transition: .8s ease-in-out;-o-transition: .8s ease-in-out; }
  46.  
  47. iframe#tumblr_controls:hover { white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); opacity:1; }
  48.  
  49.  
  50. iframe#tumblr_controls {right:3px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.2;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  51.  
  52.  
  53. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: .9;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
  54.  
  55.  
  56. iframe#tumblr_controls {right:3px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.2;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  57.  
  58.  
  59. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: .9;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
  60.  
  61. ::-webkit-scrollbar {width: 5px; height: 5px; background:{color:Scrollbar Background}; }
  62. ::-webkit-scrollbar-thumb { background-color: {color:Scrollbar};}
  63.  
  64.  
  65. body
  66. {font-family:calibri;
  67. font-size:11px;
  68. color:{color:text};
  69. background-color:{color:background};
  70. }
  71.  
  72. a
  73. {text-decoration:none;
  74. -webkit-transition: opacity 0.6s linear;-webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;
  75. opacity:1;
  76. color:{color:links};
  77. }
  78.  
  79. a:hover
  80. {text-decoration:none;
  81. opacity:1;
  82. color:{color:linkshover};
  83. }
  84.  
  85. #container {
  86. width:500px;
  87. }
  88.  
  89. #content {
  90. width:500px;
  91. margin: 0 auto -12px auto;
  92. text-align: center;
  93. }
  94.  
  95.  
  96. #sidebar {
  97. margin-top:150px;
  98. margin-left:110px;
  99. border:1px solid #000;
  100. width:100px;
  101. height:150px;
  102. padding:30px;
  103. background:white;
  104. position:fixed;
  105. z-index:9999;
  106. -webkit-transition: opacity 0.4s linear;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;
  107. }
  108.  
  109. #sidebar:hover {
  110. background:black;
  111. color:white;
  112. border:1px solid white;
  113. }
  114.  
  115. #sidebar:hover #hey {
  116. color:white;
  117. }
  118.  
  119. #sidebar:hover #description {
  120. color:white;
  121. -webkit-transition: opacity 0.4s linear;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;
  122. }
  123.  
  124.  
  125. #description {
  126. font-size:9px;
  127. font-family:calibri;
  128. line-height:140%;
  129. color:{color:desc};
  130. position:fixed;
  131. padding-top:3px;
  132. padding-bottom:3px;
  133. width:96px;
  134. margin-top:60px;
  135. margin-left:0px;
  136. text-align:center;
  137. -webkit-transition: opacity 0.4s linear;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;
  138. }
  139.  
  140.  
  141. .links {
  142. position:fixed;
  143. margin-left:-30px;
  144. font-size:9px;
  145. padding:2px;
  146. font-family:inconsolata;
  147. color:{color:sidelinks};
  148. text-transform:uppercase;
  149. width:150px;
  150. text-align:center;
  151. border-radius:10px;
  152. }
  153.  
  154. .links a{
  155. font-family:inconsolata;
  156. font-size:9px;
  157. text-align:center;
  158. padding:1px;
  159. padding-top:4px;
  160. padding-right:0px;
  161. padding-bottom:4px;
  162. padding-left:4px;
  163. line-height:120%;
  164. text-decoration:none;
  165. color:{color:sidelinks};
  166. -webkit-transition: opacity 0.4s linear;-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;
  167. }
  168.  
  169. .links a:hover{
  170. color:{color:sidelinkshover};
  171. background:{color:linkback};
  172. -moz-transition-duration:0.5s;
  173. -webkit-transition-duration:0.5s;
  174. -o-transition-duration:0.5s;
  175.  
  176. }
  177.  
  178.  
  179. #posts {
  180. margin-left:450px;
  181. width:500px;
  182. }
  183.  
  184. #pag {
  185. text-align:center;
  186. }
  187.  
  188.  
  189.  
  190. #info {
  191. font-family:calibri;
  192. font-size: 9px;
  193. margin-top:5px;
  194. width:500px;
  195. border-top: 1px solid #eee;
  196. padding:3px;
  197. text-transform:lowercase;
  198. }
  199.  
  200.  
  201.  
  202.  
  203. .links {
  204. line-height:90%;
  205. opacity: 1;
  206. text-align: center;
  207. padding: 0px;
  208. margin-top:40px;
  209. text-transform:uppercase; -webkit-transition:0.5s linear;
  210. }
  211.  
  212.  
  213. .links a{
  214.  
  215. font-family:garamond;
  216. font-style:normal;
  217. font-size:10px;
  218. padding:1px;
  219. width:20px;
  220. text-transform:uppercase;
  221. display:inline-block;
  222. color:#000000;
  223. border:1px solid #d6d5d5;
  224. margin-right: -5px;
  225. margin-bottom: 1px;
  226. letter-spacing:0px;
  227. opacity:1;
  228. background-color:#fff;
  229. text-decoration:none;
  230. -moz-transition-duration:1s;
  231. -webkit-transition-duration:1s;
  232. -o-transition-duration:1s;
  233. }
  234.  
  235. .links a:hover{
  236. color:#5E5E5E;
  237. letter-spacing:0px;
  238. opacity:1;
  239. padding-left:10px;
  240. padding-right:10px;
  241. background-color:#fafafa;
  242. -webkit-transition: all 0.3s ease;
  243. -moz-transition: all 0.3s ease;
  244. -o-transition: all 0.3s ease;
  245. }
  246.  
  247. #image {
  248. width:340px;
  249. height:740px;
  250. position:fixed;
  251. z-index:-1;
  252. filter: none;
  253. -webkit-filter: grayscale(0);
  254. }
  255.  
  256. #sidebar:hover #image {
  257. filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
  258. filter: gray; /* IE6-9 */
  259. -webkit-filter: grayscale(1)
  260. }
  261.  
  262. #hey {
  263. color:black;
  264. }
  265.  
  266. /*B&W*/
  267. #img {
  268. filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
  269. filter: gray; /* IE6-9 */
  270. -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
  271. -webkit-transition: all 1s ease;
  272. -moz-transition: all 1s ease;
  273. -o-transition: all 1s ease;
  274. -ms-transition: all 1s ease;
  275. transition: all 1s ease;
  276. }
  277.  
  278. #img:hover {
  279. filter: none;
  280. -webkit-filter: grayscale(0);
  281. -webkit-transition: all 1s ease;
  282. -moz-transition: all 1s ease;
  283. -o-transition: all 1s ease;
  284. -ms-transition: all 1s ease;
  285. transition: all 1s ease;
  286. }
  287.  
  288.  
  289. </style>
  290. </head>
  291. <body>
  292. <div id="container">
  293. <div id="content">
  294.  
  295.  
  296.  
  297. <div id="sidebar">
  298.  
  299. <div id="hey" style="position:fixed;font-size:26px;font-style:italic;margin-top:8px;text-align:center;width:115px;margin-left:-10px;"> {title} </div>
  300.  
  301. <div id="description">{Description}<br>{block:PreviousPage}<a style="{color:text}"href="{PreviousPage}">← </a>{/block:PreviousPage}
  302. {block:NextPage}<a style="{color:text}"href="{NextPage}"> →</a>{/block:NextPage}
  303.  
  304. </div>
  305.  
  306. <div class="links">
  307. <a href="{text:Link 1 URL}">I</a>
  308. <a href="{text:Link 2 URL}">II</a>
  309. <a href="{text:Link 3 URL}">III.</a>
  310. <a href="{text:Link 3 URL}">IV</a>
  311. </div>
  312. </div>
  313.  
  314. <div id="img">
  315. <img src="{image:side}" style="width:415px;height:740px;margin-left:-260px;margin-top:-20px;position:fixed;">
  316. </div>
  317.  
  318.  
  319. </div>
  320.  
  321.  
  322. </div>
  323.  
  324. {block:Posts}<div id="posts" style="font-family:calibri;font-size:9px; padding:10px;letter-spacing:1px; width:500px; margin-top:10px;
  325. ">
  326. {block:Text}
  327. {block:Title}
  328. <h3><a href="{Permalink}">{Title}</a></h3>
  329. {/block:Title}
  330.  
  331.  
  332. {Body}
  333.  
  334. {/block:Text}
  335.  
  336. {block:Photo}<img src="{PhotoURL-500}">{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  337.  
  338. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  339.  
  340.  
  341. {block:Quote}
  342. "{Quote}"
  343.  
  344. {block:Source}
  345. <div class="source">{Source}</div>
  346. {/block:Source}
  347.  
  348. {/block:Quote}
  349.  
  350. {block:Link}
  351. <a href="{URL}" class="link" {Target}>{Name}</a>
  352.  
  353. {block:Description}
  354. <div class="description">{Description}</div>
  355. {/block:Description}
  356.  
  357. {/block:Link}
  358.  
  359. {block:Chat}
  360. {block:Title}
  361. <h3><a href="{Permalink}">{Title}</a></h3>
  362. {/block:Title}
  363.  
  364. {block:Lines}
  365. {block:Label}
  366. <span class="label">{Label}</span>
  367. {/block:Label}
  368.  
  369. {Line}
  370. {/block:Lines}
  371.  
  372. {/block:Chat}
  373.  
  374. {block:Video}
  375. {Video-500}
  376. {block:Caption}
  377. <div class="caption">{Caption}</div>
  378. {/block:Caption}
  379. {/block:Video}
  380.  
  381. {block:Answer}<div style="padding:5px;"><b>{Asker} whispered:</b><br> </div><div style="background:#eee;border-left:3px solid #8c9194;padding:5px;">"{Question}"</div>
  382. {Answer}{/block:answer}
  383.  
  384.  
  385. {block:Audio}<div style="float:right;margin-top:-40px;">
  386. {AudioPlayerGrey}</div>
  387. {block:PlayCount} {PlayCount} Plays {/block:PlayCount}
  388. {block:AlbumArt}
  389. <img src="{AlbumArtURL}" style="width:50px;float:left;margin-top:-40px;padding:5px;">
  390. {/block:AlbumArt}
  391. {block:TrackName}
  392. | {TrackName}
  393. {/block:TrackName}
  394. {block:Artist}
  395. | by {Artist}
  396. {/block:Artist}
  397. {block:Caption}
  398. {/block:Caption}
  399.  
  400.  
  401. {/block:Audio}
  402.  
  403. <div id="info">
  404. {block:IndexPage}<br>
  405. posted
  406. <a href="{Permalink}"> {TimeAgo}</a>
  407. with
  408. <a href="{Permalink}">{NoteCountwithlabel} </a>
  409. <br>
  410. {block:RebloggedFrom} reblogged through <a href="{ReblogParentURL}" target="_blank"> {ReblogParentName}</a> originally by <a href="{ReblogRootURL}" target="_blank">{ReblogRootName}</a> {/block:RebloggedFrom}
  411.  
  412. <br>
  413. {block:HasTags}
  414. {block:Tags}<a href="{TagURL}">#{Tag}</a>
  415. {/block:Tags}
  416. {/block:HasTags}
  417. </center> </div>
  418. {block:ContentSource}
  419. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  420. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  421. {/block:SourceLogo}
  422. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  423. {/block:ContentSource}
  424. {/block:IndexPage}
  425.  
  426. {block:PermalinkPage}
  427. {block:Date}
  428. {TimeAgo} on
  429. {ShortMonth} {DayofMonth},{Year}
  430. {/block:Date}
  431. {block:NoteCount} {NoteCountWithLabel}
  432. {/block:NoteCount}<br>
  433. {block:HasTags}
  434. {block:Tags}<a href="{TagURL}">#{Tag}</a>
  435. {/block:Tags}
  436. {/block:HasTags}
  437. <br>{block:RebloggedFrom} <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a> ( <a href="{ReblogRootURL}" target="_blank">{ReblogRootName}</a>) {/block:RebloggedFrom}
  438. </center>
  439. {/block:PermalinkPage}
  440.  
  441. {block:PostNotes}
  442. {PostNotes}
  443. {/block:PostNotes}
  444.  
  445.  
  446. </div>
  447. {/block:Posts}
  448.  
  449.  
  450.  
  451.  
  452. </body>
  453.  
  454. </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!