API tools faq
paste
heartilys

MUSE PAGE 01 // BASIC

heartilys
Oct 9th, 2017
1,239
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.59 KB | None | 0 0
raw download clone embed print report
  1. <!--- ✧・ﾟ MUSE PAGE 01 // TABBED — by @bycandleliqht ・ﾟ✧
  2.  
  3. edit & customize to your heart's content!
  4. please don't remove credit or claim as yours.
  5. if you need help or run into any bugs, drop me an ask & i'll do my best to help! --->
  6.  
  7. <!DOCTYPE html>
  8. <html>
  9. <head>
  10.  
  11.  
  12. <title>PAGE TITLE</title> <!--- Change the title of your page here --->
  13. <link rel="shortcut icon" href="{Favicon}">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15.  
  16.  
  17. <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <!--- This is the file for the font featured in most of the headings --->
  18.  
  19.  
  20. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"> <!--- This is the stylesheet for the icons that link you to each muse's info tabs --->
  21.  
  22. <!--- This is the script for your filters. --->
  23.  
  24. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  25. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  26. <script>
  27. $(function(){
  28.  
  29. var $container = $('#musecon');
  30.  
  31. $container.isotope({
  32. itemSelector : '.all'
  33. });
  34.  
  35.  
  36. var $optionSets = $('#sort .option-set'),
  37. $optionLinks = $optionSets.find('a');
  38.  
  39. $optionLinks.click(function(){
  40. var $this = $(this);
  41. // don't proceed if already selected
  42. if ( $this.hasClass('selected') ) {
  43. return false;
  44. }
  45. var $optionSet = $this.parents('.option-set');
  46. $optionSet.find('.selected').removeClass('selected');
  47. $this.addClass('selected');
  48.  
  49. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  50. var options = {},
  51. key = $optionSet.attr('data-option-key'),
  52. value = $this.attr('data-option-filter');
  53. // parse 'false' as false boolean
  54. value = value === 'false' ? false : value;
  55. options[ key ] = value;
  56. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  57. // changes in layout modes need extra logic
  58. changeLayoutMode( $this, options )
  59. } else {
  60. // otherwise, apply new options
  61. $container.isotope( options );
  62. }
  63.  
  64.  
  65. return false;
  66. });
  67.  
  68.  
  69. });
  70. </script>
  71.  
  72. <!--- This is the end of the scripts! --->
  73.  
  74. <style>
  75.  
  76. /* SCROLLBAR */
  77.  
  78. ::-webkit-scrollbar {
  79. width:7px;
  80. background-color:#faf9f9; /* BG colour of the scrollbar */
  81. }
  82.  
  83. ::-webkit-scrollbar-track{
  84. background-color:#faf9f9; /* BG colour of the scrollbar track */
  85. }
  86.  
  87. ::-webkit-scrollbar-thumb{
  88. border:3px solid #faf9f9; /* Make sure this colour stays the same as the BG colour. This is what makes the scrollbar thin but still easily clickable! */
  89. border-top:4px solid #faf9f9; /* Same as above. This just adds some padding on the top of it. */
  90. background-color:#86afc7; /* Colour of the actual scrollbar. */
  91. }
  92.  
  93. /* LINKS, BOLDS, & HEADINGS */
  94.  
  95. a {
  96. color:#86afc7; /* Link colour */
  97. text-transform:uppercase;
  98. text-decoration:none;
  99. font-weight:bold;
  100. letter-spacing:1px;
  101. }
  102.  
  103. b {
  104. font-weight:bold;
  105. color:#86afc7; /* Colour of bolded items */
  106. font-family:calibri;
  107. }
  108.  
  109. h1 {
  110. font-size:8px;
  111. text-transform:uppercase;
  112. text-align:left;
  113. font-family:'Montserrat', sans-serif;
  114. letter-spacing:3px;
  115. font-weight:bold;
  116. margin-bottom:15px;
  117. text-shadow: 0 0 .01em;
  118. }
  119.  
  120. h2 {
  121. color:#86afc7; /* Text colour for character name */
  122. font-size:10px;
  123. text-transform:lowercase;
  124. text-align:center;
  125. font-family:calibri;
  126. letter-spacing:.4px;
  127. margin-top:-1.5px;
  128. text-shadow: 0 1 0em;
  129. }
  130.  
  131. h3 {
  132. font-size:11px;
  133. text-transform:uppercase;
  134. text-align:center;
  135. font-family:calibri;
  136. letter-spacing:.4px;
  137. font-weight:bold;
  138. margin-top:-8px;
  139. text-shadow: 0 0 .1em;
  140. }
  141.  
  142. h4 {
  143. font-size:8.5px;
  144. padding:8px;
  145. background-color:#f3f3f3; /* Heading BG colour, featured in the tabs. Keep this light coloured, since the text colour is dark. */
  146. text-transform:uppercase;
  147. text-align:center;
  148. font-family:'Montserrat', sans-serif;
  149. font-weight:bold;
  150. margin-top:-.5px;
  151. text-shadow: 0 0 0.1em;
  152. box-shadow: 0px 0px 8px #d1c7c7; /* Shadow colour. I don't recommend touching this unless you make your backgrounds darker & need a darker shadow. */
  153. }
  154.  
  155. h5 {
  156. background-color:#f3f3f3; /* BG colour for the categories in the Muse Nav tab. */
  157. padding:3px;
  158. border:1px solid #dddbdb;
  159. font-size:8.5px;
  160. text-transform:uppercase;
  161. color:#86afc7; /* Text colour for the category headings in the Muse Nav tab. */
  162. font-family:calibri;
  163. text-shadow: 0 1 0em;
  164. text-align:left;
  165. }
  166.  
  167. h6 {
  168. font-size:8px;
  169. padding:5px;
  170. text-transform:uppercase;
  171. text-align:center;
  172. font-family:'Montserrat', sans-serif;
  173. font-weight:bold;
  174. margin-top:-.5px;
  175. text-shadow: 0 0 0.1em;
  176. }
  177.  
  178. /* MAIN BODY */
  179.  
  180. body {
  181. background-color:#eeeeee;
  182. font-family:calibri;
  183. font-size:10.5px;
  184. color:#373334; /* Main text colour. */
  185. line-height:1.5;
  186. letter-spacing:.5px;
  187. }
  188.  
  189. #main {
  190. margin-top:105px;
  191. margin-left:385px;
  192. width:585px;
  193. height:415px;
  194. position:fixed;
  195. overflow-y:scroll;
  196. overflow-x:hidden;
  197. background-color:#faf9f9; /* BG colour for the main box / muse container. Keep this the same colour as your scroll BG & border colours. */
  198. box-shadow: 0px 5px 20px #d1c7c7; /* Shadow colour of the topbar. If you change it, make sure it's the same colour as the one on #top & #list. */
  199. }
  200.  
  201. #top {
  202. background-color:#000; /* BG colour behind the title. */
  203. width:565px;
  204. height:30px;
  205. padding:10px;
  206. position:fixed;
  207. text-align:center;
  208. font-weight:bold;
  209. font-size:10px;
  210. margin-top:55px;
  211. margin-left:385px;
  212. text-shadow: 0 0 .03em;
  213. box-shadow: 0px 0px 20px #d1c7c7; /* Shadow colour of the topbar. If you change it, make sure it's the same colour as the one on #main & #list. */
  214. }
  215.  
  216. #top a {
  217. color:#a9838e; /* Link colour on the top nav. */
  218. padding-right:15px;
  219. }
  220.  
  221. #top a:hover {
  222. color:#86afc7; /* Link colour when hovering on the top nav links. */
  223. letter-spacing:5px;
  224. transition-duration:1s;
  225. -moz-transition-duration:1s;
  226. -webkit-transition-duration:1s;
  227. -o-transition-duration:1s;
  228. }
  229.  
  230.  
  231. #musecon {
  232. padding:25px;
  233. width:530px;
  234. margin-left:5px;
  235. float:left;
  236. position:relative;
  237. }
  238.  
  239. /* SIDEBAR */
  240.  
  241. #list {
  242. background-color:#faf9f9; /* BG colour for the sidebar. Keep this the same colour as your scroll BG & border colours. */
  243. border:10px solid #000;
  244. width:140px;
  245. height:385px;
  246. position:fixed;
  247. padding:30px;
  248. margin-top:55px;
  249. margin-left:155px;
  250. overflow-y:scroll;
  251. box-shadow: 0px 5px 20px #d1c7c7; /* Shadow colour of the topbar. If you change it, make sure it's the same colour as the one on #top & #main. */
  252. }
  253.  
  254. #sort {
  255. margin-top:-15px;
  256. margin-left:-10px;
  257. padding-bottom:10px;
  258. position:relative;
  259. font-weight:bold;
  260. transition-duration:1s;
  261. -moz-transition-duration:1s;
  262. -webkit-transition-duration:1s;
  263. -o-transition-duration:1s;
  264. }
  265.  
  266. #sort li {
  267. text-align:left;
  268. list-style-type:circle;
  269. margin-left:-15px;
  270. }
  271.  
  272. #sort li a.selected {
  273. color:#ad858f; /* Text colour of selected filters. */
  274. letter-spacing:.5px;
  275. text-shadow: 0 0 .09em;
  276. margin-left:5px;
  277. transition-duration:1s;
  278. -moz-transition-duration:1s;
  279. -webkit-transition-duration:1s;
  280. -o-transition-duration:1s;
  281. }
  282.  
  283. /* MUSE CELLS */
  284.  
  285. #muse {
  286. background-color:#f3f3f3; /* BG colour for each muse ( character & series name ). */
  287. width:250px;
  288. height:70px;
  289. margin-left:8px;
  290. margin-bottom:60px;
  291. margin-right:0px;
  292. float:left;
  293. text-align:center;
  294. position:absolute;
  295. transition-duration:1s;
  296. -moz-transition-duration:1s;
  297. -webkit-transition-duration:1s;
  298. -o-transition-duration:1s;
  299. }
  300.  
  301. #name {
  302. margin-top:15px;
  303. }
  304.  
  305. #muse img {
  306. width:70px;
  307. height:70px;
  308. float:left;
  309. }
  310.  
  311.  
  312. #clicks {
  313. background-color:#000; /* BG colour for the muse tab links. */
  314. margin-top:25px;
  315. width:234px;
  316. height:20px;
  317. padding:8px;
  318. }
  319.  
  320. #clicks a {
  321. color:#faf9f9; /* Link colour for the muse info tabs. Change this to a darker colour if you make the BG colour light. */
  322. }
  323.  
  324.  
  325. /* CREDIT -- DO NOT TOUCH!! */
  326.  
  327. #credit {
  328. bottom:10px;
  329. right:10px;
  330. background-color:#f3f3f3;
  331. padding:3px;
  332. border:1px solid #dddbdb;
  333. font-size:8px;
  334. text-transform:uppercase;
  335. font-family:calibri;
  336. text-shadow: 0 1 0em;
  337. text-align:left;
  338. position:absolute;
  339. padding:4px;
  340. }
  341.  
  342. #credit a {
  343. color:#a9838e;
  344. }
  345.  
  346. </style>
  347. </head>
  348.  
  349. <body>
  350.  
  351. <div id="top">
  352.  
  353. <h6 style="font-size:16px; color:#faf9f9; text-align:left; margin-top:-14px; margin-left:5px; margin-bottom:3px;">MUSE LIST</h6>
  354.  
  355. <!--- The links below will appear on the topbar. Add more with <a href="LINK">LINK NAME</a> Make sure the first link coding stays where it is, but feel free to change it to a different link if you want something else there.--->
  356.  
  357. <div style="margin-top:-8px; margin-left:-10px; background-color:#f3f3f3; padding:5px; width:575px;">
  358. <a href="/guidelines">rules</a>
  359. <a href="/mun">mun</a>
  360. <a href="/">back</a>
  361. <a href="http://tumblr.com/dashboard">dash</a>
  362. </div>
  363.  
  364. </div>
  365.  
  366. <div id="list">
  367.  
  368. <!--- This is where you'll put your filters. To add a new section, copy/paste FILTER SECTION START to FILTER SECTION END.
  369.  
  370. To add a new filter line:
  371.  
  372. <li><a href="#filter" data-option-filter=".FILTERNAME">FILTER NAME</a></li>
  373.  
  374. Make sure you keep the dot there. Don't paste these lines outside of the <ul> </ul> tags. You'll want to keep it to one word, and it's recommended you make it relatively short so it makes things easier when you're setting the filters on your muses.
  375.  
  376. Scroll down to MUSE START to learn how to set filters for each muse! --->
  377.  
  378. <div id="sort">
  379.  
  380. <!--- FILTER SECTION START --->
  381.  
  382. <h1>SORT BY CATEGORY</h1>
  383. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  384. <li><a href="#filter" data-option-filter=".all">all</a></li>
  385. <li><a href="#filter" data-option-filter=".FILTERNAME">FILTER NAME</a></li>
  386. </ul>
  387.  
  388. <!--- FILTER SECTION END --->
  389.  
  390. </div>
  391. </div>
  392.  
  393. <div id="main">
  394.  
  395. <div id="musecon" class="clearfix">
  396.  
  397. <!--- This is the start of your muses section. --->
  398.  
  399.  
  400. <!--- MUSE START --->
  401.  
  402.  
  403. <div id="muse" class="all mus pri"> <!--- This is where you'll set your muse filters. See the quotations right after 'class='? Inside those quotation marks, you're going to put the filters you added into the sidebar. Whatever word you typed after the dot, you'll type in these quotation marks, with a space separating each filter. So you can have as many filters per muse as you need!
  404.  
  405. EX: If your filter link is <a href="#filter" data-option-filter=".lit">literature</a>, then what you put into the class section here will be <div id="muse" class="all lit">.
  406.  
  407. ! IMPORTANT ! Keep the 'all' filter on every single one, otherwise it'll mess up the filters! --->
  408. <img src="https://68.media.tumblr.com/839e89c7641edd2a99b175682bc0e029/tumblr_inline_owsu08u0bz1ukw7jy_540.png"> <!--- Muse icon. Image size is 70x70px. --->
  409. <div id="name">
  410. <h2>character name.</h2>
  411. <h3>SERIES NAME</h3> <!--- Keep this to one line, otherwise it'll make the tab links wonky. You can lower the font size of h3 in the CSS if you have a lot of longer series titles. --->
  412. </div>
  413.  
  414. <div id="clicks">
  415.  
  416. <!--- Your links go here. You can title them however you want by editing the <A TITLE="TITLE GOES HERE">. If you want different icons, you can find more here: https://linearicons.com/free. Simply click on the icon you want to use and copy/paste the HTML field in between the <a> </a> tags. --->
  417.  
  418. <a title="MAIN" href="#LINK" style="margin-left:15px; font-size:16px; letter-spacing:20px;"><span class="lnr lnr-bookmark"></span></a>
  419. <a title="ABOUT" href="#LINK" style="margin-left:5px; font-size:16px; letter-spacing:20px;"><span class="lnr lnr-user"></span></span></a>
  420. <a title="THREADS" href="#LINK" style="margin-left:5px; font-size:16px; letter-spacing:20px;"><span class="lnr lnr-book"></span></a>
  421. <a title="HEADCANONS" href="#LINK" style="margin-left:5px; font-size:16px; letter-spacing:20px;"><span class="lnr lnr-bubble"></span></a>
  422. <a title="IMAGERY" href="#LINK" style="margin-left:5px; font-size:16px; letter-spacing:20px;"><span class="lnr lnr-earth"></span></a>
  423.  
  424. </div>
  425. </div>
  426.  
  427. <!--- MUSE END ---->
  428.  
  429.  
  430. </div>
  431. </div>
  432.  
  433. <div id="credit"><a href="http://bycandleliqht.tumblr.com">PAGE BY EVIE</a></div>
  434.  
  435. </body>
  436.  
  437. </html>
Advertisement
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!