API tools faq
paste
Advertisement
codesbyraven

cayla v.2

codesbyraven
Mar 5th, 2016
23,913
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.35 KB | None | 0 0
raw download clone embed print report
  1. <!--- page by hailthehelpful. please don't use this as a base, redistribute...just don't steal it in general. use common sense. thanks!-->
  2.  
  3. <!DOCTYPE html>
  4. <head>
  5. <title>ᴄʜᴀʀᴀᴄᴛᴇʀs</title> <!--change title here-->
  6.  
  7. <link rel="shortcut icon" href="{Favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9.  
  10. <!--fontawesome-->
  11. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  12. <!--google fonts-->
  13. <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,400italic,700,700italic,300italic,300|Inconsolata' rel='stylesheet' type='text/css'>
  14. <!-- filter scripts -->
  15. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  16. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
  17.  
  18.  
  19. <script type="text/javascript">
  20. $(document).ready( function() {
  21. // init Isotope
  22. var $grid = $('.grid').isotope({
  23. itemSelector: '.grid-item'
  24. });
  25.  
  26. // store filter for each group
  27. var filters = {};
  28.  
  29. $('.filters').on( 'click', '.button', function() {
  30. var $this = $(this);
  31. // get group key
  32. var $buttonGroup = $this.parents('.button-group');
  33. var filterGroup = $buttonGroup.attr('data-filter-group');
  34. // set filter for group
  35. filters[ filterGroup ] = $this.attr('data-filter');
  36. // combine filters
  37. var filterValue = concatValues( filters );
  38. // set filter for Isotope
  39. $grid.isotope({ filter: filterValue });
  40. });
  41.  
  42. // change is-checked class on buttons
  43. $('.button-group').each( function( i, buttonGroup ) {
  44. var $buttonGroup = $( buttonGroup );
  45. $buttonGroup.on( 'click', 'button', function() {
  46. $buttonGroup.find('.is-checked').removeClass('is-checked');
  47. $( this ).addClass('is-checked');
  48. });
  49. });
  50.  
  51. });
  52.  
  53. // layout Isotope after each image loads
  54. $grid.imagesLoaded().progress( function() {
  55. $grid.isotope('layout');
  56. });
  57.  
  58. // flatten object by concatting values
  59. function concatValues( obj ) {
  60. var value = '';
  61. for ( var prop in obj ) {
  62. value += obj[ prop ];
  63. }
  64. return value;
  65. }
  66.  
  67. </script>
  68.  
  69.  
  70. <style type="text/css">
  71.  
  72.  
  73.  
  74. ::-webkit-scrollbar {
  75. width: 5px;
  76. border: 2px solid #fff;
  77. background-color: #acacac;
  78. }
  79.  
  80. ::-webkit-scrollbar-thumb {
  81. border-radius: 6px;
  82. background-color: #acacac;
  83. }
  84.  
  85. ::-webkit-scrollbar:horizontal {
  86. height: 5px;
  87. }
  88.  
  89. ::selection {
  90. background: gray;
  91. color: #fff;
  92. }
  93.  
  94. ::-moz-selection {
  95. background: gray;
  96. color: #fff;
  97. }
  98.  
  99. ::-webkit-selection {
  100. background: gray;
  101. color: #fff;
  102. }
  103.  
  104. a,a:active,a:visited,a:hover {
  105. color: #828282;
  106. text-decoration: none;
  107. -webkit-transition: all .3s ease-out;
  108. -moz-transition: all .3s ease-out;
  109. -ms-transition: all .3s ease-out;
  110. -o-transition: all .3s ease-out;
  111. transition: all .3s ease-out;
  112. }
  113.  
  114. body {
  115. color: #828282;
  116. font-weight: 100;
  117. font-size: 9px;
  118. font-family: 'open sans',calibri,Helvetica,sans-serif;
  119. line-height: 100%;
  120. }
  121.  
  122.  
  123. #br {
  124. display: inline-block;
  125. margin-left: 380px;
  126. padding: 35px;
  127. width: 450px;
  128. color: #fff;
  129. text-align: center;
  130. }
  131.  
  132. .toptitle,h1 {
  133. text-transform: uppercase;
  134. letter-spacing: 3px;
  135. font-family: 'Montserrat',Helvetica,cambria,sans-serif;
  136. }
  137.  
  138. .toptitle {
  139. display: inline-block;
  140. margin-right: 10px;
  141. color: #fff;
  142. font-weight: 300;
  143. font-size: 16px;
  144. line-height: 100%;
  145. }
  146.  
  147. h1 {
  148. color: #323232;
  149. font-weight: 400;
  150. font-size: 12px !important;
  151. }
  152.  
  153. #top {
  154. position: fixed;
  155. top: 0;
  156. left: 0;
  157. z-index: 99999;
  158. padding: 15px;
  159. width: 100%;
  160. height: 20px;
  161. background: #000;
  162. color: #fff;
  163. text-transform: uppercase;
  164. font-family: 'Open Sans',Helvetica,cambria,sans-serif;
  165. }
  166.  
  167. #top span {
  168. display: inline-block;
  169. padding-top: 5px;
  170. }
  171.  
  172. .return {
  173. float: right;
  174. margin-top: 5px;
  175. margin-right: 30px;
  176. color: #828282;
  177. }
  178.  
  179. #top a:hover {
  180. color: #fff;
  181. }
  182.  
  183. ol li {
  184. margin-left: -15px;
  185. padding: 5px;
  186. }
  187.  
  188. ul li {
  189. position: relative;
  190. margin-left: -20px;
  191. list-style-type: none;
  192. }
  193.  
  194. ul li:before {
  195. position: absolute;
  196. margin-left: -10px;
  197. content: '\f105';
  198. font-size: 12px;
  199. font-family: FontAwesome;
  200. }
  201.  
  202. .grid {
  203. position: fixed;
  204. top: 80px;
  205. margin-bottom:100px;
  206. margin-left: 250px;
  207. min-height:800px;
  208. text-align: justify;
  209. line-height: 100%;
  210. }
  211.  
  212. .grid-item {
  213. margin: 15px;
  214. padding: 10px 0;
  215. width: 230px;
  216. height: 270px;
  217. background: #000;
  218. color: #fff;
  219. text-align: center;
  220. text-transform: uppercase;
  221. }
  222.  
  223. .grid-item img {
  224. position: relative;
  225. width: 180px;
  226. height: 180px;
  227. border-radius: 50%;
  228. -webkit-transition: all .3s ease-out;
  229. -moz-transition: all .3s ease-out;
  230. -ms-transition: all .3s ease-out;
  231. -o-transition: all .3s ease-out;
  232. transition: all .3s ease-out;
  233. }
  234.  
  235. .grid-item:hover img {
  236. box-shadow: 0 0 0 21px black,0 0 0 22px #fff;
  237. -webkit-filter: grayscale(100%);
  238. -webkit-transform: scale(.8);
  239. -ms-transform: scale(.8);
  240. transform: scale(.8);
  241. }
  242.  
  243. .name {
  244. margin: 15px 0;
  245. letter-spacing: 2px;
  246. font-weight: 300;
  247. font-size: 16px;
  248. font-family: 'Montserrat',Helvetica,cambria,sans-serif;
  249. line-height:100%;
  250. }
  251.  
  252. .long {
  253. margin:10px 0;
  254. font-size:12px;
  255. }
  256.  
  257. .info {
  258. position: relative;
  259. margin: 15px 0;
  260. color: #ccc;
  261. letter-spacing: 1px;
  262. font-size: 9px;
  263. font-family: 'Open Sans';
  264. line-height: 120%;
  265. }
  266.  
  267. .sidebar {
  268. position: fixed;
  269. top: 0;
  270. left: 0;
  271. padding: 40px;
  272. width: 200px;
  273. height: 100%;
  274. background: #fff;
  275. }
  276.  
  277. .filters {
  278. margin-top: 80px;
  279. }
  280.  
  281. button {
  282. display: block;
  283. padding-left: 10px;
  284. width: 100%;
  285. outline: none;
  286. border: none;
  287. background: transparent;
  288. color: #828282;
  289. text-align: left;
  290. text-transform: uppercase;
  291. letter-spacing: 1px;
  292. font-size: 9px;
  293. font-family: 'Open Sans',Helvetica,cambria,sans-serif;
  294. -webkit-transition: all .3s ease-out;
  295. -moz-transition: all .3s ease-out;
  296. -ms-transition: all .3s ease-out;
  297. -o-transition: all .3s ease-out;
  298. transition: all .3s ease-out;
  299. }
  300.  
  301. .button.is-checked::before {
  302. position: absolute;
  303. margin-left: -10px;
  304. content: '\f105';
  305. font-family: FontAwesome;
  306. }
  307.  
  308. .button:active,.button.is-checked {
  309. color: #000;
  310. }
  311.  
  312. .button-group {
  313. margin: 20px 0;
  314. }
  315.  
  316.  
  317. iframe {display:none}
  318.  
  319. .tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop {display:none}
  320.  
  321. #credit{line-height:100%; border-radius:50%;position:fixed;bottom:10px;right:10px;color:#fff;background:rgba(0,0,0,.2);padding:5px;width:10px;height:10px;font-family:roboto;overflow:hidden;font-size:10px;font-weight:100;white-space:nowrap;-moz-transition:all .6s ease-in-out;-ms-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;-webkit-transition:all .6s ease-in-out;transition:all .6s ease-in-out}#credit:hover{background:#000;width:80px;border-radius:15px}#credit:before{font-size:10px;content:'\f292';font-family:FontAwesome;padding-right:5px;
  322. }
  323.  
  324.  
  325. </style>
  326. </head>
  327.  
  328.  
  329. <body>
  330.  
  331.  
  332. <!-----------------------BEGIN TOPBAR----------------------->
  333.  
  334. <div id="top"><div class="toptitle"> CHARACTERS</div><span>
  335. TIP: You can use combinations of filters to narrow down your character search. </span>
  336.  
  337.  
  338. <a class="return" href="/"><i class="fa fa-angle-left"></i> back to main</a>
  339.  
  340. </div>
  341.  
  342. <!-----------------------BEGIN SIDEBAR-----------------------
  343.  
  344. Now I'm going to show you how to edit these filters!
  345.  
  346. IMPORTANT:
  347.  
  348. dont touch <button class="button is-checked" data-filter="">all</button> anywhere. It makes sure that you can reset the categories. You can change "all" to whatever you want (reset, show all, etc.) just don't delete it completely.
  349.  
  350.  
  351.  
  352. HOW TO CHANGE THE FILTERS: -------------------------
  353.  
  354. It's actually easier than you think! Lets say you're making a clique rp.
  355. All you have to do is change category one to something like this:
  356.  
  357. <button class="button" data-filter=".jocks">jocks</button>
  358. <button class="button" data-filter=".populars">populars</button>
  359. <button class="button" data-filter=".nerds">nerds</button>
  360. <button class="button" data-filter=".theatre">theatre geeks</button>
  361.  
  362. Notice how for the theatre geeks one, they don't match? They don't have to match! Check out the original character and canon character labels in category three. They're oc and cc respectively. You can use shortcuts to label your characters because the only thing that shows is the text outside of the < >. If you wanted to, you could actually keep the filter names and just change it to something like
  363.  
  364. <button class="button" data-filter=".une">jocks</button>
  365. <button class="button" data-filter=".deux">populars</button>
  366. <button class="button" data-filter=".trois">nerds</button>
  367. <button class="button" data-filter=".quatre">theatre geeks</button>
  368.  
  369. ADDING MORE FILTERS: ---------------------------------
  370.  
  371. Also easy once you get the hang of it! Copy the last button and just past some after like so
  372.  
  373. <button class="button" data-filter=".jocks">jocks</button>
  374. <button class="button" data-filter=".populars">populars</button>
  375. <button class="button" data-filter=".nerds">nerds</button>
  376. <button class="button" data-filter=".theatre">theatre geeks</button>
  377. <button class="button" data-filter=".theatre">theatre geeks</button>
  378. <button class="button" data-filter=".theatre">theatre geeks</button>
  379. <button class="button" data-filter=".theatre">theatre geeks</button>
  380.  
  381. then change them to whatever you want!
  382.  
  383.  
  384. HOW TO ADD ANOTHER GROUP:--------------------------------
  385.  
  386. lets say you've done all the steps above to organize your clique rp by clique, avaliability and character type, but you also want to organize them by grade. What you'd do is copy the last category and paste it under.
  387.  
  388. <!-- category three ->
  389. <div class="button-group" data-filter-group="type">
  390. <h1>CHARACTER TYPE</h1>
  391. <button class="button is-checked" data-filter="">all</button>
  392. <button class="button" data-filter=".cc">canon character </button>
  393. <button class="button" data-filter=".oc">original character</button>
  394. <button class="button" data-filter=".wanted">most wanted</button>
  395. </div>
  396.  
  397. <!-- category three ->
  398. <div class="button-group" data-filter-group="type">
  399. <h1>CHARACTER TYPE</h1>
  400. <button class="button is-checked" data-filter="">all</button>
  401. <button class="button" data-filter=".cc">canon character </button>
  402. <button class="button" data-filter=".oc">original character</button>
  403. <button class="button" data-filter=".wanted">most wanted</button>
  404. </div>
  405.  
  406. Now you'd change those to whatever you want like we did above! Make sure you change "type" in data-filter-group="type" to something else too.
  407.  
  408. EXAMPLE WITH EVERYTHING CHANGED:
  409.  
  410.  
  411. <!-- category four ->
  412. <div class="button-group" data-filter-group="grade">
  413. <h1>GRADE</h1>
  414. <button class="button is-checked" data-filter="">all</button>
  415. <button class="button" data-filter=".fm">freshman </button>
  416. <button class="button" data-filter=".sm">sophmore</button>
  417. <button class="button" data-filter=".jr">junior</button>
  418. <button class="button" data-filter=".sr">senior</button>
  419. </div>
  420.  
  421. DONE!
  422.  
  423. ------------->
  424.  
  425.  
  426.  
  427. <div class="sidebar">
  428. <div class="filters">
  429.  
  430. <!-- category one --->
  431. <div class="button-group" data-filter-group="division">
  432. <h1>DIVISION</h1>
  433. <button class="button is-checked" data-filter="">all</button>
  434. <button class="button" data-filter=".une">une</button>
  435. <button class="button" data-filter=".deux">deux</button>
  436. <button class="button" data-filter=".trois">trois</button>
  437. <button class="button" data-filter=".quatre">quatre</button>
  438. </div>
  439.  
  440. <!-- category two --->
  441. <div class="button-group" data-filter-group="availability">
  442. <h1>AVALIABILITY</h1>
  443. <button class="button is-checked" data-filter="">all</button>
  444. <button class="button" data-filter=".open">open</button>
  445. <button class="button" data-filter=".taken">taken</button>
  446. </div>
  447.  
  448. <!-- category three --->
  449. <div class="button-group" data-filter-group="type">
  450. <h1>CHARACTER TYPE</h1>
  451. <button class="button is-checked" data-filter="">all</button>
  452. <button class="button" data-filter=".cc">canon character </button>
  453. <button class="button" data-filter=".oc">original character</button>
  454. <button class="button" data-filter=".wanted">most wanted</button>
  455. </div>
  456.  
  457. </div>
  458. </div>
  459.  
  460.  
  461.  
  462. <!-----------------------BEGIN GRID-----------------------
  463.  
  464. TIPS:
  465.  
  466. 1) the <a href="/"> is where you insert your link!
  467. example: <a href="/tagged/hayley-kiyoko">
  468.  
  469. 2) keep "info" to two or three lines of text. anything over that looks off.
  470.  
  471. 3) be kind to retina displays! the dimensions for the circles are 180px but making them 360px makes sure that they aren't blurry for those with retinas
  472.  
  473. 4) you can use squares for the images. the code is what makes them circles. example: this is the image of hayley kiyoko in the preview
  474. http://i.imgur.com/mgUmxxB.png
  475.  
  476. 5) you can add "long" to name for longer names. check the last box that says "character long nameson" for an example
  477.  
  478.  
  479. HOW TO CHANGE FILTERS:
  480.  
  481. This is the best part! Okay, see where I repeated "thing thing thing"?
  482. Those are the data-filters from up there ^^^. Lets say a character in this clique rp is an open, canon character who is a jock and a sophomore. I would change "thing" to whatever the data filters above were
  483.  
  484. BEFORE: <div class="grid-item thing thing thing">
  485. AFTER: <div class="grid-item open cc jocks sm">
  486.  
  487. open is my label for open characters, cc is my label for canon characters, jocks is my label for jocks and sm is my label for sophomores
  488.  
  489. (also don't get rid of "grid-item" it keeps everything pretty)
  490.  
  491. ------------------------------------------------------------->
  492.  
  493. <div class="grid">
  494.  
  495. <a href="/">
  496. <div class="grid-item thing thing thing">
  497. <div class="name"> CHARACTER NAME </div>
  498. <img src="http://placehold.it/360x360">
  499. <div class="info">
  500. 00 | INFORMATION | MBTI <br>
  501. FC: FIRST LAST<br>
  502. </div>
  503. </div>
  504. </a>
  505.  
  506. <a href="/">
  507. <div class="grid-item thing thing thing">
  508. <div class="name"> CHARACTER NAME </div>
  509. <img src="http://placehold.it/360x360">
  510. <div class="info">
  511. 00 | INFORMATION | MBTI <br>
  512. FC: FIRST LAST<br>
  513. </div>
  514. </div>
  515. </a>
  516.  
  517. <a href="/">
  518. <div class="grid-item thing thing thing">
  519. <div class="name"> CHARACTER NAME </div>
  520. <img src="http://placehold.it/360x360">
  521. <div class="info">
  522. 00 | INFORMATION | MBTI <br>
  523. FC: FIRST LAST<br>
  524. </div>
  525. </div>
  526. </a>
  527.  
  528. <a href="/">
  529. <div class="grid-item thing thing thing">
  530. <div class="name"> CHARACTER NAME </div>
  531. <img src="http://placehold.it/360x360">
  532. <div class="info">
  533. 00 | INFORMATION | MBTI <br>
  534. FC: FIRST LAST<br>
  535. </div>
  536. </div>
  537. </a>
  538.  
  539. <a href="/">
  540. <div class="grid-item thing thing thing">
  541. <div class="name"> CHARACTER NAME </div>
  542. <img src="http://placehold.it/360x360">
  543. <div class="info">
  544. 00 | INFORMATION | MBTI <br>
  545. FC: FIRST LAST<br>
  546. </div>
  547. </div>
  548. </a>
  549.  
  550. <a href="/">
  551. <div class="grid-item thing thing thing">
  552. <div class="name"> CHARACTER NAME </div>
  553. <img src="http://placehold.it/360x360">
  554. <div class="info">
  555. 00 | INFORMATION | MBTI <br>
  556. FC: FIRST LAST<br>
  557. </div>
  558. </div>
  559. </a>
  560.  
  561. <a href="/">
  562. <div class="grid-item thing thing thing">
  563. <div class="name"> CHARACTER NAME </div>
  564. <img src="http://placehold.it/360x360">
  565. <div class="info">
  566. 00 | INFORMATION | MBTI <br>
  567. FC: FIRST LAST<br>
  568. </div>
  569. </div>
  570. </a>
  571.  
  572. <a href="/">
  573. <div class="grid-item thing thing thing">
  574. <div class="long name"> CHARACTER LONG NAMESONSHIRE </div>
  575. <img src="http://placehold.it/360x360">
  576. <div class="info">
  577. 00 | INFORMATION | MBTI <br>
  578. FC: FIRST LAST<br>
  579. </div>
  580. </div>
  581. </a>
  582.  
  583.  
  584. </div> <!---END GRID--->
  585.  
  586. <a href="http://www.hailthehelpful.tumblr.com">
  587. <div id="credit">hailthehelpful.</div>
  588. </a>
  589.  
  590.  
  591. </body>
  592. </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!