API tools faq
paste
Advertisement
speightthemes

theme 02: autonomy

speightthemes
Sep 1st, 2014
230
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.82 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. <!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
  4.  
  5. theme 02: autonomy dickspeight
  6. do not remove credits // do not use as base // do not claim as yours
  7. DO NOT USE UPDATES TAB IN ANOTHER THEME WITHOUT MY PERMISSION+CREDIT
  8.  
  9. -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -->
  10.  
  11. <!------------// SCRIPTS //------------>
  12.  
  13.  
  14. <script src="http://code.jquery.com/jquery-1.10.0.min.js">
  15. </script>
  16. <script>
  17.  
  18. $(document).ready(function(){
  19.  
  20. $(".6").click(function(){
  21. $("#uno").toggle();
  22. $("").hide();
  23. });
  24.  
  25. });
  26. </script>
  27.  
  28. <!------------ END SCRIPTS ----------->
  29.  
  30. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  31. <head>
  32. <title>{Title}</title>
  33. <link rel="shortcut icon" href="{Favicon}">
  34. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  35. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  36.  
  37.  
  38.  
  39. <!--- credit --->
  40.  
  41. <meta name="color:text" content=""/>
  42. <meta name="color:link" content=""/>
  43. <meta name="color:hover" content=""/>
  44. <meta name="color:title" content=""/>
  45.  
  46. <meta name="select:title style" content="italic" title="italic"/>
  47. <meta name="select:title style" content="none" title="normal"/>
  48. <meta name="select:title style" content="bold" title="bold"/>
  49.  
  50. <meta name="text:Updates1 title" content=""/>
  51. <meta name="text:Updates1" content=""/>
  52. <meta name="text:Updates2 title" content=""/>
  53. <meta name="text:Updates2" content=""/>
  54. <meta name="text:Updates3 title" content=""/>
  55. <meta name="text:Updates3" content=""/>
  56.  
  57. <meta name="text:link1 url" content=""/>
  58. <meta name="text:link1 text" content=""/>
  59.  
  60. <meta name="text:link2 url" content=""/>
  61. <meta name="text:link2 text" content=""/>
  62.  
  63. <meta name="text:link3 url" content=""/>
  64. <meta name="text:link3 text" content=""/>
  65.  
  66. <meta name="text:link4 url" content=""/>
  67. <meta name="text:link4 text" content=""/>
  68.  
  69. <meta name="text:link5 url" content=""/>
  70. <meta name="text:link5 text" content=""/>
  71.  
  72. <style type="text/css">
  73.  
  74. @font-face { font-family: 'code light'; src: url('http://static.tumblr.com/9jiwd78/Ahpnb7a5a/code_light.otf') format('truetype'); font-weight: normal; font-style: normal; }
  75.  
  76. #s-m-t-tooltip {
  77. max-width:300px;
  78. background-color:white;
  79. font-size:10px;
  80. color:{color:link};
  81. letter-spacing:1px;
  82. text-transform:lowercase;
  83. padding:6px;
  84. margin:15px 0px 0px 15px;
  85. z-index:9999999999999999999999999999999999;
  86. border-radius: 2px;
  87. box-shadow:2px 2px 1px #ccc;
  88. }
  89.  
  90.  
  91. body {
  92. background:white;
  93. margin:0px;
  94. color:{color:text};
  95. font-family:"calibri";
  96. font-size:11px;
  97. line-height:100%;
  98. }
  99.  
  100. a {
  101. text-decoration:none;
  102. outline:none;
  103. -moz-outline-style:none;
  104. color:{color:link};
  105. -webkit-transition:all 1s;
  106. -moz-transition:all 1s;
  107. -ms-transition:all 1s;
  108. -o-transition:all 1s;
  109. transition:all 1s;
  110. }
  111.  
  112. a:hover{
  113. color:{color:hover};
  114. -webkit-transition:all 1s;
  115. -moz-transition:all 1s;
  116. -ms-transition:all 1s;
  117. -o-transition:all 1s;
  118. transition:all 1s;
  119. }
  120.  
  121. blockquote {
  122. padding-left:5px;
  123. border-left:2px solid;
  124. }
  125.  
  126. blockquote blockquote {
  127. padding-left:5px;
  128. border-left:2px solid;
  129. }
  130.  
  131. h1 {
  132. font-size:15px;
  133. }
  134.  
  135. #entries {
  136. padding:15px;
  137. width:500px;
  138. margin:auto;
  139. }
  140.  
  141.  
  142.  
  143.  
  144. #pagination {
  145. bottom:0px;
  146. font-family:"calibri";
  147. width:500px;
  148. font-size:20px;
  149. padding:11px;
  150. letter-spacing:1px;
  151. margin:auto;
  152. margin-bottom:20px;
  153. word-spacing:15px;
  154. text-align:center;
  155. background:#fff;
  156. text-transform:lowercase;
  157. opacity:0.98;
  158. }
  159.  
  160. #header{
  161. width:500px;
  162. margin:auto;
  163. }
  164.  
  165.  
  166. #description {
  167. padding:5px;
  168. text-align:center;
  169. margin:auto;
  170. margin-bottom:0px;
  171. }
  172. #wrap {
  173. margin-top:50px;
  174. }
  175. #post {
  176. width:500px;
  177. padding-bottom:90px;
  178. }
  179.  
  180. #post:hover #details{
  181. opacity:1;
  182. -webkit-transition:all 0.5s;
  183. -moz-transition:all 0.5s;
  184. -ms-transition:all 0.5s;
  185. -o-transition:all 0.5s;
  186. transition:all 0.5s;
  187. }
  188.  
  189. #details {
  190. text-align:center;
  191. padding:5px;
  192. opacity:0;
  193. font-size:8px;
  194. margin-top:10px;
  195. text-transform:uppercase;
  196. letter-spacing:1px;
  197. -webkit-transition:all 0.5s;
  198. -moz-transition:all 0.5s;
  199. -ms-transition:all 0.5s;
  200. -o-transition:all 0.5s;
  201. transition:all 0.5s;
  202. }
  203.  
  204. #pagination {
  205. font-size:20px;
  206. text-align:center;
  207. }
  208.  
  209. #asker {
  210. text-align:left;
  211. }
  212.  
  213. #quest {
  214. padding-bottom:5px;
  215. border-bottom:solid 1px #eee;
  216. }
  217.  
  218. #quote {
  219. font-size:15px;
  220. line-height:110%;
  221. font-weight:400;
  222. font-family:'code light';
  223. }
  224.  
  225. #uno{
  226. display:none;
  227. }
  228.  
  229. #uno{
  230. font-family:calibri;
  231. font-weight:lighter;
  232. font-size:10px;
  233. text-align:center;
  234. text-transform:uppercase;
  235. margin:auto;
  236. word-spacing:8px;
  237. }
  238.  
  239. .playerbuttonbg {
  240. position: absolute;
  241. left: 20px;
  242. top: 20px;
  243. width: 19px;
  244. height: 19px;
  245. background-color: #ffffff;
  246. padding: 10px;
  247. -webkit-border-radius: 40px;
  248. -moz-border-radius: 40px;
  249. border-radius: 40px;
  250. opacity: .4;
  251. filter: alpha(opacity=40);
  252. -moz-opacity: 0.4;
  253. -khtml-opacity: 0.4;
  254. transition: opacity .7s ease-in-out;
  255. -moz-transition: opacity .7s ease-in-out;
  256. -webkit-transition: opacity .7s ease-in-out;
  257. }
  258.  
  259. .playerbuttonbg:hover {
  260. opacity: 1;
  261. filter: alpha(opacity=100);
  262. -moz-opacity: 1;
  263. -khtml-opacity: 1;
  264. }
  265.  
  266. .newplayerbutton {
  267. position: relative;
  268. width: 19px;
  269. height: 19px;
  270. overflow: hidden;
  271. }
  272.  
  273. .playerbuttonhug {
  274. position: absolute;
  275. top: -18px;
  276. left: -7px;
  277. }
  278.  
  279. .tumblr_audio_player {
  280. height: 90px;
  281. width: 270px;
  282. -moz-transform: scale(0.60, 0.60);
  283. -webkit-transform: scale(0.60, 0.60);
  284. -o-transform: scale(0.60, 0.60);
  285. -ms-transform: scale(0.60, 0.60);
  286. transform: scale(0.60, 0.60);
  287. -moz-transform-origin: top left;
  288. -webkit-transform-origin: top left;
  289. -o-transform-origin: top left;
  290. -ms-transform-origin: top left;
  291. transform-origin: top left;
  292. }
  293.  
  294. .audioimgwrapper {
  295. position: absolute;
  296. left: 0px;
  297. top: 0px;
  298. -webkit-border-radius: 40px;
  299. -moz-border-radius: 40px;
  300. border-radius: 40px;
  301. overflow: hidden;
  302. width: 79px;
  303. height: 79px;
  304. }
  305.  
  306. .audioimgwrapper img {
  307. width: 100%;
  308. height: auto;
  309. -webkit-border-radius: 40px;
  310. -moz-border-radius: 40px;
  311. border-radius: 40px;
  312. }
  313.  
  314. .trackdetails {
  315. width: auto;
  316. vertical-align:text-bottom;
  317. display:inline-block;
  318. margin-left: 90px;
  319. margin-bottom:0px;
  320. min-height: 85px;
  321. }
  322.  
  323. .audiowrapper {
  324. vertical-align:text-bottom;
  325. position: relative;
  326. display:inline-block;
  327. }
  328.  
  329. #tabs{
  330. margin:auto;
  331. margin-top:110px;
  332. width:300px;
  333. height:30px;
  334. }
  335. #tab1 {
  336. width: 10px;
  337. height: 10px;
  338. border: solid 1px #bbb;
  339. background-color: #fff;
  340. margin-left:80px;
  341. overflow:hidden;
  342. position:absolute;
  343. -webkit-transition: opacity 0.65s linear;
  344. -webkit-transition: all 0.65s linear;
  345. -moz-transition: all 0.65s linear;
  346. -o-transition: all 0.65s linear;
  347. }
  348.  
  349. #tab1:hover {
  350. width: 600px;
  351. height: 131px;
  352. margin-left:-150px;
  353. background: #fff;
  354. border-left:solid 1px transparent;
  355. border-right:solid 1px transparent;
  356. border-bottom:solid 1px transparent;
  357. border-top:solid 1px #bbb;
  358. -webkit-transition: opacity 0.65s linear;
  359. -webkit-transition: all 0.65s linear;
  360. -moz-transition: all 0.65s linear;
  361. -o-transition: all 0.65s linear;
  362. }
  363.  
  364. #tab2 {
  365. width: 10px;
  366. height: 10px;
  367. border: solid 1px #bbb;
  368. background-color: #fff;
  369. margin-left: 145px;
  370. position:absolute;
  371. overflow:hidden;
  372. -webkit-transition: opacity 0.65s linear;
  373. -webkit-transition: all 0.65s linear;
  374. -moz-transition: all 0.65s linear;
  375. -o-transition: all 0.65s linear;
  376. }
  377.  
  378. #tab2:hover {
  379. width: 600px;
  380. height: 130px;
  381. margin-left:-150px;
  382. background-color: #fff;
  383. border-left:solid 1px transparent;
  384. border-right:solid 1px transparent;
  385. border-bottom:solid 1px transparent;
  386. border-top:solid 1px #bbb;
  387. -webkit-transition: opacity 0.65s linear;
  388. -webkit-transition: all 0.65s linear;
  389. -moz-transition: all 0.65s linear;
  390. -o-transition: all 0.65s linear;
  391. }
  392.  
  393. #tab3 {
  394. width: 10px;
  395. height: 10px;
  396. border: solid 1px #bbb;
  397. background-color: #fff;
  398. margin-left: 210px;
  399. position:absolute;
  400. overflow:hidden;
  401. -webkit-transition: opacity 0.65s linear;
  402. -webkit-transition: all 0.65s linear;
  403. -moz-transition: all 0.65s linear;
  404. -o-transition: all 0.65s linear;
  405. }
  406.  
  407. #tab3:hover {
  408. width: 600px;
  409. text-align:center;
  410. margin-left:-150px;
  411. height: 130px;
  412. background-color: #fff;
  413. border-left:solid 1px transparent;
  414. border-right:solid 1px transparent;
  415. border-bottom:solid 1px transparent;
  416. border-top:solid 1px #bbb;
  417. -webkit-transition: opacity 0.65s linear;
  418. -webkit-transition: all 0.65s linear;
  419. -moz-transition: all 0.65s linear;
  420. -o-transition: all 0.65s linear;
  421. }
  422.  
  423. .inside {
  424. width: 300px;
  425. margin-left:140px;
  426. padding: 10px;
  427. padding-top: 8px;
  428. font-family: sans-serif;
  429. font-size: 9px;
  430. line-height: 150%;
  431. color:{color:text};
  432. background: white;
  433. letter-spacing: .8px;
  434. text-align: center;
  435. position:absolute;
  436. z-index:5000000;
  437. opacity: 1;
  438. -webkit-transition: opacity 0.3s linear;
  439. -webkit-transition: all 0.3s linear;
  440. -moz-transition: all 0.3s linear;
  441. -o-transition: all 0.3s linear;
  442. }
  443.  
  444. .inside:hover {
  445. opacity: 1;
  446. -webkit-transition: opacity 0.3s linear;
  447. -webkit-transition: all 0.3s linear;
  448. -moz-transition: all 0.3s linear;
  449. -o-transition: all 0.3s linear;
  450. }
  451.  
  452. #title {
  453. font-size:45px;
  454. font-family:'code light';
  455. text-align:center;
  456. margin:auto;
  457. font-weight:{select:title style};
  458. font-style:{select:title style};
  459. color:{color:title};
  460. margin-bottom:10px;
  461. margin-top:5px;
  462. }
  463. #title a:hover{
  464. color:white;
  465. font-weight:bolder;
  466. letter-spacing:5px;
  467. text-shadow:0 0 20px rgba(0,0,0,0.5);
  468. -webkit-transition:all 1s;
  469. -moz-transition:all 1s;
  470. -ms-transition:all 1s;
  471. -o-transition:all 1s;
  472. transition:all 1s;
  473. }
  474.  
  475. {CustomCSS}
  476.  
  477. </style>
  478.  
  479. </head>
  480.  
  481. <body>
  482. <div id=tabs>
  483. <div id="tab1">
  484. <div class="inside" position=top><br><br>
  485. <div style="color:{color:title};font-family:code light;font-weight:{select:title style};font-size:50px;letter-spacing:2px;opacity:.9;">{text:Updates1 title}</div><br>
  486. {text:Updates1}
  487. </div>
  488. </div>
  489.  
  490. <div id="tab2">
  491. <div class="inside"><br><br>
  492. <div style="color:{color:title};font-family:code light;font-weight:{select:title style};font-size:50px;letter-spacing:2px;opacity:.9;">{text:Updates2 title}</div><br>
  493. {text:Updates2}
  494. </div>
  495. </div>
  496.  
  497.  
  498. <div id="tab3">
  499. <div class="inside"><br><br>
  500. <div style="color:{color:title};font-family:code light;font-weight:{select:title style};font-size:50px;letter-spacing:2px;opacity:.9;">{text:Updates3 title}</div><br>
  501. {text:Updates3}
  502. </div>
  503. </div>
  504. </div>
  505.  
  506. <div id=header>
  507. <div id="title"><a href=/>{Title}</a></div>
  508.  
  509. <div id="description">{Description}<br><a class =6 href= # title=links><big>+</big></a>
  510. </div>
  511.  
  512. <div id="uno">
  513. {block:ifLink1Text}<a href={text:link1 url}>{text:link1 text}</a>{/block:ifLink1Text}
  514. {block:ifLink2Text}<a href={text:link2 url}>{text:link2 text}</a>{/block:ifLink2Text}
  515. {block:ifLink3Text}<a href={text:link3 url}>{text:link3 text}</a>{/block:ifLink3Text}
  516. {block:ifLink4Text}<a href={text:link4 url}>{text:link4 text}</a>{/block:ifLink4Text}
  517. {block:ifLink5Text}<a href={text:link5 url}>{text:link5 text}</a>{/block:ifLink5Text}
  518. </div>
  519.  
  520. </div>
  521.  
  522. </div>
  523. <div id=wrap>
  524. <div id="entries">{block:Posts}<div id="post">
  525.  
  526. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  527.  
  528. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  529.  
  530. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  531.  
  532. <center>{block:Quote}<b><div id="quote">" {Quote} "</div></b>–{Source}{/block:Quote}</center>
  533.  
  534. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  535.  
  536. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  537.  
  538. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  539.  
  540. {block:Audio}{block:AudioPlayer}
  541. <div class="audiowrapper">
  542. {block:AlbumArt}
  543. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  544. {/block:AlbumArt}
  545.  
  546. <div class="playerbuttonbg">
  547. <div class="newplayerbutton">
  548. <div class="playerbuttonhug">
  549.  
  550. {AudioPlayerWhite}
  551.  
  552. </div>
  553. </div>
  554. </div>
  555.  
  556. <div class="trackdetails">
  557. <br><br>
  558. {block:TrackName}{TrackName}{/block:TrackName}<br/>
  559. {block:Artist}{Artist}{/block:Artist}<br/>
  560. {block:Album}{Album}{/block:Album}<br/>
  561. {PlayCountWithLabel}
  562.  
  563. </div>
  564. </div>
  565. {/block:AudioPlayer}
  566.  
  567. {block:Caption}{Caption}{/block:Caption}{/block:Audio}
  568.  
  569. {block:Answer}<div id=quest><div id="asker">{Asker} asked:</div><br>{Question}<br></div>{Answer}{/block:Answer}
  570.  
  571. <div id="details">
  572. <br> {block:Date}<div id="info"><a href="{Permalink}">{Month} {DayOfMonth}{DayOfMonthSuffix}</a> {block:NoteCount}&nbsp;&nbsp;&nbsp;<a href="{Permalink}">{NoteCountWithLabel}</a> {/block:NoteCount} {block:RebloggedFrom}&nbsp;&nbsp;&nbsp;<a href="{ReblogParentURL}">VIA</a>{/block:RebloggedFrom}{block:ContentSource}/ <a href="{SourceURL}">SOURCE</a>{/block:ContentSource} {/block:Date}</div> {block:HasTags}{block:Tags} #<a href="{TagURL}">{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  573.  
  574. </div>
  575. {block:PostNotes}{PostNotes}{/block:PostNotes}
  576. {/block:Posts}</div></div>
  577.  
  578. <div id="pagination">
  579. <center>{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">prev</a>{/block:PreviousPage}&nbsp; {block:NextPage}<a href="{NextPage}"> next</a><br />{/block:NextPage}{/block:Pagination}</div></center>
  580. <div style="position:fixed;bottom:2px; right:3px; color:#f1f1f1;font-size:15px; letter-spacing:1px; font-family:calibri;padding:4px;"><a href="http://speightthemes.tumblr.com/" style=color:{color:text}>©</a></center></div>
  581. </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!