Search the Community

The year is 2029, and our site is character-plot focused! You control the story for your characters, and events here are just like little parties for our characters to interact! Granger University was founded 28 years ago, and you are more than welcome to create university students if you wish! What darkness lurks beneath this new ray of light? Join us and find out!

To get started, set up a couple of custom profile fields. For the purposes of this exercise, we're going to use the following: Character Faction Character Age Character's Playby I strongly recommend that Character Faction is a drop down selection, the script relies on everyone using the same spelling and capitalisation. Example: Character Age and Playby does not need any special settings. Save your custom profile fields and take note of their numbers. In my case they will be: Character Faction - <!-- |field_21| --> Character Age - <!-- |field_2| --> Character Playby - <!-- |field_17| --> Go to your HTML templates. We need to edit the following: Member List Headers - this is the container that every member sits in within the member list. Member List Header variables Member List Row - this is every individual member listed in the member list. Member List Row variables Member List Header - HTML and Javascript Paste the following: <!-- START SORT BY --> <h3>Sort by:</h3> <div id="sorts" class="button-group"> <button class="button is-checked" data-sort-by="original-order">original order</button> <button class="button" data-sort-by="face">Face Claim</button> <button class="button" data-sort-by="age">Character Age</button> </div> <!-- END SORT BY --> <!-- START FILTERS --> <div class="filters"> <div class="ui-group"> <h3>Filter by Character Faction</h3> <div class="button-group js-radio-button-group" data-filter-group="species"> <button class="button is-checked" data-filter="*">show all</button> <button class="button" data-filter=".Good">The Good Guys</button> <button class="button" data-filter=".Evil">The Bad Guys</button> </div> </div> <!-- ADDITIONAL FILTER GROUPS, COPY AND PASTE THE BELOW OUTSIDE OF THE COMMENT TAGS --> <!-- <div class="ui-group"> <h3>Filter by YOUR STUFF HERE</h3> <div class="button-group js-radio-button-group" data-filter-group="UNIQUE-DATA-FILTER-GROUP"> <button class="button is-checked" data-filter="*">show all</button> <button class="button" data-filter=".YOUR_WORD_HERE">DISPLAYED WORDS</button> <button class="button" data-filter=".YOUR_WORD_HERE">DISPLAYED WORDS</button> </div> </div> --> </div> <!-- END FILTERS --> <!-- A RESET BUTTON --> <p class="resetme"><button class="button button--reset">Reset filters</button></p> <!-- END RESET BUTTON --> <!-- END FILTERS --> <div class='grid'> <% MEMBERLIST_ROWS %> </div> <!-- |pages| --> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script> <script> $(document).ready(function() { var $grid = $('.grid').isotope({ itemSelector: '.grid-item', layoutMode: 'fitRows', getSortData: { age: '.age parseInt', face: '.face', // ADD ADDITIONAL FILTERS HERE WORD CORRESPONDS WITH DATA SORT BY WORD ABOVE // IGNORE EVERYTHING BELOW HERE category: '[data-category]', weight: function( itemElem ) { // function var weight = $( itemElem ).find('.weight').text(); return parseFloat( weight.replace( /[\(\)]/g, '') ); } } }); // store filter for each group var filters = {}; $('.filters').on( 'click', '.button', function() { var $this = $(this); // get group key var $buttonGroup = $this.parents('.button-group'); var filterGroup = $buttonGroup.attr('data-filter-group'); // set filter for group filters[ filterGroup ] = $this.attr('data-filter'); // combine filters var filterValue = concatValues( filters ); $grid.isotope({ filter: filterValue }); }); // bind sort button click $('#sorts').on( 'click', 'button', function() { var sortByValue = $(this).attr('data-sort-by'); $grid.isotope({ sortBy: sortByValue }); }); // change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); }); }); var $anyButtons = $('.filters').find('button[data-filter=""]'); var $buttons = $('.filters button'); $('.button--reset').on( 'click', function() { // reset filters filters = {}; $grid.isotope({ filter: '*' }); // reset buttons $buttons.removeClass('is-checked'); $anyButtons.addClass('is-checked'); }); // flatten object by concatting values function concatValues( obj ) { var value = ''; for ( var prop in obj ) { value += obj[ prop ]; } return value; } }); </script> The first section is the sort by buttons. These are what will rearrange the order in which member's are displayed. The most important thing here is data-sort-by="face" take note of the word used in the data-sort-by attribute. The second section is the filter buttons. These are what will make users vanish from view (filtered out) when they do not meet the filter requirements. The most important thing here is data-filter=".Good" take note of the word used in the data-filter attribute. The third section has a handy reset button, allowing your users to put all characters back into view. The fourth section contains the actual members and the container that they will sit within. The div class is important here because it is referred to by the script. Fifth section is the pages button and this is sadly the memberlist's biggest weakness. You can only display so many users on a page and the script will not load more that for you. All the script does is sort information that is already there, it doesn't retrieve any additional data. Infinite scroll is also not doable on Jcink due to the way it needs to be set up. I would love to be proven wrong though. I'll address a work around for that later in this guide. The Sixth and final section is the script. The following script source links directly to isotope's website, I strongly recommend downloading a version yourself and uploading it to your site. Use your site link for the script source. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script> You must have this (or the version on your site) linked before the script in order for it to run properly. I recommend just putting it on the member header template just because you don't need to run the script anywhere else. If you prefer, you can add it to your global wrapper in the usual spot. The magic is between <script> and </script> The first line is telling the script to not execute until the entire page has loaded. The next bit is telling what div to act execute the isotope on. If you have changed any of the class names in your HTML, you will need to read through the script and change to the appropriate class. If you want to save yourself the hassle, just use the same class names I use. I'll go into the script in more detail when I describe how to add more sort by buttons. Member List Row - HTML Paste the following into your member list row <div class="grid-item member <!-- |field_21| -->"> <div class='avatar'> <!-- |avatar| --> </div> <div class="name"> <!-- |name| --> </div> <ul> <li class='age'> <!-- |field_2| --> </li> <li> Faction: <!-- |field_21| --> </li> <li class='face'> Face Claim: <!-- |field_17| --> </li> </ul> </div> Substitute your custom profile field numbers as necessary. If you save the templates now and check out your member list, you'll see that it's now working! It also looks like pants, but you can fix that with a bit of CSS magic 🙂 How to Add More Filters To add a filter, do the following: Go to the member list row Add the appropriate variable to grid-item member <!-- |field_21| --> so, if you want to add another filter and it's variable is 22, you should have div class="grid-item member <!-- |field_21| --> <!-- |field_22| -->" Make sure that there are spaces between each variable! Save Go to the member list header Add the following before </div> <!-- END FILTERS --> <div class="ui-group"> <h3>Filter by YOUR STUFF HERE</h3> <div class="button-group js-radio-button-group" data-filter-group="UNIQUE-DATA-FILTER-GROUP"> <button class="button is-checked" data-filter="*">show all</button> <button class="button" data-filter=".YOUR_WORD_HERE">DISPLAYED WORDS</button> <button class="button" data-filter=".YOUR_WORD_HERE">DISPLAYED WORDS</button> </div> </div> Substitute .YOUR_WORD_HERE with what the potential input for that variable might be. For example, the Faction variable I created earlier had two potential inputs, Good and Evil (capitalisation IS important). So WORD is replaced with .Good and the next button has .Evil after data-filter= You should also rename the data-filter-group (where it says UNIQUE-DATA-FILTER-GROUP) Save! Done! How to Add More Sorts Go to the member list row Add the custom field variable to where you want it to appear, and then wrap it in an element with an unique class name. For example, if you want to add player names to the sort button, you could put them in a h3 class like so: <h3 class="playername"><!-- |field_XX| --></h3> Memorise what the class name is Save Go to member list header Add this <button class="button" data-sort-by="CLASS-NAME">WORDS TO DISPLAY</button> before </div> <!-- END SORT BY --> Using the player name example would mean you would put in: <button class="button" data-sort-by="playername">Player</button> Scroll down to the script and find the following: getSortData: { Press enter and add the following after the curly bracket CLASS-NAME: '.CLASS-NAME', Take note that there is a comma at the end of the line. Leave it off? Script stops working. Using the player name example would mean you would end up with the following: getSortData: { playername: '.playername', // rest of the stuff here Save Done! Note: use the age sort as your guide on how to set up any other sort by numbers in the sort by. If you want to sort by height, make your users use metres (1.7 rather than 5'5 because the apostrophe will spoil your script) and change parseInt to parseFloat. In saying that, making your user's type 5\'5 ought to save your script, if someone makes a mistake however you will need them to correct it in order for the script to continue functioning. Safest just to use decimal points. How to add a label to numbers If you want to sort by a number, your class to sort can only contain a number. For example, age looks like this: <li class='age'> <!-- |field_2| --> </li> We will use CSS to fix this: .age::before { content: 'Age: '; display: inline } Save and Done! A Cheat to Display More Members As noted, the biggest disadvantage of using the sort and filter script is that it can not retrieve data from another page. So when a user clicks on the member list, we want them to automatically see as many characters as possible. The most allowable by Jcink is 50. So, make your own link to the member list and make it the following URL: YOUR_BOARD_URL_HERE/index.php?&act=Members&photoonly=&name=&name_box=all&max_results=50&filter=ALL&sort_order=asc&sort_key=name&st=0 Done! Another thing to consider is using the Hide this group from the member list? option in the user group settings to your advantage. For example, consider only having accepted and active character accounts displayed on your member list, rather than having inactive and unaccepted character accounts clogging up the list. I wish there was a more elegant solution to this! If anyone has found a solution that works for them, I would love to hear about it. Even if this isn't the member list code for you, I hope that it's given you some ideas on what you can do with the member list template! Visit the isotope website to find out what else you can do with the script!

An immersive, well-established, and original high fantasy role-play forum with a focus on creative freedom and fun, dramatic plots!

There is a converter to go from IPB 1.3 to phpBB2. I've used it to get from IPB 1.3 (Jcink) to MyBB. (Since you can't really convert directly from IPB 1.3 to MyBB 1.6...) So I can attest that it does work. Here's the link to the converter. From here you need to set up your web server... I recommend using Xampp (but you can use whatever you prefer) rather than your live server simply because this way you don't use any of your liver server's resources. (Additionally, depending on your hosting, you may not be able to make the following changes to your php file so the transfer will fail every time.) If the conversion uses too much CPU/RAM for too long on your self-hosted site it could end up with your site getting suspended/stopped. So best to do this offline if possible. You'll also probably need to edit php.ini (with notepad or your favourite plain text editor) located in the xampp/php directory. (If you use something other than Xampp, the location may be different. But there should still be a php.ini file somewhere with these variables.) Look for: "max_execution_time=" and set it to something like 9000 (this way your conversion script doesn't accidentally time out halfway.) "max_input_time=" and set it to -1 (This way your script can process incoming data for as long as it needs.) "memory_limit=" and set that to something like 1024M or even 2048M (if you have less than 4GB of ram don't put a value higher than 1024M. But if you have more than 4GB then feel free to use 2048M just to help speed things up some.) "upload_max_filesize=" and set it to at least 200M. (This way you can upload larger files to PHPMyAdmin without worry. Though you probably won't need much more than 200M unless your forum is pretty huge... Like 200,000 posts or more.) Finally save the php.ini file and close it. The Process Now... 0- Open Xampp (or your preferred program) and make sure running both the MySQL and Apache parts are running. (See the attached image. ) 1- Open your web browser and type "localhost/phpmyadmin" with Xampp running. (This will open the tool to create a database.) 2- Create the empty database first. (In PhpMyAdmin, on home screen click "Databases" from top. Then enter the name of the new one and click "create".) 3- Install a copy of phpBB2 (you can get it from Sourceforge), be sure to set the database name as whatever you created in step 1. (When using Xampp, the default username is root and the password is blank/no password set.) 4- Import your JFH database into the same database where you installed phpBB2. 5- Unzip ib2phpBB_1_3b.zip and put it in the root phpBB2 folder. 6- Then open conf.php in the converter script's folder with a text editor (ex- notepad) and set $ib_prefix = "" to whatever your forum's prefix is. (EX- $ib_prefix = "yoursite_") and save that file. 7- Run that conversion script by typing the pathname to it in your web browser... EX- localhost\phpBB2\ib2phpBB_1_3b\index.php and pressing enter/go. (how long it'll take varies depending on how large your forum is. But just follow the steps, making sure to wait for it to tell you it's finished before starting the next one.) - Optional - Take the time here to fix up any issues with forum permissions/layout/etc... while your site is offline. 8- After it completes, and before you upload it to your live server, use PhpMyAdmin to open the phpbb_config and change "server_name" to whatever your url will be. (So if you have sub.domain.tld then put that, but if you're using domain.tld then use that.) And set "script_path" to whatever folder you've installed it into. So if you're having it at like domain.tld/forum then you'd enter "forum" here. (If you're setting this in the main directory then you should leave this blank.) After that you can then run the conversion script to go from phpBB2 to phpBB3. From here you can now transfer to most major forum softwares (MyBB, SMF, Xenforo, IPB, etc...) Please keep in mind however that, like mentioned on the IP2PHPBB download page there are things which will not convert and things that will need to be redone. Troubleshooting Issue: No posts are showing up after the conversion ended. Fix: The most likely reason is the script reached it's timeout limit and not everything got converted (so it abandoned everything). Open your php.ini file and set the max execution time even higher then try again. Issue: I get an error like: Fatal error: Uncaught Error: Call to undefined function set_magic_quotes_runtime() in C:\xampp\htdocs\forum\common.php:29 Stack trace: #0 C:\xampp\htdocs\forum\index.php(26): include() #1 {main} thrown in C:\xampp\htdocs\forum\common.php on line 29 Fix: This error is an issue with how phpbb handles an old, now depreciated, php function. If you feel confident editing code you can open the named php file and locate "set_magic_quotes_runtime() " and replace it with "ini_set('magic_quotes_runtime', 0);" Alternatively you can null the line by adding "@" before it. Or you can open your php.ini and change to Finally you can reinstall phpBB 2 and try running the conversion process again.