API tools faq
paste
Advertisement
Noir-Et-Blanc

Page 03. RP Masterlist {003}

Noir-Et-Blanc
Feb 9th, 2016
3,526
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.59 KB | None | 0 0
raw download clone embed print report
  1. <!-- RP MASTERLIST
  2.  
  3. Page #03. (RP Masterlist Page)
  4. http://noiretblanc-themes.tumblr.com/
  5.  
  6. Please don't use this theme as a base or claim it as your own.
  7. You are free to edit this page as much as you want (I just recommend doing this if you know a little about coding. Be aware I won't provide any help if you decide to heavily edit this code.). JUST DON'T ERASE THE CREDITS.
  8.  
  9. CREDITS TO:
  10. Original background from: http://subtlepatterns.com/
  11. Filter script by: http://septembre.co.vu/-->
  12.  
  13. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  14. <html xmlns="http://www.w3.org/1999/xhtml">
  15. <head>
  16. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  17.  
  18. <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
  19.  
  20. <link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
  21. <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
  22.  
  23. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  24. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  25.  
  26.  
  27. <title>RP Masterlist</title>
  28.  
  29. <style>
  30.  
  31. ::-webkit-scrollbar {
  32. width: 5px;
  33. }
  34.  
  35. ::-webkit-scrollbar-track {
  36. -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,1);
  37. border-radius: 1px;
  38. }
  39.  
  40. ::-webkit-scrollbar-thumb {
  41. border-radius: 1px;
  42. -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,1);
  43. }
  44.  
  45. ::selection {
  46. background: #222; /* WebKit/Blink Browsers */
  47. color:#fff;
  48. }
  49. ::-moz-selection {
  50. background: #222; /* Gecko Browsers */
  51. color:#fff;
  52. }
  53.  
  54. .rpsummary::-webkit-scrollbar {
  55. width: 0px;
  56. }
  57.  
  58. body{
  59. background-image:URL("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/gridme.png"); /*Change the bg image here */
  60. background-attachment: fixed;
  61. background-color:#FFFFFF; /*Change the bg color here */
  62. margin:0;
  63. padding:0;
  64. font-family: 'Poiret One', cursive;
  65. }
  66.  
  67. #sidebar{
  68. background-image:URL("URL");/*Add a BG image in the sidebar here*/
  69. width:300px;
  70. height:100%;
  71. position:fixed;
  72. margin-bottom:5px;
  73. text-align:center;
  74. background-color:RGBA(0,0,0,0.6); /* Use this code to use opacity */
  75. border-right:solid 10px #111;
  76. }
  77.  
  78. .displaytitle{
  79. margin-top:40px;
  80. font-size:1.8em;
  81. color:white; /* Title color */
  82. font-family: 'Amatic SC', cursive;
  83. }
  84.  
  85. .displayimage{
  86. width:128px;
  87. height:128px;
  88. overflow:hidden;
  89. border-radius:200px;
  90. border:solid 10px #111; /* Avatar border color */
  91. margin:0 auto;
  92. margin-top:10px;
  93. }
  94.  
  95. .displayimage img{
  96. max-width:128px;
  97. }
  98.  
  99. .displaylinks{
  100. margin-top:8px;
  101. }
  102.  
  103. .displaylinks li{
  104. display:inline-block;
  105. margin-right:5px;
  106. margin-left:5px;
  107. list-style:none;
  108. }
  109.  
  110. .displaylinks a{
  111. display:inline-block;
  112. width:40px;
  113. height:40px;
  114. text-decoration:none;
  115. color:#fff; /* Main Links color */
  116. background-color:#111; /* Main Links BG */
  117. box-sizing:border-box;
  118. padding:11px 11px 10px 11px;
  119. border-radius:50px;
  120. -moz-transition:all .5s ease-in-out; /*For Mozilla Browser*/
  121. -webkit-transition:all .5s ease-in-out; /*For Chrome and Safari*/
  122. -o-transition:all .5s ease-in-out; /*For Opera Browser*/
  123. transition:all .5s ease-in-out;
  124. }
  125.  
  126. .displaylinks a:hover{
  127. color:#fff; /* Main Links color on hover */
  128. background-color:#333; /* Main Links BG on hover */
  129. }
  130.  
  131.  
  132. .tooltip {
  133. display:none;
  134. position:absolute;
  135. border:1px solid #333;
  136. color:#fff; /* Hover text color */
  137. background-color:#161616; /* Hover text bg */
  138. border-radius:5px;
  139. padding:6px 10px;
  140. font-size:14px;
  141.  
  142. }
  143.  
  144. .customlinks{
  145. margin:8px;
  146. }
  147.  
  148. .customlinks a{
  149. display:inline-block;
  150. width:120px;
  151. text-decoration:none;
  152. color:white; /* Custom links text color */
  153. background-color:#111; /* Custom links bg color */
  154. margin-top:3px;
  155. margin-bottom:3px;
  156. padding:2px 0 5px 0;
  157. -moz-transition:all .5s ease-in-out; /*For Mozilla Browser*/
  158. -webkit-transition:all .5s ease-in-out; /*For Chrome and Safari*/
  159. -o-transition:all .5s ease-in-out; /*For Opera Browser*/
  160. transition:all .5s ease-in-out;
  161. }
  162.  
  163. .customlinks a:hover{
  164. color:#fff; /* Hover custom links color */
  165. background-color:#333; /* Hover custom links bg color */
  166. letter-spacing:2px;
  167. }
  168.  
  169. #sort{
  170. width:300px;
  171. margin:20px 0 0 0;
  172. padding:0;
  173. }
  174. #sort li {
  175. display:inline-block;
  176. text-align:center;
  177. list-style: none;
  178. }
  179.  
  180. #sort ul {
  181. list-style: none;
  182. padding:0;
  183. margin:0;
  184. }
  185.  
  186. #sort a {
  187. display:inline-block;
  188. width:125px;
  189. text-decoration:none;
  190. color:white; /* Filters color */
  191. background-color:#111; /* Filters bg color */
  192. padding:8px 0 8px 0;
  193. margin-left:-4px;
  194. margin-right:-4px;
  195. -moz-transition:all .5s ease-in-out; /*For Mozilla Browser*/
  196. -webkit-transition:all .5s ease-in-out; /*For Chrome and Safari*/
  197. -o-transition:all .5s ease-in-out; /*For Opera Browser*/
  198. transition:all .5s ease-in-out;
  199. }
  200.  
  201. #sort a:hover {
  202. color:#fff; /* Filters hover color */
  203. background-color:#333; /* Filters hover bg color */
  204. letter-spacing:2px;
  205. }
  206.  
  207. #sort li a.selected {
  208. color:#fff; /* Filter selected color */
  209. background:#888; /* Filter selected bg color */
  210. }
  211.  
  212. .all{
  213. width:500px;
  214. margin:10px;
  215. transition-duration:1s;
  216. -webkit-transition-duration:1s;
  217. }
  218.  
  219. .top{
  220. border-radius:10px 10px 0 0;
  221. }
  222.  
  223. .left{
  224. border-radius:10px 0 0 0;
  225. }
  226.  
  227. .right{
  228. border-radius:0 10px 0 0;
  229. }
  230.  
  231. .bleft{
  232. border-radius:0 0 0 10px;
  233. }
  234.  
  235. .bright{
  236. border-radius:0 0 10px 0;
  237. }
  238.  
  239. #wonderland{
  240. position:absolute;
  241. margin-left:320px;
  242. margin-right:10px;
  243. margin-bottom:10px;
  244. height:100%;
  245. padding-left:40px;
  246. box-sizing:border-box;
  247. padding-bottom:10px;
  248. font-family: 'Quicksand', sans-serif;
  249. overflow:scroll;
  250. }
  251.  
  252. .box{
  253. position:relative;
  254. height:392px;
  255. width:500px;
  256. display:inline-block;
  257. margin:10px 20px 15px 0;
  258. }
  259.  
  260. .charaname{
  261. position:absolute;
  262. left:0;
  263. top:0px;
  264. color:white; /* Top box font color */
  265. background-color:#222; /* Top box bg color */
  266. width:100%;
  267. height:40px;
  268. box-sizing:border-box;
  269. padding-top:8px;
  270. padding-left:10px;
  271. font-size:1.4em;
  272. }
  273.  
  274. .charaname sub{
  275. font-size:13px;
  276. position:relative;
  277. top:-6px;
  278. left:-5px;
  279. }
  280.  
  281. .contentbox{
  282. position:absolute;
  283. top:45px;
  284. width:500px;
  285. height:300px;
  286. background-color: RGBA(1,1,1,0.3); /* Main box bg color */
  287. box-sizing:border-box;
  288. }
  289.  
  290. .rpdetails{
  291. position:absolute;
  292. color:white; /* Open-Private + SFW-NSFW color */
  293. right:5px;
  294. top:-26px;
  295. }
  296.  
  297. .characterbox{
  298. height:300px;
  299. min-height: 10em;
  300. display: table-cell;
  301. vertical-align: middle;
  302. }
  303.  
  304. .char-avi{
  305. position:relative;
  306. min-width:200px;
  307. min-height:300px;
  308. }
  309.  
  310. .imageresize{
  311. position:absolute;
  312. top:0;
  313. bottom:0;
  314. left:0;
  315. right:0;
  316. margin:auto;
  317. max-width:180px;
  318. max-height:250px;
  319. border:solid 1px #222;
  320. border-radius:5px;
  321. }
  322.  
  323. .rpsummary{
  324. position:absolute;
  325. top:0px;
  326. left:200px;
  327. width:295px;
  328. height:295px;
  329. box-sizing:border-box;
  330. padding:8px 5px 0 0;
  331. overflow-y:scroll;
  332.  
  333. }
  334.  
  335. .rpsummary p{
  336. padding:0;
  337. margin:0;
  338. margin-left:20px;
  339. margin-bottom:5px;
  340. margin-top:5px;
  341. color:white; /* Main box font color */
  342. }
  343.  
  344. .sub{
  345. font-weight:bold;
  346. font-size:14px;
  347. color:#111; /* Setting+Ship+Summary font color */
  348. }
  349.  
  350. .sub:before{
  351. content:"❝";
  352. margin-right:2px;
  353. }
  354.  
  355. .sum{
  356. text-align:justify !important;
  357. }
  358.  
  359. .bottombar{
  360. position:absolute;
  361. left:0;
  362. bottom:1px;
  363. background-color:#222; /* Bottom box bg color */
  364. width:100%;
  365. height:40px;
  366. box-sizing:border-box;
  367. text-align:center;
  368. }
  369.  
  370. .bottombar a{
  371. display:inline-block;
  372. color:white; /* Bottom box font color */
  373. text-decoration:none;
  374. margin-right:20px;
  375. margin-left:20px;
  376. border-right:solid 1px white; /* Bottom borders color */
  377. border-left:solid 1px white; /* Bottom borders color */
  378. padding:10px 20px 0 20px;
  379. height:30px;
  380. -moz-transition:all .5s ease-in-out; /*For Mozilla Browser*/
  381. -webkit-transition:all .5s ease-in-out; /*For Chrome and Safari*/
  382. -o-transition:all .5s ease-in-out; /*For Opera Browser*/
  383. transition:all .5s ease-in-out;
  384. }
  385.  
  386. .bottombar a:hover{
  387. color:#222; /* Bottom hover font color */
  388. background-color:white; /* Bottom hover bg color */
  389. }
  390.  
  391.  
  392. </style>
  393. </head>
  394. <body>
  395.  
  396.  
  397. <div id="sidebar">
  398.  
  399. <div class="displaytitle">{Title}</div>
  400.  
  401. <div class="displayimage"><img src="{PortraitURL-128}"></div>
  402.  
  403. <div class="displaylinks">
  404. <li><a title="Home" class="masterTooltip" href="/"><i class="fa fa-home"></i></a></li>
  405. <li><a title="Ask" class="masterTooltip" href="/ask"><i class="fa fa-envelope"></i></a></li>
  406. <li><a title="Submit" class="masterTooltip" href="/submit"><i class="fa fa-upload"></i></a></li>
  407. <!-- PLEASE DON'T REMOVE THIS -->
  408. <li><a title="Theme" class="masterTooltip" href="http://noiretblanc-themes.tumblr.com/"><i class="fa fa-code"></i></a></li>
  409. <!-- PLEASE DON'T REMOVE THIS -->
  410. </div>
  411.  
  412. <!-- Add your custom links here. You can also erase them if you want. -->
  413. <div class="customlinks">
  414. <a href="URL">Link</a>
  415. <a href="URL">Link</a>
  416. <a href="URL">Link</a>
  417. <a href="URL">Link</a>
  418. <a href="URL">Link</a>
  419. <a href="URL">Link</a>
  420. </div>
  421.  
  422.  
  423. <!-- You can remove/add/edit the filters (See how to add new filters at the end of the code). Just be sure to leave the links that have a "class" for aesthetic reasons. -->
  424. <div id="rpstatus">
  425. <div id="sort">
  426. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  427. <li><a href="#filter" data-option-filter=".all" class="top">All</a></li><br>
  428. <li><a href="#filter" data-option-filter=".complete" class="left">Complete</a></li>
  429. <li><a href="#filter" data-option-filter=".cancel" class="right">Cancelled</a></li>
  430. <li><a href="#filter" data-option-filter=".ongoing">On Going</a></li>
  431. <li><a href="#filter" data-option-filter=".onhold">On Hold</a></li>
  432. <li><a href="#filter" data-option-filter=".open">Open RP</a></li>
  433. <li><a href="#filter" data-option-filter=".private">Private RP</a></li>
  434. <li><a href="#filter" data-option-filter=".sfw" class="bleft">SFW</a></li>
  435. <li><a href="#filter" data-option-filter=".nsfw" class="bright">NSFW</a></li>
  436. </ul>
  437. </div>
  438.  
  439. </div>
  440.  
  441. </div>
  442.  
  443. <div id="wonderland" class="clearfix">
  444.  
  445. <!-- All RP threads go below this code -->
  446.  
  447.  
  448. <!----------------------New RP thread---------------------->
  449. <!-- !!IMPORTANT!!
  450. To make the filters work you need to edit the next code.
  451. In "class" you will have to put the filters you want the thread to have.
  452. They should be separated only by a space
  453. I recommend the next order:
  454. 1. all (This one is default; if you don't use it it will mess up the whole code.)
  455. 2. open | private
  456. 3. sfw | nsfw
  457. 4. complete | ongoing | onhold | cancel
  458. By default there should be 4 filters in your thread. -->
  459. <div id="chara" class="all open sfw complete"><div class="box">
  460.  
  461. <!--Name of the character + Series -->
  462. <div class="charaname">
  463. Character Name <sub>(Series)</sub>
  464. </div>
  465.  
  466. <!--Open/Private, SFW/NSFW specifications -->
  467. <div class="contentbox"><div class="rpdetails">
  468. Open | SFW
  469. </div>
  470.  
  471. <!--Picture of the character. Size recommended 180x250. Pictures will automatically resize. -->
  472. <div class="characterbox"><div class="char-avi">
  473. <img src="http://winetester.utdallas.edu/images/empty.jpg" class="imageresize">
  474. </div></div>
  475.  
  476. <!--RP Details -->
  477. <div class="rpsummary">
  478. <div class="sub">Status:</div><p>Complete</p>
  479. <div class="sub">Setting:</div><p>Canon Compliant</p>
  480. <div class="sub">Ship:</div><p>Character x Character</p>
  481. <div class="sub">Summary:</div>
  482. <p class="sum">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  483. </div></div>
  484.  
  485. <div class="bottombar">
  486. <!-- Just edit the PARTNERNAME and URL parts-->
  487. <a title="PARTNERNAME" class="masterTooltip" href="URL" target="_blank">Partner</a>
  488. <a href="URL">Thread</a>
  489. </div>
  490. </div></div>
  491. <!----------------------End of the RP thread ---------------------->
  492.  
  493. <!----------------------New RP thread---------------------->
  494. <div id="chara" class="all private nsfw ongoing"><div class="box">
  495.  
  496. <!--Name of the character + Series -->
  497. <div class="charaname">
  498. Character Name <sub>(Series)</sub>
  499. </div>
  500.  
  501. <!--Open/Private, SFW/NSFW specifications -->
  502. <div class="contentbox"><div class="rpdetails">
  503. Private | NSFW
  504. </div>
  505.  
  506. <!--Picture of the character. Size recommended 180x250. Pictures will automatically resize. -->
  507. <div class="characterbox"><div class="char-avi">
  508. <img src="http://winetester.utdallas.edu/images/empty.jpg" class="imageresize">
  509. </div></div>
  510.  
  511. <!--RP Details -->
  512. <div class="rpsummary">
  513. <div class="sub">Status:</div><p>On Going</p>
  514. <div class="sub">Setting:</div><p>Canon Compliant</p>
  515. <div class="sub">Ship:</div><p>Character x Character</p>
  516. <div class="sub">Summary:</div>
  517. <p class="sum">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  518. </div></div>
  519.  
  520. <div class="bottombar">
  521. <!-- Just edit the PARTNERNAME and URL parts-->
  522. <a title="PARTNERNAME" class="masterTooltip" href="URL" target="_blank">Partner</a>
  523. <a href="URL">Thread</a>
  524. </div>
  525. </div></div>
  526. <!----------------------End of the RP thread ---------------------->
  527.  
  528. <!-- All RP threads go above this code -->
  529. </div>
  530.  
  531. </body>
  532.  
  533.  
  534. <!------- filter scripts -------->
  535. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  536. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  537. <script>
  538. $(function(){
  539.  
  540. var $container = $('#wonderland');
  541.  
  542. $container.isotope({
  543. itemSelector : '.all'
  544. });
  545.  
  546.  
  547. var $optionSets = $('#sort .option-set'),
  548. $optionLinks = $optionSets.find('a');
  549.  
  550. $optionLinks.click(function(){
  551. var $this = $(this);
  552. // don't proceed if already selected
  553. if ( $this.hasClass('selected') ) {
  554. return false;
  555. }
  556. var $optionSet = $this.parents('.option-set');
  557. $optionSet.find('.selected').removeClass('selected');
  558. $this.addClass('selected');
  559.  
  560. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  561. var options = {},
  562. key = $optionSet.attr('data-option-key'),
  563. value = $this.attr('data-option-filter');
  564. // parse 'false' as false boolean
  565. value = value === 'false' ? false : value;
  566. options[ key ] = value;
  567. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  568. // changes in layout modes need extra logic
  569. changeLayoutMode( $this, options )
  570. } else {
  571. // otherwise, apply new options
  572. $container.isotope( options );
  573. }
  574.  
  575. return false;
  576. });
  577.  
  578.  
  579. });
  580.  
  581. $(document).ready(function() {
  582. // Tooltip only Text
  583. $('.masterTooltip').hover(function(){
  584. // Hover over code
  585. var title = $(this).attr('title');
  586. $(this).data('tipText', title).removeAttr('title');
  587. $('<p class="tooltip"></p>')
  588. .text(title)
  589. .appendTo('body')
  590. .fadeIn('slow');
  591. }, function() {
  592. // Hover out code
  593. $(this).attr('title', $(this).data('tipText'));
  594. $('.tooltip').remove();
  595. }).mousemove(function(e) {
  596. var mousex = e.pageX - 25; //Get X coordinates
  597. var mousey = e.pageY - 50; //Get Y coordinates
  598. $('.tooltip')
  599. .css({ top: mousey, left: mousex })
  600. });
  601. });
  602.  
  603. $( '.rpsummary' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
  604. var e0 = e.originalEvent,
  605. delta = e0.wheelDelta || -e0.detail;
  606.  
  607. this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
  608. e.preventDefault();
  609. });
  610.  
  611. </script>
  612.  
  613. <!-- To add a new filter just copy this code next to the others:
  614.  
  615. <li><a href="#filter" data-option-filter=".FILTER" class="left">NAME</a></li>
  616.  
  617. And edit .FILTER and NAME
  618.  
  619. IMPORTANT: The filter MUST have a . at the beggining, otherwise it wont work.
  620.  
  621. -->
  622.  
  623.  
  624. </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!