API tools faq
paste
Advertisement
dyckgrayson

ILLYA'S THEME ( CUSTOM ) FOR BROGEN

dyckgrayson
Jan 18th, 2018
84
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.03 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  7.  
  8. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  9.  
  10.  
  11. <script>
  12.  
  13. (function($){
  14.  
  15. $(document).ready(function(){
  16.  
  17. $("a[title]").style_my_tooltips({
  18.  
  19. tip_follows_cursor:true,
  20.  
  21. tip_delay_time:90,
  22.  
  23. tip_fade_speed:600,
  24.  
  25. attribute:"title"
  26.  
  27. });
  28.  
  29. });
  30.  
  31. })(jQuery);
  32.  
  33. </script>
  34.  
  35. <!--basic tooltip from tutorial-baby! Enjoy-->
  36.  
  37. <style>
  38.  
  39. .tooltip {
  40. display: inline;
  41. position: relative;
  42. }
  43.  
  44. #s-m-t-tooltip {
  45. max-width:300px;
  46. border-radius: 0px;
  47. padding:3px 4px 5px 4px;
  48. margin:10px 7px -2px 20px;
  49. background-color:transparent;
  50. border-bottom:0px double #ccc;
  51. font-family:calibri;
  52. font-size:7px;
  53. letter-spacing:2px;
  54. text-transform:uppercase;
  55. text-shadow:1px 1px 10px #;
  56. color:#111;
  57. z-index:999999999999999999999999999999999999;
  58. }
  59.  
  60. </style>
  61.  
  62. <title>{text:Tab Title}</title>
  63. <link rel="shortcut icon" href="{image:Favicon}">
  64. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  65. {block:Description}
  66. <meta name="description" content="{MetaDescription}" />
  67. {/block:Description}
  68. </head>
  69.  
  70. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  71.  
  72. <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
  73.  
  74. <meta name="text:rgb values" content="in the format '100,100,100' or it won't work"/>
  75.  
  76. <meta name="image:favicon" content=""/>
  77. <meta name="image:sidebar small" content=""/>
  78. <meta name="image:sidebar large" content=""/>
  79.  
  80. <meta name="text:tab title" content="/"/>
  81. <meta name="text:sidebar title" content=""/>
  82. <meta name="text:description" content=""/>
  83. <meta name="text:dossier url" content="/"/>
  84. <meta name="text:rules url" content="/"/>
  85. <meta name="text:your url" content="the url only (not '.tumblr.com')"/>
  86.  
  87. <meta name="text:updates title" content="updates"/>
  88. <meta name="text:updates" content="whatever you gotta say"/>
  89.  
  90. <style type="text/css">
  91.  
  92. ::-webkit-scrollbar {
  93. width: 0px;
  94. height: 0px;
  95. background: #f5f5f5;
  96. }
  97.  
  98. ::-webkit-scrollbar-thumb {
  99. background: rgb({text:rgb values});
  100. }
  101.  
  102.  
  103. ::-webkit-scrollbar, ::-webkit-scrollbar-thumb {
  104. border: 0px solid #fff;
  105. }
  106.  
  107. body {
  108. background-color:white;
  109. font-family:calibri;
  110. font-size: 9px;
  111. line-height:170%;
  112. text-align:justify;
  113. color:#111;
  114. background-image:url('');
  115. background-position: top right;
  116. background-repeat:no-repeat;
  117. background-attachment:fixed;
  118. letter-spacing:1px;
  119. overflow-x:hidden;
  120. }
  121.  
  122. small, sup, sub {
  123. font-size:9px;
  124. }
  125.  
  126. a {
  127. text-decoration:none;
  128. color:rgb({text:rgb values});
  129. font-size:8px;
  130. font-family:cambira;
  131. text-transform:uppercase;
  132. display: inline-block;
  133. position: relative;
  134. padding-bottom: 3px;
  135. cursor:help;
  136.  
  137. }
  138.  
  139. a:after {
  140. content: '';
  141. display: block;
  142. margin: auto;
  143. height: 1px;
  144. width: 0px;
  145. background: transparent;
  146. transition: width .5s ease, background-color .5s ease;
  147. -webkit-transition: width .5s ease, background-color .5s ease;
  148. -moz-transition: width .5s ease, background-color .5s ease;
  149. -o-transition: width .5s ease, background-color .5s ease;
  150. }
  151.  
  152. a:hover:after {
  153. width: 100%;
  154. background: rgb({text:rgb values});
  155. }
  156.  
  157. bold, b, strong {
  158. font-size:7px;
  159. font-family:georgia;
  160. text-transform:uppercase;
  161. color:black;
  162. letter-spacing:1px;
  163. }
  164.  
  165. italics, i, em {
  166. font-size:8px;
  167. text-transform:uppercase;
  168. color:rgb({text:rgb values});
  169. }
  170.  
  171. code {
  172. font-family:courier;
  173. color:rgba({text:rgb values},.5);
  174. }
  175.  
  176. date {
  177. color:rgba({text:rgb values},1);
  178. }
  179.  
  180. entry {
  181. padding:4px;
  182. border-radius:3px;
  183. margin:10px;
  184. line-height:150%;
  185. text-align:justify;
  186. text-shadow: 1px 0px 0px #eee;
  187. }
  188.  
  189. pre {
  190. padding:8px;
  191. overflow-x:auto;
  192. overflow-y:auto;
  193. }
  194.  
  195. blockquote {
  196. border-left:1px solid #eee;
  197. padding:2px 20px;
  198. margin:5px
  199. }
  200.  
  201. blockquote, blockquote {
  202. margin:-2px 0 -2px 0;
  203. }
  204.  
  205. blockquote img {
  206. max-width:100%;
  207. height:auto;
  208. padding:0px 5px 5px 0px
  209. margin-top:5px;
  210. border-radius:3px;
  211. }
  212.  
  213. img {
  214. max-width:100%;
  215. height:auto;
  216. }
  217.  
  218. ::selection {
  219. background:transparent;
  220. color:white;
  221. }
  222.  
  223. h1 {
  224. background:rgba(255,255,255,.1);
  225. font-size:9px;
  226. font-family:consolas;
  227. letter-spacing:2px;
  228. padding:7px;
  229. text-align:center;
  230. text-transform:uppercase;
  231. }
  232.  
  233. h2 {
  234. font-size:14px;
  235. }
  236.  
  237. h3 {
  238. background:#ccc;
  239. color:white;
  240. letter-spacing:-3px;
  241. font-size:30px;
  242. font-family:georgia;
  243. font-weight:bold;
  244. text-transform:lowercase;
  245. text-align:center;
  246. font-style:italic;
  247. padding:10px;
  248. border-radius:0 25px 0 25px;
  249. border:4px double #fff;
  250. }
  251.  
  252. h5 {
  253. position:fixed;
  254. background:transparent;
  255. width:100px;
  256. text-align:center;
  257. color:black;
  258. font-family: consolas;
  259. font-size:8px;
  260. letter-spacing:4px;
  261. text-transform:uppercase;
  262. margin-top:160px;
  263. margin-left:400px;
  264. margin-bottom:5px;
  265. line-height:110%;
  266. }
  267.  
  268. .posts {
  269. position:relative;
  270. height:100%;
  271. left:600px;
  272. width:200px;
  273. background-color:#fdfdfd;
  274. margin-top:50px;
  275. margin-bottom:300px;
  276. margin-right:20px;
  277. margin-left:50px;
  278. border:1px solid #f5f5f5;
  279. border-radius:0px;
  280. outline:1px dashed #f5f5f5;
  281. outline-offset:4px;
  282. padding:10px;
  283. }
  284.  
  285. .permalinks {
  286. background:transparent;
  287. text-align:center;
  288. overflow-x:hidden;
  289. border-top:px solid #f5f5f5;
  290. padding:5px 20px 0px 20px;
  291. margin:0px -10px -0px -10px;
  292. }
  293.  
  294. .permalinks a {
  295. color:#000
  296. font-family:calibri;
  297. font-size:8px;
  298. text-transform:none;
  299. text-shadow:none;
  300. }
  301.  
  302. .date, .reblogs {
  303. }
  304.  
  305. #sidebar {
  306. position:fixed;
  307. margin-top:170px;
  308. }
  309.  
  310. #description {
  311. background:transparent;
  312. width:100px;
  313. max-height:83px;
  314. overflow:auto;
  315. text-align:justify;
  316. margin-top:0;
  317. margin-left:400px;
  318. padding-top:0px;
  319. padding-bottom:0px;
  320. line-height:155%;
  321. border-bottom:0px dashed rgba({text:rgb values},.2);
  322. border-radius:0 0 0px 0px;
  323. }
  324.  
  325. #links {
  326. width:100px;
  327. text-align:center;
  328. margin-left:400px;
  329. margin-bottom:-5px;
  330. margin-top:1px;
  331. background:#eee;
  332. line-height:70%;
  333. padding-top:5px;
  334. }
  335.  
  336. #links a {
  337. font-family:consolas;
  338. }
  339.  
  340. #sidebar img {
  341. max-width:100px;
  342. margin-left:400px;
  343. margin-bottom:-4px;
  344. border-bottom:16px solid #;
  345. border-radius:0px 3px 0 0;
  346. }
  347.  
  348. #ivy img {
  349. position:fixed;
  350. max-width:100px;
  351. max-height:252px;
  352. border-radius:3px 0px 0px 3px;
  353. margin-top:170px;
  354. margin-left:295px;
  355. }
  356.  
  357. #pagination {
  358. margin-top:-200px;
  359. margin-left:200px;
  360. padding-bottom:50px;
  361. text-align:center;
  362. }
  363.  
  364. #pagination a {
  365. color:#000;
  366. font-weight:bold;
  367. }
  368.  
  369. .asker {
  370. letter-spacing:2px;
  371. font-family:georgia;
  372. font-weight:bold;
  373. text-transform:uppercase;
  374. }
  375.  
  376. .askerportrait img {
  377. border:8px solid #eee;
  378. border-radius:5px;
  379. margin-bottom:8px;
  380. }
  381.  
  382. .question {
  383. padding:10px 15px 10px 15px;
  384. background:#fdfdfd;
  385. border-radius:3px 3px 0 0;
  386. border-bottom:2px solid #fff;
  387. margin:-10px -10px 10px -10px;
  388. }
  389.  
  390. .quote {
  391. font-family:calibri;
  392. text-transform:uppercase;
  393. font-size:11px;
  394. text-align:center;
  395. line-height:90%;
  396. }
  397.  
  398. .quotesource {
  399. margin-top:5px;
  400. text-align:center;
  401. text-transform:lowercase;
  402. font-style:italic;
  403. }
  404.  
  405. .audio {
  406. }
  407.  
  408. .odd, .even {
  409. list-style-type:none;
  410. padding:5px;
  411. }
  412.  
  413. .odd {
  414. background:rgba(255,255,255,.1);
  415. }
  416.  
  417. .label {
  418. list-style-type:none;
  419. font-weight:bold;
  420. text-transform:uppercase;
  421. }
  422.  
  423. ol.notes {
  424. list-style-type:none;
  425. width:400px;
  426. margin-left:530px;
  427. margin-top:-250px;
  428. }
  429.  
  430. ol.notes a {
  431. font-style:italic;
  432. }
  433.  
  434. ol.notes li.note img.avatar {
  435. border-radius:7px;
  436. padding:5px;
  437. vertical-align:-10px;
  438. }
  439.  
  440. #audioplayer {
  441. width:30px;
  442. height:30px;
  443. overflow:hidden;
  444. position:absolute;
  445. margin-top:360px;
  446. margin-left:360px;
  447. opacity:.2;
  448. }
  449.  
  450. #x {
  451. position:absolute;
  452. bottom:0;
  453. opacity:0;
  454. }
  455.  
  456. #x a {
  457. color:white;
  458. text-shadow:none;
  459. opacity:0;
  460. }
  461.  
  462.  
  463. #credit a {
  464. position:fixed;
  465. bottom:-3px;
  466. right:3px;
  467. color:black;
  468. text-transform:uppercase;
  469. font-family:helvetica;
  470. }
  471.  
  472. #credit img {
  473. width:20px;
  474. }
  475.  
  476. .photo {
  477. margin:-10px -10px;
  478. }
  479.  
  480. .photo img {
  481. border-radius:0px 0px 0 0 ;
  482. }
  483.  
  484. #selina {
  485. position:fixed;
  486. top:10px;
  487. margin-left:5px;
  488. width:150px;
  489. height:700px;
  490. }
  491.  
  492. #selinasays {
  493. margin-top:5px;
  494. opacity:0;
  495. -webkit-transition: all 0.7s ease;
  496. -moz-transition: all 0.7s ease;
  497. -o-transition: all 0.7s ease;
  498. }
  499.  
  500. #selina:hover #selinasays {
  501. opacity:1;
  502. -webkit-transition: all 0.7s ease;
  503. -moz-transition: all 0.7s ease;
  504. -o-transition: all 0.7s ease;
  505. }
  506.  
  507. #selinatitle {
  508. font-size:9px;
  509. font-weight:normal;
  510. letter-spacing:2px;
  511. color:rgba({text:rgb values},1);
  512. }
  513.  
  514. #selinasays a {
  515. font-family:calibri;
  516. font-size:7px;
  517. }
  518.  
  519. #mydiv {
  520. position: absolute;
  521. width:250px;
  522. height:150px;
  523. left:1050px;
  524. top:400px;
  525. z-index: 7;
  526. background-color: #fdfdfd;
  527. border: 1px solid #f5f5f5;
  528. border-radius:3px;
  529. text-align: left;
  530. font-family:consolas;
  531. font-size:7px;
  532. }
  533.  
  534. #mydivheader {
  535. padding: 5px;
  536. cursor: move;
  537. z-index: 8;
  538. background-color: rgba({text:rgb values},.8);
  539. border-radius:3px 3px 0 0;
  540. color: #fff;
  541. text-align:right;
  542. font-family:consolas;
  543. }
  544.  
  545. #mydiv2 {
  546. position: absolute;
  547. width:250px;
  548. height:150px;
  549. left:1150px;
  550. top:475px;
  551. z-index: 9;
  552. background-color: #fdfdfd;
  553. border: 1px solid #f5f5f5;
  554. border-radius:3px;
  555. text-align: left;
  556. font-family:consolas;
  557. font-size:7px;
  558. }
  559.  
  560. #mydivheader2 {
  561. padding: 5px;
  562. cursor: move;
  563. z-index: 10;
  564. background-color: rgba({text:rgb values},.8);
  565. border-radius:3px 3px 0 0;
  566. color: #fff;
  567. text-align:right;
  568. font-family:consolas;
  569. }
  570.  
  571. </style>
  572. <body>
  573.  
  574. <div id="selina">
  575. <div id="selinatitle"><span style="background:rgba({text:rgb values},.2);width:100px;">&emsp;</span>&nbsp;{text:updates title}</div>
  576. <div id="selinasays">
  577.  
  578. {text:updates}
  579.  
  580. </div>
  581. </div>
  582.  
  583. <h5>{text:sidebar title}</h5>
  584. <div id="ivy"><img src="{image:sidebar large}"></div>
  585. <div id="sidebar">
  586. <img src="{image:sidebar small}"/>
  587. <div id="description">{text:description}
  588.  
  589. </div>
  590. <div id="links">
  591. <a href="/">INDX</a>
  592. <a href="/ask">MSG</a>
  593. <a href="{text:dossier link}">DOS</a>
  594. <a href="{text:rules link}">RLS</a>
  595. </div>
  596. </div>
  597.  
  598. <div id="container">
  599.  
  600. {block:Posts}
  601.  
  602. <div class="posts">
  603.  
  604. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  605.  
  606. {block:Photo}<center><div class="photo"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></div></center>{block:Caption}<p>&nbsp;</p>{Caption}{/block:Caption}{/block:Photo}
  607.  
  608. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  609.  
  610. {block:Photoset}<div class="photo">{Photoset}</div>{block:Caption}<p>&nbsp;</p>{Caption}{/block:Caption}{/block:Photoset}
  611.  
  612. {block:Quote}<div class="quote">{Quote}</div>{block:Source}<div class="quotesource">{Source}</div>{/block:Source}{/block:Quote}
  613.  
  614. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  615.  
  616. {block:Chat}{block:Title}{Title}</a>{/block:Title}
  617. {block:Lines}<li class="{Alt} user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}{/block:Chat}
  618.  
  619. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  620.  
  621. {block:Audio}
  622. <div id= "audioplayer">{AudioPlayerBlack}</div>
  623. {block:AlbumArt}
  624. <img src="{AlbumArtURL}" width="400">
  625. {/block:AlbumArt}
  626. {/block:Audio}
  627.  
  628.  
  629. {block:Answer}
  630. <div class="question"><span style="font-family:georgia;color:#111;font-size:8px;margin:auto auto auto -16px;font-weight:bold;background:white;padding:3px;border-radius:0 1px 1px 0">&emsp;{Asker} Q:</span> &emsp;{Question}</div>
  631. <p><span style="font-family:georgia;color:#111;font-size:8px;margin:auto -11px;font-weight:bold;background:white;text-transform:uppercase;padding:3px;border-radius:0 1px 1px 0">&emsp;{text:your url} A:</span>{Answer}</span></p>
  632. {/block:Answer}
  633.  
  634. <div class="permalinks">
  635. <br>
  636. <div class="date" style="background:rgba({text:rgb values},.2);padding:6px 4px 4px 4px;margin:3px -10px"><b><a href="{Permalink}" style="text-transform:uppercase;font-family:calibri;float:left;padding-left:2px;">{DayOfMonth} {ShortMonth} {Year} </a></b> &emsp;<a href="{Permalink}" style="font-family:calibri;letter-spacing:0px;float:right;padding-right:2px;">{block:NoteCount}{NoteCount}N{/block:NoteCount}</a></div>
  637.  
  638. <div class="tags" style="margin:0 -8px;">{block:HasTags}{block:Tags}<a style="color:#ccc;" href="{TagUrl}">&emsp;{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  639.  
  640. </div></div>
  641. {PostNotes-16}
  642.  
  643. {/block:Posts}
  644.  
  645.  
  646. <div id="pagination">{block:Pagination}
  647. {block:PreviousPage}<a href="{PreviousPage}">PREV</a>{/block:PreviousPage}&emsp;{block:NextPage}<a href="{NextPage}">NEXT</a>
  648. {/block:NextPage}
  649. {/block:Pagination}</div>
  650.  
  651. </div>
  652.  
  653. {block:ContentSource}
  654. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  655. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  656. {/block:SourceLogo}
  657. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  658. {/block:ContentSource}
  659.  
  660. <div id="x">
  661.  
  662.  
  663.  
  664. </div>
  665.  
  666.  
  667. <div id="credit">
  668.  
  669. <a href="/" title="for brogen. by fawn."><img src="http://static.tumblr.com/fktecop/Ndjoty9mo/fawn__1_.png"></a>
  670.  
  671. </div>
  672.  
  673. <script>
  674. //Make the DIV element draggagle:
  675. dragElement(document.getElementById(("mydiv")));
  676. dragElement(document.getElementById(("mydiv2")));
  677.  
  678. function dragElement(elmnt) {
  679. var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  680. if (document.getElementById(elmnt.id + "header")) {
  681. /* if present, the header is where you move the DIV from:*/
  682. document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  683. } else {
  684. /* otherwise, move the DIV from anywhere inside the DIV:*/
  685. elmnt.onmousedown = dragMouseDown;
  686. }
  687.  
  688. function dragMouseDown(e) {
  689. e = e || window.event;
  690. // get the mouse cursor position at startup:
  691. pos3 = e.clientX;
  692. pos4 = e.clientY;
  693. document.onmouseup = closeDragElement;
  694. // call a function whenever the cursor moves:
  695. document.onmousemove = elementDrag;
  696. }
  697.  
  698. function elementDrag(e) {
  699. e = e || window.event;
  700. // calculate the new cursor position:
  701. pos1 = pos3 - e.clientX;
  702. pos2 = pos4 - e.clientY;
  703. pos3 = e.clientX;
  704. pos4 = e.clientY;
  705. // set the element's new position:
  706. elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
  707. elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  708. }
  709.  
  710. function closeDragElement() {
  711. /* stop moving when mouse button is released:*/
  712. document.onmouseup = null;
  713. document.onmousemove = null;
  714. }
  715. }
  716. </script>
  717.  
  718. <script>
  719. /* When the user clicks on the button,
  720. toggle between hiding and showing the dropdown content */
  721. function myFunction() {
  722. document.getElementById("myDropdown").classList.toggle("show");
  723. }
  724.  
  725. // Close the dropdown menu if the user clicks outside of it
  726. window.onclick = function(event) {
  727. if (!event.target.matches('.dropbtn')) {
  728.  
  729. var dropdowns = document.getElementsByClassName("dropdown-content");
  730. var i;
  731. for (i = 0; i < dropdowns.length; i++) {
  732. var openDropdown = dropdowns[i];
  733. if (openDropdown.classList.contains('show')) {
  734. openDropdown.classList.remove('show');
  735. }
  736. }
  737. }
  738. }
  739. </script>
  740.  
  741.  
  742.  
  743. </body>
  744.  
  745.  
  746. </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!