Advertisement
Jessicakim

Piero - theme #006

Jun 27th, 2012
4,265
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.78 KB | None | 0 0
  1. <!---- piero theme made by madarathemes
  2. don't take off the credits
  3. don't copy
  4. don't use this theme as a base ---->
  5.  
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  8. <head>
  9.  
  10. <!-- DEFAULTS -->
  11. <meta name="if:Caption" content="0"/>
  12. <meta name="if:Tags" content="0"/>
  13. <meta name="if:EndlessScrolling" content="0"/>
  14.  
  15. <!-- DEFAULTS LINKS -->
  16. <meta name="text:Link1" content="/"/>
  17. <meta name="text:Link1 Title" content="Link 1"/>
  18. <meta name="text:Link2" content="/"/>
  19. <meta name="text:Link2 Title" content="Link 2"/>
  20. <meta name="text:Link3" content="/"/>
  21. <meta name="text:Link3 Title" content="Link 3"/>
  22. <meta name="text:Link4" content="/"/>
  23. <meta name="text:Link4 Title" content="Link 4"/>
  24.  
  25. <!-- DEFAULT COLORS -->
  26. <meta name="color:Background" content="#dddddd"/>
  27. <meta name="color:Scrollbar" content="#44bbaa"/>
  28. <meta name="color:Text" content="#000000"/>
  29. <meta name="color:Link" content="#553366"/>
  30. <meta name="color:Link Hover" content="#ffdddd"/>
  31. <meta name="color:Blockquote Border" content="#55eedd"/>
  32. <meta name="color:Blockquote Text" content="#330055"/>
  33. <meta name="color:Postbox" content="#ffffff"/>
  34. <meta name="color:Title" content="#553366"/>
  35. <meta name="color:Title Hover" content="#000000"/>
  36. <meta name="color:Notes Text" content="#1c1c1c"/>
  37. <meta name="color:Description" content="#ffffff"/>
  38. <meta name="color:Description Text" content="#000000"/>
  39. <meta name="color:Description Border" content="#886688"/>
  40. <meta name="color:Permalink Box" content="#eeeeee"/>
  41. <meta name="color:Permalink Text" content="#330055"/>
  42. <meta name="color:Permalink Border" content="#553366"/>
  43. <meta name="color:Navigation" content="#ffdddd"/>
  44. <meta name="color:Navigation Text" content="#000000"/>
  45. <meta name="color:Navigation2" content="#44bbaa"/>
  46. <meta name="color:Navigation2 Text" content="#ffffff"/>
  47. <meta name="color:Navigation Hover" content="#330055"/>
  48. <meta name="color:Navigation Text Hover" content="#ffffff"/>
  49. <meta name="color:Tags" content="#000000"/>
  50. <meta name="color:Tags Link" content="#550088"/>
  51. <meta name="color:Pagination" content="#000000"/>
  52.  
  53. <!-- DEFAULT IMAGE -->
  54. <meta name="image:Background" content="http://static.tumblr.com/uobboj6/FoDm6ab5d/cubes.png"/>
  55. <meta name="image:Sidebar" content="http://static.tumblr.com/uobboj6/B2Sm6abp4/tumblr_m2ply2nxfe1qawqhuo1_500.png"/>
  56.  
  57. <title>{Title}</title>
  58. <link rel="shortcut icon" href="{Favicon}">
  59. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  60.  
  61. {block:IfEndlessScrolling}<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/EIBmz7s0p/infinitescrolling.js"></script>{/block:IfEndlessScrolling}
  62.  
  63. <style type="text/css">
  64.  
  65. @font-face {
  66. font-family: "04b03";
  67. src: url('https://dl.dropboxusercontent.com/u/109376002/04B_03__.TTF');
  68. }
  69.  
  70. @font-face {
  71. font-family: "pixel";
  72. src: url('https://dl.dropboxusercontent.com/u/109376002/Pixel_Berry_08_84_Ltd.Edition.TTF');
  73. }
  74.  
  75. 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;}
  76.  
  77. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: 1;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
  78.  
  79. ::-webkit-scrollbar-thumb:vertical {
  80. background-color: {color:Scrollbar};
  81. height:100px;
  82. }
  83.  
  84. ::-webkit-scrollbar {
  85. height:25px;
  86. width:7px;
  87. background-color: #fff;
  88. }
  89.  
  90. body {
  91. background-color:{color:Background};
  92. background-image:url('{image:Background}');
  93. background-position: fixed;
  94. background-attachment:fixed;
  95. background-repeat:repeat;
  96. font: 10px 'verdana';
  97. color: {color:Text};
  98. }
  99.  
  100. a:link,a:active,a:visited {
  101. text-decoration: none;
  102. color: {color:Link};
  103. -webkit-transition: all 0.5s ease-out;
  104. -moz-transition: all 0.5s ease-out;
  105. -o-transition: all 0.5s ease-out;
  106. }
  107.  
  108. a:hover {
  109. color: {color:Link Hover};
  110. -webkit-transition: all 0.5s ease-out;
  111. -moz-transition: all 0.5s ease-out;
  112. -o-transition: all 0.5s ease-out;
  113. }
  114.  
  115. blockquote {
  116. padding: 0px;
  117. padding-left: 5px;
  118. font: 11px arial;
  119. letter-spacing: 1px;
  120. margin-right: 2px;
  121. margin-left: 3px;
  122. border-left: 2px solid {color:Blockquote Border};
  123. background-color: transparent;
  124. color:{color:Blockquote Text};
  125. }
  126.  
  127. blockquote img{
  128. max-width: 390px;
  129. }
  130.  
  131. img {
  132. opacity: 0.8;
  133. filter:alpha(opacity=80);
  134. -moz-opacity: 0.8;
  135. -webkit-transition: all 0.9s ease;
  136. -moz-transition: all 0.9s ease;
  137. -o-transition: all 0.9s ease;
  138. }
  139.  
  140. img:hover {
  141. opacity: 1;
  142. filter:alpha(opacity=100);
  143. -moz-opacity: 1;
  144. -webkit-transition: all 0.9s ease;
  145. -moz-transition: all 0.9s ease;
  146. -o-transition: all 0.9s ease;
  147. }
  148.  
  149. #entry {
  150. width:525px;
  151. overflow:hidden;
  152. z-index:1;
  153. }
  154.  
  155. #entry:hover .permalink {opacity: 1;}
  156.  
  157. #entry img {
  158. max-width:500px;
  159. }
  160.  
  161. #sidebar {
  162. position: fixed;
  163. float: left;
  164. top: 60px;
  165. margin-left: 630px
  166. }
  167.  
  168. #navigation {
  169. position: fixed;
  170. float: left;
  171. bottom: 30px;
  172. margin-left: 860px
  173. }
  174.  
  175. #postar{
  176. width:545px;
  177. padding: 2px;
  178. margin-top: -10px;
  179. margin-left: 40px;
  180. }
  181.  
  182. #posts{
  183. width: 500px;
  184. padding: 5px;
  185. margin-left:10px;
  186. margin-top:10px;
  187. margin-bottom:-5px;
  188. color: {color:Text};
  189. background: {color:Postbox};
  190. }
  191.  
  192. h1{
  193. font: 28px 'gabriola';
  194. text-align:left;
  195. margin-top:-10px;
  196. margin-left:5px;
  197. margin-bottom:-15px;
  198. }
  199.  
  200. h1 a{
  201. color:{color:Title};
  202. text-decoration:none;
  203. -webkit-transition: all 0.5s ease-in;
  204. -moz-transition: all 0.5s ease-in;
  205. -o-transition: all 0.5s ease-in;
  206. }
  207.  
  208. h1 a:hover{
  209. color:{color:Title Hover};
  210. -webkit-transition: all 0.5s ease-in;
  211. -moz-transition: all 0.5s ease-in;
  212. -o-transition: all 0.5s ease-in;
  213. }
  214.  
  215. .quote{
  216. font:18px 'Times New Roman';
  217. text-align: center;
  218. display:block;
  219. }
  220.  
  221. #audio{
  222. z-index:3;
  223. background: #000;
  224. display:block;
  225. margin-bottom:0px;
  226. }
  227.  
  228. .audiopic{
  229. opacity: 1;
  230. filter:alpha(opacity=100);
  231. -moz-opacity: 1;}
  232.  
  233. #audioborder{
  234. padding: 2px;
  235. border: 2px solid #000;
  236. background-color: #000;
  237. }
  238.  
  239. .borderask{
  240. padding: 2px;
  241. border: 2px solid #eee;
  242. background-color: #eee;
  243. }
  244.  
  245. #ask {
  246. text-align: left;
  247. background: #eee;
  248. margin-left: 55px;
  249. padding: 10px;
  250. position: relative;
  251. font: 12px 'trebuchet ms';
  252. color: #000;
  253. }
  254.  
  255. #ask p {margin:1px 1px;}
  256.  
  257. .notes {width:500px; padding: 0px; color: {color:Notes Text}; margin-top: 0px; margin-left: 15px; line-height: 15px; float:none; letter-spacing: 0px; text-transform:lowercase; font-family: trebuchet ms; font-size: 10px;}
  258.  
  259. li.notes {list-style:decimal; padding: 2px; margin: 2px; letter-spacing: 0px; text-transform:lowercase;}
  260.  
  261. #notes a{color: {color:Link}; letter-spacing: 0px; text-transform:lowercase; font-family: trebuchet ms; font-size: 10px;}
  262.  
  263. .perma {
  264. width:140px;
  265. height:auto;
  266. padding:2px;
  267. padding-right:8px;
  268. border-left:5px solid {color:Permalink Border};
  269. background:{color:Permalink Box};
  270. color:{color:Permalink Text};
  271. margin-left:0px;
  272. margin-top:20px;
  273. z-index:300;
  274. filter:alpha(opacity=80);
  275. opacity:0;
  276. font-size:8px;
  277. font-family:'pixel';
  278. text-align:center;
  279. -webkit-transition-duration: .90s;
  280. position: absolute;
  281. }
  282.  
  283. .link:hover .perma {
  284. filter:alpha(opacity=30);
  285. opacity:99;
  286. width:140px;
  287. height:auto;
  288. padding:2px;
  289. padding-right:8px;
  290. background:{color:Permalink Box};
  291. color:{color:Permalink Text};
  292. margin-left:10px;
  293. margin-top:20px;
  294. z-index:300;
  295. font-size:8px;
  296. font-family:'pixel';
  297. text-align:center;
  298. -webkit-transition-duration: .90s;
  299. position: absolute;
  300. }
  301.  
  302. .menu a{
  303. float:left;
  304. width: 56px;
  305. height:8px;
  306. padding:5px;
  307. padding-top:4px;
  308. background: {color:Navigation};
  309. font: 8px '04b03';
  310. text-align:center;
  311. display:block;
  312. margin-right:1px;
  313. margin-top:1px;
  314. color: {color:Navigation Text};
  315. text-decoration: none;
  316. -webkit-transition: all 0.5s ease-in;
  317. -moz-transition: all 0.5s ease-in;
  318. -o-transition: all 0.5s ease-in;
  319. }
  320.  
  321. .menu a:hover{
  322. float:left;
  323. width: 56px;
  324. height:8px;
  325. padding:5px;
  326. padding-top:4px;
  327. background: {color:Navigation Hover};
  328. font: 8px '04b03';
  329. text-align:center;
  330. display:block;
  331. margin-top:1px;
  332. margin-right:1px;
  333. color: {color:Navigation Text Hover};
  334. text-decoration: none;
  335. -webkit-transition: all 0.5s ease-in;
  336. -moz-transition: all 0.5s ease-in;
  337. -o-transition: all 0.5s ease-in;=
  338. }
  339.  
  340. .menu2 a{
  341. float:left;
  342. width: 56px;
  343. height:8px;
  344. padding:5px;
  345. padding-top:4px;
  346. background:{color:Navigation2};
  347. font: 8px '04b03';
  348. text-align:center;
  349. display:block;
  350. margin-right:1px;
  351. margin-top:1px;
  352. color: {color:Navigation2 Text};
  353. text-decoration: none;
  354. -webkit-transition: all 0.5s ease-in;
  355. -moz-transition: all 0.5s ease-in;
  356. -o-transition: all 0.5s ease-in;
  357. }
  358.  
  359. .menu2 a:hover{
  360. float:left;
  361. width: 56px;
  362. height:8px;
  363. padding:5px;
  364. padding-top:4px;
  365. background: {color:Navigation Hover};
  366. font: 8px '04b03';
  367. text-align:center;
  368. display:block;
  369. margin-top:1px;
  370. margin-right:1px;
  371. color: {color:Navigation Text Hover};
  372. text-decoration: none;
  373. -webkit-transition: all 0.5s ease-in;
  374. -moz-transition: all 0.5s ease-in;
  375. -o-transition: all 0.5s ease-in;=
  376. }
  377.  
  378. .descri {
  379. width:230px;
  380. height:302px;
  381. background:{color:Description};
  382. padding:2px;
  383. padding-top:50px;
  384. padding-right:8px;
  385. color:{color:Description Text};
  386. border-right:15px solid {color:Description Border};
  387. margin-left:25px;
  388. margin-top:0px;
  389. z-index:-1;
  390. font-size:11px;
  391. font-family:'georgia';
  392. text-align:center;
  393. position: absolute;
  394. -webkit-transition-duration: .90s;
  395. }
  396.  
  397. .ption:hover .descri {
  398. filter:alpha(opacity=30);
  399. opacity:99;
  400. width:240px;
  401. height:302px;
  402. background:{color:Description};
  403. padding:2px;
  404. padding-top:50px;
  405. padding-right:8px;
  406. color:{color:Description Text};
  407. margin-left:270px;
  408. margin-top:0px;
  409. z-index:0;
  410. font-size:11px;
  411. font-family:'georgia';
  412. text-align:center;
  413. -webkit-transition-duration: .90s;
  414. position: absolute;
  415. }
  416.  
  417. .side{
  418. width:260px;
  419. padding:5px;
  420. background-color:{color:Description};
  421. z-index:999;
  422. opacity: 1;
  423. filter:alpha(opacity=100);
  424. -moz-opacity: 1;
  425. }
  426.  
  427. .tags{
  428. text-align:right;
  429. font: 11px 'consolas';
  430. color:{color:Tags};
  431. margin-top: 5px;
  432. margin-right:5px;
  433. }
  434.  
  435. .tags a{
  436. text-align:right;
  437. font: 11px 'consolas';
  438. color:{color:Tags Link};
  439. margin-top: 5px;
  440. }
  441.  
  442. #pagination {
  443. margin-top: 60px;
  444. font-family:georgia;
  445. text-align:center;
  446. font-size:14px;
  447. color: {color:Pagination};
  448. }
  449.  
  450. h3 {
  451. color:{color:Link};
  452. font-size:16px;
  453. padding-top:-10px;
  454. margin-right:15px;
  455. margin-bottom:10px;
  456. text-align:right;
  457. letter-spacing: 1px;
  458. font-family: 'georgia'; }
  459.  
  460. {CustomCSS}
  461.  
  462. </style>
  463. <script type="text/javascript"
  464. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
  465. </script>
  466. <script type="text/javascript" language="javascript">
  467. $(function () {
  468. $('#scrlBotm').click(function () {
  469. $('html, body').animate({
  470. scrollTop: $(document).height()
  471. },
  472. 1500);
  473. return false;
  474. });
  475.  
  476. $('#scrlTop').click(function () {
  477. $('html, body').animate({
  478. scrollTop: '0px'
  479. },
  480. 1500);
  481. return false;
  482. });
  483. });
  484. </script>
  485.  
  486. </head>
  487.  
  488. <body>
  489.  
  490. <div id="sidebar">
  491.  
  492. <div class="ption"><div class="descri">
  493. <h3><a href="/">{Title}</a></h3>
  494. {description}
  495. </div>
  496. <div class="side">
  497. <img src="{image:Sidebar}" width="260" height="345"></div></div>
  498. <div class="menu"><a href="/">home</a></div>
  499. <div class="menu2"><a href="/ask">ask</a></div>
  500. <div class="menu"><a href="/archive">archive</a></div>
  501. <div class="menu2"><a href="http://madarathemes.tumblr.com/">theme</a></div>
  502. <div class="menu2"><a href="{text:Link1}">{text:Link1 Title}</a></div>
  503. <div class="menu"><a href="{text:Link2}">{text:Link2 Title}</a></div>
  504. <div class="menu2"><a href="{text:Link3}">{text:Link3 Title}</a></div>
  505. <div class="menu"><a href="{text:Link4}">{text:Link4 Title}</a></div>
  506. {block:IfNotEndlessScrolling}<div id="pagination">{block:PreviousPage}<a href="{PreviousPage}">«</a> &nbsp;{/block:PreviousPage}{CurrentPage}/{TotalPages}{block:NextPage}&nbsp;<a href="{NextPage}">»</a>{/block:NextPage}</div>{/block:IfNotEndlessScrolling}
  507. </div></div>
  508.  
  509. <div id="postar">
  510. <table width="40%" border="0">
  511. <tr>
  512. <td align="center">
  513. {block:IfEndlessScrolling}<div class = "autopagerize_page_element" >{/block:IfEndlessScrolling}
  514. {block:Posts}
  515. <div id="entry">
  516. {block:IndexPage}<div class="link"><div class="perma">
  517. <a style="color:{color:Permalink};" href="{Permalink}"><a href="{Permalink}">{TimeAgo}</a> · {NoteCount}
  518. </div>{/block:IndexPage}
  519. <table width="500" border="0">
  520. <tr>
  521. <td>
  522. <div id="posts">
  523.  
  524. {block:Text}
  525. {block:Title}<h1><a href="{Permalink}">▶ {Title}</a></h1>{/block:Title}
  526. {Body}
  527. {/block:Text}
  528.  
  529. {block:Photo}
  530. {block:IndexPage}<a href="{Permalink}"><img src="{PhotoURL-500}" border="0" width="500px"/></a>{/block:IndexPage}
  531. {block:PermalinkPage}{LinkOpenTag}<img src="{PhotoURL-500}" border="0" width="500px"/>{LinkCloseTag}{/block:PermalinkPage}
  532. {block:IfCaption} {block:Caption}
  533. {Caption}
  534. {/block:Caption}{/block:IfCaption}
  535.  
  536. {block:IfNotCaption}{block:PermalinkPage}{block:Caption}
  537. {Caption}
  538. {/block:Caption}{/block:PermalinkPage}{/block:IfNotCaption}
  539. {/block:Photo}
  540.  
  541. {block:Photoset}
  542. {Photoset-500}
  543. {block:IfCaption} {block:Caption}
  544. {Caption}
  545. {/block:Caption}{/block:IfCaption}
  546.  
  547. {block:IfNotCaption}{block:PermalinkPage}{block:Caption}
  548. {Caption}
  549. {/block:Caption}{/block:PermalinkPage}{/block:IfNotCaption}
  550. {/block:Photoset}
  551.  
  552. {block:Quote}
  553. <div class="quote">"{Quote}"</div>
  554. {block:Source}
  555. <div align="right">- {Source}</div>
  556. {/block:Source}
  557. {/block:Quote}
  558.  
  559. {block:Link}
  560. <h1><a href="{URL}" class="link" {Target}>{Name} →</a></h1>
  561. {block:Description}
  562. {Description}
  563. {/block:Description}
  564. {/block:Link}
  565.  
  566. {block:Chat}
  567. {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  568. <div style="margin-left:16px;">{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}</div>
  569. {/block:Chat}
  570.  
  571. {block:Audio}
  572.  
  573. {block:IfCaption} <div style="float:right;display: block; margin-top:0px;z-index:4;">{block:AlbumArt}<img src="{AlbumArtURL}" width="60px" height="60px" id="audioborder" class="audiopic"/>{/block:AlbumArt}</div><div id="audio">{AudioPlayerBlack}</div>
  574. {block:Caption}
  575. {Caption}
  576. {/block:Caption}{/block:IfCaption}
  577.  
  578. {block:IfNotCaption}<div id="audio">{AudioPlayerBlack}</div>
  579. {block:PermalinkPage}{block:Caption}
  580. {Caption}
  581. {/block:Caption}{/block:PermalinkPage}{/block:IfNotCaption}
  582. {/block:Audio}
  583.  
  584. {block:Video}
  585. {Video-500}
  586. {block:IfCaption} {block:Caption}
  587. {Caption}
  588. {/block:Caption}{/block:IfCaption}
  589.  
  590. {block:IfNotCaption}{block:PermalinkPage}{block:Caption}
  591. {Caption}
  592. {/block:Caption}{/block:PermalinkPage}{/block:IfNotCaption}
  593. {/block:Video}
  594.  
  595. {block:Answer}
  596. <p><img src="{AskerPortraitURL-48}" border-left: 1px solid #f0f0f0; align="left" class="borderask" /> </a><b><div id="ask" align="right">{Asker}:</b> {Question}</div><br /></p>
  597. {Answer}
  598. {/block:Answer}
  599.  
  600. </div>
  601. <div class="tags">{block:IfTags}{block:HasTags}<b>Tagged</b> {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}{/block:IfTags}</div>
  602.  
  603. {block:PermalinkPage}{block:Date}<div class="notes"><br><span style="font-family: 'times new roman'; text-transform:uppercase;"><b> {Month} {DayOfMonthWithZero}, {Year} </b><br>▶ {NoteCountWithLabel}<br> →{block:RebloggedFrom}via <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a> ↔ source <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>←{/block:RebloggedFrom}
  604. <br>
  605. {block:HasTags}<b>Tagged</b> {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}<br>
  606. {block:PostNotes}{PostNotes}{/block:PostNotes}</div></span>{/block:Date}{/block:PermalinkPage}
  607.  
  608. </td>
  609. </tr>
  610. </table>
  611. {block:IndexPage}</div>{/block:IndexPage}
  612. {block:Posts}{block:IfEndlessScrolling}</div>{/block:IfEndlessScrolling}
  613. </td>
  614. </tr>
  615. </table>
  616. </div>
  617.  
  618. {block:IfEndlessScrolling}<a id="scrlTop" title="Top" href="#" style="color:{color:Scrollbar}; font-size:16px; font-family: 'trebuchet ms'; position: fixed; bottom: 10px; right: 10px;">TOP ▲</a>{/block:IfEndlessScrolling}
  619.  
  620. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement