API tools faq
paste
Advertisement
heartilys

retro // muse page.

heartilys
May 3rd, 2018
2,173
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.20 KB | None | 0 0
raw download clone embed print report
  1. <!--- RETRO // a muse page by @ouiseauchanteurs (@amcrvincit).
  2.  
  3. edit / customize it to your heart's content!
  4. DO NOT remove the credit or claim as your own.
  5. if you need help, run into a bug, etc. shoot me an ask ♥
  6.  
  7. COLOURS USED (to change them, just ctrl+f two times to find/replace them with your new colour of choice):
  8.  
  9. BLUE: #95ccca (filter button bg, sidebar top bg, muse nav bg, scrollbar, bold).
  10. PINK: #eeb2ae (filter title, muse name bg, italic, link, underline, page title, filter button hover bg, muse nav hover bg).
  11. OFFWHITE: #faf9f9 (body bg, muse name).
  12. WHITE: #fff (muse container bg, sidebar bg, muse desc text, muse nav link, sidebar nav link bg).
  13. WINE: #6a3331 (text shadow). --->
  14.  
  15. <!DOCTYPE html>
  16. <html>
  17. <head>
  18.  
  19. <title>PAGE TITLE</title> <!--- Change the title of your page here --->
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23. <!--- Font Scripts --->
  24. <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  25.  
  26. <link href="https://fonts.googleapis.com/css?family=Oleo+Script" rel="stylesheet">
  27.  
  28. <!--- Linear Icons Scripts. Find more to change them @ https://linearicons.com/free --->
  29. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  30.  
  31. <!--- Filter Script. By @hendrixrph. Find the tutorial here: http://hendrixrph.tumblr.com/post/131707989334/under-the-cut-is-a-tutorial-on-how-to-create-a --->
  32. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  33. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
  34. <script type="text/javascript">
  35. $(document).ready( function() {
  36. // init Isotope
  37. var $grid = $('.musecon').isotope({
  38. itemSelector: '.muse'
  39. });
  40.  
  41. // store filter for each group
  42. var filters = {};
  43.  
  44. $('.filters').on( 'click', '.button', function() {
  45. var $this = $(this);
  46. // get group key
  47. var $buttonGroup = $this.parents('.button-group');
  48. var filterGroup = $buttonGroup.attr('data-filter-group');
  49. // set filter for group
  50. filters[ filterGroup ] = $this.attr('data-filter');
  51. // combine filters
  52. var filterValue = concatValues( filters );
  53. // set filter for Isotope
  54. $grid.isotope({ filter: filterValue });
  55. });
  56.  
  57. // change is-checked class on buttons
  58. $('.button-group').each( function( i, buttonGroup ) {
  59. var $buttonGroup = $( buttonGroup );
  60. $buttonGroup.on( 'click', 'button', function() {
  61. $buttonGroup.find('.is-checked').removeClass('is-checked');
  62. $( this ).addClass('is-checked');
  63. });
  64. });
  65.  
  66. });
  67.  
  68. // flatten object by concatting values
  69. function concatValues( obj ) {
  70. var value = '';
  71. for ( var prop in obj ) {
  72. value += obj[ prop ];
  73. }
  74. return value;
  75. }</script>
  76.  
  77.  
  78. <style>
  79.  
  80. /* TOOLTIPS */
  81.  
  82. .tooltip{
  83. display:inline;
  84. position:absolute;
  85. }
  86.  
  87. #s-m-t-tooltip {
  88. max-width:100px;
  89. background-color:#fff;
  90. border:1px solid #cacaca;
  91. margin:15px 10px 10px 10px;
  92. font-size:9px;
  93. text-transform:uppercase;
  94. font-family: 'Open Sans', sans-serif;
  95. text-align:center;
  96. padding:4px;
  97. }
  98.  
  99. /* SCROLLBAR */
  100.  
  101. ::-webkit-scrollbar {
  102. width:7px;
  103. background-color:#fff;
  104. }
  105.  
  106. ::-webkit-scrollbar-track{
  107. background-color:#fff;
  108. }
  109.  
  110. ::-webkit-scrollbar-thumb{
  111. border:3px solid #fff;
  112. border-top:4px solid #fff;
  113. background-color:#95ccca;
  114. }
  115.  
  116. /* GENERAL STYLING */
  117.  
  118. a {
  119. color:#eeb2ae;
  120. text-transform:uppercase;
  121. text-decoration:underline;
  122. font-weight:bold;
  123. letter-spacing:1px;
  124. }
  125.  
  126. b, strong {
  127. font-weight:bold;
  128. color:#95ccca;
  129. font-family: 'Open Sans', sans-serif;
  130. font-weight:bold;
  131. }
  132.  
  133. u, i, em {
  134. color:#eeb2ae;
  135. }
  136.  
  137. h1 {
  138. font-size:8px;
  139. text-transform:uppercase;
  140. text-align:left;
  141. font-family: 'Open Sans', sans-serif;
  142. letter-spacing:3px;
  143. font-weight:bold;
  144. margin-bottom:15px;
  145. }
  146.  
  147. h2 {
  148. font-family: 'Oleo Script', cursive;
  149. text-align:right;
  150. color:#fff;
  151. font-size:15px;
  152. }
  153.  
  154. h3 {
  155. font-family: 'Oleo Script', cursive;
  156. text-align:center;
  157. color:#eeb2ae;
  158. text-shadow: 1px 1px #6a3331;
  159. font-size:20px;
  160. font-weight:200;
  161. }
  162.  
  163. /* MAIN AREAS */
  164.  
  165. body {
  166. background-color:#faf9f9;
  167. font-family: 'Open Sans', sans-serif;
  168. font-size:10.5px;
  169. color:#373334;
  170. line-height:1.5;
  171. letter-spacing:.5px;
  172.  
  173. }
  174.  
  175. #ptitle {
  176. width:160px;
  177. height:35px;
  178. font-family: 'Oleo Script', cursive;
  179. text-align:right;
  180. color:#eeb2ae;
  181. font-size:30px;
  182. font-weight:bold;
  183. position:fixed;
  184. margin: auto;
  185. left:840px;
  186. top:-595px;
  187. bottom:0px;
  188. right:0px;
  189. z-index:1000;
  190. text-shadow: 1px 1px #6a3331;
  191. }
  192.  
  193.  
  194. #main {
  195. position:fixed;
  196. margin: auto;
  197. left:0px;
  198. top:0px;
  199. bottom:0px;
  200. right:0px;
  201. width:1012px;
  202. height:550px;
  203. position:fixed;
  204. overflow-y:scroll;
  205. overflow-x:hidden;
  206. background-color:#fff;
  207. border:1px solid #ddd;
  208. }
  209.  
  210. .musecon {
  211. padding:25px;
  212. width:750px;
  213. margin-left:265px;
  214. position:absolute;
  215. }
  216.  
  217. /* SIDEBAR + FILTERS */
  218.  
  219. #sidebar {
  220. position:fixed;
  221. width:230px;
  222. height:540px;
  223. background:#95ccca;
  224. border-right:1px dashed #e0dcdc;
  225. overflow-y:hidden;
  226. }
  227.  
  228.  
  229. .filters {
  230. padding:14px;
  231. margin-top:60px;
  232. height:460px;
  233. overflow-y:scroll;
  234. background-color:#fff;
  235. }
  236.  
  237. .button-group {
  238. float:center;
  239. margin-left:4px;
  240. z-index:999;
  241. }
  242.  
  243. .button {
  244. border:none;
  245. padding:5px;
  246. margin:4px;
  247. background-color:#95ccca;
  248. font-family: 'Open Sans', sans-serif;
  249. font-weight:bold;
  250. width:85px;
  251. font-size:9px;
  252. letter-spacing:1px;
  253. text-transform:uppercase;
  254. color:#fff;
  255. display:inline-block;
  256. border:1px dashed #a49c9c;
  257. }
  258.  
  259. .button:hover {
  260. background-color:#eeb2ae;
  261. transition-duration:1s;
  262. -moz-transition-duration:1s;
  263. -webkit-transition-duration:1s;
  264. -o-transition-duration:1s;
  265. }
  266.  
  267. .button:focus {
  268. outline:0;
  269. background-color:#eeb2ae;
  270. }
  271.  
  272. #sicon {
  273. width:80px;
  274. height:80px;
  275. float:left;
  276. position:fixed;
  277. margin: auto;
  278. left:-1020px;
  279. top:-500px;
  280. bottom:0px;
  281. right:0px;
  282. z-index:1000;
  283. }
  284.  
  285. #sicon img {
  286. width:80px;
  287. height:80px;
  288. border-radius:100px;
  289. border:4px solid #fff;
  290. }
  291.  
  292. #snav {
  293. width:185px;
  294. height:40px;
  295. text-align:center;
  296. word-spacing:8px;
  297. float:left;
  298. position:relative;
  299. left:45px;
  300. top:0px;
  301. z-index:1001;
  302. }
  303.  
  304. #snav a {
  305. color:#95ccca;
  306. font-size:12px;
  307. font-weight:bold;
  308. background-color:#fff;
  309. padding:6px;
  310. text-decoration:none;
  311. border-radius:30px;
  312. }
  313.  
  314. #snav a:hover {
  315. background-color:#000;
  316. color:#fff;
  317. transition-duration:1s;
  318. -moz-transition-duration:1s;
  319. -webkit-transition-duration:1s;
  320. -o-transition-duration:1s;
  321. }
  322.  
  323. /* MUSE CELLS */
  324.  
  325. .muse {
  326. background-color:#fff;
  327. width:180px;
  328. height:118px;
  329. padding:14px;
  330. margin-right:30px;
  331. margin-bottom:35px;
  332. float:left;
  333. border:1px dashed #cacaca;
  334. }
  335.  
  336.  
  337. #micon img {
  338. width:60px;
  339. height:60px;
  340. float:left;
  341. border-radius:70px;
  342. margin-top:-20px;
  343. margin-left:-30px;
  344. border:4px solid #fff;
  345. }
  346.  
  347. #name {
  348. margin-top:-10px;
  349. width:180px;
  350. height:30px;
  351. background-color:#eeb2ae;
  352. border-radius:10px;
  353. }
  354.  
  355. #name h2 {
  356. font-family: 'Oleo Script', cursive;
  357. text-align:right;
  358. color:#faf9f9;
  359. font-size:16px;
  360. letter-spacing:-.5px;
  361. font-weight:500;
  362. padding-top:8px;
  363. margin-right:8px;
  364. text-shadow: 1px 1px #6a3331;
  365. }
  366.  
  367. #desc {
  368. width:165px;
  369. height:50px;
  370. padding:8px;
  371. margin-top:6px;
  372. font-family: 'Open Sans', sans-serif;
  373. font-size:9px;
  374. text-align:center;
  375. color:#fff;
  376. background-color:#000;
  377. }
  378.  
  379.  
  380. #mnav {
  381. margin-top:20px;
  382. margin-right:-8px;
  383. text-align:right;
  384. word-spacing:2px;
  385. position:relative;
  386. }
  387.  
  388. #mnav a {
  389. color:#fff;
  390. font-size:9px;
  391. font-weight:bold;
  392. text-align:center;
  393. background-color:#95ccca;
  394. padding:6px;
  395. text-decoration:none;
  396. border:1px solid #ddd;
  397. border-radius:15px;
  398. }
  399.  
  400. #mnav a:hover {
  401. background-color:#eeb2ae;
  402. transition-duration:1s;
  403. -moz-transition-duration:1s;
  404. -webkit-transition-duration:1s;
  405. -o-transition-duration:1s;
  406. }
  407.  
  408. /* CREDIT — DO NOT TOUCH! */
  409.  
  410.  
  411. #credit {
  412. bottom:10px;
  413. right:10px;
  414. border:1px solid #dddbdb;
  415. font-size:10px;
  416. font-family: 'Open Sans', sans-serif;
  417. position:fixed;
  418. border-radius:100px;
  419. }
  420.  
  421. #credit a {
  422. color:#fff;
  423. padding:4px;
  424. text-decoration:none;
  425. background-color:#95ccca;
  426. border-radius:100px;
  427. transition-duration:1s;
  428. -moz-transition-duration:1s;
  429. -webkit-transition-duration:1s;
  430. -o-transition-duration:1s;
  431. }
  432.  
  433. #credit a:hover {
  434. color:#fff;
  435. text-decoration:none;
  436. background-color:#eeb2ae;
  437. }
  438.  
  439. </style>
  440.  
  441. </head>
  442. <body>
  443.  
  444. <div id="main">
  445.  
  446. <div id="sicon"><img src="{Favicon}"></div> <!--- This is the sidebar icon. It automatically inputs your tumblr icon, but you can insert a link to a different icon instead! -->
  447. <div id="ptitle">Page Title.</div>
  448.  
  449. <div id="sidebar">
  450.  
  451. <div id="snav" style="padding-top:20px;">
  452.  
  453. <!--- Edit your sidebar links here. The link to change the icons is at the top of the code. --->
  454.  
  455. <a href="/" title="back to blog"><span class="lnr lnr-undo"></span></a>
  456. <a href="/ask" title="message"><span class="lnr lnr-bubble"></span></a>
  457. <a href="/" title="extra"><span class="lnr lnr-list"></span></a> <a href="/" title="extra"><span class="lnr lnr-star"></span></a>
  458. </div>
  459.  
  460. <div class="filters">
  461.  
  462. <!--- Add your filters here! To add a new section, copy/paste:
  463.  
  464. <div class="button-group" data-filter-group="Group"><h3>Group</h3>
  465. <button class="button is-checked" data-filter="">all</button>
  466. <button class="button" data-filter=".#">FILTER NAMEr</button>
  467. <button class="button" data-filter=".#">FILTER NAME</button>
  468. <button class="button" data-filter=".#">FILTER NAME</button>
  469.  
  470. or copy/paste:
  471.  
  472. <button class="button" data-filter=".#">FILTER NAME</button>
  473.  
  474. before the </div> to add a new line.
  475.  
  476. TO EDIT: Replace every instance of .# with a tag for your filters. I keep them simple, with a .pr for primary, .cn for canon, etc, but you can make it .primary, .canon, or whatever so long as you keep it one word. Make sure to leave the dot!
  477.  
  478. Replace the following FILTER NAME with the name of your filter. This is what will show on the button. A finished example might look like this:
  479.  
  480. <div class="button-group" data-filter-group="status"><h3>Status</h3>
  481. <button class="button is-checked" data-filter="">all</button>
  482. <button class="button" data-filter=".pr">primary</button>
  483. <button class="button" data-filter=".sc">secondary</button>
  484. <button class="button" data-filter=".ts">testing</button></div> --->
  485.  
  486. <div class="button-group" data-filter-group="Group"><h3>Group</h3>
  487. <button class="button is-checked" data-filter="">all</button>
  488. <button class="button" data-filter=".#">filter</button>
  489. <button class="button" data-filter=".#">filter</button>
  490. <button class="button" data-filter=".#">filter</button></div>
  491.  
  492. </div>
  493. </div>
  494.  
  495. <div class="musecon">
  496.  
  497. <!--- This is where you'll add your muses! To add a new muse, copy/paste everything from MUSE START to MUSE END.
  498.  
  499. ADDING FILTERS: <div class="muse ## ##"> is where you'll put your filter tags. Replace the #s with whatever short tag you used, BUT LEAVE 'MUSE' THERE. EX: <div class="muse pr">
  500.  
  501. MUSE ICON SIZE: 60x60. Your image will resize if it's not exact, but if it isn't, I do recommend using an image that's bigger and also square for best results!
  502.  
  503. The rest should be pretty self explanatory. For the navigation, put your links wherever it says /URL HERE and input the title where it says LINK TITLE. --->
  504.  
  505.  
  506. <!--- MUSE START --->
  507.  
  508. <div class="muse pr ##"><!--- Filters Here! --->
  509.  
  510. <div id="name"> <h2>Character Name.</h2> </div>
  511.  
  512. <!--- Description Here! I recommend keeping it 2-3 lines, because it doesn't scroll and it will mess with the icon. --->
  513.  
  514. <div id="desc">from <b><u>SERIES NAME</u></b>. portrayed by <b>face claim</b>. shipping: <u>open</u>. status: <b>primary</b>. + <a href="/">READ MORE</a> </div>
  515.  
  516. <div id="micon"><img src="IMAGE URL"></div> <!--- Muse Icon Here! --->
  517.  
  518. <div id="mnav"> <!--- Muse Nav Here! --->
  519. <a href="/URL HERE" title="LINK TITLE ONE"><span class="lnr lnr-user"></span></a>
  520. <a href="/URL HERE" title="LINK TITLE TWO"><span class="lnr lnr-book"></span></a>
  521. <a href="/URL HERE" title="LINK TITLE THREE"><span class="lnr lnr-heart"></span></a> <a href="/URL HERE" title="LINK TITLE FOUR"><span class="lnr lnr-camera"></span></a> <a href="/URL HERE" title="LINK TITLE FIVE"><span class="lnr lnr-diamond"></span></a>
  522. </div>
  523. </div>
  524.  
  525. <!--- MUSE END --->
  526.  
  527.  
  528. </div>
  529. </div>
  530.  
  531. <!--- CREDIT — DO NOT TOUCH! --->
  532.  
  533. <div id="credit"><a href="http://ouiseauchanteurs.tumblr.com" title="ouiseauchanteurs"><span class="lnr lnr-heart"></span></a></div>
  534.  
  535. </body>
  536. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!