Advertisement
silvercybermen

Theme 03: Encircle [UNSUPPORTED]

Feb 15th, 2014
685
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.99 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!--
  4. Encircle by lunecerise aka sxriusblack
  5.  
  6. You CAN: Edit this theme and use the result for yourself (ONLY yourself)
  7. You CANNOT: Remove credit, steal and claim as your own,
  8. use as a basecode, or edit and redistribute as your own
  9.  
  10. (✿◡‿◡)
  11.  
  12. Updates Circle inspired by zerie/meem/bangjensen - http://zerie.tumblr.com
  13. Audio Post inspired by cloudplays/lucysthemes - http://cloudplays.tumblr.com
  14. --->
  15.  
  16. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  17. <head><title>{Title}</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20. {block:Description}<meta name="Description" content="{MetaDescription}" />{/block:Description}
  21.  
  22. <meta name="text:Sidebar Title" content="" />
  23. <meta name="text:Updates" content="updates!" />
  24. <meta name="text:Link A" content="" />
  25. <meta name="text:Link A URL" content="/" />
  26. <meta name="text:Link B" content="" />
  27. <meta name="text:Link B URL" content="/" />
  28. <meta name="text:Link C" content="" />
  29. <meta name="text:Link C URL" content="/" />
  30. <meta name="text:Link D" content="" />
  31. <meta name="text:Link D URL" content="/" />
  32.  
  33. <meta name="if:Word of the Day" content="1" />
  34. <meta name="if:Updates" content="1" />
  35. <meta name="if:More Updates" content="0" />
  36.  
  37. <meta name="color:Background" content="#ffffff"/>
  38. <meta name="color:Text" content="#838282"/>
  39. <meta name="color:Link" content="#a8a4a4"/>
  40. <meta name="color:Hover" content="#b8b8b8" />
  41. <meta name="color:Circle Links" content="#f8f8f8" />
  42. <meta name="color:Border" content="#f3f3f3" />
  43. <meta name="color:Scrollbar"content="#aaa" />
  44. <meta name="color:Scrollbar Background" content="#fff" />
  45. <meta name="image:Sidebar Image" content=""/>
  46.  
  47. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  48. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  49. <script>
  50. (function($){
  51. $(document).ready(function(){
  52. $("[title]").style_my_tooltips({
  53. tip_follows_cursor:true,
  54. tip_delay_time:1,
  55. tip_fade_speed:100,
  56. attribute:"title"
  57. });
  58. });
  59. })(jQuery);
  60. </script>
  61.  
  62. <style type="text/css">
  63.  
  64. /*body*/
  65.  
  66. ::-webkit-scrollbar {background-color:{color:scrollbar background}; height:8px; width:8px}
  67. ::-webkit-scrollbar-thumb:vertical {background-color:{color:scrollbar}; height:50px}
  68. ::-webkit-scrollbar-thumb:horizontal {background-color:{color:scrollbar}; height:8px!important}
  69.  
  70. *, body, a, a:hover {cursor: url(http://www.totallylayouts.com/cursors/random/tiny_cursor.png), auto;}
  71.  
  72. body {
  73. background:{color:background};
  74. margin:0px;
  75. color:{color:text};
  76. font-family:Calibri;
  77. font-size:10px;
  78. line-height:100%;
  79. }
  80.  
  81. a {
  82. text-decoration:none;
  83. outline:none;
  84. -moz-outline-style:none;
  85. color:{color:link};
  86. transition:all ease 0.3s;
  87. -moz-transition-duration: 0.3s;
  88. -webkit-transition-duration: 0.3s;
  89. -o-transition-duration: 0.3s;
  90. }
  91.  
  92. a:hover {
  93. color:{color:hover}
  94. text-decoration:none;
  95. transition:all ease 0.3s;
  96. -moz-transition-duration: 0.3s;
  97. -webkit-transition-duration: 0.3s;
  98. -o-transition-duration: 0.3s;;
  99. }
  100.  
  101. img {
  102. border:none;
  103. max-width:100%
  104. }
  105.  
  106. blockquote {
  107. padding-left:5px;
  108. border-left:2px solid;
  109. }
  110.  
  111. blockquote blockquote {
  112. padding-left:5px;
  113. border-left:2px solid;
  114. }
  115.  
  116. h1 {
  117. font-size:15px;
  118. }
  119.  
  120. #s-m-t-tooltip {
  121. max-width:300px;
  122. padding:2px;
  123. margin:10px 0px 0px 10px;
  124. background-color:#fff;
  125. font-family:calibri;
  126. font-size:8px;
  127. font-style:bold;
  128. letter-spacing:1px;
  129. text-transform:uppercase;
  130. color:{color:link};
  131. z-index:10000000000000000;
  132. border:solid 1px {color:link};
  133. transition-duration:0.5s;
  134. -moz-transition-duration:0.5s;
  135. -webkit-transition-duration:0.5s;
  136. -o-transition-duration:0.5s;
  137. }
  138.  
  139. /*basic posts*/
  140.  
  141. #entries {
  142. padding:10px;
  143. width:500px;
  144. margin-left:500px;
  145. margin-top:40px;
  146. }
  147.  
  148. #post {
  149. width:500px;
  150. padding-bottom:30px;
  151. }
  152.  
  153. /*sidebar*/
  154.  
  155. #sidebar {
  156. width:150px;
  157. position:fixed;
  158. margin-left:200px;
  159. margin-top:100px;
  160. z-index:100000;
  161. transition:all ease .4s;
  162. -moz-transition-duration:.4s;
  163. -webkit-transition-duration:.4s;
  164. -o-transition-duration:.4s;
  165. }
  166.  
  167. #sidebar:hover #sbtitle, #sidebar:hover #description, #sidebar:hover #pagination, #sidebar:hover #links {
  168. opacity:1;
  169. transition:all ease .4s;
  170. -moz-transition-duration:.4s;
  171. -webkit-transition-duration:.4s;
  172. -o-transition-duration:.4s;
  173. }
  174.  
  175. #sbtitle {
  176. font-size:20px;
  177. text-align:center;
  178. margin-top:7px;
  179. padding:5px;
  180. font-family:times;
  181. opacity:0;
  182. transition:all ease .4s;
  183. -moz-transition-duration:.4s;
  184. -webkit-transition-duration:.4s;
  185. -o-transition-duration:.4s;
  186. }
  187.  
  188. #sbtitle a {
  189. color:{color:link};
  190. transition:all ease .4s;
  191. -moz-transition-duration:.4s;
  192. -webkit-transition-duration:.4s;
  193. -o-transition-duration:.4s;
  194. }
  195.  
  196. #sbtitle a:hover {
  197. color:{color:hover};
  198. transition:all ease .4s;
  199. -moz-transition-duration:.4s;
  200. -webkit-transition-duration:.4s;
  201. -o-transition-duration:.4s;
  202. }
  203.  
  204. #sidebarimage {
  205. width 150px;
  206.  
  207. }
  208.  
  209. #sidebarimage img {
  210. width:150px;
  211. height:150px;
  212. -moz-border-radius:100%;
  213. -webkit-border-radius:100%;
  214. border-radius:100%;
  215. }
  216.  
  217. #links {
  218. text-align:center;
  219. letter-spacing:11px;
  220. word-spacing:3px;
  221. margin-left:-2px;
  222. margin-top:9px;
  223. opacity:0;
  224. transition:all ease .4s;
  225. -moz-transition-duration:.4s;
  226. -webkit-transition-duration:.4s;
  227. -o-transition-duration:.4s;
  228. -ms-tranision-duration:.4s;
  229. }
  230.  
  231.  
  232. #links a {
  233. display:inline-block;
  234. border: 1px solid #d4d4d4;
  235. background:{color:Circle Links};
  236. -moz-border-radius:100%;
  237. -webkit-border-radius:100%;
  238. border-radius:100%;
  239. height:10px;
  240. width:10px;
  241. letter-spacing:1px;
  242. text-transform:uppercase;
  243. transition-duration: 0.7s;
  244. -moz-transition-duration: 0.7s;
  245. -webkit-transition-duration: 0.7s;
  246. -o-transition-duration: 0.7s;
  247.  
  248.  
  249. }
  250.  
  251. #links a:hover {
  252. background:#aaaaaa;
  253. }
  254.  
  255. #description {
  256. padding:5px;
  257. text-align:justify;
  258. opacity:0;
  259. transition:all ease .4s;
  260. -moz-transition-duration:.4s;
  261. -webkit-transition-duration:.4s;
  262. -o-transition-duration:.4s;
  263. }
  264.  
  265. #pagi {
  266. font-size:10px;
  267. text-align:center;
  268. transition:all ease .4s;
  269. -moz-transition-duration:.4s;
  270. -webkit-transition-duration:.4s;
  271. -o-transition-duration:.4s;
  272. }
  273.  
  274. /*post info*/
  275.  
  276. #info {
  277. text-align:center;
  278. margin-top:10px;
  279. border-top:double {color:border};
  280. padding:5px;
  281. font-size:8px;
  282. }
  283.  
  284. #tags {
  285. text-transform:lowercase;
  286. display:inline-block;
  287. transition-duration: 0.7s;
  288. -moz-transition-duration:0.7s;
  289. -webkit-transition-duration:0.7s;
  290. -o-transition-duration:0.7s;
  291. }
  292.  
  293. #tags a {
  294. color:{color:link}
  295. transition-duration:0.7s;
  296. -moz-transition-duration:0.7s;
  297. -webkit-transition-duration:0.7s;
  298. -o-transition-duration:0.7s;
  299. }
  300.  
  301. #tags a:hover {
  302. text-transform:uppercase;
  303. font-style:italic;
  304. transition-duration:0.3s;
  305. -moz-transition-duration:0.3s;
  306. -webkit-transition-duration:0.3s;
  307. -o-transition-duration:0.3s;
  308. -ms-transition-duration:0.3s;
  309. }
  310.  
  311. /*ask*/
  312.  
  313. .ask {
  314. padding:10px;
  315. text-align:left;
  316. font-size:12px;
  317. background-color:#f9f9f9;
  318. line-height:12px;
  319. }
  320.  
  321. .question{
  322. font-size:15px;
  323. font-style:italic;
  324. line-height:15px;
  325. padding-top:2px;
  326. }
  327.  
  328. #asker {
  329. float:left;
  330. margin-top:-6px;
  331. margin-left:-5px;
  332. padding-right:7px;
  333. }
  334.  
  335. .answer {
  336. text-align:left;
  337. padding:10px;
  338. font-size:11px;
  339. }
  340.  
  341. /*quote*/
  342.  
  343. #quote {
  344. font-size:20px;
  345. line-height:20px;
  346. color:#5e5e5e;
  347. padding-bottom:10px;
  348. font-family:georgia;
  349. }
  350.  
  351. /*audio posts*/
  352.  
  353. .audart {
  354. width:500px;
  355. height:100px;
  356. overflow:hidden;
  357. z-index:99;
  358. margin-top:5px;
  359. }
  360.  
  361. .audart img {
  362. width:500px;
  363. overflow:hidden;
  364. }
  365.  
  366. .audbutton {
  367. height:25px;
  368. width:25px;
  369. z-index:100;
  370. margin:10px 14px 13px 9px;
  371. position:center;
  372. overflow:hidden;
  373. -moz-border-radius:100%;
  374. -webkit-border-radius:100%;
  375. border-radius:100%;
  376. }
  377.  
  378. .audbuttonbg {height:45px;
  379. opacity:1;
  380. width:45px;
  381. z-index:99;
  382. margin-left:25px;
  383. margin-top:25px;
  384. position:absolute;
  385. background-color:#fff;
  386. border-radius:100%;
  387. -webkit-transition:all 0.4s ease-in-out;
  388. -moz-transition:all 0.4s ease-in-out;
  389. -o-transition:all 0.4s ease-in-out;
  390. -ms-transition: all 0.4s ease-in-out;
  391. transition:all 0.5s ease-in-out}
  392.  
  393. .audinfo {
  394. text-align:left;
  395. z-index:100;
  396. overflow:hidden;
  397. position:absolute;
  398. color:{color:link};
  399. margin-bottom:0;
  400. background-color:#fff;
  401. margin-top:20px;
  402. width:250px;
  403. padding:10px;
  404. margin-left:100px;
  405. border-radius:2px;
  406. opacity:1;
  407. height:38px;
  408. line-height:15px;
  409. padding-top:7px;
  410. transition:all 0.5s ease-in-out
  411. -webkit-transition:all 0.4s ease-in-out;
  412. -moz-transition:all 0.4s ease-in-out;
  413. -o-transition:all 0.4s ease-in-out;
  414. -ms-transition: all 0.4s ease-in-out;
  415. }
  416.  
  417. /*wordoftheday*/
  418.  
  419. #wordoftheday {
  420. bottom:20px;
  421. left:20px;
  422. position:fixed;
  423. }
  424.  
  425. /*the updates circle thing haha*/
  426.  
  427. #updatesbox {
  428. line-height:100%;
  429. display:block;
  430. border:1px solid #eee;
  431. height:20px;
  432. width:20px;
  433. padding:0px 5px 5px 5px;
  434. z-index:0;
  435. top:10px;
  436. left:10px;
  437. color:#999;
  438. position:fixed;
  439. background:#fff;
  440. overflow:hidden;
  441. text-align:center;
  442. border-radius:100%;
  443. -webkit-border-radius:100%;
  444. -moz-border-radius:100%;
  445. -moz-transition-duration:0.6s;
  446. -webkit-transition-duration:0.6s;
  447. -o-transition-duration:0.6s;
  448. }
  449.  
  450. #updatesbox:hover {
  451. height:100px;
  452. width:100px;
  453. {block:ifMoreUpdates}
  454. height:150px;
  455. width:150px;
  456. {/block:ifMoreUpdates}
  457. -moz-border-radius:100%;
  458. -webkit-border-radius:100%;
  459. border-radius:100%;
  460. -moz-transition-duration:0.5s;
  461. -webkit-transition-duration:0.5s;
  462. -o-transition-duration:0.5s;
  463. }
  464.  
  465. #updatesbox:hover #actualupdates {
  466. opacity:1;
  467. transition-duration:0.5s;
  468. -moz-transition-duration:0.5s;
  469. -webkit-transition-duration:0.5s;
  470. -o-transition-duration:0.5s;
  471. }
  472.  
  473. #updatestitle {
  474. line-height:25px;
  475. font-family:calibri;
  476. text-transform:uppercase;
  477. font-size:8px;
  478. margin:100px 1px -5px 1px;
  479. padding-top:8px;
  480. }
  481.  
  482. #actualupdates {
  483. font-size:9px;
  484. font-family:baskerville;
  485. width:92px;
  486. line-height:9.5px;
  487. text-align:justify;
  488. padding:3px 4px 2px;
  489. margin-top:-7px;
  490. opacity:0;
  491. {block:ifMoreUpdates}
  492. width:110px;
  493. padding:3px 7px 2px;
  494. margin-left:14px;
  495. {/block:ifMoreUpdates}
  496. -moz-transition-duration:0.5s;
  497. -webkit-transition-duration:0.5s;
  498. -o-transition-duration:0.5s;
  499. }
  500.  
  501. /*Credit p.s. if you remove this i will kill you (✿◡‿◡)*/
  502.  
  503. #credit, #credit a {
  504. position:fixed;
  505. bottom:4px;
  506. right:4px;
  507. padding:5px 3px;
  508. font-family:helvetica;
  509. text-transform:uppercase;
  510. color:#fff;
  511. font-size:10px;
  512. width:15px;
  513. background-color:#000;
  514. -moz-transition-duration:0.3s;
  515. -webkit-transition-duration:0.3s;
  516. -o-transition-duration:0.3s;
  517. -ms-transition-duration:0.3s;
  518. }
  519.  
  520. #credit:hover, #credit a:hover {
  521. font-family:helvetica;
  522. color:#000;
  523. background-color:#fff;
  524. text-shadow:#aaa 2px 2px;
  525. -moz-transition-duration:0.4s;
  526. -webkit-transition-duration:0.4s;
  527. -o-transition-duration:0.4s;
  528. -ms-transition-duration:0.4s;
  529. }
  530.  
  531. {CustomCSS}</style></head><body>
  532.  
  533. <div id="updatesbox">
  534. <span id="updatestitle">note</span>
  535. <div id="actualupdates">
  536. {text:Updates}
  537. </div>
  538. </div>
  539.  
  540. <div id="sidebar">
  541.  
  542. <div id="sidebarimage"><img src="{image:sidebar image}"></div>
  543.  
  544. <div id="sbtitle" ><a href="/" title="home">{text:sidebar title}</a></div>
  545.  
  546. <div id="links">
  547. <a href="{text:Link A URL}" title="{text:Link A}"></a>
  548. <a href="{text:Link B URL}" title="{text:Link B}"></a>
  549. <a href="{text:Link C URL}" title="{text:Link C}"></a>
  550. <a href="{text:Link D URL}" title="{text:Link D}"></a>
  551. </div>
  552.  
  553. <div id="description">{Description}</div>
  554.  
  555. <div id="pagi">
  556. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">«</a>{/block:PreviousPage}
  557. {block:NextPage}<a href="{NextPage}">»</a>{/block:NextPage}{/block:Pagination}
  558. </div>
  559.  
  560. </div>
  561.  
  562. <div id="entries">{block:Posts}<div id="post">
  563.  
  564. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  565.  
  566. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  567.  
  568. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  569.  
  570. {block:Quote}<div id="quote">“{Quote}”</div>{block:Source} <br>—{Source}{/block:Source}{/block:Quote}
  571.  
  572. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  573.  
  574. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  575.  
  576. {block:Audio}
  577.  
  578. <div class="audart">
  579. <div class="audbuttonbg">
  580. <div class="audbutton">{AudioPlayerWhite}</div></div>
  581. <div class="audinfo">
  582. {block:TrackName}<b>{TrackName}</b>{/block:TrackName}<br>
  583. {block:Artist}{Artist}{/block:Artist} <br> {block:PlayCount}Played {PlayCount} times {/block:PlayCount}
  584. </div>
  585. {block:AlbumArt}<img src="{AlbumArtURL}" width="500"> {/block:AlbumArt}
  586. </div>
  587.  
  588. {block:Caption}{Caption}{/block:Caption}{/block:Audio}
  589.  
  590. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  591.  
  592. {block:Answer}<div class="ask"><div id="asker"><img src="{AskerPortraitURL-48}"></div>{Asker} asked, <div class="question">“{Question}”</div><br></div><div class="answer">{Answer}</div>{/block:Answer}
  593.  
  594. <div id="info">
  595. {block:Date}posted {TimeAgo}{/block:Date} with <a href="{Permalink}">
  596. {NoteCountWithLabel}</a>{block:RebloggedFrom} via <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a> by <a href="{ReblogRootURL}"title="{ReblogRoottitle}">{ReblogRootName}</a>{/block:RebloggedFrom}<br>filed under: {block:HasTags}{block:Tags} #<div id="tags"><a href="{TagURL}">{Tag}</a></div>{/block:Tags}{/block:HasTags}</div>
  597.  
  598. </div>
  599. {block:PostNotes}{PostNotes}{/block:PostNotes}
  600. {/block:Posts}</div>
  601.  
  602. {block:ifWordoftheDay}
  603. <div id="wordoftheday"><script type="text/javascript" src="http://dictionary.reference.com/wordoftheday/wotd2.js"></script> </div>
  604. {/block:ifWordoftheDay}
  605.  
  606. <div id="credit" title="lunecerise"><a href="http://lunecerise.tumblr.com">LC</a></div>
  607.  
  608. </body></html>
  609.  
  610. <!--Hey if you're reading this, I think you should know that you're amazing and wow you're great ily-->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement