bridgetowakanda

Summer Breeze - NEED TO FINISH POPUPs

Mar 27th, 2019
272
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.86 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. <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
  13.  
  14.  
  15.  
  16. <html>
  17. <!--
  18. - BASE CODE
  19. https://fratdadbase.tumblr.com/
  20.  
  21. - THEME BY ZORRA @ THEMESBYZORRA
  22. - THEME IS FREE FOR USE BY THE TUMBLR COMMUNITY. PLEASE LEAVE CREDIT WHERE IT IS DUE.
  23. - 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.
  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.  
  115.  
  116. <!-------------------------- VERSES TAB ------------------------------->
  117. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  118. <script>
  119. $(document).ready(function(){
  120. $(".inside").hide();
  121. $(".label").click(function(){
  122. $(this).next(".inside").slideToggle('fast');
  123. });
  124. });
  125. </script>
  126.  
  127.  
  128. <!---------------------------- META DATA ----------------------------->
  129. <meta name="image:Background" content="" />
  130. <meta name="image:headerbackground" content=""/>
  131. <meta name="image:headimage" content=""/>
  132. <meta name="image:popupimage" content=""/>
  133.  
  134. <meta name="text:titlehere" content="Title Here"/>
  135. <meta name="text:description" content="You can put some words here or something. Whatever tickles your fancy. Maybe a small description of what your blog is about. Totally up to you."/>
  136. <meta name="text:popup 1" content="There is a small pop up section."/>
  137. <meta name="text:popup 2" content="You can include information about yourself."/>
  138. <meta name="text:popup 3" content="You can include information about yourself."/>
  139. <meta name="text:popup 4" content="what you like and dislike."/>
  140. <meta name="text:popup 5" content="It's up to you!"/>
  141.  
  142.  
  143. <meta name="color:background" content="#f6f6f6" />
  144. <meta name="color:postbackground" content="#ffffff" />
  145. <meta name="color:font" conteont="#a6a6a6" />
  146. <meta name="color:italic" content="#cac8c8" />
  147. <meta name="color:bold" content="#9f9d9d" />
  148. <meta name="color:postborder" content="#ecebeb" />
  149. <meta name="color:info" content="#cac8c8" />
  150. <meta name="color:infolink" content="#cac8c8" />
  151. <meta name="color:infohover" content="#000000" />
  152. <meta name="color:blockquote" content="#000000" />
  153. <meta name="color:link" content="#222222" />
  154. <meta name="color:linkhover" content="#333333" />
  155. <meta name="color:title background" content="#f1f1f1" />
  156. <meta name="color:navi" content="#a198b8" />
  157. <meta name="color:navihover" content="#222222" />
  158. <meta name="color:navibg" content="#cb988b" />
  159. <meta name="color:navihoverbg" content="#8f6459" />
  160. <meta name="color:h1" content="#ffffff" />
  161. <meta name="color:h2" content="#e7dcd6" />
  162. <meta name="color:h3" content="#111111" />
  163. <meta name="color:h3background" content="#c8c6bf" />
  164. <meta name="color:h4" content="#222222" />
  165. <meta name="color:h4border" content="#bbbbbb" />
  166. <meta name="color:h5" content="#a1b8d3" />
  167. <meta name="color:question" content="#f5f3f3" />
  168. <meta name="color:popuplink" content="#111111" />
  169. <meta name="color:popup background color" content="#111111" />
  170. <meta name="color:popup font color" content="#ffffff" />
  171.  
  172. <meta name="select:info link background" content="#ffffff" title="white"/>
  173. <meta name="select:info link background" content="#000000" title="black"/>
  174.  
  175.  
  176. <meta name="select:header font1" content="'Rozha One', serif;" title="Rozha"/>
  177. <meta name="select:header font1" content="'Limelight', cursive;" title="Limelight"/>
  178. <meta name="select:header font1" content="'Anton', sans-serif;" title="Anton"/>
  179.  
  180. <meta name="select:header font2" content="'Rozha One', serif;" title="Rozha"/>
  181. <meta name="select:header font2" content="'Limelight', cursive;" title="Limelight"/>
  182. <meta name="select:header font2" content="'Anton', sans-serif;" title="Anton"/>
  183.  
  184. <meta name="if:postroundcorners" content="border-radius:0px;"/>
  185.  
  186. </head>
  187.  
  188.  
  189.  
  190.  
  191.  
  192. <style type="text/css">
  193.  
  194. @font-face​ {
  195. font-family:"big noodle titling";
  196. src:url(https://dl.dropbox.com/s/j5blixn0eu397vv/big_noodle_titling.ttf');
  197. }
  198.  
  199. /*---------------------------- SCROLL BAR ---------------------------*/
  200. ::-webkit-scrollbar {
  201. width: 2px;
  202. height: 2px;
  203. }
  204. ::-webkit-scrollbar-button {
  205. width: 0px;
  206. height: 0px;
  207. }
  208. ::-webkit-scrollbar-thumb {
  209. background: transparent;
  210. border: 0px none #a68b7c;
  211. border-radius: 50px;
  212. }
  213. ::-webkit-scrollbar-thumb:hover {
  214. background: transparent;
  215. }
  216. ::-webkit-scrollbar-thumb:active {
  217. background: transparent;
  218. }
  219. ::-webkit-scrollbar-track {
  220. background: transparent;
  221. border: 0px none #a68b7c;
  222. border-radius: 0px;
  223. }
  224. ::-webkit-scrollbar-track:hover {
  225. background:transparent;
  226. }
  227. ::-webkit-scrollbar-track:active {
  228. background: transparent;
  229. }
  230. ::-webkit-scrollbar-corner {
  231. background: transparent;
  232. }
  233.  
  234.  
  235. /*---------------------------- SELECTION ---------------------------*/
  236.  
  237. ::SELECTION {BACKGROUND: {color:bold}; COLOR:#e7e5d1; }
  238. ::-MOZ-SELECTION {BACKGROUND: {color:bold}; COLOR:#e7e5d1; }
  239.  
  240.  
  241.  
  242. /*---------------------------- BODY ---------------------------*/
  243.  
  244. body {
  245. background-color:{color:background};
  246. background-image:url('{image:background}');
  247. background-attachment: fixed;
  248. background-repeat: no-repeat;
  249. font-family: 'Abel', sans-serif;
  250. font-size: 10px;
  251. text-align: justify;
  252. color: {color:font};
  253. }
  254.  
  255. .navbar {
  256. position: fixed;
  257. top:420px;
  258. width: 50px;
  259. height: 200px;
  260. left: 1220px;
  261. background-color:transparent;
  262. }
  263.  
  264. .titlebar {
  265. position: fixed;
  266. top: 420px;
  267. width: 200px;
  268. height:50px;
  269. left: 1000px;
  270. padding: 5px;
  271. background-color: {color:title background};
  272. color: {color:bold};
  273. border: 1px solid {color:postborder};
  274. }
  275.  
  276.  
  277. #container {
  278. position:absolute;
  279. background-color: transparent;
  280. width: 460px;
  281. top: -100px;
  282. margin-top:100px;
  283. margin-left: 410px;
  284. height:100%;
  285. padding: 10px;
  286. overflow:auto;
  287. overflow-x:hidden;
  288.  
  289. }
  290.  
  291. .posts {
  292. background-color: {color:postbackground};
  293. border: 0px double {color:postborder};
  294. width:400px;
  295. margin-left:30px;
  296. margin-bottom:20px;
  297. padding: 13px;
  298. {block:ifpostroundcorners}
  299. border-radius: 10px;
  300. {/block:ifpostroundcorners}
  301.  
  302. }
  303.  
  304. #container img {
  305. height:auto;
  306. max-width:100%;
  307. }
  308.  
  309. #post img {
  310. height: auto;
  311. max-width: 100%;
  312. }
  313.  
  314.  
  315. /*---------------------- QUESTIONS & ANSWERS ------------------------*/
  316.  
  317. #askerurl {
  318. text-transform:uppercase;
  319. font-weight:400;
  320. font-size:20px;
  321. margin-top:80px;
  322. margin-left:50px;
  323. padding-bottom:5px;
  324. width:250px;
  325. font-family: 'Orbitron', sans-serif;
  326. text-align:center;
  327. }
  328.  
  329. #asking img {
  330. padding: 5px;
  331. }
  332.  
  333. #question {
  334. background-attachment:auto;
  335. background-image: url('');
  336. padding:15px 15px;
  337. margin:3px 0 3px 10px;
  338. border-top-left-radius: 2px;
  339. border-top-right-radius: 2px;
  340. background-color:{color:question};
  341. border-radius: 10px;
  342. color: {color:font};
  343. font-family: 'Open Sans Condensed';
  344. }
  345.  
  346. #answer {
  347. word-spacing: 0px;
  348. }
  349.  
  350.  
  351. /*---------------------------- NAVIGATION ---------------------------*/
  352.  
  353. .links {
  354. top: 550px;
  355. left: 200px;
  356. position: fixed;
  357. width: auto
  358. height: auto;
  359. text-align: center;
  360. }
  361.  
  362.  
  363.  
  364. /*---------------------------- SIDEBOXS ---------------------------*/
  365.  
  366.  
  367. .sidebox {
  368. position: fixed;
  369. background-color: {color:postbackground};
  370. border: 1px solid {color:postborder};
  371. top: 480px;
  372. left: 1000px;
  373. width: 200px;
  374. height: 150px;
  375. overflow: auto;
  376. padding: 5px;
  377. z-index: 1;
  378. }
  379.  
  380.  
  381. #headimage {
  382. z-index -99999999999
  383. padding-bottom: 5px;
  384. }
  385.  
  386. #dashcon {
  387. z-index: 9999999999;
  388. width: 55px;
  389. height: 55px;
  390. left: 130px;
  391. }
  392.  
  393. #iconborder {
  394. border: 3px solid {color:postborder};
  395. }
  396.  
  397. #iconborder2 {
  398. border: 3px solid #ffffff;
  399. }
  400.  
  401.  
  402. /*---------------------------- CREDIT ---------------------------*/
  403.  
  404. .credit {
  405. left: 98%;
  406. top: 95%;
  407. width: 50px;
  408. height: 50px;
  409. position: fixed;
  410. }
  411.  
  412. a.credit, a.credit:link, a.credit:active, a.credit:visited{
  413. text-decoration: none;
  414. color: #8f3d2e;
  415. text-transform: none;
  416. font-family: 'Contrail One', cursive;
  417. font-size: 14px;
  418. -moz-transition-duration:.6s;
  419. -webkit-transition-duration:.6s;
  420. -o-transition-duration:.6s;
  421. -webkit-filter: blur(0px);
  422.  
  423. }
  424.  
  425. a.credit:hovor {
  426. color: #8f8f8f;
  427. font-family: 'Contrail One', cursive;
  428. letter-spacing: 0px;
  429. -moz-transition-duration:.6s;
  430. -webkit-transition-duration:.6s;
  431. -o-transition-duration:.6s;
  432. -webkit-filter: blur(0px); }
  433.  
  434.  
  435.  
  436. /*---------------------------- FANCY FONT ---------------------------*/
  437.  
  438. h1 {
  439. font-size:30px;
  440. font-family: 'Staatliches', cursive;
  441. font-weight:400;
  442. color: {color:italic};
  443. display:block;
  444. margin-top: 20px;
  445. text-align:right;
  446. text-transform:uppercase;
  447. padding:10px;
  448. letter-spacing:3px;
  449.  
  450. }
  451.  
  452. h2 {
  453. font-size:12px;
  454. font-family: 'Marck Script', cursive;
  455. font-weight:400;
  456. color:{color:h2};
  457. text-align: center;
  458. text-transform:lowercase;
  459. letter-spacing:2px;
  460. display:block;
  461. text-shadow: 1px 1px 5px #fff;
  462. margin:0, 0, 5px, 0;
  463. padding:5px;
  464. }
  465.  
  466.  
  467. h3 {
  468. background-image: url('{image:headerbackground}');
  469. background-position:top;
  470. background-color: {color:h3background};
  471. background-attachment:fixed;
  472. border: double 3px #000;
  473. padding:10px;
  474. color:{color:h3};
  475. overflow: auto;
  476. text-shadow:1px 1px 2px {color:h3};
  477. font-size:15px;
  478. font-family:calibri;
  479. text-transform:uppercase;
  480. letter-spacing:1px;
  481. text-align:center;
  482. }
  483.  
  484. h4 {
  485. text-align: center;
  486. border-bottom:2px solid {color:h4border};
  487. background-color:{color:question};
  488. color: {color:h4};
  489. text-transform: uppercase;
  490. padding: 15px;
  491. font-size: 11px;
  492. font-family: 'Prata', serif;
  493. text-shadow: 1px 1px 1px {color:h4};
  494. letter-spacing: 2px;
  495. }
  496.  
  497.  
  498. h5 {
  499. text-align: center;
  500. font-size: 20px;
  501. font-style: italic;
  502. text-transform: lowercase;
  503. font-weight: 700;
  504. color: {color:h5};
  505. word-wrap: break-word;
  506. }
  507.  
  508. i, italic, em {
  509. font-family: 'Marck Script', cursive;
  510. font-size: 12px;
  511. text-shadow: 1px 1px 1px #ffffff;
  512. text-transform: italic;
  513. color:{color:italic};
  514. text-transform:lowercase;
  515. letter-spacing:1px;
  516.  
  517. }
  518.  
  519. b, bold, strong {
  520. font-size:10px;
  521. font-family: 'Orbitron', sans-serif;
  522. color:{color:bold};
  523. text-transform:lowercase;
  524.  
  525. }
  526. u, underline {font:8px 'Fjalla One'; font-weight:400; color:#79b4a8; text-transform:uppercase; letter-spacing:1px;}
  527.  
  528. p {
  529. margin-top:5px;
  530. margin-bottom:5px;}
  531.  
  532.  
  533. ol {
  534. list-style:normal;}
  535.  
  536.  
  537. ul {
  538. list-style:square;}
  539.  
  540.  
  541. small {
  542. font-size:10px}
  543.  
  544.  
  545. sup,sub {
  546. font-size:11px}
  547.  
  548.  
  549.  
  550. blockquote {
  551. padding:2px 7px;
  552. padding-right:17px;
  553. margin:3px 0 3px 10px;
  554. border-left:1px solid {color:blockquote};
  555. -webkit-border-radius: 10px;
  556. }
  557.  
  558.  
  559. blockquote img{
  560. max-width:100%;
  561. height:auto;
  562. }
  563.  
  564. blockquote blockquote img{
  565. max-width:100%;
  566. height:auto;
  567. }
  568.  
  569.  
  570.  
  571.  
  572. t, title {
  573. size: 15px;
  574. color: 222;
  575. letter-spacing: 2px;
  576. font: times;
  577. }
  578.  
  579. quotetext {
  580. font-family: times;
  581. font-size: 20px;
  582. line-height: 21px;
  583. letter-spacing: 2px;
  584. text-align: center;
  585. text-transform:uppercase;
  586. color: #fff;
  587. text-shadow: 3px 1px 1px #79b4a8;
  588. }
  589.  
  590. quotations {
  591. font: courier;
  592. font-size: 30px;
  593. text-transform: uppercase;
  594. color: {color:bold};
  595. }
  596.  
  597. quote {
  598. font-size: 13px;
  599. }
  600.  
  601. img {
  602. max-width:100%;
  603. }
  604.  
  605. hr {
  606. width:100px;
  607. border: 0;
  608. height: 0.5px;
  609. margin-right:10px;
  610. background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 255), rgba(255, 255, 255, 0));
  611. }
  612.  
  613. code {
  614. text-transform: uppercase;
  615. }
  616. /*---------------------------- LINKS ---------------------------*/
  617.  
  618. a:link, a:active, a:visited {
  619. text-decoration: none;
  620. color: {color:link};
  621. text-transform: none;
  622. font-family: 'Open Sans Condensed', sans-serif;
  623. font-size: 14px;
  624. -moz-transition-duration:.6s;
  625. -webkit-transition-duration:.6s;
  626. -o-transition-duration:.6s;
  627. -webkit-filter: blur(0px);}
  628.  
  629. a:hover {
  630. color: {color:linkhover};
  631. font-family: 'Open Sans Condensed', sans-serif;
  632. letter-spacing: 0px;
  633. -moz-transition-duration:.6s;
  634. -webkit-transition-duration:.6s;
  635. -o-transition-duration:.6s;
  636. -webkit-filter: blur(0px);}
  637.  
  638.  
  639.  
  640. a.navi, a.navi:link, a.navi:active, a.navi:visited {
  641. color: {color:navi};
  642. font-family: 'Abel', sans-serif;
  643. font-weight: 700px;
  644. font-size: 10px;
  645. display: inline-block;
  646. text-transform: uppercase;
  647. padding-bottom: 2px;
  648.  
  649.  
  650. }
  651.  
  652. a.navi:hover {
  653. color: {color:navihover};
  654. -moz-transition-duration:.6s;
  655. -webkit-transition-duration:.6s;
  656. -o-transition-duration:.6s;
  657. -webkit-filter: blur(0px);
  658. }
  659.  
  660. a.mainlinks, a.mainlinks:link, a.mainlinks:active, a.mainlinks:visited {
  661. background-color: {color:popup background color};
  662. color: {color:popup font color};
  663. border: 3px double {color:popup font color};
  664. display: inline;
  665. text-align: center;
  666. letter-spacing: 0px;
  667. font-size: 10px;
  668. text-transform: uppercase;
  669. padding-top: 1px;
  670. padding-right: 10px;
  671. padding-bottom: 1px;
  672. padding-left: 10px;
  673.  
  674. }
  675.  
  676. a.mainlinks:hover {
  677. letter-spacing: 1px;
  678. width: 75px;
  679. -moz-transition-duration:.6s;
  680. -webkit-transition-duration:.6s;
  681. -o-transition-duration:.6s;
  682. -webkit-filter: blur(0px);
  683. }
  684.  
  685. /*---------------------------- PAGINATION ---------------------------*/
  686.  
  687.  
  688. .pagination {
  689. position:fixed;
  690. top: 660px;
  691. left: 1100px;
  692. height: 100px;
  693. width: 200px;
  694. text-align:justify;
  695. }
  696.  
  697.  
  698.  
  699.  
  700. /*------------------------ POST INFO & TAGS -------------------------*/
  701.  
  702.  
  703.  
  704. #infobox {
  705. border:1px solid transparent;
  706. margin-bottom:0px;
  707. padding-top:10px;
  708. border-bottom:0px solid {color:postborder};
  709. }
  710.  
  711.  
  712. #info {
  713. margin-left:20px;
  714. padding-bottom: 2px;
  715. }
  716.  
  717. #info a {
  718. color:{color:infolink};
  719. text-shadow: 1px 1px {select:info link background};
  720. opacity: 1;
  721. font-family: 'Source Code Pro', monospace;
  722. text-transform: uppercase;
  723. }
  724.  
  725. #info a:hover {
  726. color:{color:infohover};
  727. opacity: 1;
  728. }
  729.  
  730.  
  731.  
  732. #tags {
  733. width:375px;
  734. height: 25px;
  735. font-size:7px;
  736. text-align:right;
  737. font-family:arial;
  738. text-transform:uppercase;
  739. background:transparent;
  740. background-color: {color:info};
  741. overflow: auto;
  742. margin-top:10px;
  743. margin-left:-10px;
  744. max-height:45px;
  745. margin-bottom: -50px;
  746. padding-top:5px;
  747. }
  748.  
  749.  
  750. #tags a {
  751. font-family:consolas;
  752. font-size:8px;
  753. line-height:8pt;
  754. letter-spacing:0px;
  755. color:{color:bold};
  756. text-decoration:none;
  757. text-shadow: 0px 0px {select:info link background};
  758. text-transform:uppercase;
  759. letter-spacing:0px;
  760. text-align:center;
  761. display:inline-block;
  762. }
  763.  
  764.  
  765. #tags a:hover {
  766. color:{color:bold};
  767. filter: blur(0px);
  768. -webkit-transition: all 0.6s ease-in-out;
  769. -moz-transition: all 0.6s ease-in-out;
  770. -o-transition: all 0.6s ease-in-out;
  771. -ms-transition: all 0.6s ease-in-out;
  772. transition: all 0.6s ease-in-out;
  773. }
  774.  
  775.  
  776.  
  777.  
  778.  
  779.  
  780. /*---------------------------- EXTRA 1 ---------------------------*/
  781.  
  782.  
  783.  
  784. .notecontainer {
  785. background-color: transparent;
  786. border: 0px solid transparent;
  787. width:380px;
  788. padding: 0px;
  789. text-transform:uppercase;
  790. font-style:normal;
  791. font-size: 10px;
  792. height: 150px;
  793. overflow: auto;
  794. margin-left: 50px;
  795. text-align:left;
  796.  
  797. }
  798. .note {
  799. background-color: transparent;
  800. border: 1px solid transparent;
  801. width:280px;
  802. padding: 0px;
  803. text-transform:uppercase;
  804. font-style:normal;
  805. font-size: 10px;
  806. height: auto;
  807. overflow: auto;
  808. margin-left: -25px;
  809. text-align:left;
  810.  
  811. }
  812.  
  813. .note li {
  814. list-style-type:none;
  815. padding: 10px;
  816. text-align:left;
  817. margin:0px;
  818. -moz-transition-duration:0.5s;
  819. -webkit-transition-duration:0.5s;
  820. -o-transition-duration:0.5s;}
  821.  
  822. .note img.avatar {
  823. margin-right: 10px;
  824. width: 25px;
  825. height: 25px;}
  826.  
  827.  
  828.  
  829.  
  830. /*-------------------------- MUSIC PLAYER ---------------------------*/
  831.  
  832.  
  833.  
  834. .songart{
  835. float:left;
  836. margin-right:10px;
  837. }
  838.  
  839. .songart img{
  840. width:80px;
  841. height:80px;
  842. }
  843.  
  844. .songtitle{
  845. margin-bottom:10px;
  846. margin-left:90px;
  847. }
  848.  
  849. .songauthor{
  850. margin-bottom:10px;
  851. font-size:8px;
  852. margin-left:90px;
  853. }
  854.  
  855. .tumblr_audio_player {
  856. height: 50px;
  857. }
  858.  
  859.  
  860.  
  861. /*---------------------------- TOOLTIP ---------------------------*/
  862.  
  863.  
  864.  
  865. #s-m-t-tooltip{
  866. max-width:400px;
  867. margin:15px;
  868. padding:2px 8px;
  869. background: #1c0915;
  870. background-image:url('{image:headerbackground}');
  871. background-repeat:repeat;
  872. background-attachment:fixed;
  873. border: double 3px #000;
  874. color:#fff;
  875. text-shadow:1px 1px 0px #000,
  876. z-index:99999999999999999999;
  877. font-size:9px;
  878. letter-spacing:2px;
  879. font-style:bold;
  880. letter-spacing:2px;
  881. font-family: calibri;
  882. text-transform:uppercase;
  883. box-shadow:1px 1px 3px rgba(0,0,0,.1);}
  884.  
  885.  
  886.  
  887. /*--------------------------- POPUP ------------------------------ */
  888.  
  889.  
  890. /*--Making IE6 Understand Fixed Positioning--*/
  891. *html #fade {
  892. position: absolute;
  893. }
  894. *html .popup_block {
  895. position: absolute;
  896. }
  897.  
  898. .popup_block{
  899. background-color: {color:background};
  900. border: 1px solid {color:postborder};
  901. height:350px;
  902. width: 600px;
  903. top:350px;
  904. padding: 10px;
  905. position: fixed;
  906. left: 800px;
  907. display: none; /*--hidden by default--*/
  908. float: left;
  909. font-size: 10px; /*font size of the words inside the box */
  910. position: fixed;
  911. z-index: 99999999999999999999999; /*if the box is hiding behind other things in your theme, add more 9′s */
  912. }
  913.  
  914.  
  915. #fade { /*--Transparent background layer--*/
  916. display: none; /*--hidden by default--*/
  917. background: {color:background};
  918. background-image: url('{image:popup}'); /*if you want to add a background image to go behind your popup */
  919. position: fixed; left: 0; top: 0;
  920. width: 100%; height: 100%;
  921. opacity: .5;
  922. z-index: 9999;
  923. }
  924.  
  925. .popupnavlinks {
  926. padding-top:5px;
  927. text-align:center; }
  928.  
  929.  
  930. .popupnavlinks a {
  931. display:inline-block;
  932. width:90px; height:4px;
  933. margin:2px; padding:15px 6px 10px;
  934. text-align:center;
  935. background-image: url('');
  936. background:transparent;
  937. background-repeat:repeat;
  938. background-attachment:fixed;
  939. border-bottom: solid 1px {color:popuplink};
  940. color:{color:popuplink};
  941. font-size:9px;
  942. font-family:calibri;
  943. text-shadow:1px 1px 0px #fff,
  944. display: inline-block;
  945. cursor: pointer;
  946. }
  947.  
  948. .popupnavlinks a:hover {
  949. display:inline-block;
  950. letter-spacing:2px;
  951. -moz-transition-duration: 0.4s;
  952. -webkit-transition-duration: 0.4s;
  953. -o-transition-duration: 0.4s;
  954. transition-duration: 0.4s;
  955. }
  956.  
  957.  
  958.  
  959. .popupclose {
  960. float:right; top:0px; right:0px;
  961. margin-top:-10px; margin-right:-10px;
  962. font-family:'Scada', sans serif;
  963. font-size:10px;
  964. font-weight:bold }
  965.  
  966. .popupclose a {
  967. color:#aaa }
  968.  
  969.  
  970. /*------------------------- POPUP IMAGES ---------------------------- */
  971.  
  972. #psideimage {
  973. width: 150px;
  974. height: 200px;
  975. background-color: #000;
  976. }
  977.  
  978. #textbox {
  979. width: 250px;
  980. height: 200px;
  981. overflow: auto;
  982. background-color: #222222;
  983. }
  984.  
  985. number {
  986. display:inline-block;
  987. text-align:center;
  988. margin-left:5px;
  989. margin-right:15px;
  990. font-family:karla;
  991. font-size:10px;
  992. width:10px;
  993. height:10px;
  994. line-height:10px;
  995. padding:8px;
  996. float:left;
  997. border-radius:10px;
  998. color:#6f6a94;
  999. background-color:#dc977d;
  1000.  
  1001. }
  1002.  
  1003. infonumber {
  1004. display:inline-block;
  1005. padding-bottom: 5px;
  1006.  
  1007. }
  1008.  
  1009.  
  1010. #circle {
  1011. width: 50px;
  1012. height: 50px;
  1013. border-radius: 100%;
  1014. color:#dc977d;
  1015. background-color:#dc977d;
  1016. }
  1017.  
  1018. #popuplinks {
  1019. width: 250px;
  1020. height: 50px;
  1021. background-color: #999999;
  1022. }
  1023.  
  1024. /* ----------------------------- CHAT CODE --------------------------- */
  1025.  
  1026. /* chat cred: https://dear-indies.tumblr.com/post/125257866576/animalites-imessage-chat-post-ive-seen-a-lot */
  1027.  
  1028. /* IMESSAGE CHAT POST */
  1029. .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}
  1030. .asked p {
  1031. text-align: left;
  1032. margin: 0 0px 10px 0px;
  1033. padding: 0;
  1034. color: #666666;
  1035. font-family: 'Inconsolata', Inconsolata;
  1036. font-size: 12px;
  1037. line-height: 0px;
  1038. }
  1039. .footerright .viasrc {
  1040. float: left;
  1041. }
  1042. .asked a {
  1043. margin:0;padding:0;
  1044. }
  1045. .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}
  1046. .convo {
  1047. overflow: hidden;
  1048. list-style-type: none;
  1049. padding: 0;
  1050. margin: 0;
  1051. }
  1052.  
  1053.  
  1054.  
  1055. /* ----------------------------- VERSE TAB --------------------------- */
  1056. /*--
  1057.  
  1058. updates tab #2 by BRAVETHEMES
  1059.  
  1060. ◤ ◥
  1061. don't be a lil bitch;
  1062. keep the credits.
  1063. ◣ ◢
  1064.  
  1065. - - - -
  1066.  
  1067. for html help go to:
  1068. http://bravethemes.tumblr.com/
  1069. http://htmlqueens.tumblr.com/
  1070.  
  1071. --*/
  1072. /* the thing that holds them together */
  1073. #holder{
  1074. width:390px; /* change width of the whole thing here */
  1075. height:auto;
  1076. background:#fff; /* change the background color */
  1077. padding:5px;
  1078. font-size:10px; /* change font size */
  1079. border:0px solid #000; /* change border */
  1080. top:175px; /* change the position */
  1081. left:600px; /* change the position */
  1082. font-family:calibri; /* change the font family */
  1083. text-align:center;
  1084. position:fixed;
  1085. }
  1086. /* the titles */
  1087. .label{
  1088. font-weight:bold;
  1089. background:{color:background}; /*change the label background */
  1090. letter-spacing:1px;
  1091. text-transform:uppercase;
  1092. padding:5px;
  1093. margin:5px;
  1094. cursor:help;
  1095. border:1px solid {color:postborder}; /* change border */
  1096. }
  1097. /* the inside text */
  1098. .inside{
  1099. font-weight:none;
  1100. display:none;
  1101. /* if you want there to be a scrollbar just add height:NUMBERpx; nad under that add overflow-y:auto; */
  1102. }
  1103.  
  1104. /* you can edit anything from here on down */
  1105. .inside a{
  1106. color:#000;
  1107. text-transform:uppercase;
  1108. letter-spacing:1px;
  1109. text-decoration:underline;
  1110. font-style:italic;
  1111. }
  1112. .inside a:hover{
  1113. color:#bbb;
  1114. }
  1115. .inside i{
  1116. font-style:italic;
  1117. letter-spacing:1px;
  1118. background:#eee;
  1119. }
  1120. .inside b{
  1121. font-weight:bold;
  1122. }
  1123. .inside u{
  1124. text-decoration:underline;
  1125. text-transform:uppercase;
  1126. }
  1127. .inside s{
  1128. text-decoration:line-through;
  1129. font-size:smaller;
  1130. }
  1131.  
  1132.  
  1133. </style>
  1134.  
  1135.  
  1136.  
  1137. <body>
  1138.  
  1139. <!------------------------ TITLE BAR -------------------------------->
  1140. <div class="titlebar">
  1141. <div style="margin-top: -20px;"><h5>{text:titlehere}</h5></div>
  1142. </div>
  1143. <!----------------------- TITLE BAR END ------------------------------>
  1144.  
  1145.  
  1146.  
  1147. <!--------------------------- SIDEBOX -------------------------------->
  1148.  
  1149. <div class="sidebox">
  1150. <p><img src="{image:headimage}" id="headimage" style="float: left; padding: 2px;"> {text:description}
  1151.  
  1152.  
  1153.  
  1154. </div>
  1155.  
  1156. <!------------------------- SIDEBOX END ------------------------------>
  1157.  
  1158. <!--------------------------- NAVBAR -------------------------------->
  1159. <div class="navbar">
  1160.  
  1161. <center>
  1162.  
  1163. <a href="/" class="navi" title="home" style="padding-right: 3px;">Home</a>
  1164. <a href="/ask" class="navi" title="ask" style="padding-right: 3px;">Ask</a>
  1165. <a href="#?w=600" rel="box1" class="navi poplight" title="Rules" style="padding-right: 3px;">Rules</a>
  1166. <a href="#?w=400" rel="box2" class="navi poplight" title="Navigation" style="padding-right: 3px;">Atlas</a>
  1167. <a href="#?w=400" rel="box3" class="navi poplight" title="verses" style="padding-right: 3px;">Verses</a>
  1168.  
  1169.  
  1170. </center>
  1171. </div>
  1172. <!------------------------- NAVBAR END ------------------------------>
  1173.  
  1174. <!------------------------- RULES START ------------------------------>
  1175. <div id="box1" class="popup_block">
  1176.  
  1177. <div style="width: auto; height: 500px; overflow: auto;">
  1178.  
  1179. <div id="psideimage">
  1180. <img src="{image:popupimage}">
  1181. </div>
  1182.  
  1183. <div id="textbox" style="margin-top: -200px; margin-left: 160px; width: 260px; height: 210px; padding: 5px;">
  1184. <infonumber><number>1.)</number>{text:popup 1}<br></infonumber><br>
  1185. <infonumber><number>2.)</number>{text:popup 2}<br></infonumber><br>
  1186. <infonumber><number>3.)</number>{text:popup 3}<br></infonumber><br>
  1187. <infonumber><number>4.)</number>{text:popup 4}<br></infonumber><br>
  1188. <infonumber><number>5.)</number>{text:popup 5}<br></infonumber><br>
  1189. </div>
  1190.  
  1191. <div id="circle" style="margin-left: 450px; margin-top: -200px;"></div>
  1192.  
  1193.  
  1194. <div id="popuplinks" style="margin-top: 175px; margin-left: 200px;"><a href="/rules" class="mainlinks">Rules</a></div>
  1195.  
  1196. </div>
  1197. </div>
  1198. <!------------------------- RULES END ------------------------------>
  1199. <!------------------------- POPUPS END ------------------------------>
  1200.  
  1201.  
  1202. <!----------------------------- CREDIT ------------------------------>
  1203.  
  1204. <div class="credit">
  1205. <a href="https://themesbyzorra.tumblr.com/" title="Themes By Zorra">♛</a>
  1206. </div>
  1207. </body>
  1208.  
  1209. <!--------------------------- CREDIT END ----------------------------->
  1210.  
  1211.  
  1212. <!------------------------- BLOG CONTENT ----------------------------->
  1213.  
  1214. <div class="pagination">{block:Pagination}
  1215. {block:PreviousPage}<a href="{PreviousPage}" class="fourth" style="margin-right: 200px;">fall/</a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" class="fourth" style="margin-left: 0px;">/rise</a>
  1216. {/block:NextPage}
  1217. {/block:Pagination}</div>
  1218.  
  1219. <div id="container">
  1220.  
  1221. {block:Posts}
  1222.  
  1223. <div class="posts">
  1224.  
  1225. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  1226.  
  1227. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}
  1228. {/block:Photo}
  1229.  
  1230. {block:Photoset}{Photoset}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  1231.  
  1232. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  1233.  
  1234. {block:Video}
  1235. <div class="video">{Video-500}</div>
  1236. {/block:Video}
  1237.  
  1238. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  1239.  
  1240.  
  1241. {block:Quote}<quotetext>❝{Quote}❞</quotetext>{block:Source}<h3>{Source}</h3>{/block:Source}{/block:Quote}
  1242.  
  1243.  
  1244.  
  1245. {block:Chat}
  1246. {block:Title}
  1247. <h1>{Title}</h1>{/block:Title}<br>
  1248. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  1249. {Line}</li>{/block:Lines}</ul>
  1250. {/block:Chat}
  1251.  
  1252.  
  1253. <!--------------------------- AUDIO POST ------------------------------>
  1254. {block:Audio}
  1255. {block:AlbumArt}
  1256. <div class="songart">
  1257. <img src="{AlbumArtURL}">
  1258. </div>
  1259. {/block:AlbumArt}
  1260. <div class="songtitle">
  1261. {block:TrackName}
  1262. {TrackName}
  1263. {/block:TrackName}
  1264. </div>
  1265. <div class="songauthor">
  1266. By
  1267. {block:Artist}
  1268. {Artist}
  1269. {/block:Artist}
  1270. </div>
  1271. {AudioPlayerWhite}
  1272. {/block:Audio}
  1273.  
  1274.  
  1275.  
  1276. {block:Answer}
  1277. <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>
  1278.  
  1279.  
  1280. <div id="question" style="margin-top: -5px">{Question}</div><img src="{AskerPortraitURL-48}" style="border-radius: 100px; margin-left: 325px; margin-top: -20px;">
  1281. <div id="answer" style="margin-top: 20px;">{Answer}</div>
  1282. {/block:Answer}
  1283.  
  1284.  
  1285. <!----------------------- INFO & SYMBOLS ----------------------------->
  1286.  
  1287. <div id="infobox">
  1288. <div id="info">
  1289. <br>
  1290.  
  1291. &nbsp; &nbsp;
  1292.  
  1293.  
  1294.  
  1295. {block:Date}
  1296. <a href="{Permalink}"style="position:absolute; width: autopx; margin-left: 100px; margin-top:0px; letter-spacing: 2px; font-size: 12px; font-family: 'Staatliches', cursive;" title="{TimeAgo} & {NoteCount} notes ">{ShortMonth} {DayOfMonthWithZero} </a>
  1297. {/block:Date}
  1298.  
  1299.  
  1300. <a href="{ReblogURL}" style="position:absolute; margin-left:155px; margin-top:0px; letter-spacing: 2px; font-size:12px; font-family: 'Staatliches', cursive;" title="reblog"> Reblog </a>
  1301.  
  1302.  
  1303.  
  1304. {block:NoRebloggedFrom}
  1305. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1306. {/block:NoRebloggedFrom}
  1307.  
  1308.  
  1309. {block:ContentSource}
  1310. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1311. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1312. {/block:SourceLogo}
  1313. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1314. {/block:ContentSource}
  1315. <br>
  1316.  
  1317.  
  1318. <!------------------- INFO & SYMBOLS ENDS --------------------------->
  1319.  
  1320.  
  1321. {block:HasTags}<div id="tags">{block:Tags}&nbsp;<a href="{TagURL}" title="{Tag}">{Tag},</a> {/block:Tags}</div>{/block:HasTags}</div> &nbsp;
  1322.  
  1323. <br><br><br><br>
  1324. </div>
  1325. </div>
  1326.  
  1327. {/block:Posts}
  1328. <div class="notecontainer">
  1329. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1330. </div></div>
  1331. {/block:Posts}
  1332.  
  1333. </div>
  1334.  
  1335.  
  1336.  
  1337.  
  1338.  
  1339. </html>
Advertisement
Add Comment
Please, Sign In to add comment