bridgetowakanda

THEME 004: DESERT WARMTH by THEMESBYZORRA

Nov 24th, 2018
568
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.99 KB | None | 0 0
  1. <html>
  2.  
  3. <!------------------------------ FONTS ----------------------------->
  4.  
  5. <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
  6. <link href="https://fonts.googleapis.com/css?family=Contrail+One" rel="stylesheet">
  7. <link href="https://fonts.googleapis.com/css?family=Rozha+One" rel="stylesheet">
  8. <link href="https://fonts.googleapis.com/css?family=Limelight" rel="stylesheet">
  9. <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
  10. <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
  11. <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
  12.  
  13.  
  14.  
  15. <html>
  16. <!--
  17. - BASE CODE
  18. https://fratdadbase.tumblr.com/
  19.  
  20. - THEME BY ZORRA @ THEMESBYZORRA
  21. - THEME IS FREE FOR USE BY THE TUMBLR COMMUNITY. PLEASE LEAVE CREDIT WHERE IT IS DUE.
  22. - I PREFER IF YOU DIDN'T BUTURE MY CODE TO MAKE YOUR OWN BASECODE. BUT IF YOU HAPPEN TO TAKE ELEMENTS FROM THIS THEME, PLEASE CREDIT SOMEWHERE IN THE THEME.
  23. - THEME 004: DESERT WARMTH by THEMESBYZORRA
  24.  
  25. -->
  26.  
  27.  
  28. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  29. <head>
  30. <title>{Title}</title>
  31. <link rel="shortcut icon" href="{Favicon}">
  32. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  33. {block:Description}
  34. <meta name="description" content="{MetaDescription}" />
  35. {/block:Description}
  36.  
  37.  
  38. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  39.  
  40. <!------------------------------ SCRIPTS ----------------------------->
  41. <!------------------------------ POPUP ------------------------------>
  42.  
  43.  
  44. <script type="text/javascript"
  45. src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  46. <script>
  47. $(document).ready(function() {
  48. //
  49. $('a.poplight[href^=#]').click(function() {
  50. var popID = $(this).attr('rel'); //Get Popup Name
  51. var popURL = $(this).attr('href'); //Get Popup href to define size
  52. var query= popURL.split('?');
  53. var dim= query[1].split('&');
  54. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  55. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close">');
  56. var popMargTop = ($('#' + popID).height() + 80) / 2;
  57. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  58. //Apply Margin to Popup
  59. $('#' + popID).css({
  60. 'margin-top' : -popMargTop,
  61. 'margin-left' : -popMargLeft
  62. });
  63. $('body').append('<div id="fade"></div>');
  64. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  65. return false;
  66. });
  67. $('a.close, #fade').live('click', function() {
  68. $('#fade , .popup_block').fadeOut(function() {
  69. $('#fade, a.close').remove(); //fade them both out
  70. });
  71. return false;
  72. });
  73. });
  74. </script>
  75.  
  76.  
  77.  
  78.  
  79. <!----------------------------- TOOLTLIP ----------------------------->
  80.  
  81.  
  82. <link href="https://static.tumblr.com/5omyijl/bzrn2yg7i/style-my-tooltips.css" rel="stylesheet" type="text/css" />
  83. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  84. <script src="https://static.tumblr.com/5omyijl/RZtn2yg9v/jquery.style-my-tooltips.js"></script>
  85. <script>
  86. (function($){
  87. $(document).ready(function(){
  88. $("[title]").style_my_tooltips({
  89. tip_follows_cursor:true,
  90. tip_delay_time:200,
  91. tip_fade_speed:500
  92. });
  93. });
  94. })(jQuery);
  95. </script>
  96.  
  97.  
  98.  
  99. <!------------------------------ VIDEO ------------------------------>
  100.  
  101. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  102. <script>
  103. $(document).ready(function(){
  104. $('.video iframe').each(function(){
  105. var scale = $(this).parents('.video').width() / 500;
  106. $(this).attr({
  107. width: Math.floor($(this).attr('width') * scale),
  108. height: Math.floor($(this).attr('height') * scale)
  109. });
  110. });
  111. });
  112. </script>
  113.  
  114. <!---------------------------- META DATA ----------------------------->
  115. <meta name="image:Background" content="" />
  116. <meta name="image:headerbackground" content=""/>
  117. <meta name="image:icon 1" content=""/>
  118. <meta name="image:icon 2" content=""/>
  119. <meta name="image:icon 3" content=""/>
  120. <meta name="image:icon 4" content=""/>
  121. <meta name="image:icon 5" content=""/>
  122. <meta name="image:icon 6" content=""/>
  123.  
  124. <meta name="text:Starters" content="00"/>
  125. <meta name="text:Drafts" content="00"/>
  126. <meta name="text:Memes" content="00"/>
  127. <meta name="text:Quote" content="Place a quote here" />
  128. <meta name="text:subquote" content="subquote here. adjust margin to line the next up." />
  129.  
  130.  
  131. <meta name="color:background" content="#f6f6f6" />
  132. <meta name="color:postbackground" content="#ffffff" />
  133. <meta name="color:font" conteont="#b2b1b1" />
  134. <meta name="color:italic" content="#cac8c8" />
  135. <meta name="color:bold" content="#9f9d9d" />
  136. <meta name="color:postborder" content="#ecebeb" />
  137. <meta name="color:info" content="#cac8c8" />
  138. <meta name="color:infohover" content="#000000" />
  139. <meta name="color:blockquote" content="#000000" />
  140. <meta name="color:link" content="#222222" />
  141. <meta name="color:linkhover" content="#333333" />
  142. <meta name="color:navi" content="#ffffff" />
  143. <meta name="color:navihover" content="#222222" />
  144. <meta name="color:navibg" content="#cb988b" />
  145. <meta name="color:navihoverbg" content="#8f6459" />
  146. <meta name="color:h1" content="#ffffff" />
  147. <meta name="color:h1shadow" content="#222222" />
  148. <meta name="color:h2" content="#e7dcd6" />
  149. <meta name="color:h3" content="#111111" />
  150. <meta name="color:h3background" content="#c8c6bf" />
  151. <meta name="color:h4" content="#222222" />
  152. <meta name="color:question" content="#f5f3f3" />
  153. <meta name="color:questionborder" content="#bbbbbb" />
  154. <meta name="color:popuplink" content="#111111" />
  155.  
  156. <meta name="select:info link background" content="#ffffff" title="white"/>
  157. <meta name="select:info link background" content="#000000" title="black"/>
  158.  
  159.  
  160. <meta name="select:header font1" content="'Rozha One', serif;" title="Rozha"/>
  161. <meta name="select:header font1" content="'Limelight', cursive;" title="Limelight"/>
  162. <meta name="select:header font1" content="'Anton', sans-serif;" title="Anton"/>
  163.  
  164. <meta name="select:header font2" content="'Rozha One', serif;" title="Rozha"/>
  165. <meta name="select:header font2" content="'Limelight', cursive;" title="Limelight"/>
  166. <meta name="select:header font2" content="'Anton', sans-serif;" title="Anton"/>
  167.  
  168.  
  169. </head>
  170.  
  171.  
  172.  
  173.  
  174.  
  175. <style type="text/css">
  176.  
  177. @font-face​ {
  178. font-family:"big noodle titling";
  179. src:url(https://dl.dropbox.com/s/j5blixn0eu397vv/big_noodle_titling.ttf');
  180. }
  181.  
  182. /*---------------------------- SCROLL BAR ---------------------------*/
  183. ::-webkit-scrollbar {
  184. width: 2px;
  185. height: 2px;
  186. }
  187. ::-webkit-scrollbar-button {
  188. width: 0px;
  189. height: 0px;
  190. }
  191. ::-webkit-scrollbar-thumb {
  192. background: transparent;
  193. border: 0px none #a68b7c;
  194. border-radius: 50px;
  195. }
  196. ::-webkit-scrollbar-thumb:hover {
  197. background: transparent;
  198. }
  199. ::-webkit-scrollbar-thumb:active {
  200. background: transparent;
  201. }
  202. ::-webkit-scrollbar-track {
  203. background: transparent;
  204. border: 0px none #a68b7c;
  205. border-radius: 0px;
  206. }
  207. ::-webkit-scrollbar-track:hover {
  208. background:transparent;
  209. }
  210. ::-webkit-scrollbar-track:active {
  211. background: transparent;
  212. }
  213. ::-webkit-scrollbar-corner {
  214. background: transparent;
  215. }
  216.  
  217.  
  218. /*---------------------------- SELECTION ---------------------------*/
  219.  
  220. ::SELECTION {BACKGROUND: {color:bold}; COLOR:#e7e5d1; }
  221. ::-MOZ-SELECTION {BACKGROUND: {color:bold}; COLOR:#e7e5d1; }
  222.  
  223.  
  224.  
  225. /*---------------------------- BODY ---------------------------*/
  226.  
  227. body {
  228. background-color:{color:background};
  229. background-image:url('{image:background}');
  230. background-attachment: fixed;
  231. background-repeat: no-repeat;
  232. font-family: 'Abel', sans-serif;
  233. font-size: 10px;
  234. text-align: justify;
  235. color: {color:font};
  236. }
  237.  
  238. .navbar {
  239. position: fixed;
  240. top:0px;
  241. width: 450px;
  242. height: 100px;
  243. margin-left: 440px;
  244. background-color: {color:background};
  245. border-bottom: 3px solid {color:postborder};
  246. z-index: 999;
  247. }
  248.  
  249.  
  250.  
  251. #navbarquote {
  252. font-size: 20px;
  253. color: {color:bold};
  254. text-shadow: 1px 1px 1px {color:italic};
  255. }
  256.  
  257. #container {
  258. position:absolute;
  259. background-color: transparent;
  260. width: 460px;
  261. top: -5px;
  262. margin-top:100px;
  263. margin-left: 410px;
  264. height:100%;
  265. padding: 10px;
  266. overflow:auto;
  267. overflow-x:hidden;
  268.  
  269. }
  270.  
  271. .posts {
  272. background-color: {color:postbackground};
  273. border: 0px double {color:postborder};
  274. width:400px;
  275. margin-left:30px;
  276. margin-bottom:20px;
  277. padding: 13px;
  278.  
  279. }
  280.  
  281. #container img {
  282. height:auto;
  283. max-width:100%;
  284. }
  285.  
  286. #post img {
  287. height: auto;
  288. max-width: 100%;
  289. }
  290.  
  291.  
  292. /*---------------------- QUESTIONS & ANSWERS ------------------------*/
  293.  
  294. #askerurl {
  295. text-transform:uppercase;
  296. font-weight:400;
  297. font-size:20px;
  298. margin-top:80px;
  299. margin-left:50px;
  300. padding-bottom:5px;
  301. width:250px;
  302. font-family: 'Orbitron', sans-serif;
  303. text-align:center;
  304. }
  305.  
  306. #asking img {
  307. padding: 5px;
  308. }
  309.  
  310. #question {
  311. background-attachment:auto;
  312. background-image: url('');
  313. padding:15px 15px;
  314. margin:3px 0 3px 10px;
  315. border-top-left-radius: 2px;
  316. border-top-right-radius: 2px;
  317. border-bottom:2px solid {color:questionborder};
  318. background-color:{color:question};
  319. color: {color:font};
  320. font-family: 'Open Sans Condensed';
  321. }
  322.  
  323. #answer {
  324. word-spacing: 0px;
  325. }
  326.  
  327.  
  328. /*---------------------------- NAVIGATION ---------------------------*/
  329.  
  330. .links {
  331. top: 550px;
  332. left: 200px;
  333. position: fixed;
  334. width: auto
  335. height: auto;
  336. text-align: center;
  337. }
  338.  
  339.  
  340.  
  341. /*---------------------------- SIDEBOXS ---------------------------*/
  342.  
  343.  
  344. .sidebox {
  345. position: fixed;
  346. background-color: {color:postbackground};
  347. border: 3px solid {color:postborder};
  348. top: 250px;
  349. left: 100px;
  350. width: 300px;
  351. height: 150px;
  352. overflow: auto;
  353. padding: 5px;
  354. z-index: 1;
  355. }
  356.  
  357. .barimagetop {
  358. position: fixed;
  359. background-color: transparent;
  360. top: 160px;
  361. left: 135px;
  362. width: 310px;
  363. height: 100px;
  364. }
  365.  
  366. .barimagebottom {
  367. position: fixed;
  368. background-color: transparent;
  369. top: 425px;
  370. left: 135px;
  371. width: 310px;
  372. height: 100px;
  373. }
  374.  
  375. #iconborder {
  376. border: 3px solid {color:postborder};
  377. }
  378.  
  379.  
  380. /*---------------------------- CREDIT ---------------------------*/
  381.  
  382. .credit {
  383. left: 98%;
  384. top: 95%;
  385. width: 50px;
  386. height: 50px;
  387. position: fixed;
  388. }
  389.  
  390. a.credit, a.credit:link, a.credit:active, a.credit:visited{
  391. text-decoration: none;
  392. color: #8f3d2e;
  393. text-transform: none;
  394. font-family: 'Contrail One', cursive;
  395. font-size: 14px;
  396. -moz-transition-duration:.6s;
  397. -webkit-transition-duration:.6s;
  398. -o-transition-duration:.6s;
  399. -webkit-filter: blur(0px);
  400.  
  401. }
  402.  
  403. a.credit:hovor {
  404. color: #8f8f8f;
  405. font-family: 'Contrail One', cursive;
  406. letter-spacing: 0px;
  407. -moz-transition-duration:.6s;
  408. -webkit-transition-duration:.6s;
  409. -o-transition-duration:.6s;
  410. -webkit-filter: blur(0px); }
  411.  
  412.  
  413.  
  414. /*---------------------------- FANCY FONT ---------------------------*/
  415.  
  416. h1 {
  417. font-size:30px;
  418. font-family: {select:header font1}
  419. font-weight:400;
  420. color: {color:italic};
  421. border-bottom: 1px solid #a53c44;
  422. text-shadow: 1px 1px 1px #a53c44;
  423. display:block;
  424. margin-top: 20px;
  425. text-align:right;
  426. text-transform:uppercase;
  427. padding:10px;
  428. letter-spacing:3px;
  429.  
  430. }
  431.  
  432. h2 {
  433. font-size:12px;
  434. font-family: 'Marck Script', cursive;
  435. font-weight:400;
  436. color:{color:h2};
  437. text-align: center;
  438. text-transform:lowercase;
  439. letter-spacing:2px;
  440. display:block;
  441. text-shadow: 1px 1px 5px #fff;
  442. margin:0, 0, 5px, 0;
  443. padding:5px;
  444. }
  445.  
  446.  
  447. h3 {
  448. background-image: url('{image:headerbackground}');
  449. background-position:top;
  450. background-color: {color:h3background};
  451. background-attachment:fixed;
  452. border: double 3px #000;
  453. padding:10px;
  454. color:{color:h3};
  455. overflow: auto;
  456. text-shadow:1px 1px 2px {color:h3};
  457. font-size:15px;
  458. font-family:calibri;
  459. text-transform:uppercase;
  460. letter-spacing:1px;
  461. text-align:center;
  462. }
  463.  
  464. h4 {
  465. text-align: center;
  466. border-bottom:2px solid {color:questionborder};
  467. background-color:{color:question};
  468. color: {color:h4};
  469. text-transform: uppercase;
  470. padding: 5px;
  471. font-size: 11px;
  472. font-family: 'Prata', serif;
  473. text-shadow: 1px 1px 1px {color:h4};
  474. letter-spacing: 2px;
  475. }
  476.  
  477.  
  478.  
  479. i, italic, em {
  480. font-family: 'Marck Script', cursive;
  481. font-size: 12px;
  482. text-shadow: 1px 1px 1px #ffffff;
  483. text-transform: italic;
  484. color:{color:italic};
  485. text-transform:lowercase;
  486. letter-spacing:1px;
  487.  
  488. }
  489.  
  490. b, bold, strong {
  491. font-size:10px;
  492. font-family: 'Orbitron', sans-serif;
  493. color:{color:bold};
  494. text-transform:lowercase;
  495.  
  496. }
  497. u, underline {font:8px 'Fjalla One'; font-weight:400; color:#79b4a8; text-transform:uppercase; letter-spacing:1px;}
  498.  
  499. p {
  500. margin-top:5px;
  501. margin-bottom:5px;}
  502.  
  503.  
  504. ol {
  505. list-style:normal;}
  506.  
  507.  
  508. ul {
  509. list-style:square;}
  510.  
  511.  
  512. small {
  513. font-size:10px}
  514.  
  515.  
  516. sup,sub {
  517. font-size:11px}
  518.  
  519.  
  520.  
  521. blockquote {
  522. padding:2px 7px;
  523. padding-right:17px;
  524. margin:3px 0 3px 10px;
  525. border-left:1px solid {color:blockquote};
  526. -webkit-border-radius: 10px;
  527. }
  528.  
  529.  
  530. blockquote img{
  531. max-width:100%;
  532. height:auto;
  533. }
  534.  
  535. blockquote blockquote img{
  536. max-width:100%;
  537. height:auto;
  538. }
  539.  
  540.  
  541.  
  542.  
  543. t, title {
  544. size: 15px;
  545. color: 222;
  546. letter-spacing: 2px;
  547. font: times;
  548. }
  549.  
  550. quotetext {
  551. font-family: times;
  552. font-size: 20px;
  553. line-height: 21px;
  554. letter-spacing: 2px;
  555. text-align: center;
  556. text-transform:uppercase;
  557. color: #fff;
  558. text-shadow: 3px 1px 1px #79b4a8;
  559. }
  560.  
  561. quotations {
  562. font: courier;
  563. font-size: 30px;
  564. text-transform: uppercase;
  565. color: {color:bold};
  566. }
  567.  
  568. quote {
  569. font-size: 13px;
  570. }
  571.  
  572. img {
  573. max-width:100%;
  574. }
  575.  
  576. hr {
  577. width:100px;
  578. border: 0;
  579. height: 0.5px;
  580. margin-right:10px;
  581. background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 255), rgba(255, 255, 255, 0));
  582. }
  583.  
  584. code {
  585. text-transform: uppercase;
  586. }
  587. /*---------------------------- LINKS ---------------------------*/
  588.  
  589. a:link, a:active, a:visited {
  590. text-decoration: none;
  591. color: {color:link};
  592. text-transform: none;
  593. font-family: 'Open Sans Condensed', sans-serif;
  594. font-size: 14px;
  595. -moz-transition-duration:.6s;
  596. -webkit-transition-duration:.6s;
  597. -o-transition-duration:.6s;
  598. -webkit-filter: blur(0px);}
  599.  
  600. a:hover {
  601. color: {color:linkhover};
  602. font-family: 'Open Sans Condensed', sans-serif;
  603. letter-spacing: 0px;
  604. -moz-transition-duration:.6s;
  605. -webkit-transition-duration:.6s;
  606. -o-transition-duration:.6s;
  607. -webkit-filter: blur(0px);}
  608.  
  609.  
  610.  
  611. a.navi, a.navi:link, a.navi:active, a.navi:visited {
  612. color: {color:navi};
  613. background-color: {color:navibg};
  614. font-family: times;
  615. text-transform: uppercase;
  616. font-size: 12px;
  617. padding: 10px;
  618. display: inline;
  619. border: 3px double {color:navi};
  620.  
  621.  
  622. }
  623.  
  624. a.navi:hover {
  625. color: {color:navihover};
  626. background-color: {color:navihoverbg};
  627. border: 3px double {color:navihover};
  628. -moz-transition-duration:.6s;
  629. -webkit-transition-duration:.6s;
  630. -o-transition-duration:.6s;
  631. -webkit-filter: blur(0px);
  632. }
  633.  
  634.  
  635.  
  636. /*---------------------------- PAGINATION ---------------------------*/
  637.  
  638.  
  639. .pagination {
  640. position:fixed;
  641. top: 135px;
  642. left: 245px;
  643. height: 100px;
  644. width: 100px;
  645. text-align:center;
  646. }
  647.  
  648.  
  649.  
  650.  
  651. /*------------------------ POST INFO & TAGS -------------------------*/
  652.  
  653.  
  654.  
  655. #infobox {
  656. border:1px solid transparent;
  657. margin-bottom:0px;
  658. padding-top:10px;
  659. border-bottom:0px solid {color:postborder};
  660. }
  661.  
  662.  
  663. #info {
  664. margin-left:20px;
  665. padding-bottom: 2px;
  666. }
  667.  
  668. #info a {
  669. color:{color:info};
  670. text-shadow: 1px 1px {select:info link background};
  671. opacity: 1;
  672. font-family: 'Source Code Pro', monospace;
  673. text-transform: uppercase;
  674. }
  675.  
  676. #info a:hover {
  677. color:{color:infohover};
  678. opacity: 1;
  679. }
  680.  
  681.  
  682.  
  683. #tags {
  684. width:375px;
  685. height: 25px;
  686. font-size:7px;
  687. text-align:right;
  688. font-family:arial;
  689. text-transform:uppercase;
  690. background:transparent;
  691. border-top: 1px solid {color:postborder};
  692. overflow: auto;
  693. margin-top:10px;
  694. margin-left:-10px;
  695. max-height:45px;
  696. margin-bottom: -50px;
  697. padding-top:5px;
  698. }
  699.  
  700.  
  701. #tags a {
  702. font-family:consolas;
  703. font-size:8px;
  704. line-height:8pt;
  705. letter-spacing:0px;
  706. color:{color:bold};
  707. text-decoration:none;
  708. text-shadow: 0px 0px {select:info link background};
  709. text-transform:uppercase;
  710. letter-spacing:0px;
  711. text-align:center;
  712. display:inline-block;
  713. }
  714.  
  715.  
  716. #tags a:hover {
  717. color:{color:bold};
  718. filter: blur(0px);
  719. -webkit-transition: all 0.6s ease-in-out;
  720. -moz-transition: all 0.6s ease-in-out;
  721. -o-transition: all 0.6s ease-in-out;
  722. -ms-transition: all 0.6s ease-in-out;
  723. transition: all 0.6s ease-in-out;
  724. }
  725.  
  726.  
  727.  
  728.  
  729.  
  730.  
  731. /*---------------------------- EXTRA 1 ---------------------------*/
  732.  
  733.  
  734.  
  735. .notecontainer {
  736. background-color: transparent;
  737. border: 0px solid transparent;
  738. width:380px;
  739. padding: 0px;
  740. text-transform:uppercase;
  741. font-style:normal;
  742. font-size: 10px;
  743. height: 150px;
  744. overflow: auto;
  745. margin-left: 50px;
  746. text-align:left;
  747.  
  748. }
  749. .note {
  750. background-color: transparent;
  751. border: 1px solid transparent;
  752. width:280px;
  753. padding: 0px;
  754. text-transform:uppercase;
  755. font-style:normal;
  756. font-size: 10px;
  757. height: auto;
  758. overflow: auto;
  759. margin-left: -25px;
  760. text-align:left;
  761.  
  762. }
  763.  
  764. .note li {
  765. list-style-type:none;
  766. padding: 10px;
  767. text-align:left;
  768. margin:0px;
  769. -moz-transition-duration:0.5s;
  770. -webkit-transition-duration:0.5s;
  771. -o-transition-duration:0.5s;}
  772.  
  773. .note img.avatar {
  774. margin-right: 10px;
  775. width: 25px;
  776. height: 25px;}
  777.  
  778.  
  779.  
  780.  
  781. /*-------------------------- MUSIC PLAYER ---------------------------*/
  782.  
  783.  
  784.  
  785. .songart{
  786. float:left;
  787. margin-right:10px;
  788. }
  789.  
  790. .songart img{
  791. width:80px;
  792. height:80px;
  793. }
  794.  
  795. .songtitle{
  796. margin-bottom:10px;
  797. margin-left:90px;
  798. }
  799.  
  800. .songauthor{
  801. margin-bottom:10px;
  802. font-size:8px;
  803. margin-left:90px;
  804. }
  805.  
  806. .tumblr_audio_player {
  807. height: 50px;
  808. }
  809.  
  810.  
  811.  
  812. /*---------------------------- TOOLTIP ---------------------------*/
  813.  
  814.  
  815.  
  816. #s-m-t-tooltip{
  817. max-width:400px;
  818. margin:15px;
  819. padding:2px 8px;
  820. background: #1c0915;
  821. background-image:url('{image:headerbackground}');
  822. background-repeat:repeat;
  823. background-attachment:fixed;
  824. border: double 3px #000;
  825. color:#fff;
  826. text-shadow:1px 1px 0px #000,
  827. z-index:99999999999999999999;
  828. font-size:9px;
  829. letter-spacing:2px;
  830. font-style:bold;
  831. letter-spacing:2px;
  832. font-family: calibri;
  833. text-transform:uppercase;
  834. box-shadow:1px 1px 3px rgba(0,0,0,.1);}
  835.  
  836.  
  837.  
  838. /*--------------------------- POPUP ------------------------------ */
  839.  
  840.  
  841. /*--Making IE6 Understand Fixed Positioning--*/
  842. *html #fade {
  843. position: absolute;
  844. }
  845. *html .popup_block {
  846. position: absolute;
  847. }
  848.  
  849. .popup_block{
  850. background-color: {color:background};
  851. border: 3px solid {color:postborder};
  852. height:450px;
  853. width: 500px;
  854. top:430px;
  855. padding: 10px;
  856. position: fixed;
  857. left: 825px;
  858. display: none; /*--hidden by default--*/
  859. float: left;
  860. font-size: 10px; /*font size of the words inside the box */
  861. position: fixed;
  862. z-index: 99999999999999999999999; /*if the box is hiding behind other things in your theme, add more 9′s */
  863. }
  864.  
  865.  
  866. #fade { /*--Transparent background layer--*/
  867. display: none; /*--hidden by default--*/
  868. background: {color:background};
  869. background-image: url('{image:popup}'); /*if you want to add a background image to go behind your popup */
  870. position: fixed; left: 0; top: 0;
  871. width: 100%; height: 100%;
  872. opacity: 0.9;
  873. z-index: 9999;
  874. }
  875.  
  876. .popupnavlinks {
  877. padding-top:5px;
  878. text-align:center; }
  879.  
  880.  
  881. .popupnavlinks a {
  882. display:inline-block;
  883. width:90px; height:4px;
  884. margin:2px; padding:3px 6px 10px;
  885. text-align:center;
  886. background-image: url('');
  887. background:transparent;
  888. background-repeat:repeat;
  889. background-attachment:fixed;
  890. border: solid 1px {color:popuplink};
  891. color:{color:popuplink};
  892. font-size:9px;
  893. font-family:calibri;
  894. text-shadow:1px 1px 0px #fff,
  895. display: inline-block;
  896. cursor: pointer;
  897. }
  898.  
  899. .popupnavlinks a:hover {
  900. display:inline-block;
  901. letter-spacing:2px;
  902. -moz-transition-duration: 0.4s;
  903. -webkit-transition-duration: 0.4s;
  904. -o-transition-duration: 0.4s;
  905. transition-duration: 0.4s;
  906. }
  907.  
  908.  
  909.  
  910. .popupclose {
  911. float:right; top:0px; right:0px;
  912. margin-top:-10px; margin-right:-10px;
  913. font-family:'Scada', sans serif;
  914. font-size:10px;
  915. font-weight:bold }
  916.  
  917. .popupclose a {
  918. color:#aaa }
  919.  
  920. /* ----------------------------- CHAT CODE --------------------------- */
  921.  
  922. /* chat cred: https://dear-indies.tumblr.com/post/125257866576/animalites-imessage-chat-post-ive-seen-a-lot */
  923.  
  924. /* IMESSAGE CHAT POST */
  925. .answer span,.convo li{margin:0 0 5px;border-radius:1em;padding:.5em 10px;max-width:75%;clear:both;position:relative}.answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11{float:left;background:#e5e5ea;color:#000;left:3px}.me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after{content:"";position:absolute;left:-.5em;bottom:0;width:.5em;height:1em;border-right:.5em solid #e5e5ea;border-bottom-right-radius:1em .5em}.answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12{right:3px;float:right;background-color:#e8f3f9;color:#000}.them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after{content:"";position:absolute;right:-.5em;bottom:0;width:.5em;height:1em;border-left:.5em solid #e8f3f9;border-bottom-left-radius:1em .5em}.me p,.answer,.asked span{padding:0;margin:0}.answer{overflow:hidden}
  926. .asked p {
  927. text-align: left;
  928. margin: 0 0px 10px 0px;
  929. padding: 0;
  930. color: #666666;
  931. font-family: 'Inconsolata', Inconsolata;
  932. font-size: 12px;
  933. line-height: 0px;
  934. }
  935. .footerright .viasrc {
  936. float: left;
  937. }
  938. .asked a {
  939. margin:0;padding:0;
  940. }
  941. .user_4{background-color:#55caff;color:#fff}.user_4::after{border-color:#55caff}.user_6{background-color:#60f246;color:#fff}.user_6::after{border-color:#60f246}.user_5{background-color:#9ff3fc;color:#000}.user_5::after{border-color:#9ff3fc}.user_3{background-color:#25c413;color:#fff}.user_3::after{border-color:#25c413}.user_7{background-color:#9b9b9b;color:#fff}.user_7::after{border-color:#9b9b9b}.user_8{background-color:#0d9321;color:#fff}.user_8::after{border-color:#0d9321}.user_9{background-color:#606060;color:#fff}.user_9::after{border-color:#606060}
  942. .convo {
  943. overflow: hidden;
  944. list-style-type: none;
  945. padding: 0;
  946. margin: 0;
  947. }
  948. </style>
  949.  
  950.  
  951.  
  952. <body>
  953.  
  954. <!--------------------------- NAVBAR -------------------------------->
  955. <!------------------------ NAVIGATION START ------------------------->
  956.  
  957.  
  958. <div class="navbar">
  959. <quotations>"{text:quote}"</quotations><br>
  960. <div style="margin-left: 70px;"><b>{text:subquote}</b>
  961. </div>
  962. <p>
  963. <br>
  964. <center>
  965.  
  966. <a href="/" class="navi" title="home" style="margin-left: 0px;">HOME</a>
  967. <a href="/ask" class="navi" title="ask" style="margin-left: 5px;">ASK</a>
  968. <a href="#?w=400" rel="box1" class="navi poplight" title="Rules" style="margin-left: 5px;">Rules</a>
  969. <a href="#?w=400" rel="box2" class="navi poplight" title="Navigation" style="margin-left: 5px;">Atlas</a>
  970. <a href="#?w=400" rel="box3" class="navi poplight" title="extra" style="margin-left: 5px;">Extra</a>
  971.  
  972.  
  973. </center>
  974. </div>
  975. <!------------------------- NAVBAR END ------------------------------>
  976. <!------------------------ NAVIGATION END ------------------------->
  977.  
  978.  
  979. <div class="barimagetop">
  980. <img src="{image:icon 1}" id="iconborder"> <img src="{image:icon 2}" id="iconborder"> <img src="{image:icon 3}" id="iconborder">
  981. </div>
  982.  
  983. <div class="barimagebottom">
  984. <img src="{image:icon 4}" id="iconborder"> <img src="{image:icon 5}" id="iconborder"> <img src="{image:icon 6}" id="iconborder">
  985. </div>
  986.  
  987. <!--------------------------- SIDEBOX -------------------------------->
  988.  
  989. <div class="sidebox">
  990.  
  991. <h2>ALISES OR SOMETHING HERE</h2>
  992. <center><b>MAYBE A QUOTE HERE</b></center>
  993.  
  994.  
  995. <p>
  996. <p>
  997. <h3>DEBTS</h3>
  998. <center>
  999. <b>Starters:</b> {text:Starters} <br> <b>Drafts:</b> {text:Drafts} <br> <b>Memes:</b> {text:Memes}
  1000. </center>
  1001.  
  1002.  
  1003. <br>
  1004. <h3>Pennd By</h3>
  1005.  
  1006. <center>
  1007. <i>PENNAME HERE</i>
  1008.  
  1009. </center>
  1010. </div>
  1011. <!------------------------- SIDEBOX END ------------------------------>
  1012.  
  1013. <!------------------------- RULES START ------------------------------>
  1014. <div id="box1" class="popup_block">
  1015.  
  1016. <div style="width: auto; height: 455px; overflow: auto;">
  1017.  
  1018. <h1>Rules</h1>
  1019.  
  1020. <p><b>1.</b> Stuff Stuff Stuff
  1021. <p><b>2.</b> Stuff Stuff Stuff
  1022. <p><b>3.</b> Stuff Stuff Stuff
  1023. <p><b>4.</b> Stuff Stuff Stuff
  1024. <p><b>5.</b> Stuff Stuff Stuff
  1025. <p><b>6.</b> Stuff Stuff Stuff
  1026. <p><b>7.</b> Stuff Stuff Stuff
  1027. <p><b>8.</b> Stuff Stuff Stuff
  1028. <p><b>9.</b> Stuff Stuff Stuff
  1029. <p><b>10.</b> Stuff Stuff Stuff
  1030.  
  1031. </div>
  1032. </div>
  1033. <!------------------------- RULES END ------------------------------>
  1034.  
  1035. <!------------------------- NAVI STARTS ------------------------------>
  1036. <div id="box2" class="popup_block">
  1037. <div style="width: auto; height: 455px; overflow: auto;">
  1038.  
  1039. <h4>NAVIGATION</h4>
  1040. <div class="popupnavlinks">
  1041. <a href="xxxxxx">LINK</a>
  1042. <a href="xxxxxx">LINK</a>
  1043. <br>
  1044. <a href="xxxxxx">LINK</a>
  1045. <a href="xxxxxx">LINK</a>
  1046. <br>
  1047. <a href="xxxxxx">LINK</a>
  1048. <a href="xxxxxx">LINK</a>
  1049. <br>
  1050. <a href="xxxxxx">LINK</a>
  1051. <a href="xxxxxx">LINK</a>
  1052. <br>
  1053. <a href="xxxxxx">LINK</a>
  1054. <a href="xxxxxx">LINK</a>
  1055. <br>
  1056. <a href="xxxxxx">LINK</a>
  1057. <a href="xxxxxx">LINK</a>
  1058. <br>
  1059. </div>
  1060.  
  1061. </div>
  1062. </div>
  1063. <!------------------------- NAVI END ------------------------------>
  1064.  
  1065. <!------------------------- EXTRA START ------------------------------>
  1066. <div id="box3" class="popup_block">
  1067.  
  1068. <div style="width: auto; height: 455px; overflow: auto;">
  1069.  
  1070. <p><b>1.</b> Stuff Stuff Stuff
  1071. <p><b>2.</b> Stuff Stuff Stuff
  1072. <p><b>3.</b> Stuff Stuff Stuff
  1073. <p><b>4.</b> Stuff Stuff Stuff
  1074. <p><b>5.</b> Stuff Stuff Stuff
  1075. <p><b>6.</b> Stuff Stuff Stuff
  1076. <p><b>7.</b> Stuff Stuff Stuff
  1077. <p><b>8.</b> Stuff Stuff Stuff
  1078. <p><b>9.</b> Stuff Stuff Stuff
  1079. <p><b>10.</b> Stuff Stuff Stuff
  1080.  
  1081. </div>
  1082. </div>
  1083. <!------------------------- EXTRA END ------------------------------>
  1084. <!------------------------- POPUPS END ------------------------------>
  1085.  
  1086.  
  1087. <!----------------------------- CREDIT ------------------------------>
  1088.  
  1089. <div class="credit">
  1090. <a href="https://themesbyzorra.tumblr.com/" title="Themes By Zorra">♛</a>
  1091. </div>
  1092. </body>
  1093.  
  1094. <!--------------------------- CREDIT END ----------------------------->
  1095.  
  1096.  
  1097. <!------------------------- BLOG CONTENT ----------------------------->
  1098.  
  1099. <div class="pagination">{block:Pagination}
  1100. {block:PreviousPage}<a href="{PreviousPage}" class="fourth" style="margin-left: 0px;">☚</a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" class="fourth" style="margin-right: 0x;">☛</a>
  1101. {/block:NextPage}
  1102. {/block:Pagination}</div>
  1103.  
  1104. <div id="container">
  1105.  
  1106. {block:Posts}
  1107.  
  1108. <div class="posts">
  1109.  
  1110. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  1111.  
  1112. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}
  1113. {/block:Photo}
  1114.  
  1115. {block:Photoset}{Photoset}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  1116.  
  1117. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  1118.  
  1119. {block:Video}
  1120. <div class="video">{Video-500}</div>
  1121. {/block:Video}
  1122.  
  1123. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  1124.  
  1125.  
  1126. {block:Quote}<quotetext>❝{Quote}❞</quotetext>{block:Source}<h3>{Source}</h3>{/block:Source}{/block:Quote}
  1127.  
  1128.  
  1129.  
  1130. {block:Chat}
  1131. {block:Title}
  1132. <h1>{Title}</h1>{/block:Title}<br>
  1133. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  1134. {Line}</li>{/block:Lines}</ul>
  1135. {/block:Chat}
  1136.  
  1137.  
  1138. <!--------------------------- AUDIO POST ------------------------------>
  1139. {block:Audio}
  1140. {block:AlbumArt}
  1141. <div class="songart">
  1142. <img src="{AlbumArtURL}">
  1143. </div>
  1144. {/block:AlbumArt}
  1145. <div class="songtitle">
  1146. {block:TrackName}
  1147. {TrackName}
  1148. {/block:TrackName}
  1149. </div>
  1150. <div class="songauthor">
  1151. By
  1152. {block:Artist}
  1153. {Artist}
  1154. {/block:Artist}
  1155. </div>
  1156. {AudioPlayerWhite}
  1157. {/block:Audio}
  1158.  
  1159.  
  1160.  
  1161. {block:Answer}
  1162. <div id="askerurl" style="margin-left:-50px; margin-top:0px; text-transform:uppercase; font-size: 13px; color: {color:bold}; word-wrap: break-word; max-width: 100%;">{asker}</div>
  1163.  
  1164.  
  1165. <div id="question" style="margin-top: -5px">{Question}</div>
  1166. <div id="answer" style="margin-top: 20px;">{Answer}</div>
  1167. {/block:Answer}
  1168.  
  1169.  
  1170. <!----------------------- INFO & SYMBOLS ----------------------------->
  1171.  
  1172. <div id="infobox">
  1173. <div id="info">
  1174. <br>
  1175.  
  1176. &nbsp; &nbsp;
  1177.  
  1178.  
  1179.  
  1180. {block:Date}
  1181. <a href="{Permalink}"style="position:absolute; width: autopx; margin-left:-20px; margin-top:0px; font-size: 12px; font-family: 'Source Code Pro', monospace;" title="{TimeAgo}, {ShortMonth} {DayOfMonthWithZero} with {NoteCount} notes ">{ShortMonth} {DayOfMonthWithZero} </a>
  1182. {/block:Date}
  1183.  
  1184.  
  1185. <a href="{ReblogURL}" style="position:absolute; margin-left:35px; margin-top:0px; font-size:12px; font-family: 'Source Code Pro', monospace;" title="reblog"> Reblog </a>
  1186.  
  1187.  
  1188.  
  1189. {block:NoRebloggedFrom}
  1190. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1191. {/block:NoRebloggedFrom}
  1192.  
  1193.  
  1194. {block:ContentSource}
  1195. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1196. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1197. {/block:SourceLogo}
  1198. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1199. {/block:ContentSource}
  1200. <br>
  1201.  
  1202.  
  1203. <!------------------- INFO & SYMBOLS ENDS --------------------------->
  1204.  
  1205.  
  1206. {block:HasTags}<div id="tags">{block:Tags}&nbsp;<a href="{TagURL}" title="{Tag}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}</div> &nbsp;
  1207.  
  1208. <br><br><br><br>
  1209. </div>
  1210. </div>
  1211.  
  1212. {/block:Posts}
  1213. <div class="notecontainer">
  1214. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1215. </div></div>
  1216. {/block:Posts}
  1217.  
  1218. </div>
  1219.  
  1220.  
  1221.  
  1222.  
  1223.  
  1224. </html>
Advertisement
Add Comment
Please, Sign In to add comment