API tools faq
paste
Advertisement
parispier

Theme30: Crystal Clear

parispier
Jul 11th, 2013
1,685
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.27 KB | None | 0 0
raw download clone embed print report
  1. <!---- theme made by nialljhoren ---->
  2. <!---- do not use as base code, remove credit, or claim as your own --->
  3.  
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head><title>{Title}</title>
  7. <link rel="shortcut icon" href="{Favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  10.  
  11. <script>
  12. window.onload = function () {
  13. document.body.insertAdjacentHTML( 'beforeEnd', '<iframe id="my-like-frame" style="display:none;"></iframe>' );
  14. document.addEventListener( 'click', function ( event ) {
  15. var myLike = event.target;
  16. if( myLike.className.indexOf( 'my-like' ) > -1 ) {
  17. var frame = document.getElementById( 'my-like-frame' ),
  18. liked = ( myLike.className == 'my-liked' ),
  19. command = liked ? 'unlike' : 'like',
  20. reblog = myLike.getAttribute( 'data-reblog' ),
  21. id = myLike.getAttribute( 'data-id' ),
  22. oauth = reblog.slice( -8 );
  23. frame.src = 'http://www.tumblr.com/' + command + '/' + oauth + '?id=' + id;
  24. liked ? myLike.className = 'my-like' : myLike.className = 'my-liked';
  25. };
  26. }, false );
  27. };
  28. </script>
  29.  
  30. <meta name="color:background" content="#ffffff"/>
  31. <meta name="color:text" content="#a3a3a3" />
  32. <meta name="color:link" content="#b3b2b1" />
  33. <meta name="color:linkhovercolor" content="#ca9bb1" />
  34. <meta name="color:navlink" content="#aaa8a7" />
  35. <meta name="color:navlinkhovercolor" content="d3c294" />
  36. <meta name="color:scrollbar" content="#b1b1b1"/>
  37.  
  38. <meta name="text:Link1" content="/" />
  39. <meta name="text:Link2" content="/" />
  40. <meta name="text:Link3" content="/" />
  41. <meta name="text:Link4" content="/" />
  42. <meta name="text:Link5" content="/" />
  43.  
  44. <meta name="image:sidebar" content=""/>
  45. <meta name="image:sidebar2" content=""/>
  46. <meta name="image:sidebar3" content=""/>
  47.  
  48. <meta name="if:GrayBar" content="0"/>
  49.  
  50. <style type="text/css">
  51.  
  52. ::-webkit-scrollbar-thumb:vertical {background-color: {color:scrollbar}; height:100px;}
  53.  
  54. ::-webkit-scrollbar-thumb:horizontal {background-color: {color:scrollbar}; height:10px !important;}
  55.  
  56. ::-webkit-scrollbar {height:6px; width:6px; background-color: {color:background};}
  57.  
  58. body {
  59. margin:0px;
  60. font-size:10px;
  61. line-height:100%;
  62. font-family:times new roman;
  63. color:{color:text};
  64. background:{color:background};
  65. }
  66.  
  67. a {
  68. text-decoration:none;
  69. outline:none;
  70. -moz-outline-style:none;
  71. color:{color:link};
  72. -webkit-transition: all 0.5s ease-in-out;
  73. -moz-transition: all 0.5s ease-in-out;
  74. -o-transition: all 0.5s ease-in-out;
  75. }
  76.  
  77. a:hover {
  78. color:{color:linkhovercolor};
  79. -webkit-transition: all 0.5s ease-in-out;
  80. -moz-transition: all 0.5s ease-in-out;
  81. -o-transition: all 0.5s ease-in-out;
  82. }
  83.  
  84. img {
  85. border:none;
  86. }
  87.  
  88. blockquote {
  89. padding-left:5px;
  90. border-left:2px solid;
  91. }
  92.  
  93. blockquote blockquote {
  94. padding-left:5px;
  95. border-left:2px solid;
  96. }
  97.  
  98. h1 {
  99. font-size:17px;
  100. text-transform:lowercase;
  101. font-style:italic;
  102. font-weight:100;
  103. padding-bottom:2px;
  104. }
  105.  
  106. #entries {
  107. width:500px;
  108. margin-left:450px;
  109. margin-top:80px;
  110. margin-bottom:30px;
  111. {block:IfGrayBar}
  112. margin-left:380px;
  113. {/block:IfGrayBar}
  114. }
  115.  
  116. #post {
  117. width:500px;
  118. padding-right:20px;
  119. padding-left:15px;
  120. padding-top:15px;
  121. margin-top:18px;
  122. }
  123.  
  124. #sidebar {
  125. position:fixed;
  126. width:145px;
  127. margin-left:250px;
  128. margin-top:100px;
  129. height:200px;
  130. {block:IfGrayBar}
  131. margin-left:140px;
  132. {/block:IfGrayBar}
  133. }
  134.  
  135. #sidething {
  136. position:fixed;
  137. width:100px;
  138. margin-left:00px;
  139. margin-top:-80px;
  140. height:100%;
  141. background-color:#f3f3f3;
  142. }
  143.  
  144. #sideimages {
  145. position:fixed;
  146. margin-top:-40px;
  147. }
  148.  
  149. #sidebarimage img {
  150. z-index:1;
  151. position:fixed;
  152. width:100px;
  153. height:100px;
  154. padding:3px;
  155. opacity:.85;
  156. border:1px solid #e4e3e2;
  157. margin-left:27px;
  158. margin-top:3px;
  159. border-radius:100%;
  160. -webkit-transition: all 0.5s ease-in-out;
  161. -moz-transition: all 0.5s ease-in-out;
  162. -o-transition: all 0.5s ease-in-out;
  163. }
  164.  
  165. #sidebarimage2 img {
  166. z-index:1;
  167. position:fixed;
  168. margin-left:27px;
  169. margin-top:120px;
  170. width:100px;
  171. height:100px;
  172. padding:3px;
  173. opacity:.85;
  174. border:1px solid #e4e3e2;
  175. border-radius:100%;
  176. -webkit-transition: all 0.5s ease-in-out;
  177. -moz-transition: all 0.5s ease-in-out;
  178. -o-transition: all 0.5s ease-in-out;
  179. }
  180.  
  181. #sidebarimage3 img {
  182. z-index:1;
  183. position:fixed;
  184. margin-left:27px;
  185. margin-top:240px;
  186. width:100px;
  187. height:100px;
  188. padding:3px;
  189. opacity:.85;
  190. border:1px solid #e4e3e2;
  191. border-radius:100%;
  192. -webkit-transition: all 0.5s ease-in-out;
  193. -moz-transition: all 0.5s ease-in-out;
  194. -o-transition: all 0.5s ease-in-out;
  195. }
  196.  
  197. #sidebar:hover #sidebarimage img {
  198. opacity:0;
  199. margin-top:46px;
  200. transform: rotate(360deg);
  201. -webkit-transform: rotate(360deg);
  202. -moz-transform: rotate(360deg);
  203. -webkit-transition: all 0.5s ease-in-out;
  204. -moz-transition: all 0.5s ease-in-out;
  205. -o-transition: all 0.5s ease-in-out;
  206. }
  207.  
  208. #sidebar:hover #sidebarimage2 img {
  209. margin-top:46px;
  210. transform: rotate(360deg);
  211. -webkit-transform: rotate(360deg);
  212. -moz-transform: rotate(360deg);
  213. -webkit-transition: all 0.5s ease-in-out;
  214. -moz-transition: all 0.5s ease-in-out;
  215. -o-transition: all 0.5s ease-in-out;
  216. }
  217.  
  218. #sidebar:hover #sidebarimage3 img {
  219. opacity:0;
  220. margin-top:46px;
  221. transform: rotate(360deg);
  222. -webkit-transform: rotate(360deg);
  223. -moz-transform: rotate(360deg);
  224. -webkit-transition: all 0.5s ease-in-out;
  225. -moz-transition: all 0.5s ease-in-out;
  226. -o-transition: all 0.5s ease-in-out;
  227. }
  228.  
  229. #sidebar:hover #links {
  230. opacity:1;
  231. transform: rotate(360deg);
  232. -webkit-transform: rotate(360deg);
  233. -moz-transform: rotate(360deg);
  234. -webkit-transition: all 0.5s ease-in-out;
  235. -moz-transition: all 0.5s ease-in-out;
  236. -o-transition: all 0.5s ease-in-out;
  237. }
  238.  
  239. #sidebar:hover #description {
  240. opacity:1;
  241. transform: rotate(360deg);
  242. -webkit-transform: rotate(360deg);
  243. -moz-transform: rotate(360deg);
  244. -webkit-transition: all 0.5s ease-in-out;
  245. -moz-transition: all 0.5s ease-in-out;
  246. -o-transition: all 0.5s ease-in-out;
  247. }
  248.  
  249. #sidebar:hover #quotation img {
  250. opacity:.1;
  251. transform: rotate(360deg);
  252. -webkit-transform: rotate(360deg);
  253. -moz-transform: rotate(360deg);
  254. -webkit-transition: all 0.5s ease-in-out;
  255. -moz-transition: all 0.5s ease-in-out;
  256. -o-transition: all 0.5s ease-in-out;
  257. }
  258.  
  259. #quotation img {
  260. position:fixed;
  261. opacity:0;
  262. width:25px;
  263. height:auto;
  264. margin-top:113px;
  265. margin-left:20px;
  266. }
  267.  
  268. #description {
  269. z-index:2;
  270. width:113px;
  271. height:auto;
  272. font-family:times new;
  273. font-size:8px;
  274. position:fixed;
  275. padding:5px;
  276. letter-spacing:1px;
  277. margin-top:115px;
  278. margin-left:20px;
  279. line-height:170%;
  280. text-align:center;
  281. opacity:0;
  282. -webkit-transition: all 0.5s ease-in-out;
  283. -moz-transition: all 0.5s ease-in-out;
  284. -o-transition: all 0.5s ease-in-out;
  285. }
  286.  
  287. #links {
  288. font-family:times new;
  289. z-index:5;
  290. text-transform:lowercase;
  291. position:fixed;
  292. text-align:center;
  293. width:97px;
  294. height:12px;
  295. overflow:hidden;
  296. padding:3px;
  297. margin-left:30px;
  298. margin-top:50px;
  299. font-size:7.5px;
  300. letter-spacing:1px;
  301. opacity:0;
  302. background-color:#fff;
  303. display:block;
  304. }
  305.  
  306. #links a{
  307. padding:1px 3px 1px 3px;
  308. display:inline-block;
  309. color:{color:navlink};
  310. }
  311.  
  312. #links a:hover{
  313. text-decoration:underline;
  314. color:{color:navlinkhovercolor};
  315. }
  316.  
  317. #pagination {
  318. position:fixed;
  319. z-index:3;
  320. width:100px;
  321. font-size:7px;
  322. margin-top:3px;
  323. margin-left:3px;
  324. padding:3px 3px 4px 3px;
  325. letter-spacing:5px;
  326. text-align:center;
  327. -webkit-transition: all 0.5s ease-in-out;
  328. -moz-transition: all 0.5s ease-in-out;
  329. -o-transition: all 0.5s ease-in-out;
  330. }
  331.  
  332. #pagination a {
  333. color:{color:navlink};
  334. }
  335.  
  336. #pagination a:hover {
  337. color:{color:navlinkhovercolor};
  338. }
  339.  
  340. #heyo {
  341. font-family:cambria;
  342. position:fixed;
  343. text-align:center;
  344. bottom:10px;
  345. right:7px;
  346. font-size:6.5px;
  347. text-transform:uppercase;
  348. display:block;
  349. background-color:#fff;
  350. letter-spacing:1px;
  351. }
  352.  
  353. #heyo a{
  354. color:#b3b2b1;
  355. border: 1px solid #e4e3e2;
  356. padding: 3px 5px 3px 5px;
  357. border-radius:500px;
  358. background-color:#fff;
  359. -moz-transition-duration:0.5s;
  360. -webkit-transition-duration:0.5s;
  361. -o-transition-duration:0.5s;
  362. }
  363.  
  364. #heyo a:hover{
  365. color:#fff;
  366. background-color:#969194;
  367. border: 1px solid #7a7979;
  368. -moz-transition-duration:0.5s;
  369. -webkit-transition-duration:0.5s;
  370. -o-transition-duration:0.5s;
  371. }
  372.  
  373. i, em{color:{color:italic}; font-style:italic;}
  374. b, strong{color:{color:bold}; font-style:bold; font-weight:900;}
  375.  
  376. #tags {
  377. font-size:8px;
  378. padding-top:2px;
  379. margin-top:-4px;
  380. display:block;
  381. }
  382.  
  383. #tags a{
  384. text-decoration:underline;
  385. display:inline-block;
  386. }
  387.  
  388. #info {
  389. font-family:cambria;
  390. text-align:left;
  391. text-transform:lowercase;
  392. font-size:7.5px;
  393. margin-top:2px;
  394. padding:2px;
  395. opacity:1;
  396. border-top:1px solid #ececec;
  397. border-left:1px solid #ececec;
  398. }
  399.  
  400. #question{
  401. font-size:9px;
  402. background-color:#ffffff;
  403. padding:7px;
  404. text-align:center;
  405. background-color:#fcfcfc;
  406. border-bottom:1px solid #cecccc;
  407. }
  408.  
  409. .chat {
  410. border-bottom:1px solid #ececec;
  411. padding:5px;
  412. margin-bottom:-3px;
  413. }
  414.  
  415. .quote {
  416. font-size:15px;
  417. font-style:italic;
  418. line-height:120%;
  419. }
  420.  
  421. .quotesource {
  422. font-size:10px;
  423. text-align:right;
  424. margin-bottom:5px;
  425. }
  426.  
  427. .notes {
  428. list-style:lower-roman;
  429. padding-bottom:5px;
  430. padding-top:5px;
  431. margin-left:0px;
  432. font-size:8px;
  433. display:inline-block;
  434. }
  435.  
  436. .notes a {
  437. display:inline-block;
  438. padding-bottom:10px;
  439. }
  440.  
  441. .notes img {
  442. display:none;
  443. }
  444.  
  445. .info {
  446. font-family:cambria;
  447. text-align:left;
  448. text-transform:lowercase;
  449. font-size:7.5px;
  450. margin-top:2px;
  451. padding:2px;
  452. opacity:1;
  453. border-top:1px solid #ececec;
  454. border-left:1px solid #ececec;
  455. }
  456.  
  457. #audioinfo {
  458. font-size:8px;
  459. letter-spacing:1px;
  460. padding-bottom:2px;
  461. }
  462.  
  463. .audioplayer {
  464. overflow:hidden;
  465. display:block;
  466. float:left;
  467. margin-top:7px;
  468. margin-left:7px;
  469. width:27px;
  470. height:27px;
  471. opacity:.5;
  472. }
  473.  
  474. .audioplayercontainer {
  475. width:70px;
  476. height:70px;
  477. position:absolute;
  478. }
  479.  
  480. {CustomCSS}</style></head><body>
  481.  
  482. {block:IfGrayBar}<div id="sidething"></div>{/block:IfGrayBar}
  483.  
  484. <div id="sidebar">
  485.  
  486. <div id="sideimages">
  487. <div id="sidebarimage"><img src="{image:sidebar}"></div>
  488. <div id="sidebarimage2"><img src="{image:sidebar2}"></div>
  489. <div id="sidebarimage3"><img src="{image:sidebar3}"></div></div>
  490.  
  491. <div id="quotation"><img src="http://oi43.tinypic.com/imtjc1.jpg"></div>
  492.  
  493. <div id="links">
  494. <a href="{text:Link1}">01</a>
  495. <a href="{text:Link2}">02</a>
  496. <a href="{text:Link3}">03</a>
  497. <a href="{text:Link4}">04</a>
  498. <a href="{text:Link5}">05</a>
  499. </div>
  500.  
  501. <div id="description">{Description}
  502.  
  503. <div id="pagination">{block:Pagination}
  504. {block:PreviousPage}<a href="{PreviousPage}">«</a>{/block:PreviousPage}
  505. {block:JumpPagination length="3"}
  506. {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
  507. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  508. {/block:JumpPagination}
  509. {block:NextPage}<a href="{NextPage}">»</a>{/block:NextPage}
  510. {/block:Pagination}
  511. </div></div></div>
  512.  
  513. </div>
  514.  
  515. <div id="entries">{block:Posts}<div id="post">
  516.  
  517. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  518.  
  519. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  520.  
  521. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  522.  
  523. {block:Quote}<div class="quote">{Quote}</div>{block:Source} <div class="quotesource">—{Source}</div>{/block:Source}{/block:Quote}
  524.  
  525. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  526.  
  527. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}<div class="chat">{block:Label}{Label}{/block:Label} {Line}<br></div>{/block:Lines}{/block:Chat}
  528.  
  529. {block:Audio}
  530. {block:AlbumArt}<img src="{AlbumArtURL}" width="40px" height="40px" align="left" />{/block:AlbumArt}
  531. <div class="audioplayercontainer"><div class="audioplayer">{AudioPlayerWhite}</div></div>
  532.  
  533. <div id="audioinfo">
  534. &nbsp;{block:TrackName}<b>Title: </b>{TrackName}{/block:TrackName}<br>
  535. &nbsp;{block:Artist}<b>Artist: </b>{Artist}{/block:Artist}<br>
  536. &nbsp;{block:Album}<b>Album:</b> {Album}{/block:Album}<br>
  537. &nbsp;<b>Plays:</b> {PlayCount}</div>
  538. {block:Caption}{Caption}{/block:Caption}
  539. {/block:Audio}
  540.  
  541. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  542.  
  543. {block:Answer}
  544. <a href="{AskerURL}"></a> <div id="question"><i>{Asker} whispered:</i><br>{Question}</div> <p>
  545. {Answer}
  546. {/block:Answer}
  547.  
  548. <div id="info">
  549. {block:Date}posted {TimeAgo}{/block:Date} with <a href="{Permalink}">
  550. {NoteCountWithLabel}</a> + <a href="{ReblogURL}" target="_blank">reblog</a>
  551. <div style="float:right;">
  552. {block:RebloggedFrom} via <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>{/block:RebloggedFrom} -
  553. {block:ContentSource}<a href="{SourceURL}">© {SourceLink}</a>{/block:ContentSource}</div>
  554.  
  555. {block:HasTags}<div id="tags">{block:Tags} +<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags} </div></div>
  556.  
  557. {/block:Posts}
  558.  
  559. {block:PostNotes}<div class="notes">{PostNotes}</div>{/block:PostNotes}
  560. {/block:Posts} </div></div>
  561.  
  562. <!---do not remove--->
  563. <div id="heyo"><a href="http://nialljhoren.tumblr.com">N</a></div>
  564.  
  565. </div></div>
  566.  
  567. </body></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!