Advertisement
imperialthemes

ζ Theme

Apr 7th, 2013
218
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.79 KB | None | 0 0
  1. <!--
  2. ζ Theme ✦ Zeta Theme
  3. main blog: oasal.tumblr.com
  4. theme blog: imperialthemes.tumblr.com
  5.  
  6. ✦ The Zeta theme is a 300px one
  7. ___ ___ ✦ column grid theme that is very
  8. / \ /\ / /\ | ✦ simple and modern. It sports a
  9. | | / \ \___ / \ | ✦ diamond sidebar along with cool
  10. | | /----\ \ /----\ | ✦ like/reblog/notes permalinks. It
  11. \___/ / \ ___/ / \ |___ ✦ has color choices and up to three
  12. ✦ custom links. Please contact me if
  13. ✦ you are using this theme!
  14. -->
  15.  
  16. <head>
  17.  
  18. <script type="text/javascript"
  19. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  20. <link href='http://fonts.googleapis.com/css?family=Unica+One' rel='stylesheet' type='text/css'>
  21.  
  22. <meta name="color:Background" content="#ffffff"/>
  23. <meta name="color:Text" content="#130C11"/>
  24. <meta name="color:Links" content="#97cde7"/>
  25. <meta name="color:Hover" content="#c1f0dc"/>
  26. <meta name="color:Sidebar" content="#eeeeee"/>
  27. <meta name="color:Borders" content="#dddddd"/>
  28. <meta name="image:Background" content="0"/>
  29. <meta name="if:White Follow Button" content="1"/>
  30. <meta name="if:Image Opacity" content="1"/>
  31. <meta name="if:Full Screen Background" content=""/>
  32. <meta name="text:Link One Title" content="" />
  33. <meta name="text:Link One" content="" />
  34. <meta name="text:Link Three Title" content="" />
  35. <meta name="text:Link Three" content="" />
  36. <meta name="text:Link Two Title" content="" />
  37. <meta name="text:Link Two" content="" />
  38.  
  39.  
  40. <script type="text/javascript"
  41. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  42.  
  43. <style type="text/css">
  44.  
  45. iframe#tumblr_controls {
  46. right:3px !important;
  47. position: fixed !important;
  48. opacity:.4;
  49. {block:ifWhiteFollowButton}
  50. white-space:nowrap;
  51. -webkit-filter:invert(100%);
  52. {/block:ifWhiteFollowButton}
  53. }
  54.  
  55. ::-webkit-scrollbar-thumb{
  56. background-color: #000;
  57. border: 2px solid #fff;
  58. height:auto;
  59. -moz-border-radius: 10px;
  60. border-radius: 10px;
  61. }
  62.  
  63. ::-webkit-scrollbar {
  64. height:auto;
  65. width:9px;
  66. background-color: #000;
  67. border: 4px solid #fff;
  68. }
  69.  
  70. #content {
  71. width:100%;
  72. }
  73.  
  74. body {
  75. padding: 0px;
  76. margin-left: 0px;
  77. color:{color:text};
  78. font-family:cambria;
  79. font-size: 12px;
  80. background-color: {color:Background};
  81. background-image:url({image:Background});
  82. background-attachment: fixed;
  83. background-repeat: repeat;
  84. }
  85.  
  86. a {
  87. color:{color:Links};
  88. -webkit-transition-duration:1s;text-decoration:none;font-weight:none;
  89. }
  90.  
  91. a:hover {
  92. color:{color:Hover};
  93. text-decoration: none;
  94. }
  95.  
  96. #all {
  97. background:transparent;
  98. display:block;
  99. width:650px;
  100. padding-left:0px;
  101. margin-left:auto;
  102. margin-right:auto;
  103. height:100%;
  104. z-index:-1;
  105. margin-top:-10px;
  106. padding-top:25px;
  107. {block:PermalinkPage}
  108. width:750px;
  109. {/block:PermalinkPage}
  110. }
  111.  
  112. .entry {
  113. margin-top:15px;
  114. margin-bottom:15px;
  115. background:transparent;
  116. padding:7px;
  117. border:1px dashed {color:Borders};
  118. {block:IndexPage}
  119. width:300px;
  120. {/block:IndexPage}
  121. {block:PermalinkPage}
  122. width:400px;
  123. {/block:PermalinkPage}
  124. }
  125.  
  126. {block:IndexPage}
  127. {block:ifImageOpacity}
  128. .entryimg {opacity:.8;-webkit-transition-duration:1s;}
  129. .entry:hover .entryimg {opacity:1;-webkit-transition-duration:1s;}
  130. {/block:ifImageOpacity}
  131. {/block:IndexPage}
  132.  
  133. .perma
  134. {
  135. opacity: 0.0;
  136. filter: alpha(opacity = 0);
  137. margin-top: -21px;
  138. width: px;
  139. height: 30px;
  140. line-height: 30px;
  141. font-size: 10px;
  142. text-transform: bold;
  143. position:absolute;
  144. text-align: center;
  145. z-index:9999991;
  146. -webkit-transition: opacity 0.4s linear;
  147. -moz-transition: all 0.4s linear;
  148. transition: all 0.4s linear;
  149. }
  150.  
  151. .entry:hover .perma {
  152.  
  153. -webkit-transition: opacity 0.4s linear;
  154. opacity: 1;
  155. -moz-transition: all 0.4s linear;
  156. transition: all 0.4s linear;
  157. filter: alpha(opacity = 100);
  158.  
  159. }
  160.  
  161. .likep {
  162. width: 21px;
  163. height: 20px;
  164. overflow: hidden;
  165. position: relative;
  166. z-index: 9999999;
  167. position: absolute;
  168. margin-top: 26px;
  169. margin-left: 5px;
  170. }
  171. .rep {
  172. width: 24px;
  173. height: 20px;
  174. overflow: hidden;
  175. position: relative;
  176. z-index: 9999999;
  177. position: absolute;
  178. margin-top: 26px;
  179. margin-left: 29px;
  180. }
  181. .likep a:hover {
  182. background-position: 0px 0px;
  183. }
  184. .likep a {
  185. background-image: url("http://static.tumblr.com/uiqhh9x/BPnlzww8v/like.png");
  186. background-position: 0px 0px;
  187. display: block;
  188. z-index: 9999999;
  189. webkit-transition: all 0s linear;
  190. -webkit-transition: all 0s linear;
  191. -moz-transition: all 0s linear;
  192. transition: all 0s linear;
  193. }
  194. .likep img {
  195. width: 21px;
  196. height: 20px;
  197. webkit-transition: all 0.2s linear;
  198. -webkit-transition: all 0.2s linear;
  199. -moz-transition: all 0.2s linear;
  200. transition: all 0.2s linear;
  201. }
  202. .rep img{
  203. width: 24px;
  204. height: 20px;
  205. line-height: 30px;
  206. display: inline;
  207. }
  208.  
  209. .not { position: absolute;
  210. background: url("http://static.tumblr.com/uiqhh9x/X6Ym17xp2/middle.png");
  211. height: 20px;
  212. font-size: 11px;
  213. line-height: 20px;
  214. color: #fff;
  215. position: absolute;
  216. margin-top: 26px;
  217. margin-left: 56px;
  218. padding-left: 4px;
  219. padding-right: 4px;
  220. -moz-border-radius: 2px;
  221. border-radius: 2px;
  222. }
  223. .not a{
  224. color: #fff;
  225. font-family:Arial;
  226. }
  227.  
  228. .entry:hover .not, .entry:hover .rep, .entry:hover .likep {
  229. opacity: 0.8;
  230. filter: alpha(opacity = 80);
  231. }
  232. .not:hover , .rep:hover, .likep:hover {
  233. opacity: 1!important;
  234. filter: alpha(opacity = 100)!important;
  235. }
  236.  
  237. .perm a {color:#ddd;text-decoration:underline;}
  238. .perm {
  239. display: block;
  240. margin-top: 3px;
  241. font-family:times new roman;
  242. font-size: 10px;
  243. line-height: 10px;
  244. text-align:center;
  245. text-transform: uppercase;
  246. }
  247.  
  248. #content #posts {
  249. width:300px;
  250. margin-left:330px;
  251. {block:PermalinkPage}
  252. margin-left:230px;
  253. {/block:PermalinkPage}
  254. }
  255.  
  256. .sidebar a:hover {color:transparent;}
  257. #all .sidebar {
  258. background:transparent;
  259. font-size:10px;
  260. position:fixed;
  261. width:200px;
  262. height:200px;
  263. position:center;
  264. padding:5px;
  265. margin-top:250px;
  266. margin-left:50px;
  267. text-align:center;
  268. -webkit-transform:rotate(45deg);
  269. background:{color:Sidebar};
  270. {block:PermalinkPage}
  271. margin-left:-50px;
  272. {/block:PermalinkPage}
  273. }
  274. .description {
  275. -webkit-transform:rotate(-45deg);
  276. margin-top:50px;
  277. margin-left:-25px;
  278. }
  279.  
  280. @font-face{font-family:marketing script;src:url('http://static.tumblr.com/hcocigh/GkVm9pnt3/marketingscript.ttf');}
  281.  
  282. .blogtitle {
  283. font-family:marketing script;
  284. font-size:40px;
  285. width:100%;
  286. line-height:40px;
  287. text-shadow: 1px 1px 0px #fff, 2px 2px 0px #AFAFAF, 3px 3px 0px #AFAFAF, 4px 4px 0px #666, 5px 5px 0px #AFAFAF, 6px 6px 0px #AFAFAF, 7px 7px 0px #AFAFAF;
  288. }
  289.  
  290. #infscr-loading {
  291. display:none;
  292. }
  293.  
  294. blockquote{
  295. padding:0px 0px 2px 5px;
  296. margin:0px 0px 2px 5px;
  297. border-left:1px solid #000;
  298. }
  299.  
  300. .title {
  301. font-size:14px;
  302. line-height: 14px;
  303. font-family:Georgia;
  304. }
  305.  
  306. .quote{
  307. font-size: 26px;
  308. float: left;
  309. margin-top: 0px;
  310. padding-right:8px;
  311. color: #BDBDBD;
  312. }
  313.  
  314. ul.chat {
  315. margin: 0;
  316. padding: 0;
  317. }
  318.  
  319. .chat li {
  320. list-style-type: none;
  321. margin-left: 0px;
  322. padding: 2px;
  323. }
  324.  
  325. .chat li.odd {
  326. margin-bottom: 3px;
  327. background-color:#eee;
  328. color: #888;
  329. }
  330.  
  331. .chat li.even {
  332. margin-bottom: 3px;
  333. background-color:#fff;
  334. color: #000;
  335. }
  336.  
  337. .label {
  338. font-weight: bold;
  339. }
  340.  
  341. td{
  342. width:250px;
  343. }
  344.  
  345. ol.notes{
  346. margin:25px 0px;
  347. border-bottom:1px solid #eee;
  348. padding:5px;
  349. list-style-type:none;
  350. }
  351.  
  352. ol.notes li.note{
  353. border-bottom:1px solid #eee;
  354. padding:5px;
  355. }
  356.  
  357. .credit {
  358. position:fixed;
  359. z-index:999;
  360. bottom:0px;
  361. right:0px;
  362. padding:7px;
  363. font-size:40px;
  364. line-height:40px;
  365. }
  366.  
  367. #audio {width:300px; height:auto; height:90px; padding-bottom:13px;}
  368. .cover {position:absolute; z-index:1; width:60px; height:60px;}
  369. .cover img {float:left; width:100px; height:100px;}
  370. .playbox {opacity:0.6; width:27px; height:30px; overflow:hidden; position:absolute; z-index:1000; margin-left:36.5px; margin-top:35px; text-align:center;}
  371. .info {margin-left:108px; width: 170px;margin-top:18px; line-height:16px;position:absolute;}
  372.  
  373. </style>
  374.  
  375. {block:IndexPage}
  376. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  377. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
  378.  
  379. <script type="text/javascript">
  380. $(window).load(function () {
  381. var $content = $('#posts');
  382. $content.masonry({itemSelector: '.entry'}),
  383. $content.infinitescroll({
  384. navSelector : 'div#pagination',
  385. nextSelector : 'div#pagination a#nextPage',
  386. itemSelector : '.entry',
  387. loading: {
  388. finishedMsg: '',
  389. img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
  390. },
  391. bufferPx : 600,
  392. debug : false,
  393. },
  394. // call masonry as a callback.
  395. function( newElements ) {
  396. var $newElems = $( newElements );
  397. $newElems.hide();
  398. // ensure that images load before adding to masonry layout
  399. $newElems.imagesLoaded(function(){
  400. $content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );
  401.  
  402.  
  403. });
  404. });
  405. });
  406. </script>
  407.  
  408. {/block:IndexPage}
  409.  
  410. <title>{Title}</title>
  411.  
  412. <link rel="shortcut icon" href="{Favicon}">
  413. <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
  414. <meta name="viewport" content="width=820" />
  415.  
  416. </head>
  417. <body>
  418.  
  419. <div class="credit"><a href="http://oasal.tumblr.com"><img src="http://static.tumblr.com/cs9z8nu/fkDmbyfvp/tumblr_mbao3b14mh1rux83o.gif" width=25px></a></div>
  420.  
  421. <div id="content">
  422. <div id="all">
  423. <div class="sidebar">
  424. <div class="description">
  425. <a href="/" class="blogtitle">{title}</a><br><br>
  426. {description}<br>
  427. <a href="/">home</a> //
  428. <a href="/ask">ask</a>
  429. {block:ifLinkOneTitle} // <a href="{text:Link One}">{text:Link One Title}</a>{/block:ifLinkOneTitle}
  430. {block:ifLinkTwoTitle} // <a href="{text:Link Two}">{text:Link Two Title}</a>{/block:ifLinkTwoTitle}
  431. {block:ifLinkThreeTitle} // <a href="{text:Link Three}">{text:Link Three Title}</a>{/block:ifLinkThreeTitle}
  432. </div>
  433. </div>
  434.  
  435. <div class="left">
  436.  
  437. <div id="posts">
  438.  
  439. {block:Posts}
  440. <div class="entry">
  441.  
  442. {block:Answer}
  443. "{Question}"
  444. {Answer}
  445. Asked by {asker}
  446. {block:IndexPage}
  447. <div class="perm">
  448. <a href="{Permalink}">POSTED {TimeAgo} WITH {NoteCountWithLabel}</a></div>
  449. {/block:IndexPage}
  450. {/block:Answer}
  451.  
  452. {block:Text}{block:Title}<span class="title">{Title}</span>{/block:Title}
  453. {Body}
  454. {block:IndexPage}
  455. <div class="perm">
  456. <a href="{Permalink}">POSTED {TimeAgo} WITH {NoteCountWithLabel}</a></div>
  457. {/block:IndexPage}
  458. {/block:text}
  459.  
  460. {block:Link}<a href="{URL}" class="title">{Name}</a>{block:Description}{Description}{/block:Description}
  461. {block:IndexPage}
  462. <div class="perm">
  463. <a href="{Permalink}">POSTED {TimeAgo} WITH {NoteCountWithLabel}</a></div>
  464. {/block:IndexPage}
  465. {/block:link}
  466.  
  467. {block:Photo}
  468. {block:IndexPage}
  469. <div class="perma">
  470. <div class="likep">
  471. <a id="like{PostID}" href="javascript:likelink('{PostID}','{Permalink}','');"><img src="http://static.tumblr.com/lba83dv/OUUltd958/spacer.gif" width="21" height="20" alt="Like this post" id="likeimage{PostID}"/></a>
  472. </div>
  473. <div class="rep"><a href="{reblogurl}" target="_blank"><img src="http://static.tumblr.com/uiqhh9x/OAClzwwao/reblog.png" width="30"/></a>
  474. </div>
  475. <div class="not"><a id="notes{PostID}" href="{Permalink}">{NoteCount}</a></div>
  476. </div>
  477. {/block:IndexPage}
  478. {block:IndexPage}
  479. <a href="{permalink}"><img src="{PhotoURL-HighRes}" width="300px" class="entryimg"/></a>
  480. {/block:IndexPage}
  481. {block:PermalinkPage}
  482. <center>{LinkOpenTag}<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=400px/></a>{LinkCloseTag}</center>
  483. {/block:PermalinkPage}
  484. {/block:Photo}
  485.  
  486. {block:Photoset}
  487. {block:IndexPage}
  488. <center>
  489. {Photoset-250}</center>
  490. {/block:IndexPage}
  491. {block:PermalinkPage}
  492. <center>
  493. {Photoset-500}</center>
  494. {/block:PermalinkPage}
  495. {block:IndexPage}
  496. <div class="perm">
  497. <a href="{Permalink}">POSTED {TimeAgo} WITH {NoteCountWithLabel}</a></div>
  498. {/block:IndexPage}
  499. {/block:Photoset}
  500.  
  501. {block:Quote}
  502. <div class="quote">❝</div>{Quote}
  503. <div align="right">{block:Source}{Source}{/block:Source}</div>
  504. {block:IndexPage}
  505. <div class="perm">
  506. <a href="{Permalink}">POSTED {TimeAgo} WITH {NoteCountWithLabel}</a></div>
  507. {/block:IndexPage}
  508. {/block:Quote}
  509.  
  510. {block:Chat}{block:Title}<span class="title">{Title}</span>{/block:Title}
  511. <ul class="chat">{block:Lines}<li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label}{Line}</li>{/block:Lines}
  512. {block:IndexPage}
  513. <div class="perm">
  514. <a href="{Permalink}">POSTED {TimeAgo} WITH {NoteCountWithLabel}</a></div>
  515. {/block:IndexPage}
  516. {/block:Chat}
  517.  
  518. {block:Audio}
  519. {block:IndexPage}
  520. <div id="audio"><div class="cover"><img src="http://static.tumblr.com/k9utpfa/tcom8wpif/default_cover_m.jpg"></div>
  521. {block:AlbumArt}
  522. <div class="cover"><img src="{AlbumArtURL}"></div>
  523. {/block:AlbumArt}
  524. <div class="playbox">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div>
  525. <div class="info"><b>Artist:</b> <span{block:Artist} style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br>
  526. <b>Title:</b> <span{block:TrackName} style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br>
  527. <b>Album:</b> <span{block:Album} style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}{block:PlayCount}<br>
  528. <b>Plays:</b> {FormattedPlayCount}{/block:PlayCount}</div></div>
  529. <div class="perm">
  530. <a href="{Permalink}">POSTED {TimeAgo} WITH {NoteCountWithLabel}</a></div>
  531. {/block:IndexPage}
  532. {block:PermalinkPage}
  533. <div id="album">{block:AlbumArt}<img width="500px" src="{AlbumArtURL}"/>{/block:AlbumArt}</div>
  534. <div id="player"><div style="margin-top:-3px;margin-bottom:20px;">{AudioPlayerGrey}</div></div>
  535.  
  536. {/block:PermalinkPage}
  537. {/block:Audio}
  538.  
  539. {block:Video}
  540. {block:IndexPage}
  541. <center>
  542. {Video-250}</center>
  543. {/block:IndexPage}
  544. {block:PermalinkPage}
  545. <center>
  546. {Video-500}</center>
  547. {/block:PermalinkPage}
  548. {block:IndexPage}
  549. <div class="perm">
  550. <a href="{Permalink}">POSTED {TimeAgo} WITH {NoteCountWithLabel}</a></div>
  551. {/block:IndexPage}
  552. {block:Video}
  553.  
  554. {block:PermalinkPage}
  555. <center>
  556. <br>{block:Caption}{Caption}{/block:Caption}{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} &middot; {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags}{/block:hasTags}
  557.  
  558. </center>
  559.  
  560. {/block:PermalinkPage}
  561.  
  562. {block:PostNotes}{PostNotes}
  563. {/block:PostNotes}
  564.  
  565. </div>
  566.  
  567.  
  568. {/block:Posts}
  569. </div>
  570. </div>
  571. {block:IndexPage}
  572. {block:Pagination}
  573. <div id="pagination">
  574. {block:NextPage}
  575. <a id="nextPage" href="{NextPage}">&nbsp;&rarr;</a>
  576. {/block:NextPage}
  577. {block:PreviousPage}
  578. <a href="{PreviousPage}">&larr;&nbsp;</a>
  579. {/block:PreviousPage}
  580. </div>
  581. {/block:Pagination}
  582. {/block:IndexPage}
  583. </div>
  584. </div>
  585.  
  586. <script type="text/javascript" src="http://static.tumblr.com/j1tjexd/A33m6pdi7/like_script.js"></script>
  587. <script type="text/javascript" src="http://static.tumblr.com/uiqhh9x/UYAm6i0bc/like.js"></script>
  588. <iframe id="likeiframe" style="display:none;"></iframe>
  589. </body>
  590. </html>
  591.  
  592. <!-- END HTML AND THANK YOU FOR CHOOSING IMPERIAL THEMES -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement