API tools faq
paste
juliaroleplays

THEME 005: STRUCK BY STARLIGHT

juliaroleplays
Nov 11th, 2017 (edited)
732
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 60.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!----------------
  6.  
  7. THEME 005: STRUCK BY STARLIGHT by JULIAROLEPLAYS
  8.  
  9. ✴ please do not steal any part of this code for personal use
  10. ✴ if you have any questions or come across any errors, please feel free to send me a message
  11. ✴ links to all credited users/sites can be found at juliaroleplays.tumblr.com/theme
  12. ✴ basecode by neonbikethemes
  13. ✴ 540px post scripts by oddhour
  14. ✴ custom like button by shythemes
  15. ✴ tumblr controls styling by cyantists
  16. ✴ audio post styling by octomoosey
  17. ✴ filtering script from http://isotope.metafizzy.co/
  18.  
  19. ---------------->
  20.  
  21. {block:Description}
  22. <meta name="description" content="{MetaDescription}" />
  23. {/block:Description}
  24. <meta charset="utf-8">
  25. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  26. <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  27. <link rel="shortcut icon" href="{Favicon}">
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  29.  
  30. <!---------------- images ---------------->
  31.  
  32. <meta name="image:Background" content=""/>
  33. <meta name="image:Sidebar Background" content=""/>
  34.  
  35. <!---------------- COLORS ---------------->
  36.  
  37. <!-------- GENERAL -------->
  38.  
  39. <meta name="color:Background" content=""/>
  40. <meta name="color:Container Background" content=""/>
  41. <meta name="color:Tooltip Background" content=""/>
  42. <meta name="color:Tooltip Text" content=""/>
  43. <meta name="color:Highlight Background" content=""/>
  44. <meta name="color:Highlight Text" content=""/>
  45. <meta name="color:Text" content=""/>
  46. <meta name="color:Bold" content=""/>
  47. <meta name="color:Italic" content=""/>
  48. <meta name="color:Links" content=""/>
  49. <meta name="color:Links Hover" content=""/>
  50. <meta name="color:Scrollbar Background" content=""/>
  51. <meta name="color:Scrollbar Slider" content=""/>
  52. <meta name="color:Pagination Link" content=""/>
  53. <meta name="color:Pagination Hover" content=""/>
  54. <meta name="color:Pagination Text" content=""/>
  55. <meta name="color:Tumblr Controls" content=""/>
  56.  
  57. <!-------- SIDEBAR -------->
  58.  
  59. <meta name="color:Sidebar Background" content=""/>
  60. <meta name="color:Title" content=""/>
  61. <meta name="color:Title Shadow" content=""/>
  62. <meta name="color:Subtitle" content=""/>
  63. <meta name="color:Subtitle Shadow" content=""/>
  64. <meta name="color:Description Background" content=""/>
  65. <meta name="color:Description Text" content=""/>
  66. <meta name="color:Tabs Background" content=""/>
  67. <meta name="color:Tabs Color" content=""/>
  68. <meta name="color:Tabs Hover" content=""/>
  69. <meta name="color:Tabs Selected" content=""/>
  70.  
  71. <!-------- TABS GENERAL -------->
  72.  
  73. <meta name="color:Tab Title Color" content=""/>
  74. <meta name="color:Tab Border" content=""/>
  75. <meta name="color:Tabs h1" content=""/>
  76.  
  77.  
  78. <!-------- POSTS GENERAL -------->
  79.  
  80. <meta name="color:Post Background" content=""/>
  81. <meta name="color:Post Text" content=""/>
  82. <meta name="color:Post Info Background" content=""/>
  83. <meta name="color:Post Info Text" content=""/>
  84. <meta name="color:Post Info Link" content=""/>
  85. <meta name="color:Post Info Link Hover" content=""/>
  86. <meta name="color:Post Title" content=""/>
  87.  
  88. <!-------- ASKS -------->
  89.  
  90. <meta name="color:Ask Background" content=""/>
  91. <meta name="color:Ask Border" content=""/>
  92. <meta name="color:Asker Text" content=""/>
  93. <meta name="color:Asker Text Hover" content=""/>
  94. <meta name="color:Question" content=""/>
  95.  
  96. <!-------- AUDIO -------->
  97.  
  98. <meta name="color:Audio Info Background" content=""/>
  99. <meta name="color:Audio Info Text" content=""/>
  100.  
  101. <!-------- CHAT -------->
  102.  
  103. <meta name="color:Chat Text 1" content=""/>
  104. <meta name="color:Chat Text 2" content=""/>
  105. <meta name="color:Chat Text 3" content=""/>
  106. <meta name="color:Chat Background 1" content=""/>
  107. <meta name="color:Chat Background 2" content=""/>
  108. <meta name="color:Chat Background 3" content=""/>
  109.  
  110. <!-------- QUOTE -------->
  111.  
  112. <meta name="color:Quote Color" content=""/>
  113.  
  114. <!-------- LINK POST -------->
  115.  
  116. <meta name="color:Link Post Text" content=""/>
  117. <meta name="color:Link Post Text Hover" content=""/>
  118.  
  119. <!-------- MUSES -------->
  120.  
  121. <meta name="color:Filter Group Title" content=""/>
  122. <meta name="color:Filter Button Text" content=""/>
  123. <meta name="color:Filter Text Hover" content=""/>
  124. <meta name="color:Muse Box" content=""/>
  125. <meta name="color:Muse Name" content=""/>
  126. <meta name="color:Muse Link Text" content=""/>
  127. <meta name="color:Muse Link Background" content=""/>
  128. <meta name="color:Muse Link Text Hover" content=""/>
  129. <meta name="color:Muse Link Background Hover" content=""/>
  130.  
  131. <!-------- VERSES -------->
  132.  
  133. <meta name="color:Verse Title Color" content=""/>
  134. <meta name="color:Verse Title Shadow" content=""/>
  135.  
  136. <!-------- BLOGROLL -------->
  137.  
  138. <meta name="color:Blogroll Info Background" content=""/>
  139. <meta name="color:Blogroll Info Border" content=""/>
  140. <meta name="color:Blogroll Link" content=""/>
  141. <meta name="color:Blogroll Link Hover" content=""/>
  142.  
  143. <!-------- NAVIGATION -------->
  144.  
  145. <meta name="color:Navigation Link Text" content=""/>
  146. <meta name="color:navigation Link Background" content=""/>
  147. <meta name="color:Navigation Link Text Hover" content=""/>
  148. <meta name="color:Navigation Link Background Hover" content=""/>
  149.  
  150. <!---------------- TEXT ---------------->
  151.  
  152. <!-------- GENERAL -------->
  153.  
  154. <meta name="text:Subtitle" contents=""/>
  155. <meta name="text:Sidebar Hover RGBA" content="64, 64, 64"/>
  156.  
  157. <!-------- TABS -------->
  158.  
  159. <meta name="text:Tab 1 Icon" content="home"/>
  160. <meta name="text:Tab 1 Tooltip" content="Home"/>
  161. <meta name="text:Tab 2 Icon" content="envelope"/>
  162. <meta name="text:Tab 2 Tooltip" content="Message & FAQ"/>
  163. <meta name="text:Tab 3 Icon" content="exclamation-circle"/>
  164. <meta name="text:Tab 3 Tooltip" content="Rules & Guidelines"/>
  165. <meta name="text:Tab 4 Icon" content="user"/>
  166. <meta name="text:Tab 4 Tooltip" content="Characters"/>
  167. <meta name="text:Tab 5 Icon" content="book"/>
  168. <meta name="text:Tab 5 Tooltip" content="Verses"/>
  169. <meta name="text:Tab 6 Icon" content="user-plus"/>
  170. <meta name="text:Tab 6 Tooltip" content="Blogroll"/>
  171. <meta name="text:Tab 7 Icon" content="map"/>
  172. <meta name="text:Tab 7 Tooltip" content="Navigation"/>
  173.  
  174. <!---------------- FONTS ---------------->
  175.  
  176. <script src="https://use.fontawesome.com/a37075088e.js"></script>
  177.  
  178. <link href="https://fonts.googleapis.com/css?family=Permanent+Marker|Raleway" rel="stylesheet">
  179.  
  180.  
  181. <!-- IMPORTED SCRIPTS - DON'T REMOVE -->
  182.  
  183. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  184.  
  185. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  186.  
  187. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  188.  
  189. <!-- TOOLTIP SCRIPT (REMOVE ONYL IF YOU WANT STANDARD BROWSER TOOLTIPS) -->
  190.  
  191. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  192. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  193. <script>
  194. (function($){
  195. $(document).ready(function(){
  196. $("a[title]").style_my_tooltips({
  197. tip_follows_cursor:true,
  198. tip_delay_time:90,
  199. tip_fade_speed:600,
  200. attribute:"title"
  201. });
  202. });
  203. })(jQuery);
  204. </script>
  205.  
  206.  
  207. <style type="text/css">
  208.  
  209. /*---------------- GENERAL STYLING ----------------*/
  210.  
  211. /*-------- FONTS ---------*/
  212.  
  213. @font-face {
  214. font-family:"typeface";
  215. src:url('https://dl.dropboxusercontent.com/s/67i5cu6nksxk26x/Lemon%20Tuesday.otf');
  216. }
  217.  
  218.  
  219. /* -------- SELECTION TOOL ------- */
  220.  
  221. ::-moz-selection {
  222. background: {color:Highlight Background};
  223. color: {color:Highlight Text};
  224. }
  225.  
  226. ::selection {
  227. background: {color:Highlight Background};
  228. color: {color:Highlight Text};
  229. }
  230.  
  231. /*---------------- SCROLLBAR ----------------*/
  232.  
  233. ::-webkit-scrollbar {
  234. width: 3px;
  235. }
  236.  
  237. ::-webkit-scrollbar-track {
  238. background: {color:Scrollbar Background};
  239. }
  240.  
  241. ::-webkit-scrollbar-thumb {
  242. background: {color:Scrollbar Slider};
  243. }
  244. ::-webkit-scrollbar-thumb:window-inactive {
  245. background: transparent;
  246. }
  247.  
  248. /*---------------- TOOL TIPS ----------------*/
  249.  
  250. #s-m-t-tooltip {
  251. max-width: 300px;
  252. margin: 10px 0px 0px 10px;
  253. padding: 5px;
  254. background-color: {color:Tooltip Background};
  255. font-family: helvetica;
  256. font-size: 12px;
  257. color: {color:Tooltip Text};
  258. z-index: 999999999999999999999999999999999999;
  259. }
  260.  
  261. /*---------------- GENERAL STYLING ----------------*/
  262.  
  263. body {
  264. margin: 0;
  265. padding: 0;
  266. background: {color:Background} url('{image:Background}');
  267. background-attachment: fixed;
  268. -webkit-background-size: cover;
  269. -moz-background-size: cover;
  270. -o-background-size: cover;
  271. background-size: cover;
  272. background-position: bottom center;
  273. font-family: helvetica;
  274. font-size: 12px;
  275. color: {color:Text};
  276. line-height: 150%;
  277. }
  278.  
  279. a {
  280. color: {color:Links};
  281. text-decoration: none;
  282. -webkit-transition: all .8s;
  283. -moz-transition: all .8s;
  284. -o-transition: all .8s;
  285. -ms-transition: all .8s;
  286. transition: all .8s;
  287. }
  288.  
  289. a:hover{
  290. color:{color:Links Hover};
  291. -webkit-transition: all .8s;
  292. -moz-transition: all .8s;
  293. -o-transition: all .8s;
  294. -ms-transition: all .8s;
  295. transition: all .8s;
  296. }
  297.  
  298. b, strong {
  299. color: {color:Bold};
  300. }
  301.  
  302. i, em {
  303. color: {color:Italic};
  304. }
  305.  
  306. blockquote {
  307. border-left: 2px solid {color:Post Info Background};
  308. margin: 10px;
  309. padding-left: 25px;
  310. padding-top: 3px;
  311. padding-bottom: 3px;
  312. }
  313.  
  314. iframe, img, embed, object, video {
  315. max-width: 100%;
  316. }
  317.  
  318. small, sup, sub {
  319. font-size: 12px;
  320. }
  321.  
  322. p {
  323. margin-bottom: 10px;
  324. }
  325.  
  326. img {
  327. height: auto;
  328. width: auto;
  329. max-width: 100%;
  330. }
  331.  
  332. h1 {
  333. text-transform: uppercase;
  334. font-size: 13px;
  335. }
  336.  
  337. ul {
  338. list-style-type: none;
  339. }
  340.  
  341. ul li:before {
  342. content: '\2014';
  343. position: absolute;
  344. margin-left: -20px;
  345. }
  346.  
  347. ol {
  348. list-style-type:;
  349. }
  350.  
  351. #container {
  352. position: absolute;
  353. margin: auto;
  354. top: 0;
  355. right: 0;
  356. bottom: 0;
  357. left: 0;
  358. width: 1100px;
  359. height: 600px;
  360. background: {color:Container Background};
  361. overflow-y: scroll;
  362. }
  363.  
  364. .tabcontent {
  365. margin-top: -130px;
  366. margin-left: 95px;
  367. width: 540px;
  368. padding: 30px;
  369. margin-bottom: 20px;
  370. background: {color:Post Background};
  371. }
  372.  
  373. #postcontainer {
  374. margin-top: -130px;
  375. margin-left: 95px;
  376. }
  377.  
  378. /*---------------- SIDEBAR ----------------*/
  379.  
  380. #sidebar {
  381. position: fixed;
  382. width: 300px;
  383. height: 600px;
  384. background: {color:Sidebar Background} url('{image:Sidebar Background}');
  385. transition: 0.8s;
  386. -webkit-transition: all 0.8s ease;
  387. -moz-transition: all 0.8s ease;
  388. -o-transition: all 0.8s ease;
  389. }
  390.  
  391. #info {
  392. position: absolute;
  393. width: 220px;
  394. height: 280px;
  395. padding: 10px;
  396. margin: auto;
  397. top: 0;
  398. right: 0;
  399. bottom: 0;
  400. left: 0;
  401. opacity: 0;
  402. transition: 0.8s;
  403. -webkit-transition: all 0.8s ease;
  404. -moz-transition: all 0.8s ease;
  405. -o-transition: all 0.8s ease;
  406. }
  407.  
  408. #sidebar:hover #info {
  409. opacity: 1;
  410. transition: 0.8s;
  411. -webkit-transition: all 0.8s ease;
  412. -moz-transition: all 0.8s ease;
  413. -o-transition: all 0.8s ease;
  414. }
  415.  
  416. #hover {
  417. position: absolute;
  418. width: 300px;
  419. height: 600px;
  420. transition: 0.8s;
  421. -webkit-transition: all 0.8s ease;
  422. -moz-transition: all 0.8s ease;
  423. -o-transition: all 0.8s ease;
  424. }
  425.  
  426. #sidebar:hover #hover{
  427. background: rgba({text:Sidebar Hover RGBA}, 0.6);
  428. transition: 0.8s;
  429. -webkit-transition: all 0.8s ease;
  430. -moz-transition: all 0.8s ease;
  431. -o-transition: all 0.8s ease;
  432. }
  433.  
  434. #title {
  435. font-family: typeface;
  436. font-size: 28px;
  437. line-height: 1;
  438. text-align: center;
  439. text-shadow: 1px 2px {color:Title Shadow};
  440. color: {color:Title};
  441. }
  442.  
  443. #subtitle {
  444. font-family: Raleway;
  445. font-size: 13px;
  446. font-weight: 900;
  447. text-align: center;
  448. text-shadow: 1px 1px {color:Subtitle Shadow};
  449. text-transform: uppercase;
  450. color: {color:Subtitle};
  451. }
  452.  
  453. #description {
  454. width: 190px;
  455. height: 175px;
  456. padding: 15px;
  457. margin-top: 10px;
  458. text-align: justify;
  459. line-height: 1.5;
  460. color: {color:Description Text};
  461. outline: 3px solid {color:Description Background};
  462. outline-offset: 5px;
  463. background: {color:Description Background};
  464. overflow-y: scroll;
  465. }
  466.  
  467. #tabs {
  468. margin-left: 300px;
  469. width: 50px;
  470. height: 100%;
  471. background: {color:Tabs Background};
  472. }
  473.  
  474. /*---------------- TAB LINKS ----------------*/
  475.  
  476. .tabs {
  477. display: inline-block;
  478. margin-top: 140px;
  479. width: 50px;
  480. }
  481.  
  482. .tab-links:after {
  483. display: block;
  484. clear: both;
  485. content:'';
  486. }
  487.  
  488. .tab-links i {
  489. font-size: 20px;
  490. }
  491.  
  492. .tab-links li {
  493. padding: 10px;
  494. margin-left: -40px;
  495. list-style: none;
  496. text-transform: uppercase;
  497. border-bottom: 1px solid transparent;
  498. transition: 0.8s;
  499. -webkit-transition: all 0.8s ease;
  500. -moz-transition: all 0.8s ease;
  501. -o-transition: all 0.8s ease;
  502. }
  503.  
  504. .tab-links li:before {
  505. content: none;
  506. }
  507.  
  508. .tab-links li:hover {
  509. border-bottom: 1px solid {color:Tabs Hover};
  510. transition: 0.8s;
  511. -webkit-transition: all 0.8s ease;
  512. -moz-transition: all 0.8s ease;
  513. -o-transition: all 0.8s ease;
  514. }
  515.  
  516. .tab-links a {
  517. padding: 7px;
  518. color:{color:Tabs Color};
  519. border-bottom: 1px solid transparent;
  520. transition: 0.8s;
  521. -webkit-transition: all 0.8s ease;
  522. -moz-transition: all 0.8s ease;
  523. -o-transition: all 0.8s ease;
  524. }
  525.  
  526. .tab-links a:hover {
  527. text-decoration: none;
  528. color: {color:Tabs Hover};
  529. transition: 0.8s;
  530. -webkit-transition: all 0.8s ease;
  531. -moz-transition: all 0.8s ease;
  532. -o-transition: all 0.8s ease;
  533. }
  534.  
  535.  
  536. li.active a, li.active a:hover {
  537. color: {color:Tabs Selected};
  538. background: transparent;
  539. transition: 0.8s;
  540. -webkit-transition: all 0.8s ease;
  541. -moz-transition: all 0.8s ease;
  542. -o-transition: all 0.8s ease;
  543. }
  544.  
  545. /*---------------- TAB CONTENT ----------------*/
  546.  
  547. .tab-content {
  548. width: 500px;
  549. padding: 30px;
  550. margin-left: 300px;
  551. }
  552.  
  553. .tabcontent h2 {
  554. width: 100%;
  555. font-family: typeface;
  556. font-size: 30px;
  557. font-weight: 300;
  558. text-align: center;
  559. color: {color:Tab Title Color};
  560. border-bottom: 1px solid {color:Tab Border};
  561. line-height: 0.1em;
  562. margin: 10px 0 20px;
  563. }
  564.  
  565. .tabcontent h2 span {
  566. background: {color:Post Background};
  567. padding: 0 10px;
  568. }
  569.  
  570. .tab {
  571. display: none;
  572. }
  573.  
  574. .tab.active {
  575. display: block;
  576. }
  577.  
  578. /*---------------- POSTS ----------------*/
  579.  
  580. article {
  581. padding: 30px;
  582. width: 540px;
  583. color: {color:Post Text};
  584. background: {color:Post Background};
  585. }
  586.  
  587. .oddhour-high-res {
  588. width: 540px;
  589. text-align: center;
  590. }
  591.  
  592. .oddhour-high-res img {
  593. max-width: 100%;
  594. }
  595.  
  596. /* ---------------------------- POST INFO -----------------------------*/
  597.  
  598. /*-------- POST TOP BAR --------*/
  599.  
  600. .posttop {
  601. width: 570px;
  602. padding: 10px 15px;
  603. font-family: Raleway;
  604. font-size: 11px;
  605. font-weight: 900;
  606. text-transform: uppercase;
  607. color: {color:Post Info Text};
  608. background: {color:Post Info Background};
  609. }
  610.  
  611. .posttop a {
  612. color: {color:Post Info Link};
  613. transition: 0.8s;
  614. -webkit-transition: all 0.8s ease;
  615. -moz-transition: all 0.8 ease;
  616. -o-transition: all 0.8s ease;
  617. }
  618.  
  619. .posttop a:hover {
  620. color: {color:Post Info Link Hover};
  621. transition: 0.8s;
  622. -webkit-transition: all 0.8s ease;
  623. -moz-transition: all 0.8 ease;
  624. -o-transition: all 0.8s ease;
  625. }
  626.  
  627. svg {
  628. width: 12px;
  629. height: auto;
  630. padding: 1px;
  631. display: block;
  632. overflow: visible;
  633. fill: {color:Post Info Link};
  634. }
  635.  
  636. .controls a {
  637. float: right;
  638. margin-top: -19px;
  639. display: inline-block;
  640. overflow: hidden;
  641. padding: 5px;
  642. width: 10px;
  643. height: 15px;
  644. }
  645.  
  646. .controls .reblog {
  647. opacity :.93;
  648. fill: {color:Post Info Link};
  649. }
  650.  
  651. .controls .reblog svg {
  652. width: 11px;
  653. }
  654.  
  655. .controls .like .liked + svg {
  656. opacity: 1;
  657. }
  658.  
  659. .controls .like .liked + svg path {
  660. fill: #ec5a5a;
  661. }
  662.  
  663. .controls .like .like_button {
  664. position: relative;
  665. }
  666.  
  667. .controls .like .like_button iframe {
  668. position: absolute;
  669. top: 0;
  670. left: 0;
  671. bottom: 0;
  672. right: 0;
  673. z-index: 2;
  674. opacity: 0;
  675. }
  676.  
  677. .postbottom {
  678. width: 570px;
  679. padding: 10px 15px;
  680. margin-bottom: 25px;
  681. font-family: Raleway;
  682. font-size: 11px;
  683. font-weight: 900;
  684. text-align: center;
  685. text-transform: uppercase;
  686. color: {color:Post Info Text};
  687. background: {color:Post Info Background};
  688. }
  689.  
  690. .postbottom a {
  691. color: {color:Post Info Link};
  692. transition: 0.8s;
  693. -webkit-transition: all 0.8s ease;
  694. -moz-transition: all 0.8 ease;
  695. -o-transition: all 0.8s ease
  696. }
  697.  
  698. .postbottom a:hover {
  699. color: {color:Post Info Link Hover};
  700. transition: 0.8s;
  701. -webkit-transition: all 0.8s ease;
  702. -moz-transition: all 0.8 ease;
  703. -o-transition: all 0.8s ease
  704. }
  705.  
  706.  
  707. .tags {
  708. margin-top: 5px;
  709. font-weight: normal;
  710. }
  711.  
  712.  
  713. /* ---------------------------- POST NOTES ------------------------- */
  714.  
  715. ol.notes {
  716. display: block;
  717. text-align: left;
  718. list-style-type: none;
  719. margin-left: -40px;
  720. }
  721.  
  722. ol.notes li.note{
  723. margin-bottom: 5px;
  724. }
  725.  
  726. .pagenotes {
  727. width: 540px;
  728. padding: 15px 30px;
  729. margin-top: 15px;
  730. color: {color:Post Text};
  731. background: {color:Post Background};
  732. }
  733.  
  734. .pagenotes img{
  735. padding-right: 5px;
  736. padding-top: 5px;
  737. margin-bottom: -5px;
  738. }
  739.  
  740.  
  741. /* -------------------------- POST TYPES -------------------------- */
  742.  
  743. .title {
  744. font-family: Raleway;
  745. font-size: 25px;
  746. font-weight: 700;
  747. line-height: 1;
  748. text-transform: uppercase;
  749. color: {color:Post Title};
  750. }
  751.  
  752. /*-------- QUESTIONS --------*/
  753.  
  754. .ask {
  755. width: 540px;
  756. min-height: 64px;
  757. }
  758.  
  759. .askerimg {
  760. float: left;
  761. display: inline-block;
  762. margin-right: 10px;
  763. }
  764.  
  765. .questionblock {
  766. width: 430px;
  767. padding: 10px;
  768. margin-left: 86px;
  769. border: 1px solid {color:Ask Border};
  770. background: {color:Ask Background};
  771. }
  772.  
  773. .askertri {
  774. position: absolute;
  775. margin-left: 78px;
  776. margin-top: 25px;
  777. width: 15px;
  778. height: 15px;
  779. background: {color:Ask Background};
  780. border-bottom: 1px solid {color:Ask Border};
  781. border-left: 1px solid {color:Ask Border};
  782. transform: rotate(45deg);
  783. z-index: 1;
  784.  
  785. }
  786.  
  787. .asker {
  788. margin-left: 5px;
  789. font-family: Raleway;
  790. font-size: 15px;
  791. font-weight: 900;
  792. text-transform: uppercase;
  793. color: {color:Asker Text};
  794. }
  795.  
  796. .asker a {
  797. margin-left: 0px;
  798. font-weight: 900;
  799. color: {color:Asker Text};
  800. transition: 0.8s;
  801. -webkit-transition: all 0.8s ease;
  802. -moz-transition: all 0.8s ease;
  803. -o-transition: all 0.8s ease;
  804. }
  805.  
  806. .asker a:hover {
  807. color: {color:Asker Hover};
  808. transition: 0.8s;
  809. -webkit-transition: all 0.8s ease;
  810. -moz-transition: all 0.8s ease;
  811. -o-transition: all 0.8s ease;
  812. }
  813.  
  814. .subtitle {
  815. margin-top: -3px;
  816. padding-bottom: 5px;
  817. margin-left: 5px;
  818. font-size: 11px;
  819. letter-spacing: 2px;
  820. color: {color:Asker Text};
  821. }
  822.  
  823. .question {
  824. width: 415px;
  825. margin-left: 5px;
  826. min-height: 10px;
  827. padding: 10px
  828. padding-right: 5px;
  829. color:{color:Queston};
  830. }
  831.  
  832. /*-------- AUDIO --------*/
  833.  
  834. .playbutton {
  835. position: relative;
  836. margin-top: 45px;
  837. margin-left: 44px;
  838. z-index: 9;
  839. width: 33px;
  840. height: 30px;
  841. overflow: hidden;
  842. }
  843.  
  844. .albumart img {
  845. position: relative;
  846. margin-top: -75px;
  847. margin-left: 0px
  848. height: 120px;
  849. width: 120px;
  850. }
  851.  
  852. .trackinfo {
  853. margin-bottom: 10px;
  854. background: {color:Audio Info Background};
  855. color: {color:Audio Info Text};
  856. position: relative;
  857. margin-left: 120px;
  858. height: 120px;
  859. margin-top: -125px;
  860. }
  861.  
  862. .trackname {
  863. position: relative;
  864. padding-top: 30px;
  865. text-align: center;
  866. font-size: 14px;
  867. text-transform: uppercase;
  868. font-weight: bold;
  869. letter-spacing: 2px;
  870. }
  871.  
  872. .artist {
  873. text-align: center;
  874. font-size: 12px;
  875. text-transform: uppercase;
  876. letter-spacing: 4px;
  877. }
  878.  
  879. .album {
  880. text-align: center;
  881. font-style: italic;
  882. letter-spacing: 4px;
  883. }
  884.  
  885. .playcount {
  886. font-weight: bold;
  887. margin-top: 5px;
  888. text-align: center;
  889. letter-spacing: 2px;
  890. }
  891.  
  892. /*-------- CHAT --------*/
  893.  
  894. .chat li {
  895. width: 524px;
  896. margin-left: -40px;
  897. list-style:none;
  898. text-align:justify;
  899. margin-bottom:3px;
  900. padding: 8px;
  901. }
  902.  
  903. .chat li:before {
  904. content: none;
  905. }
  906.  
  907.  
  908. .user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label, .user_7 .label, .user_8 .label, .user_9 .label, .user_10 .label {
  909. font-family: Raleway;
  910. font-size: 13px;
  911. font-weight: bold;
  912. text-transform: uppercase;
  913. letter-spacing: 1px;
  914. }
  915.  
  916. .user_1, .user_4, .user_7, .user_10 {
  917. color: {color:Chat Text 1};
  918. background: {color:Chat Background 1};
  919. }
  920.  
  921. .user_2, .user_5, .user_8 {
  922. color: {color:Chat Text 2};
  923. background: {color:Chat Background 2};
  924. }
  925.  
  926. .user_3, .user_6, .user_9 {
  927. color: {color:Chat Text 3};
  928. background: {color:Chat Background 3};
  929. }
  930.  
  931. /*--------QUOTES --------*/
  932.  
  933. .quote {
  934. font-family: Raleway;
  935. text-transform: uppercase;
  936. font-size: 20px;
  937. font-weight: 900;
  938. letter-spacing: 2px;
  939. line-height: 120%;
  940. color:{color:Quote Color};
  941. }
  942.  
  943. .quotesource {
  944. text-align: left
  945. margin-bottom: 10px;
  946. }
  947.  
  948. /*-------- POST LINKS -------*/
  949.  
  950. .biglinks {
  951. font-family: Raleway;
  952. text-transform: uppercase;
  953. font-size: 20px;
  954. font-weight: 900;
  955. letter-spacing: 2px;
  956. line-height:120%;
  957. text-align: center;
  958. }
  959.  
  960. .biglinks a {
  961. color: {color:Link Post Text};
  962. transition: 0.8s;
  963. -webkit-transition: all 0.8s ease;
  964. -moz-transition: all 0.8s ease;
  965. -o-transition: all 0.8s ease;
  966. }
  967.  
  968. .biglinks a:hover {
  969. color: {color:Link Post Text Hover};
  970. transition: 0.8s;
  971. -webkit-transition: all 0.8s ease;
  972. -moz-transition: all 0.8s ease;
  973. -o-transition: all 0.8s ease;
  974. }
  975.  
  976. /*---------------- PAGINATION ----------------*/
  977.  
  978. #pagination {
  979. width: 600px;
  980. margin-right: 95px;
  981. font-family: Raleway;
  982. font-size: 13px;
  983. font-weight: 800;
  984. text-align: center;
  985. }
  986.  
  987. .pagibutton {
  988. display: inline-block;
  989. padding: 10px;
  990. font-family: typeface;
  991. font-size: 18px;
  992. font-weight: 400;
  993. color: {color:Pagination Text};
  994. }
  995.  
  996. .pagibutton a {
  997. color: {color:Pagination Link};
  998. transition: 0.8s;
  999. -webkit-transition: all 0.8s ease;
  1000. -moz-transition: all 0.8s ease;
  1001. -o-transition: all 0.8s ease;
  1002. }
  1003.  
  1004. .pagibutton a:hover {
  1005. color: {color:Pagination Hover};
  1006. transition: 0.8s;
  1007. -webkit-transition: all 0.8s ease;
  1008. -moz-transition: all 0.8s ease;
  1009. -o-transition: all 0.8s ease;
  1010. }
  1011.  
  1012. /*---------------- ASK & FAQ ----------------*/
  1013.  
  1014. .faq {
  1015. margin-top: 30px;
  1016. }
  1017.  
  1018. .faq h1 {
  1019. margin-top: 20px;
  1020. font-family: Raleway;
  1021. font-size: 18px;
  1022. font-weight: 800;
  1023. letter-spacing: 2px;
  1024. color: {color:Tabs h1};
  1025. }
  1026.  
  1027. .faq blockquote {
  1028. margin-left: 20px;
  1029. padding-left: 10px;
  1030. padding-top: 3px;
  1031. padding-bottom: 3px;
  1032. }
  1033.  
  1034. /*---------------- RULES ----------------*/
  1035.  
  1036. .rules {
  1037. margin-top: 30px;
  1038. }
  1039.  
  1040. .rules h1 {
  1041. margin-top: 15px;
  1042. font-family: Raleway;
  1043. font-size: 18px;
  1044. font-weight: 800;
  1045. letter-spacing: 2px;
  1046. color: {color:Tabs h1};
  1047. }
  1048.  
  1049. /*---------------- MUSES ----------------*/
  1050.  
  1051. /*-------- FILTERS --------*/
  1052.  
  1053. .filters {
  1054. width: 540px;
  1055. margin-top: 30px;
  1056. margin-left: auto;
  1057. margin-right: auto;
  1058. }
  1059.  
  1060. h5 {
  1061. display: inline-block;
  1062. margin: 2px;
  1063. font-family: Raleway;
  1064. font-size: 12px;
  1065. font-weight: 700;
  1066. text-transform: uppercase;
  1067. letter-spacing: 2px;
  1068. color: {color:Filter Group Title};
  1069. }
  1070.  
  1071. button {
  1072. display: inline-block;
  1073. border: none;
  1074. outline: none;
  1075. font-family: 'Open Sans Condensed', sans-serif;
  1076. font-size: 12px;
  1077. color: {color:Filter Button Text};
  1078. background: transparent;
  1079. transition: 0.8s;
  1080. -webkit-transition: all 0.8s ease;
  1081. -moz-transition: all 0.8s ease;
  1082. -o-transition: all 0.8s ease;
  1083. }
  1084.  
  1085. .button:hover {
  1086. color: {color:Filter Text Hover};
  1087. }
  1088.  
  1089. .button:active,.button.is-checked {
  1090. color: {color:Filter Text Hover};
  1091. }
  1092.  
  1093.  
  1094. /*-------- BOXES --------*/
  1095.  
  1096. .ccontain {
  1097. margin-top: 15px;
  1098. width: 540px;
  1099. min-height: 210px;
  1100. }
  1101.  
  1102. .character {
  1103. position: relative;
  1104. width: 150px;
  1105. height: 180px;
  1106. padding: 10px;
  1107. margin-right: 5px;
  1108. margin-left: 5px;
  1109. margin-top: 10px;
  1110. background: {color:Muse Box};
  1111. }
  1112.  
  1113. .character img {
  1114. width: 150px;
  1115. height: 150px;
  1116. }
  1117.  
  1118. .name {
  1119. display: inline-block;
  1120. width: 130px;
  1121. padding: 5px 10px;
  1122. font-family: Raleway;
  1123. font-size: 11px;
  1124. text-align: center;
  1125. letter-spacing: 2px;
  1126. text-transform: uppercase;
  1127. color: {color:Muse Name};
  1128. transition: 0.8s;
  1129. -webkit-transition: all 0.8s ease;
  1130. -moz-transition: all 0.8s ease;
  1131. -o-transition: all 0.8s ease;
  1132. }
  1133.  
  1134. .info {
  1135. position: absolute;
  1136. width: 150px;
  1137. padding: 5px 0px;
  1138. margin-left: 0px;
  1139. font-family: Raleway;
  1140. font-size: 11px;
  1141. text-align: center;
  1142. text-transform: uppercase;
  1143. letter-spacing: 2px;
  1144. color: {color:Muse Name};
  1145. background: {color:Muse Box};
  1146. transition: 0.8s;
  1147. -webkit-transition: all 0.8s ease;
  1148. -moz-transition: all 0.8s ease;
  1149. -o-transition: all 0.8s ease;
  1150. opacity: 0;
  1151. z-index: 999;
  1152. }
  1153.  
  1154. .characterlinks {
  1155. position: absolute;
  1156. margin-top: -143px;
  1157. width: 150px;
  1158. height: 150px;
  1159. opacity: 0;
  1160. z-index: 9999;
  1161. -webkit-transition: all 0.8s ease;
  1162. -moz-transition: all 0.8s ease;
  1163. -o-transition: all 0.8s ease;
  1164. }
  1165.  
  1166. .characterlinks a {
  1167. display: block;
  1168. margin-left: auto;
  1169. margin-right: auto;
  1170. width: 130px;
  1171. padding: 5px;
  1172. margin-bottom: 5px;
  1173. font-size: 10px;
  1174. text-align: center;
  1175. text-transform: uppercase;
  1176. letter-spacing: 2px;
  1177. color: {color:Muse Link Text};
  1178. background: {color:Muse Link Background};
  1179. -webkit-transition: all 0.8s ease;
  1180. -moz-transition: all 0.8s ease;
  1181. -o-transition: all 0.8s ease;
  1182. }
  1183.  
  1184. .characterlinks a:hover {
  1185. color: {color:Muse Link Text Hover};
  1186. background: {color:Muse Link Background Hover};
  1187. -webkit-transition: all 0.8s ease;
  1188. -moz-transition: all 0.8s ease;
  1189. -o-transition: all 0.8s ease;
  1190. }
  1191.  
  1192. .character:hover .info {
  1193. opacity: 1;
  1194. transition: 0.8s;
  1195. -webkit-transition: all 0.8s ease;
  1196. -moz-transition: all 0.8s ease;
  1197. -o-transition: all 0.8s ease;
  1198. }
  1199.  
  1200. .character:hover .characterlinks {
  1201. opacity: 1;
  1202. transition: 0.8s;
  1203. -webkit-transition: all 0.8s ease;
  1204. -moz-transition: all 0.8s ease;
  1205. -o-transition: all 0.8s ease;
  1206. }
  1207.  
  1208. /*---------------- VERSES ----------------*/
  1209.  
  1210. .verse {
  1211. width: 540px;
  1212. height: 50px;
  1213. margin-top: 30px;
  1214. background: Yellow;
  1215. }
  1216.  
  1217. .verse img {
  1218. width: 540px;
  1219. height: 50px;
  1220. }
  1221.  
  1222. .versetitle {
  1223. margin-top: -55px;
  1224. padding-top: 17px;
  1225. font-family: raleway;
  1226. font-size: 18px;
  1227. font-weight: 800;
  1228. letter-spacing: 2px;
  1229. text-align: center;
  1230. text-transform: uppercase;
  1231. text-shadow: 2px 2px {color:Verse Title Shadow};
  1232. color: {color:Verse Title Color};
  1233. }
  1234.  
  1235. /*---------------- BLOGROLL ----------------*/
  1236.  
  1237. .blogroll {
  1238. display: inline-block;
  1239. width: 240px;
  1240. height: 48px;
  1241. margin: 8px;
  1242. padding: 5px;
  1243. border: 1px solid {color:Blogroll Info Border};
  1244. background: {color:Blogroll Info Background};
  1245. }
  1246.  
  1247. .blogroll img {
  1248. float: left;
  1249. }
  1250.  
  1251. .blogrollinfo {
  1252. float: right;
  1253. width: 190px;
  1254. margin-top: 8px;
  1255. font-family: raleway;
  1256. text-align: center;
  1257. }
  1258.  
  1259. .blogrollinfo h1 a {
  1260. font-size: 12px;
  1261. font-weight: 900;
  1262. line-height: 100%;
  1263. text-transform: uppercase;
  1264. color: {color:Blogroll Link};
  1265. -webkit-transition: all 0.8s ease;
  1266. -moz-transition: all 0.8s ease;
  1267. -o-transition: all 0.8s ease;
  1268. }
  1269.  
  1270. .blogrollinfo h1 a:hover {
  1271. color: {color:Blogroll Link Hover};
  1272. -webkit-transition: all 0.8s ease;
  1273. -moz-transition: all 0.8s ease;
  1274. -o-transition: all 0.8s ease;
  1275. }
  1276.  
  1277. /*---------------- NAVIGATION ----------------*/
  1278.  
  1279. .navigation {
  1280. margin-top: 30px;
  1281. }
  1282.  
  1283. .navigation h1 {
  1284. margin-top: 10px;
  1285. font-family: Raleway;
  1286. font-size: 18px;
  1287. font-weight: 800;
  1288. letter-spacing: 2px;
  1289. color: {color:Tabs h1};
  1290. }
  1291.  
  1292. .navigation a {
  1293. display: inline-block;
  1294. width: 160px;
  1295. padding: 5px;
  1296. margin: 3px;
  1297. color: {color:Navigation Link Text};
  1298. background: {color:Navigation Link Background};
  1299. transition: 0.8s;
  1300. -webkit-transition: all 0.8s ease;
  1301. -moz-transition: all 0.8s ease;
  1302. -o-transition: all 0.8s ease;
  1303. }
  1304.  
  1305. .navigation a:hover {
  1306. color: {color:Navigation Link Text Hover};
  1307. background: {color:Navigation Link Background Hover};
  1308. transition: 0.8s;
  1309. -webkit-transition: all 0.8s ease;
  1310. -moz-transition: all 0.8s ease;
  1311. -o-transition: all 0.8s ease;
  1312. }
  1313.  
  1314. /*-------- CREDIT DO NOT REMOVE/MAKE INVISIBLE --------*/
  1315.  
  1316. .credit a {
  1317. font-family: 'raleway';
  1318. text-transform: uppercase;
  1319. color: #adafb2;
  1320. background-color: transparent;
  1321. font-size: 10px;
  1322. position: fixed;
  1323. bottom: 10px;
  1324. right: 10px;
  1325. border: 1px solid #adafb2;
  1326. padding: 3px;
  1327. opacity: .3;
  1328. transition: 0.8s;
  1329. -webkit-transition: all 0.8s ease;
  1330. -moz-transition: all 0.8s ease;
  1331. -o-transition: all 0.8s ease;
  1332. }
  1333.  
  1334. .credit a:hover {
  1335. color: #adafb2;
  1336. border: 1px solid #adafb2;
  1337. background: transparent;
  1338. opacity: 1;
  1339. transition: 0.8s;
  1340. -webkit-transition: all 0.8s ease;
  1341. -moz-transition: all 0.8s ease;
  1342. -o-transition: all 0.8s ease;
  1343. }
  1344.  
  1345. /*---------------- TUMBLR CONTROLS STUFF ----------------*/
  1346.  
  1347. iframe.tmblr-iframe {
  1348. z-index:99999999999999!important;
  1349. top: 3px!important;
  1350. right:10px!important;
  1351. opacity:0;
  1352. padding-right:38px;
  1353. /* delete invert(1) from here */
  1354. /*filter:invert(1) contrast(150%);*/
  1355. /*-webkit-filter:invert(1) contrast(150%);*/
  1356. /*-o-filter:invert(1) contrast(150%);*/
  1357. /*-moz-filter:invert(1) contrast(150%);*/
  1358. /*-ms-filter:invert(1) contrast(150%);*/
  1359. /* to here if your blog has a dark background */
  1360. transform:scale(!);
  1361. transform-origin:100% 0;
  1362. -webkit-transform:scale(.75);
  1363. -webkit-transform-origin:100% 0;
  1364. -o-transform:scale(.75);
  1365. -o-transform-origin:100% 0;
  1366. -moz-transform:scale(0.75);
  1367. -moz-transform-origin:100% 0;
  1368. -ms-transform:scale(.75);
  1369. -ms-transform-origin:100% 0;
  1370. transition: 0.8s;
  1371. -webkit-transition: all 0.8s ease;
  1372. -moz-transition: all 0.8s ease;
  1373. -o-transition: all 0.8s ease;
  1374. }
  1375.  
  1376. iframe.tmblr-iframe:hover {
  1377. opacity:0.6!important;
  1378. transition: 0.8s;
  1379. -webkit-transition: all 0.8s ease;
  1380. -moz-transition: all 0.8s ease;
  1381. -o-transition: all 0.8s ease;
  1382. }
  1383.  
  1384. .hcontrols {
  1385. position:fixed;
  1386. top:0;
  1387. right:0;
  1388. z-index:999999999;}
  1389.  
  1390. .hcontrols svg {
  1391. width:20px;
  1392. height:20px;
  1393. padding:9px;}
  1394.  
  1395. .hcontrols svg path {
  1396. fill: {color:Tumblr Controls};
  1397. }
  1398.  
  1399. /* --------------------------- Custom CSS -------------------------- */
  1400. {CustomCSS}
  1401. </style>
  1402. </head>
  1403. <body>
  1404.  
  1405. <div id="container">
  1406.  
  1407.  
  1408. <div id="sidebar">
  1409. <div id="hover"><div id="info">
  1410. <div id="title">{title}</div>
  1411. <div id="subtitle">{text:subtitle}</div>
  1412. <div id="description">{description}</div>
  1413. </div></div>
  1414.  
  1415. <div id="tabs">
  1416. <div class="tabs">
  1417. <ul class="tab-links">
  1418. <li class="active">
  1419. <a href="/" title="{text:Tab 1 Tooltip}"><i class="fa fa-{text:Tab 1 Icon}" aria-hidden="true"></i></a></li>
  1420. <li><a href="#tab2" title="{text:Tab 2 Tooltip}"><i class="fa fa-{text:Tab 2 Icon}" aria-hidden="true"></i></a></li>
  1421. <li><a href="#tab3" title="{text:Tab 3 Tooltip}"><i class="fa fa-{text:Tab 3 Icon}" aria-hidden="true"></i></a></li>
  1422. <li><a href="#tab4" title="{text:Tab 4 Tooltip}"><i class="fa fa-{text:Tab 4 Icon}" aria-hidden="true"></i></a></li>
  1423. <li><a href="#tab5" title="{text:Tab 5 Tooltip}"><i class="fa fa-{text:Tab 5 Icon}" aria-hidden="true"></i></a></li>
  1424. <li><a href="#tab6" title="{text:Tab 6 Tooltip}"><i class="fa fa-{text:Tab 6 Icon}" aria-hidden="true"></i></a></li>
  1425. <li><a href="#tab7" title="{text:Tab 7 Tooltip}"><i class="fa fa-{text:Tab 7 Icon}" aria-hidden="true"></i></a></li>
  1426. </ul>
  1427. </div>
  1428. </div>
  1429.  
  1430.  
  1431.  
  1432. </div>
  1433.  
  1434. <!-- --------------------------- TABS -------------------------- -->
  1435.  
  1436.  
  1437. <div class="tabs">
  1438.  
  1439.  
  1440. <!-- --------------------------- TAB 1 -------------------------- -->
  1441.  
  1442. <div class="tab-content">
  1443. <div id="tab1" class="tab active">
  1444.  
  1445. <div id="postcontainer">
  1446.  
  1447. {block:Posts}
  1448.  
  1449. <div class="posttop">
  1450. {block:Date}
  1451. <div class="date">
  1452. Posted
  1453. <a href="/day/{Year}/{MonthNumber}/{DayOfMonth}">
  1454. {ShortMonth} {DayOfMonth}{DayOfMonthSuffix}, {year}
  1455. </a>
  1456.  
  1457. <div class="controls">
  1458.  
  1459. <a href="#" class="like" title="like this post">{LikeButton}
  1460. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 442.403 442.403" style="enable-background:new 0 0 442.403 442.403;" xml:space="preserve"><g><g><path d="M213.05,422.652c2.833,1.7,5.95,2.833,9.35,2.833c3.117,0,6.517-0.85,9.35-2.833c7.65-5.1,187.283-123.533,207.683-243.95 c10.483-62.333-8.783-100.867-26.633-122.117c-20.967-24.933-52.133-39.667-83.017-39.667c-10.2,0-20.117,1.7-28.9,5.1 c-43.067,16.15-72.25,44.767-88.117,64.317c-15.583-19.267-42.217-47.033-74.517-58.083c-9.917-3.4-20.683-5.1-32.017-5.1 c-28.9,0-56.383,11.9-75.367,32.867c-16.717,18.417-35.7,53.55-29.75,114.75C13.016,291.185,204.833,417.268,213.05,422.652z M56.083,78.685c17.283-18.983,38.817-21.817,50.15-21.817c7.367,0,14.45,1.133,20.967,3.4 c39.383,13.317,70.833,63.467,71.4,63.75c3.117,5.1,8.783,8.217,14.733,7.933c5.95,0,11.333-3.4,14.45-8.5 c0.283-0.567,28.617-48.733,85.283-69.983c4.817-1.7,10.767-2.833,16.717-2.833c20.967,0,42.217,10.483,56.95,27.767 c19.267,22.667,25.783,55.533,18.983,94.633c-7.367,43.067-42.5,94.633-101.717,149.317c-33.433,30.883-66.3,54.683-81.6,65.45 c-16.15-11.05-51-36.55-86.417-68.85C74.216,262.285,39.366,209.868,35.116,167.368C31.433,128.552,38.516,97.952,56.083,78.685z"/></g></g></svg>
  1461. </a>
  1462.  
  1463. <a href="{ReblogURL}" target="_blank" class="reblog" title="reblog this post">
  1464. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 361.095 361.095" style="enable-background:new 0 0 361.095 361.095;" xml:space="preserve"><g><g><path d="M182.595,325.678c-63.183,0-120.133-42.217-138.267-102.567c-2.833-9.067-12.183-14.167-21.25-11.333 c-9.067,2.833-14.167,12.183-11.333,21.25c22.95,75.933,91.517,126.65,170.85,126.65c98.317,0,178.5-80.183,178.5-178.5 s-80.183-178.5-178.5-178.5c-55.817,0-108.233,26.633-141.667,69.7l-7.083-56.1c-1.133-9.35-9.633-15.867-18.983-14.733 C5.511,2.678-1.005,11.178,0.128,20.528l13.317,103.7c1.133,8.5,8.5,14.733,16.717,14.733c0.567,0,1.417,0,1.983,0l102.567-11.617 c9.35-1.133,16.15-9.35,15.017-18.7s-9.35-16.15-18.7-15.017l-68.85,7.65c26.633-39.95,71.683-64.6,120.417-64.6 c79.617,0,144.5,64.883,144.5,144.5S262.211,325.678,182.595,325.678z"/></g></g></svg>
  1465. </a>
  1466. </div>
  1467.  
  1468. </div>
  1469. {/block:Date}
  1470. </div>
  1471.  
  1472. <article id="{PostID}">
  1473.  
  1474. <!--TEXT POST-->
  1475. {block:Text}
  1476. {block:Title}
  1477. <div class="title">{Title}</div>
  1478. {/block:Title}
  1479. {Body}
  1480. {/block:Text}
  1481.  
  1482.  
  1483. <!--PHOTO POST-->
  1484. {block:Photo}
  1485. {block:IndexPage}
  1486. {LinkOpenTag}
  1487. <div class="oddhour-high-res">
  1488. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  1489. </div>
  1490. {LinkCloseTag}
  1491. {/block:IndexPage}
  1492. {block:PermalinkPage}
  1493. {LinkOpenTag}
  1494. <div class="oddhour-high-res">
  1495. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  1496. </div>
  1497. {LinkCloseTag}{/block:PermalinkPage}
  1498. {/block:Photo}
  1499.  
  1500.  
  1501. <!--PHOTOSET POST-->
  1502. {block:Photoset}
  1503. {block:IndexPage}{Photoset}{/block:IndexPage}
  1504. {block:PermalinkPage}{Photoset}{/block:PermalinkPage}
  1505. {/block:Photoset}
  1506.  
  1507.  
  1508. <!--ANSWER POST-->
  1509. {block:Answer}
  1510. <div class="ask">
  1511. <div class="askerimg"><img src="{AskerPortraitURL-64}"></div>
  1512. <div class="askertri"></div>
  1513. <div class="questionblock">
  1514. <div class="asker">{Asker}</div>
  1515. <div class="subtitle">asked a question</div>
  1516. <div class="question">{Question}</div>
  1517. </div>
  1518. </div>
  1519.  
  1520. <p><div class="answer">{Answer}</div>
  1521. {/block:Answer}
  1522.  
  1523. <!--AUDIO POST-->
  1524. {block:Audio}
  1525. {block:AudioPlayer}
  1526. <div class="playbutton">{AudioPlayerGrey}</div>
  1527. {block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  1528. <div class="trackinfo">
  1529. <div class="trackname">
  1530. {block:TrackName}{TrackName}{/block:TrackName}
  1531. </div>
  1532. <div class="artist">
  1533. {block:Artist}{Artist}{/block:Artist}
  1534. </div>
  1535. <div class="album">
  1536. {block:Album}{Album}{/block:Album}
  1537. </div>
  1538. <div class="playcount">
  1539. {block:PlayCount}Played: {PlayCount} times{/block:PlayCount}
  1540. </div>
  1541. </div>
  1542. {/block:AudioPlayer}
  1543. {/block:Audio}
  1544.  
  1545. <!--CHAT POST-->
  1546. {block:Chat}
  1547.  
  1548. <div class="title">{block:Title}{Title}{/block:Title}</div>
  1549.  
  1550. <ul class="chat">{block:Lines}
  1551. <li class="user_{UserNumber}">{block:Label}<span class="label">{label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>
  1552.  
  1553. {/block:Chat}
  1554.  
  1555. <!--QUOTE POST-->
  1556. {block:Quote}
  1557. <div class="quote">❝{Quote}❞ </div>
  1558. {block:Source}
  1559. <div class="quotesource">{Source}</div>
  1560. {/block:Source}
  1561. {/block:Quote}
  1562.  
  1563.  
  1564. <!--LINK POST-->
  1565. {block:Link}
  1566. <div class="biglinks"><a href="{URL}">{Name}</a></div>
  1567.  
  1568. {block:Description}{Description}{/block:Description}
  1569. {/block:Link}
  1570.  
  1571. <!--VIDEO POST-->
  1572. {block:Video}
  1573. <div class="video">
  1574. <div class="video-player">{Video-500}</div>
  1575. {/block:Video}
  1576.  
  1577. <!--CAPTIONS-->
  1578.  
  1579.  
  1580. {block:Caption}
  1581. {Caption}
  1582. {/block:Caption}
  1583.  
  1584. <!--POST NOTES-->
  1585.  
  1586. </article>
  1587.  
  1588. <div class="postbottom">
  1589.  
  1590. <div class="postinfo">
  1591. {block:RebloggedFrom}via:
  1592. <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a> •
  1593.  
  1594. {block:ContentSource}source: <a href="{SourceURL}" title="{ReblogRootTitle}"> {ReblogRootName} </a>•{/block:ContentSource}{/block:RebloggedFrom}
  1595.  
  1596. {block:NoteCount}
  1597. with <a href="{Permalink}">{NoteCountwithlabel} </a>
  1598. {/block:NoteCount}
  1599. </div>
  1600.  
  1601. {block:HasTags}
  1602. <div class="tags">
  1603. {block:Tags}<b>#</b><a href="{TagURL}">{Tag}</a>
  1604. {/block:Tags}
  1605. </div>
  1606. {/block:HasTags}
  1607.  
  1608. </div>
  1609.  
  1610. {block:PostNotes}
  1611. <div class="pagenotes">{PostNotes-16}</div>
  1612. {/block:PostNotes}
  1613.  
  1614. {/block:Posts}
  1615. <!--Close of article-->
  1616.  
  1617.  
  1618. <!--PAGINATION-->
  1619. {block:Pagination}
  1620. <div id="pagination">
  1621. {block:PreviousPage}
  1622. <a href="{PreviousPage}">
  1623. <div class="pagibutton">Previous</div></a>
  1624. {/block:PreviousPage}
  1625. {CurrentPage} of {TotalPages}
  1626. {block:NextPage}
  1627. <a href="{NextPage}">
  1628. <div class="pagibutton">Next</div></a>
  1629. {/block:NextPage}
  1630. </div>
  1631. {/block:Pagination}
  1632.  
  1633. </div>
  1634.  
  1635. </div>
  1636.  
  1637. <!-- -------------------------- TAB 2 -------------------------- -->
  1638.  
  1639. <div id="tab2" class="tab">
  1640. <div class="tabcontent">
  1641.  
  1642. <h2><span>Ask & F.A.Q.</span></h2>
  1643.  
  1644. <div class="faq">
  1645.  
  1646. This is a question
  1647. <blockquote>And this is what the answer looks like!</blockquote>
  1648.  
  1649. <p>This is a second question!
  1650. <blockquote>And another answer! </blockquote>
  1651.  
  1652. <p>question number 3!
  1653. <blockquote>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</blockquote>
  1654.  
  1655. <h1>Theme Information</h1>
  1656.  
  1657. <p>You can also seperate questions into categories too if you want!
  1658. <blockquote>Oh my god, that's so cool! </blockquote>
  1659.  
  1660. <p>What size is the sidebar image?
  1661. <blockquote>It is 300px wide and 600px tall!</blockquote>
  1662.  
  1663. <p>How many questions can I have?
  1664. <blockquote>As many as you need!</blockquote>
  1665.  
  1666. </div>
  1667.  
  1668. <p><iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/YOUR---URL.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe></p>
  1669.  
  1670. </div>
  1671. </div>
  1672.  
  1673.  
  1674. <!-- -------------------------- TAB 3 -------------------------- -->
  1675.  
  1676. <div id="tab3" class="tab">
  1677. <div class="tabcontent">
  1678. <h2><span>Rules & Guidelines</span></h2>
  1679. <div class="rules">
  1680.  
  1681. <h1>category</h1>
  1682. write a little bit about your first set of rules. These aren't usually styled super fancy. so there isn't a lot to this. Just use the h1 tags to seperate your categories of you want.
  1683.  
  1684. <h1>Activity</h1>
  1685. write a little bit about your first set of rules. These aren't usually styled super fancy. so there isn't a lot to this. Just use the h1 tags to seperate your categories of you want.
  1686.  
  1687. <h1>Aesthetics</h1>
  1688. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
  1689.  
  1690.  
  1691. </div>
  1692. </div>
  1693. </div>
  1694.  
  1695.  
  1696. <!-- -------------------------- TAB 4 -------------------------- -->
  1697.  
  1698. <div id="tab4" class="tab">
  1699. <div class="tabcontent">
  1700. <h2><span>Muses</span></h2>
  1701.  
  1702. <div class="filters">
  1703.  
  1704. <h5>CATEGORY 1</h5>
  1705. <div class="button-group" data-filter-group="gender">
  1706. <button class="button is-checked" data-filter="">any</button>
  1707. <button class="button" data-filter=".1">filter 1</button>
  1708. <button class="button" data-filter=".2">filter 2</button>
  1709. <button class="button" data-filter=".3">filter 3</button>
  1710. </div>
  1711.  
  1712. <br><h5>CATEGORY 2</h5>
  1713. <div class="button-group" data-filter-group="availability">
  1714. <button class="button is-checked" data-filter="">any</button>
  1715. <button class="button" data-filter=".4">filter 4</button>
  1716. <button class="button" data-filter=".5">filter 5</button>
  1717. <button class="button" data-filter=".6">filter 6</button>
  1718. </div>
  1719.  
  1720. <!-------- CHARACTERS START -------->
  1721.  
  1722. <div class="ccontain">
  1723.  
  1724. <!-------- CHARACTER START -------->
  1725.  
  1726. <div class="character FILTERS HERE">
  1727. <img src="https://placehold.it/150">
  1728.  
  1729. <div class="characterlinks">
  1730. <a href="">Link 1</a>
  1731. <a href="">Link 2</a>
  1732. <a href="">Link 3</a>
  1733. <a href="">Link 4</a>
  1734. </div>
  1735.  
  1736. <div class="info">Trope</div>
  1737. <div class="name">MUSE NAME</div>
  1738. </div>
  1739.  
  1740. <!-------- CHARACTER END -------->
  1741.  
  1742. <!-------- CHARACTER START -------->
  1743.  
  1744. <div class="character FILTERS HERE">
  1745. <img src="https://placehold.it/150">
  1746.  
  1747. <div class="characterlinks">
  1748. <a href="">Link 1</a>
  1749. <a href="">Link 2</a>
  1750. <a href="">Link 3</a>
  1751. <a href="">Link 4</a>
  1752. </div>
  1753.  
  1754. <div class="info">Trope</div>
  1755. <div class="name">MUSE NAME</div>
  1756. </div>
  1757.  
  1758. <!-------- CHARACTER END -------->
  1759.  
  1760. <!-------- CHARACTER START -------->
  1761.  
  1762. <div class="character FILTERS HERE">
  1763. <img src="https://placehold.it/150">
  1764.  
  1765. <div class="characterlinks">
  1766. <a href="">Link 1</a>
  1767. <a href="">Link 2</a>
  1768. <a href="">Link 3</a>
  1769. <a href="">Link 4</a>
  1770. </div>
  1771.  
  1772. <div class="info">Trope</div>
  1773. <div class="name">MUSE NAME</div>
  1774. </div>
  1775.  
  1776. <!-------- CHARACTER END -------->
  1777.  
  1778. <!-------- CHARACTERS END -------->
  1779.  
  1780. <!-------- COPY AND PASTE FOR MORE CHARACTERS
  1781.  
  1782. <div class="character FILTERS HERE">
  1783. <div class="characterlinks">
  1784. <a href="">Link 1</a>
  1785. <a href="">Link 2</a>
  1786. <a href="">Link 3</a>
  1787. <a href="">Link 4</a>
  1788. </div>
  1789.  
  1790. <div class="info">Trope</div>
  1791. <div class="name">MUSE NAME</div>
  1792. </div>
  1793.  
  1794. -------->
  1795.  
  1796. <!---------------- PASTE CHARACTERS ABOVE THIS LINE ---------------->
  1797.  
  1798. </div>
  1799.  
  1800.  
  1801. </div>
  1802.  
  1803. </div>
  1804. </div>
  1805.  
  1806.  
  1807. <!-- -------------------------- TAB 5 -------------------------- -->
  1808.  
  1809. <div id="tab5" class="tab">
  1810. <div class="tabcontent">
  1811. <h2><span>Verses</span></h2>
  1812. <div class="verse">
  1813. <img src="http://via.placeholder.com/540x50">
  1814. <div class="versetitle">Verse #1</div>
  1815. </div>
  1816.  
  1817. <p>A description of the verse, the characters involved etc. etc. If you're using this as a roleplay main page, then you could use this as a locations page if you want!
  1818.  
  1819. <div class="verse">
  1820. <img src="http://via.placeholder.com/540x50">
  1821. <div class="versetitle">Verse #2</div>
  1822. </div>
  1823.  
  1824. <p>A second verse! You can seriosuly make this as long as you want! whoot whoot!
  1825.  
  1826. <div class="verse">
  1827. <img src="http://via.placeholder.com/540x50">
  1828. <div class="versetitle">Verse #3</div>
  1829. </div>
  1830.  
  1831. <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  1832.  
  1833. </div>
  1834. </div>
  1835.  
  1836. <!-- -------------------------- TAB 6 -------------------------- -->
  1837.  
  1838. <div id="tab6" class="tab">
  1839. <div class="tabcontent">
  1840. <h2><span>Blogroll</span></h2>
  1841.  
  1842. {block:Following}{block:Followed}
  1843. <div class="blogroll">
  1844. <a href="{FollowedURL}" title="{FollowedName}">
  1845. <img src="{FollowedPortraitURL-48}">
  1846. <div class="blogrollinfo">
  1847. <h1><a href="{FollowedURL}">{FollowedName}</a></h1>
  1848. </div>
  1849. </a>
  1850. </div>
  1851. {/block:Followed}{/block:Following}
  1852.  
  1853. </div>
  1854. </div>
  1855.  
  1856. <!-- -------------------------- TAB 7 -------------------------- -->
  1857.  
  1858. <div id="tab7" class="tab">
  1859. <div class="tabcontent">
  1860. <h2><span>Navigation</span></h2>
  1861. <div class="navigation">
  1862.  
  1863. <h1>Category 1</h1>
  1864. <a href="">LINK</a>
  1865. <a href="">LINK</a>
  1866. <a href="">LINK</a>
  1867. <a href="">LINK</a>
  1868. <a href="">LINK</a>
  1869. <a href="">LINK</a>
  1870. <a href="">LINK</a>
  1871. <a href="">LINK</a>
  1872.  
  1873. <h1>Category 2</h1>
  1874. <a href="">LINK</a>
  1875. <a href="">LINK</a>
  1876. <a href="">LINK</a>
  1877. <a href="">LINK</a>
  1878. <a href="">LINK</a>
  1879. <a href="">LINK</a>
  1880. <a href="">LINK</a>
  1881. <a href="">LINK</a>
  1882. <a href="">LINK</a>
  1883. <a href="">LINK</a>
  1884. <a href="">LINK</a>
  1885. <a href="">LINK</a>
  1886. <a href="">LINK</a>
  1887.  
  1888. <h1>Category 3</h1>
  1889. <a href="">LINK</a>
  1890. <a href="">LINK</a>
  1891. <a href="">LINK</a>
  1892. <a href="">LINK</a>
  1893. <a href="">LINK</a>
  1894. <a href="">LINK</a>
  1895. </div>
  1896.  
  1897. </div>
  1898. </div>
  1899.  
  1900.  
  1901. <!-- END OF TABS -->
  1902.  
  1903. </div>
  1904. </div>
  1905. </div>
  1906. </div>
  1907. </div>
  1908.  
  1909. </div>
  1910.  
  1911. <div class="hcontrols"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M106.6,134c14.3,0,26-11.7,26-26s-11.7-26-26-26s-26,11.7-26,26S92.2,134,106.6,134z M106.6,94c7.7,0,14,6.3,14,14s-6.3,14-14,14s-14-6.3-14-14S98.9,94,106.6,94z M40.4,124.6l7.2,3.3c3,1.4,4.4,4.8,3.3,7.9l-2.8,7.4c-2.1,5.7-1.4,11.8,2.1,16.7c3.4,5,9,7.9,15,7.9c2.2,0,4.4-0.4,6.5-1.2l7.4-2.8c0.7-0.3,1.4-0.4,2.2-0.4c2.4,0,4.7,1.4,5.7,3.7l3.3,7.2c3,6.6,9.4,10.7,16.6,10.7s13.6-4.1,16.6-10.7l3.3-7.2c1-2.2,3.2-3.7,5.7-3.7c0.7,0,1.5,0.1,2.2,0.4l7.4,2.8c2.1,0.8,4.3,1.2,6.5,1.2c0,0,0,0,0,0c5.9,0,11.5-3,15-7.9c3.4-5,4.2-11.1,2.1-16.7l-2.8-7.4c-1.1-3.1,0.3-6.5,3.3-7.9l7.2-3.3c6.6-3,10.7-9.4,10.7-16.6s-4.1-13.6-10.7-16.6l-7.2-3.3c-3-1.4-4.4-4.8-3.3-7.9l2.8-7.4c2.1-5.7,1.4-11.8-2.1-16.7c-3.4-5-9-7.9-15-7.9c-2.2,0-4.4,0.4-6.5,1.2l-7.4,2.8c-0.7,0.3-1.4,0.4-2.2,0.4c-2.4,0-4.7-1.4-5.7-3.7l-3.3-7.2c-3-6.6-9.4-10.7-16.6-10.7S93,35.2,90,41.8l-3.3,7.2c-1,2.2-3.2,3.7-5.7,3.7c-0.7,0-1.5-0.1-2.2-0.4l-7.4-2.8c-2.1-0.8-4.3-1.2-6.5-1.2c-5.9,0-11.5,3-15,7.9c-3.4,5-4.2,11.1-2.1,16.7l2.8,7.4c1.1,3.1-0.3,6.5-3.3,7.9l-7.2,3.3c-6.6,3-10.7,9.4-10.7,16.6S33.8,121.6,40.4,124.6z M45.3,102.3l7.2-3.3c8.7-4,12.9-14.1,9.5-23l-2.8-7.4c-1-2.7,0-4.7,0.7-5.7c1.6-2.4,4.6-3.4,7.4-2.3l7.4,2.8c2.1,0.8,4.2,1.2,6.4,1.2c0,0,0,0,0,0c7.1,0,13.6-4.2,16.6-10.7l3.3-7.2c1.5-3.4,4.7-3.7,5.7-3.7s4.1,0.3,5.7,3.7l3.3,7.2c3,6.5,9.5,10.7,16.6,10.7c2.2,0,4.3-0.4,6.4-1.2l7.4-2.8c2.8-1,5.7,0,7.4,2.3c0.7,1,1.7,3,0.7,5.7l-2.8,7.4c-3.3,8.9,0.8,19,9.5,23l7.2,3.3c3.4,1.5,3.7,4.7,3.7,5.7s-0.3,4.1-3.7,5.7l-7.2,3.3c-8.7,4-12.9,14.1-9.5,23l2.8,7.4c1,2.7,0,4.7-0.7,5.7c-1.6,2.4-4.6,3.4-7.4,2.3l-7.4-2.8c-2.1-0.8-4.2-1.2-6.4-1.2c-7.1,0-13.6,4.2-16.6,10.7l-3.3,7.2c-1.5,3.4-4.7,3.7-5.7,3.7s-4.1-0.3-5.7-3.7l-3.3-7.2c-3-6.5-9.5-10.7-16.6-10.7c-2.2,0-4.3,0.4-6.4,1.2l-7.4,2.8c-2.8,1-5.7,0-7.4-2.3c-0.7-1-1.7-3-0.7-5.7l2.8-7.4c3.3-8.9-0.8-19-9.5-23l-7.2-3.3c-3.4-1.5-3.7-4.7-3.7-5.7S41.9,103.9,45.3,102.3z"/></svg></div>
  1912.  
  1913. <!-------- CREDIT DO NOT REMOVE -------->
  1914.  
  1915. <div class="credit">
  1916. <a href="http://juliaroleplays.tumblr.com" title="✴ juliaroleplays">✴ JRPS</a>
  1917. </div>
  1918.  
  1919. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  1920.  
  1921. <script>
  1922. $(document).ready(function() {
  1923. $('.tabs .tab-links a').on('click', function(e) {
  1924. var currentAttrValue = $(this).attr('href');
  1925.  
  1926. // Show/Hide Tabs
  1927. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  1928.  
  1929. // Change/remove current tab to active
  1930. $(this).parent('li').addClass('active').siblings().removeClass('active');
  1931.  
  1932. e.preventDefault();
  1933. });
  1934. });
  1935. </script>
  1936.  
  1937. <script>
  1938. $(document).ready(function() {
  1939. $('#filterOptions li a').click(function() {
  1940. // fetch the class of the clicked item
  1941. var ourClass = $(this).attr('class');
  1942.  
  1943. // reset the active class on all the buttons
  1944. $('#filterOptions li').removeClass('active');
  1945. // update the active state on our clicked button
  1946. $(this).parent().addClass('active');
  1947.  
  1948. if(ourClass == 'all') {
  1949. // show all our items
  1950. $('#ourHolder').children('div.item').show();
  1951. }
  1952. else {
  1953. // hide all elements that don't share ourClass
  1954. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  1955. // show all elements that do share ourClass
  1956. $('#ourHolder').children('div.' + ourClass).show();
  1957. }
  1958. return false;
  1959. });
  1960. });
  1961. </script>
  1962.  
  1963. <!-------- 540px POST SUPPORT -------->
  1964.  
  1965. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  1966. <script>
  1967. /* questions? ask oddhour.tumblr.com */
  1968. var updatePhotosetCss = "<style id='updatePhotosetStyle'> .photoset .photoset_row img { display: block; } .photoset .photoset_row.photoset_row_1 img { max-width: 540px; } .photoset .photoset_row.photoset_row_2 img { max-width: 268px; } .photoset .photoset_row.photoset_row_3 img { max-width: 177px; } .photoset .photoset_row .photoset_photo { margin-left: 4px; } .photoset .photoset_row { text-align: center; width: 540px; } .photoset { width: 540px; }</style>";
  1969. function updatePhotoset() {
  1970.  
  1971. $(".photoset:not(.540-resized)").each( function (i, e) {
  1972. if($(this.contentDocument).find("#updatePhotosetStyle").size() <= 0)
  1973. $(this.contentDocument).find("head").append(updatePhotosetCss);
  1974. var photoset = $(this.contentDocument).find(".photoset");
  1975. var photosetRows = photoset.find(".photoset_row");
  1976. photoset.find(".photoset_photo")
  1977. .each(function () {
  1978. var hiResSrc = $(this).attr("href");
  1979. var img = $(this).find('img');
  1980. img.attr("src", hiResSrc );
  1981. img.attr("style", "");
  1982. });
  1983. photosetRows.attr("style", "");
  1984. photoset.attr("style","");
  1985. photoset.addClass("540-resized");
  1986. $(this).height($(this.contentDocument.body).height());
  1987. });
  1988. }
  1989.  
  1990. updatePhotoset();
  1991.  
  1992. var photosetTimer = setInterval(updatePhotoset, 1500);
  1993. $(window).on('load', function () { setTimeout(function() {clearInterval(photosetTimer)}, 2000); })
  1994. </script>
  1995.  
  1996. <!-------- 540px VIDEO SUPPORT -------->
  1997.  
  1998. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1999. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  2000.  
  2001. <!-------- FILTERING SCRIPT -------->
  2002.  
  2003. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script><script type="text/javascript">
  2004.  
  2005. // external js: isotope.pkgd.js
  2006.  
  2007. // init Isotope
  2008. var $grid = $('.ccontain').isotope({
  2009. itemSelector: '.character'
  2010. });
  2011.  
  2012. // store filter for each group
  2013. var filters = {};
  2014.  
  2015. $('.filters').on( 'click', '.button', function() {
  2016. var $this = $(this);
  2017. // get group key
  2018. var $buttonGroup = $this.parents('.button-group');
  2019. var filterGroup = $buttonGroup.attr('data-filter-group');
  2020. // set filter for group
  2021. filters[ filterGroup ] = $this.attr('data-filter');
  2022. // combine filters
  2023. var filterValue = concatValues( filters );
  2024. // set filter for Isotope
  2025. $grid.isotope({ filter: filterValue });
  2026. });
  2027.  
  2028. // change is-checked class on buttons
  2029. $('.button-group').each( function( i, buttonGroup ) {
  2030. var $buttonGroup = $( buttonGroup );
  2031. $buttonGroup.on( 'click', 'button', function() {
  2032. $buttonGroup.find('.is-checked').removeClass('is-checked');
  2033. $( this ).addClass('is-checked');
  2034. });
  2035. });
  2036.  
  2037. // flatten object by concatting values
  2038. function concatValues( obj ) {
  2039. var value = '';
  2040. for ( var prop in obj ) {
  2041. value += obj[ prop ];
  2042. }
  2043. return value;
  2044. }
  2045.  
  2046. </script>
  2047.  
  2048. </body>
  2049. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!