API tools faq
paste
silvercybermen

Theme 03 REVAMP: Encircle

silvercybermen
Jan 16th, 2015
1,362
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.85 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. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!--
  5.  
  6. THEME 3: ENCIRCLE // REVAMP
  7. BY LUNECERISE/ROMULVS
  8.  
  9. -DO NOT STEAL ANY CODE
  10. -DO NOT USE AS A BASE CODE
  11. -KEEP THE CREDIT INTACT
  12.  
  13. (✿◡‿◡)
  14.  
  15.  
  16. // note: honestly tho i have no idea why i released the original encircle theme, it was absolutely horrendous /.\
  17.  
  18.  
  19. --->
  20.  
  21. <head><title>{Title}</title>
  22. <link rel="shortcut icon" href="{Favicon}">
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24. {block:Description}<meta name="Description" content="{MetaDescription}" />{/block:Description}
  25.  
  26. <meta name="text:LinkA" content="" />
  27. <meta name="text:LinkA URL" content="/" />
  28. <meta name="text:LinkB" content="" />
  29. <meta name="text:LinkB URL" content="/" />
  30. <meta name="text:LinkC" content="" />
  31. <meta name="text:LinkC URL" content="/" />
  32. <meta name="text:LinkD" content="" />
  33. <meta name="text:LinkD URL" content="/" />
  34.  
  35. <meta name="image:Sidebar Image" content=""/>
  36.  
  37. <meta name="if:Captions" content="1"/>
  38.  
  39. <meta name="color:Background" content="#ffffff"/>
  40. <meta name="color:Gradient Color 1" content="#ff89e9"/>
  41. <meta name="color:Gradient Color 2" content="#05abe0"/>
  42. <meta name="color:Text" content="#838282"/>
  43. <meta name="color:Link" content="#a8a4a4"/>
  44. <meta name="color:Hover" content="#b8b8b8" />
  45. <meta name="color:Border" content="#f3f3f3" />
  46. <meta name="color:Scrollbar"content="#aaa" />
  47.  
  48.  
  49. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  50. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  51. <script>
  52. (function($){
  53. $(document).ready(function(){
  54. $("[title]").style_my_tooltips({
  55. tip_follows_cursor:true,
  56. tip_delay_time:1,
  57. tip_fade_speed:100,
  58. attribute:"title"
  59. });
  60. });
  61. })(jQuery);
  62. </script>
  63.  
  64. <style type="text/css">
  65.  
  66. /*body*/
  67.  
  68. ::-webkit-scrollbar {background-color:{color:background}; height:4px; width:4px;}
  69. ::-webkit-scrollbar-thumb:vertical {background-color:{color:scrollbar};}
  70. ::-webkit-scrollbar-thumb:horizontal {background-color:{color:scrollbar}; height:4px!important}
  71.  
  72. iframe#tumblr_controls {
  73. top:10px;
  74. position: fixed;
  75. right:20px !important;
  76. opacity: 0.4;
  77. white-space:nowrap;
  78. -webkit-filter: invert(100%);
  79. -moz-filter: invert(100%);
  80. -o-filter: invert(100%);
  81. -ms-filter: invert(100%);
  82. filter: invert(100%);
  83. transition: .8s ease-in-out;
  84. -webkit-transition: .8s ease-in-out;
  85. -moz-transition: .8s ease-in-out;
  86. -o-transition: .8s ease-in-out;
  87. }
  88.  
  89. iframe#tumblr_controls:hover {
  90. -webkit-transition: opacity 0.7s linear;
  91. -moz-transition: all 0.4s ease-out;
  92. -webkit-transition: all 0.4s ease-out;
  93. transition: all 0.4s ease-out;
  94. opacity:.7;
  95. }
  96.  
  97. *, body, a, a:hover {cursor: url(http://www.totallylayouts.com/cursors/random/tiny_cursor.png), auto;}
  98.  
  99. body {
  100. background:{color:background};
  101. margin:0px;
  102. color:{color:text};
  103. font-family:times;
  104. font-size:10px;
  105. line-height:110%;
  106. }
  107.  
  108. a {
  109. text-decoration:none;
  110. outline:none;
  111. -moz-outline-style:none;
  112. color:{color:link};
  113. transition:0.5s ease-in-out;
  114. -webkit-transition:0.5s ease-in-out;
  115. -moz-transition:0.5s ease-in-out;
  116. -ms-transition:0.5s ease-in-out;
  117. -o-transition:0.5s ease-in-out;
  118. }
  119.  
  120. a:hover {
  121. color:{color:hover};
  122. text-decoration:none;
  123. }
  124.  
  125. img {
  126. border:none;
  127. max-width:100%
  128. }
  129.  
  130. blockquote {
  131. padding-left:5px;
  132. border-left:2px solid;
  133. }
  134.  
  135. blockquote blockquote {
  136. padding-left:5px;
  137. border-left:2px solid;
  138. }
  139.  
  140. h1 {
  141. font-size:15px;
  142. }
  143.  
  144. pre {
  145. font-family:consolas;
  146. text-transform:uppercase;
  147. white-space: pre-wrap;
  148. white-space: -moz-pre-wrap;
  149. white-space: -pre-wrap;
  150. white-space: -o-pre-wrap;
  151. word-wrap: break-word;
  152. }
  153.  
  154. li {
  155. list-style:circle;
  156. }
  157.  
  158. #s-m-t-tooltip {
  159. max-width:300px;
  160. padding:3px 5px;
  161. margin:10px;
  162. background-color:#fff;
  163. font-family:times;
  164. font-size:8px;
  165. letter-spacing:1px;
  166. text-transform:uppercase;
  167. border-radius:1px;
  168. color:{color:text};
  169. z-index:10000000000000000;
  170. box-shadow:2px 2px 0.2em {color:border};
  171. transition-duration:0.5s;
  172. -moz-transition-duration:0.5s;
  173. -webkit-transition-duration:0.5s;
  174. -o-transition-duration:0.5s;
  175. }
  176.  
  177. /*sidebar*/
  178.  
  179. #sidebar {
  180. width:150px;
  181. position:fixed;
  182. margin-left:200px;
  183. margin-top:100px;
  184. z-index:100000;
  185. transition:0.5s ease-in-out;
  186. -webkit-transition:0.5s ease-in-out;
  187. -moz-transition:0.5s ease-in-out;
  188. -ms-transition:0.5s ease-in-out;
  189. -o-transition:0.5s ease-in-out;
  190. }
  191.  
  192. #sidebar:hover #description, #sidebar:hover .links {
  193. opacity:1;
  194. transition:0.5s ease-in-out;
  195. -webkit-transition:0.5s ease-in-out;
  196. -moz-transition:0.5s ease-in-out;
  197. -ms-transition:0.5s ease-in-out;
  198. -o-transition:0.5s ease-in-out;
  199. }
  200.  
  201. #sidebar:hover #description {
  202. margin-top:15px;
  203. }
  204.  
  205. #sidebarimage {
  206. width: 150px;
  207. height:150px;
  208. z-index:-1;
  209. -moz-border-radius:100%;
  210. -webkit-border-radius:100%;
  211. border-radius:100%;
  212. border:solid 1px {color:background};
  213. background: -webkit-linear-gradient(45deg, {color:gradient color 1} 0%, {color:gradient color 2} 100%);
  214. background: linear-gradient(45deg, {color:gradient color 1} 0%,{color:gradient color 2} 100%);
  215. }
  216.  
  217. #sidebarimage img {
  218. width:150px;
  219. opacity:1;
  220. height:150px;
  221. border:solid 1px transparent;
  222. -moz-border-radius:100%;
  223. -webkit-border-radius:100%;
  224. border-radius:100%;
  225. margin-top:-12px;
  226. margin-left:-11px;
  227. padding:10px;
  228. overflow:hidden;
  229. transition:0.5s ease-in-out;
  230. -webkit-transition:0.5s ease-in-out;
  231. -moz-transition:0.5s ease-in-out;
  232. -ms-transition:0.5s ease-in-out;
  233. -o-transition:0.5s ease-in-out;
  234. }
  235.  
  236. #sidebar:hover #sidebarimage img {
  237. opacity:0.65;
  238. border:solid 1px #f2f2f2;
  239. }
  240.  
  241. .links {
  242. text-align:center;
  243. letter-spacing:1px;
  244. word-spacing:2px;
  245. width:150px;
  246. margin-top:9px;
  247. opacity:0;
  248. margin-bottom:5px;
  249. transition:0.5s ease-in-out;
  250. -webkit-transition:0.5s ease-in-out;
  251. -moz-transition:0.5s ease-in-out;
  252. -ms-transition:0.5s ease-in-out;
  253. -o-transition:0.5s ease-in-out;
  254. }
  255.  
  256.  
  257. .links a {
  258. font-size:10px;
  259. color:{color:link};
  260. letter-spacing:1px;
  261. display:inline-block;
  262. text-transform:uppercase;
  263. transition-duration: 0.7s;
  264. -moz-transition-duration: 0.7s;
  265. -webkit-transition-duration: 0.7s;
  266. -o-transition-duration: 0.7s;
  267. -webkit-transition: color 0.3s;
  268. -moz-transition: color 0.3s;
  269. transition: color 0.3s;
  270. }
  271.  
  272. .links a:after {
  273. display:block;
  274. margin-top:0px;
  275. margin-left:50%;
  276. color: transparent;
  277. content: '•';
  278. text-shadow: 0 0 transparent;
  279. font-size: 10px;
  280. -webkit-transition: text-shadow 0.3s, color 0.3s;
  281. -moz-transition: text-shadow 0.3s, color 0.3s;
  282. transition: text-shadow 0.3s, color 0.3s;
  283. -webkit-transform: translateX(-50%);
  284. -moz-transform: translateX(-50%);
  285. transform: translateX(-50%);
  286. pointer-events: none;
  287. }
  288.  
  289. .links a:hover:after,
  290. .links a:focus:after {
  291. color: {color:link};
  292. text-shadow: 5px 0 {color:link}, -5px 0 {color:link};
  293. }
  294.  
  295. .links a:hover,
  296. .links a:focus {
  297. color: {color:hover};
  298. }
  299.  
  300. #description {
  301. padding:5px;
  302. margin-top:-10px;
  303. text-align:center;
  304. opacity:0;
  305. transition:all ease .5s;
  306. -moz-transition-duration:.5s;
  307. -webkit-transition-duration:.5s;
  308. -o-transition-duration:.5s;
  309. }
  310.  
  311. #pagi {
  312. width:400px;
  313. margin:50px 0 60px 550px;
  314. font-size:10px;
  315. padding:0 10px;
  316. word-spacing:10px;
  317. text-align:center;
  318. transition:all ease .4s;
  319. -moz-transition-duration:.4s;
  320. -webkit-transition-duration:.4s;
  321. -o-transition-duration:.4s;
  322. }
  323.  
  324. #pagi a:hover {font-style:italic;}
  325.  
  326.  
  327. /*basic posts*/
  328.  
  329. #entries {
  330. padding:10px;
  331. width:400px;
  332. margin-left:550px;
  333. margin-top:40px;
  334. }
  335.  
  336. #post {
  337. width:400px;
  338. padding-bottom:60px;
  339. -ms-word-break: break-all;
  340. word-break: break-all;
  341. word-break: break-word;
  342. -webkit-hyphens: auto;
  343. -moz-hyphens: auto;
  344. -ms-hyphens: auto;
  345. hyphens: auto;
  346. }
  347.  
  348. #post:hover #tags {
  349. opacity:1;
  350. }
  351.  
  352. #notecontain {
  353. width:300px;
  354. padding:20px 49px;
  355. text-align:center;
  356. border:dotted 1px {color:border};
  357. }
  358.  
  359. #notes {
  360. width:280px;
  361. height:150px;
  362. padding:5px 10px;
  363. overflow-y:scroll;
  364. overflow-x:hidden;
  365. text-align:left;
  366. margin:20px 0;
  367. line-height:125%;
  368. }
  369.  
  370.  
  371. #notes img {display:none;}
  372. #notes ol, #notes li {list-style:circle;line-height:125%;}
  373.  
  374. /*post info*/
  375.  
  376. #details {
  377. text-align:center;
  378. margin-top:10px;
  379. border-top:dotted 1px {color:border};
  380. padding:5px;
  381. font-size:8px;
  382. }
  383.  
  384. #tags {
  385. opacity:0;
  386. text-transform:lowercase;
  387. transition:0.5s ease-in-out;
  388. -webkit-transition:0.5s ease-in-out;
  389. -moz-transition:0.5s ease-in-out;
  390. -ms-transition:0.5s ease-in-out;
  391. -o-transition:0.5s ease-in-out;
  392. }
  393.  
  394. #tags a {
  395. color:{color:link};
  396. display:inline-block;
  397. transition-duration:0.7s;
  398. -moz-transition-duration:0.7s;
  399. -webkit-transition-duration:0.7s;
  400. -o-transition-duration:0.7s;
  401. }
  402.  
  403. #tags a:hover {
  404. text-transform:uppercase;
  405. font-style:italic;
  406. transition-duration:0.3s;
  407. -moz-transition-duration:0.3s;
  408. -webkit-transition-duration:0.3s;
  409. -o-transition-duration:0.3s;
  410. -ms-transition-duration:0.3s;
  411. }
  412.  
  413. #tags .comma:last-child {
  414. display:none;
  415. }
  416.  
  417. /*ask*/
  418.  
  419. #question {
  420. padding:10px;
  421. letter-spacing:2px;
  422. text-align:center;
  423. border:1px {color:border} dotted;
  424. color:{color:text};
  425. background-color:{color:background};
  426. }
  427.  
  428. #akport {
  429. width:380px;
  430. text-align:center;
  431. height:12px;
  432. padding:5px 0;
  433. color:#444;
  434. opacity:1;
  435. background-color:{color:background};
  436. z-index:99999;
  437. margin-bottom:3px;
  438. }
  439.  
  440. #akport a {
  441. text-align:center;
  442. text-decoration:none;
  443. }
  444.  
  445. #akport a:hover {
  446. text-decoration:none;
  447. letter-spacing:0.8em;
  448. }
  449.  
  450. /*quote*/
  451.  
  452. #quote {
  453. font-size:20px;
  454. line-height:20px;
  455. color:#5e5e5e;
  456. padding-bottom:10px;
  457. font-family:georgia;
  458. }
  459.  
  460. /*audio posts*/
  461.  
  462. .tumblr_audio_player {
  463. width:100%;
  464. position:relative;
  465. }
  466.  
  467. .audio {
  468. width:380px;
  469. padding:10px;
  470. margin:5px 0;
  471. margin-top:20px;
  472. height:auto;
  473. }
  474.  
  475. #playbutton {
  476. width:20px;
  477. height:30px;
  478. position:relative;
  479. overflow:hidden;
  480. margin:2px 10px 0 5px;
  481. }
  482.  
  483. #audioplayer {
  484. width:30px;
  485. height:30px;
  486. padding:10px;
  487. border-radius:100%;
  488. border:double 1px {color:border};
  489. float:left;
  490. position:absolute;
  491. overflow:hidden;
  492. margin-top:-25px;
  493. background-color:white;
  494. }
  495.  
  496. #audiotrack, #audioart {
  497. width:300px;
  498. display:inline-block;
  499. float:right;
  500. text-align:center;
  501. padding:5px 10px;
  502. border-bottom:dotted 1px {color:border};
  503. margin-top:-20px;
  504. margin-right:30px;
  505. }
  506.  
  507. #audioart {
  508. text-transform:uppercase;
  509. font-style:none;
  510. font-size:10px;
  511. border-bottom:none;
  512. margin-top:-2px;
  513. }
  514.  
  515. #audcap {margin-top:20px;}
  516.  
  517. #audcap p {display:none;}
  518.  
  519.  
  520. #credit, #credit a {
  521. position:fixed;
  522. bottom:5px;
  523. right:5px;
  524. padding:5px 4px;
  525. font-family:helvetica;
  526. text-transform:uppercase;
  527. color:#bbb;
  528. font-size:9px;
  529. -moz-transition-duration:0.3s;
  530. -webkit-transition-duration:0.3s;
  531. -o-transition-duration:0.3s;
  532. -ms-transition-duration:0.3s;
  533. }
  534.  
  535. #credit:hover, #credit a:hover {
  536. font-family:helvetica;
  537. text-shadow:#aaa 2px 2px 0.1em;
  538. -moz-transition-duration:0.4s;
  539. -webkit-transition-duration:0.4s;
  540. -o-transition-duration:0.4s;
  541. -ms-transition-duration:0.4s;
  542. }
  543.  
  544. {CustomCSS}</style></head><body>
  545.  
  546. <div id="sidebar">
  547. <div id="sidebarimage"><img src="{image:sidebar image}"></div>
  548. <div id="description">{Description}</div>
  549. <div class="links">
  550. {block:ifLinkA}<a href="{text:LinkA URL}">{text:LinkA}</a>{/block:ifLinkA}
  551. {block:ifLinkB}<a href="{text:LinkB URL}">{text:LinkB}</a>{/block:ifLinkB}
  552. {block:ifLinkC}<a href="{text:LinkC URL}">{text:LinkC}</a>{/block:ifLinkC}
  553. {block:ifLinkD}<a href="{text:LinkD URL}">{text:LinkD}</a>{/block:ifLinkD}
  554. </div>
  555. </div>
  556.  
  557.  
  558. <div id="entries">{block:Posts}<div id="post">
  559.  
  560. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  561.  
  562. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}<p>{block:Label}<b>{Label}</b>{/block:Label} {Line}</p>{/block:Lines}{/block:Chat}
  563.  
  564. {block:Answer}<div id="question"><span style="text-transform:uppercase;font-size:10px; padding-bottom:10px"><div id="akport">{Asker}</div></span>{Question}</div><left>{Answer}</left>{/block:Answer}
  565.  
  566. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  567.  
  568. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}{block:ifCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifCaptions}{/block:Photo}
  569.  
  570. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  571.  
  572. {block:Photoset}<center>{Photoset-400}</center>{block:ifCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifCaptions}{/block:Photoset}
  573.  
  574. {block:Quote}<h2 style="text-shadow:2px 2px 0px #f1f1f1; text-align:center; line-height:115%">“{Quote}”</h2><br> <div style="text-align:center">↳ {Source}</div><br>{/block:Quote}
  575.  
  576. {block:Audio}
  577. <div class="audio">
  578. <div id="audioplayer"><div id="playbutton">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div></div>
  579. <div id="audiotrack">{block:TrackName}<span style="font-size:15px; font-style:italic">{TrackName}</span></div>{/block:TrackName}
  580. <div id="audioart">{block:Artist}{Artist}{/block:Artist}{block:Album}&emsp;•&emsp;{Album}{/block:Album}</div></div><br>
  581. {block:ifCaptions}{block:Caption}<div id="audcap">{Caption}</div>{/block:Caption}{/block:ifCaptions}{/block:Audio}
  582.  
  583. {block:Video}{Video-400}{block:ifCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifCaptions}{/block:Video}
  584.  
  585. {block:PermalinkPage}{block:ifnotCaptions}
  586. {block:Text}{block:Caption}{Caption}{/block:Caption}{/block:Text}
  587. {block:Photo}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  588. {block:Photoset}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  589. {block:Audio}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  590. {block:Video}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  591. {/block:ifnotCaptions}{/block:PermalinkPage}
  592.  
  593. <div id="details">{block:Date}<a href="{Permalink}" title="{TimeAgo}">{ShortMonth} {DayOfMonthWithZero}</a>&emsp;{/block:Date}{block:RebloggedFrom} <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>&emsp;{/block:RebloggedFrom} {block:ContentSource} <a href="{SourceURL}" title="{SourceTitle}">©</a>&emsp;{/block:ContentSource}{/block:NoteCount} <a href="{Permalink}">+{NoteCount}</a>&emsp;{/block:NoteCount}<a href="{ReblogURL}">reblog</a>
  594. {block:HasTags}<div id="tags">{block:Tags} <a href="{TagURL}">{Tag}</a><span class="comma">,</span> {/block:Tags}</div>{/block:HasTags}
  595. </div></div>
  596.  
  597. {/block:Posts}
  598. {block:PostNotes}<div id="notecontain"><div id="notes">{PostNotes}</div></div>{/block:PostNotes}
  599. {/block:Posts}
  600.  
  601. </div>
  602.  
  603. <div id="pagi">
  604. {block:Pagination}
  605. {block:PreviousPage}<a href="{PreviousPage}">back</a>{/block:PreviousPage}
  606. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  607. {/block:Pagination}
  608. </div>
  609.  
  610. <div id="credit" title="lunecerise"><a href="http://lunecerise.co.vu">LC</a></div>
  611.  
  612. </body></html>
  613.  
  614. <!--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
Public Pastes
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!