bridgetowakanda

THEME 005: COOL PERSUASION by THEMESBYZORRA

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