API tools faq
paste
Advertisement
tanaxmercedes

Caged Theme

tanaxmercedes
Jul 24th, 2018
600
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.61 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Caged Theme
  4.  
  5.  
  6. โ’ธ๐™’๐™๐™ž๐™ข๐™จ๐™ฎ๐™๐™๐™š๐™ข๐™š๐™จ
  7. designed and coded by @tanaboo
  8.  
  9.  
  10.  
  11. -->
  12.  
  13. <!DOCTYPE html>
  14. <head>
  15.  
  16. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  17.  
  18. <meta charset="utf-8">
  19. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  20. {block:Description}
  21. <meta name="description" content="{MetaDescription}" />
  22. {/block:Description}
  23.  
  24. <title>{Title}</title>
  25.  
  26. <link rel="shortcut icon" href="{Favicon}">
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28. <link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  29.  
  30. <meta name="image:Sidebar" content="https://78.media.tumblr.com/d42dd2735e5d47e609fd9b8fc9f4c08a/tumblr_pb3oqvGBN61rigmz8o6_400.png">
  31. <meta name="image:Background" content="">
  32.  
  33. <meta name="color:Background" content="#fff">
  34. <meta name="color:Text" content="#aaa">
  35. <meta name="color:Accent" content="#fff" />
  36. <meta name="color:Link" content="#888888">
  37. <meta name="color:Link Hover" content="#eee">
  38. <meta name="color:Highlight" content="#7b7b7b">
  39. <meta name="color:Scrollbar" content="#777">
  40. <meta name="color:Scrollbar BG" content="#fff">
  41.  
  42. <meta name="if:On Load Animations" content="1">
  43. <meta name="if:One Column" content="0">
  44. <meta name="if:Two Columns" content="1">
  45.  
  46. <meta name="select:Text" content="10px">
  47. <meta name="select:Text" content="11px">
  48. <meta name="select:Text" content="12px">
  49. <meta name="select:Text" content="13px">
  50. <meta name="select:Text" content="14px">
  51. <meta name="select:Text" content="15px">
  52. <meta name="select:Text" content="16px">
  53. <meta name="select:Text" content="17px">
  54.  
  55. <meta name="select:Font" content="arial">
  56. <meta name="select:Font" content="trebuchet ms">
  57. <meta name="select:Font" content="consolas">
  58. <meta name="select:Font" content="ms gothic">
  59.  
  60. <meta name="text:Link One" content="one" >
  61. <meta name="text:Link One URL" content="/">
  62. <meta name="text:Link Two" content="two" >
  63. <meta name="text:Link Two URL" content="/">
  64. <meta name="text:Link Three" content="three" >
  65. <meta name="text:Link Three URL" content="/">
  66.  
  67. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
  68. <link href='http://static.tumblr.com/blpgwiz/usPm404d2/bounce_normal.css' rel='stylesheet' type='text/css'>
  69. <link href='http://static.tumblr.com/blpgwiz/sSZmijydf/slide_in.css' rel='stylesheet' style='text/css'>
  70. <link href="https://fonts.googleapis.com/css?family=Forum" rel="stylesheet">
  71.  
  72. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  73.  
  74. <script type="text/javascript">
  75. $(window).load(function () {
  76. $('#content').masonry({
  77. itemSelector : ".post",
  78. },
  79. function() { $('#content').masonry({ appendedContent: $(this) }); }
  80. );
  81. });
  82. </script>
  83.  
  84.  
  85.  
  86. <style type="text/css">
  87.  
  88.  
  89. ::-webkit-scrollbar {
  90. width: 8px;
  91. border-radius:0px;
  92. background: {color:Scrollbar BG}; }
  93.  
  94. ::-webkit-scrollbar-thumb {
  95. background: {color:Scrollbar};
  96. }
  97.  
  98. .ui-tooltip {position:absolute; z-index:214748364789;}
  99.  
  100. .ui-tooltip-content {
  101. margin:3px 15px;
  102. max-width:300px;
  103. padding:5px 8px;
  104. text-transform:uppercase;
  105. background:#604d8d;
  106. font-size:10px;
  107. line-height:150%;
  108. letter-spacing:0px;
  109. color:#ffffff;
  110. }
  111.  
  112.  
  113. iframe#tumblr_controls, .iframe-controls--desktop {
  114. top:100px!important;
  115. right:150px!important;
  116. position:fixed!important;
  117. z-index:999999999!important;
  118. opacity:1!important;
  119. transform-origin:100% 0;
  120. transform:scale(0.45,0.45);
  121. transition:opacity 0.4s ease-in-out;
  122. }
  123.  
  124.  
  125.  
  126.  
  127. body {
  128. margin:0px;
  129. background:#f6f6f6;
  130. color: {color:Text};;
  131. background-image:url('{image:Background}');
  132. background-attachment:fixed;
  133. background-repeat:repeat;
  134. font-family:{select:Font}, Arial;
  135. line-height:140%;
  136. font-size:{select:Text};
  137. }
  138.  
  139. p{
  140. margin:0 0 10px 0;
  141. padding:0;
  142. }
  143.  
  144. pre {
  145. white-space: pre-wrap;
  146. white-space: -moz-pre-wrap;
  147. white-space: -pre-wrap;
  148. white-space: -o-pre-wrap;
  149. word-wrap: break-word;
  150. }
  151.  
  152. a{
  153. color:{color:Link};
  154. -moz-transition: all .2s ease-in;
  155. -o-transition: all .2s ease-in;
  156. -webkit-transition: all .2s ease-in;
  157. transition: all .2s ease-in;
  158. }
  159.  
  160. a:hover{
  161. text-decoration:none;
  162. }
  163.  
  164. li{
  165. margin-left:-15px;
  166. }
  167.  
  168. #wrapper{
  169. width:600px;
  170. margin:50px auto;
  171. }
  172.  
  173. #sidebar{
  174. padding:10px;
  175. background:#777;
  176. margin-left:-250px;
  177. bottom:120px;
  178. width:200px;
  179. height:470px;
  180. position:fixed;
  181. top:100px;
  182. border-bottom:solid 30px #fff;
  183. -webkit-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.25);
  184. -moz-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.25);
  185. box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.25);
  186. {block:IfOnLoadAnimations}
  187. -webkit-animation: SlideIn 2s;
  188. -moz-animation: SlideIn 2s;
  189. -ms-animation: SlideIn 2s;
  190. -o-animation: SlideIn 2s;
  191. animation: SlideIn 2s;
  192. {/block:IfOnLoadAnimations}
  193. }
  194.  
  195.  
  196. #sidebar img{
  197. margin-top:4px;
  198. width:180px;
  199. margin-left:4px;
  200. border:solid 6px #f6f6f6;
  201. opacity:;
  202. display:block;
  203. outline:1px solid white;
  204. outline-offset:-15px;
  205. }
  206.  
  207. .header{
  208. z-index:9999999999;
  209. font-family: 'Forum', cursive;
  210. margin-left:-40px;
  211. margin-top:30px;
  212. font-size:40px;
  213. width:160px;
  214. padding:10px;
  215. margin-bottom:15px;
  216. text-transform:uppercase;
  217. text-align:center;
  218. }
  219.  
  220. .descr {
  221. padding:10px;
  222. font-size:11px;
  223. text-align:justify;
  224. width:180px;
  225. border-top:2px solid #666;
  226. border-bottom:2px solid #666;
  227. }
  228.  
  229. .descr::first-letter {
  230. font-family: 'Forum', cursive;
  231. font-size:16px;
  232. color:white;
  233. letter-spacing:2px;
  234. }
  235.  
  236. .links{
  237. text-align:center;
  238. width:auto;
  239. padding:15px;
  240. text-transform:uppercase;
  241. }
  242.  
  243. .links a{
  244. color:#999;
  245. border:#999 1px solid;
  246. border-radius:100%;
  247. padding:5px;
  248. }
  249.  
  250. .links a:hover{
  251. color:{color:Link Hover};
  252. }
  253.  
  254. #content{
  255. background:#fff;
  256. {block:IfOneColumn}
  257. width:600px;
  258. {/block:IfOneColumn}
  259. {block:IfTwoColumns}
  260. width:670px;
  261. {/block:IfTwoColumns}
  262. height:500px;
  263. margin:auto;
  264. margin-top:50px;
  265. right:150px;
  266. position:absolute;
  267. overflow-x:scroll;
  268. -webkit-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.25);
  269. -moz-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.25);
  270. box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.25);
  271. border-top:solid 25px #777;
  272.  
  273. {block:IfOnLoadAnimations}
  274. -webkit-animation: bounceIn ยท2s;
  275. -moz-animation: bounceIn 2s;
  276. -ms-animation: bounceIn 2s;
  277. -o-animation: bounceIn 2s;
  278. animation: bounceIn 2s;
  279. {/block:IfOnLoadAnimations}
  280. }
  281.  
  282.  
  283. .post{
  284. background:#f6f6f6;
  285. float:left;
  286. display: block;
  287. margin:20px;
  288. overflow:hidden;
  289. {block:IfTwoColumns}
  290. width:250px;
  291. {/block:IfTwoColumns}
  292. {block:IfOneColumn}
  293. width:500px;
  294. {/block:IfOneColumn}
  295. padding:20px;
  296. z-index:0;
  297. text-align:left;
  298.  
  299. background:;
  300. -webkit-transition: all .7s ease;
  301. -moz-transition: all .7s ease;
  302. -o-transition: all .7s ease;
  303. transition: all .7s ease;
  304.  
  305.  
  306. }
  307.  
  308. .post img{
  309. max-width:100%;
  310. }
  311.  
  312. #nav{
  313. text-align:center;
  314. margin:50px auto auto auto;
  315. }
  316.  
  317.  
  318. .media{
  319. margin:0 0 10px 0;
  320. }
  321.  
  322. .title{
  323. font-weight:normal;
  324. font-size:18px;
  325. margin:0 0 10px 0;
  326. }
  327.  
  328. .quote{
  329. font-weight:normal;
  330. font-size:16px;
  331. font-style:italic;
  332. margin:0 0 10px 0;
  333. }
  334.  
  335. .question{
  336. margin-bottom:10px;
  337. }
  338.  
  339. blockquote{
  340. margin:0 0 10px 10px;
  341. padding:0 0 0 10px;
  342. border-left:solid 2px #888888
  343. }
  344.  
  345. .post .footer{
  346. text-align:center;
  347. }
  348.  
  349. .post .footer a{
  350. color:{color:Link};
  351. }
  352.  
  353. .caption{
  354. padding:10px;
  355. }
  356.  
  357.  
  358. ::selection {
  359. background: {color:Highlight};
  360. }
  361. ::-moz-selection {
  362. background: {color:Highlight};
  363. }
  364.  
  365. ol.notes{
  366. list-style-type:decimal;
  367. margin:40px;
  368. padding-left:35px;
  369. }
  370.  
  371. ol.notes li.note img{
  372. display:none;
  373. }
  374.  
  375.  
  376. ol.notes li.note{
  377. margin-top:10px;
  378. }
  379.  
  380. #credit{
  381. position: fixed;
  382. bottom: 4px;
  383. right: 12px;
  384. color:{color:Link};
  385. z-index: 99;
  386. font-size: 16px;
  387. }
  388.  
  389. #audioplayer {
  390. width:30px;
  391. height:30px;
  392. margin-left:34px;
  393. overflow:hidden;
  394. position:absolute;
  395. margin-top:40px;
  396. }
  397.  
  398. #top {
  399. height:17px;
  400. width:100%;
  401. top:0;
  402. border-bottom:3px solid #eee;
  403. border-top:3px solid #777;
  404. z-index:999;
  405. position:fixed;}
  406.  
  407. #left {
  408. width:17px;
  409. height:100%;
  410. border-right:3px solid #eee;
  411. border-left:3px solid #777;
  412. z-index:999;
  413. left:0;
  414. top:3px;
  415. position:fixed;}
  416.  
  417. {CustomCSS}
  418. </style>
  419.  
  420. </head>
  421.  
  422. <body>
  423.  
  424. <div id="top"></div>
  425. <div id="left"></div>
  426.  
  427. <div id="wrapper">
  428.  
  429. <div id="sidebar">
  430.  
  431. <div id="sidebar img">
  432. <a href="/" title="home"><img src="{image:Sidebar}">{Avatar}</a>
  433. </div>
  434.  
  435. <div class="header">{Title}</div>
  436.  
  437. <div class="descr">{Description}</div>
  438.  
  439. <div class="links">
  440. <a href="{text:Link One URL}"><i class="fas fa-home" title="{text:Link One}"></i></a>
  441. <span style="color:#666; font-size:20px; padding:10px"> / </span>
  442. <a href="{text:Link Two URL}"><i class="far fa-envelope-open" title="{text:Link Two}"></i></a>
  443. <span style="color:#666; font-size:20px; padding:10px"> / </span>
  444. <a href="{text:Link Three URL}"><i class="fas fa-ellipsis-h" title="{text:Link Three}"></i></a>
  445. </div>
  446.  
  447. </div>
  448.  
  449. {block:HasPages}
  450. {block:Pages}
  451. <a href="{URL}">{Label}</a><br>
  452. {/block:Pages}
  453. {/block:HasPages}
  454.  
  455. <div id="content">
  456.  
  457. {block:Posts}
  458.  
  459. <div class="post">
  460.  
  461. {block:Text}
  462. {block:Title}
  463. <div class="title">{Title}</div>
  464. {/block:Title}
  465. {Body}
  466. {/block:Text}
  467.  
  468. {block:Photo}
  469. <div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
  470. {block:caption}
  471. <div class="caption">{caption}</div>
  472. {/block:caption}
  473.  
  474. {/block:Photo}
  475.  
  476. {block:Photoset}
  477. <div class="media" style="width:200px">{Photoset}</div>
  478. {block:caption}
  479. <div class="caption">{caption}</div>
  480. {/block:caption}
  481. {/block:Photoset}
  482.  
  483. {block:Quote}
  484. <div class="quote">"{Quote}"</div>
  485. {block:Source}
  486. <div class="quotesource">{Source}</div>
  487. {/block:Source}
  488. {/block:Quote}
  489.  
  490. {block:Link}
  491. <div class="title"><a href="{URL}">{Name}</a></div>
  492. {block:Description}
  493. <div class="description">{Description}</div>
  494. {/block:Description}
  495. {/block:Link}
  496.  
  497. {block:Chat}
  498. {block:Title}
  499. <div class="title">{Title}</div>
  500. {/block:Title}
  501.  
  502. {block:Lines}
  503. <div class="{Alt} user_{UserNumber}">
  504. {block:Label}
  505. <b>{Label}</b>{/block:Label}
  506. &nbsp;{Line}
  507. </div>
  508. {/block:Lines}
  509. {/block:Chat}
  510.  
  511. {block:Video}
  512. <div class="media">{Video-400}</div>
  513. {block:Caption}
  514. <div class="caption">{Caption}</div>
  515. {/block:Caption}
  516. {/block:Video}
  517.  
  518. {block:Audio}
  519. <div id="audioplayer">{AudioPlayerWhite} </div>
  520. <div id="albumart">
  521. {block:AlbumArt}
  522. <img src="{AlbumArtURL}" width="100">
  523. {/block:AlbumArt}
  524. </div>
  525. {block:caption}
  526. <div class="caption">{caption}</div>
  527. {/block:caption}
  528. {/block:Audio}
  529.  
  530. {block:Answer}
  531. <div class="question">{Asker}: {Question}</div>
  532. <div class="caption">{Answer}</div>
  533. {/block:Answer}
  534.  
  535. {block:Date}
  536. <div class="footer">
  537. <a href="{Permalink}">{ShortMonth} {DayOfMonth}</a>
  538. (<a href="{ReblogURL}" target="_blank" class="details">reblog</a>)
  539. {block:RebloggedFrom}
  540. <a href="{ReblogParentURL}" title="via">via</a>
  541. {/block:RebloggedFrom}
  542. {block:ContentSource}
  543. <a href="{SourceURL}" title="source">source</a>
  544. {/block:ContentSource}<br>
  545.  
  546. {block:PermalinkPage}
  547. {block:HasTags}
  548. {block:Tags}
  549. <a href="{TagURL}">#{Tag}</a>
  550. {/block:Tags}
  551. {/block:HasTags}
  552. {/block:PermalinkPage}
  553. </div>
  554. {block:PermalinkPage}
  555. {block:NoteCount}
  556. {block:PostNotes}{PostNotes}{/block:PostNotes}
  557. {/block:NoteCount}
  558. {/block:PermalinkPage}
  559. {/block:Date}
  560.  
  561. </div>
  562. {/block:Posts}
  563.  
  564. {block:Pagination}
  565. <div id="nav">
  566. {block:PreviousPage}
  567. <a href="{PreviousPage}">previous</a> /
  568. {/block:PreviousPage}
  569.  
  570. {block:NextPage}
  571. <a href="{NextPage}">forward</a>
  572. {/block:NextPage}
  573. </div>
  574. {/block:Pagination}
  575. </div>
  576. </div>
  577.  
  578.  
  579. <div style="z-index:999999999999999999999999999; position:fixed; bottom:3px; right:10px; opacity:.7;">
  580. <a href="http://ughthms.tumblr.com" title="Theme by Montana.">
  581. <span style="color:#000; font-size:20px">๐–€.</span>
  582. </a>
  583. </div>
  584.  
  585. </div>
  586.  
  587. </body>
  588. </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!