Leaderboard

Why this article? First and foremost rules are likely the most important thing to a potential member on your site. The rules set a precedent for how your site is run and how you as an admin will approach a subject that comes up. It seems like it should be simple, that rules are common sense and that people will just obey, however it's not so simple and I hope that this article helps you with finding the correct voice with coming up with your rules. What to think about! When you come up with your rules there are things that you should think about and then things to consider once you've written them. I never recommend writing your rules, cleaning up the text and posting them. I always recommend reflecting and having someone review them before they are posted (preferably a person that can be objective about them). Some of the things that you should consider when writing your rules: What sort of admin do I want to portray myself as? How do I want the potential members to feel? Do I really need this rule? Once you've figured out some of these (and they will likely change and alter as you read through this) then you've started your journey into having respectable rules. What the rule means to you doesn't mean that rule means the same thing to me! Just because the rule makes sense to you doesn't mean it is. Additionally, just because the rule seems funny/smart/clever etc to you doesn't make it so. Write your rules as if you plan for a teacher or parent to read them and you need to get the point across, not as if you are talking to your friend telling them about what you're expecting people to follow. The Don'ts Some of these are personal peeves, some of these are just recommendations and some are just things that you should likely avoid. I can tell you, from my experience, that if it hasn't sent me away it has likely sent someone away from your site. Don't use the rule "Don't be a dick" or any variation thereof. While Wil Wheaton has said it and god he's so awesome (sarcasm included) it doesn't mean this is a blanket term that you should use in your rules. In fact, including this rule has the affect to immediately set people off and in a bad mood.. My first reaction to such a phrase is "click the X button, this admin is a dick". While the latter is not always true it doesn't negate the negative tone that it immediately puts into the head of the reader. This coincides with rules like "be respectful" "have fun" and others. These rules mean different things to different people so word them better or don't put them in there. Don't use "not". I'm using the words don't and not in this article ironically. People hate reading the word "not" or the variations of the word "not" and so avoiding it in your rules is key. Use your awesome vocabulary (or thesaurus for those of us like me that have a terrible vocabulary) and use other words that aren't not. Prohibited, banned, forbidden are some of your best friends when writing rules. Think of your rules like talking to a rebellious teen. The more you tell them not to do it, the more likely they will WANT to do it. Don't write your rules as if you're talking to someone. Nothing looks more childish than if you talk to the person on the other end of the screen through your rules. "You're not allowed to do this and if you do we will slap you with a fish." It makes the staff seem inexperienced and, honestly, moronic. You sound like you're standing on a playground telling other kids how they have to use the monkey bars and how if they fall they fell in lava and can't get back on. It's unnecessary. Don't waffle. Waffling is the inability to make a decision. Make a decision and stand firm in it. Waffling gives people the impression you don't actually know if what you chose is the right decision and so you are trying to make it seem like it was but wasn't your decision. The most common rule that this is applied to is word count rules "This is a no word count site BUT you must post more than 1 sentence". If you have to put the word "but" in your rule then you don't have a firm rule. Using the word count example either you are "no word count" or you are a "one sentence minimum" site. You can't be both and you don't want to be both. Make a decision and stick to your guns. Don't make silly restrictions. From "Usernames must be in all caps" to "no duplicate names" to "your character must have a middle name" to "playbys real age must be within 5 years of your characters age" (note: this last one has an additional note in the "JSYK" section) these are all useless, needless restrictions that are made for no reason other than to micromanage your players. None of these rules have a real purpose and are often used as a control mechanism to see how closely people are paying attention to your rules. These sorts of things members may still join regardless of but they are annoying and frustrating and put an unnecessary hurdle in the way of a new member joining your site. Joining a site should be simple. Don't make RP feel like a chore or burdening. Requiring specific chat programs, templates, special codes, etc. These things make RP less of a hobby and more like a daily chore. Require only what is needed to make your members happy and your site flourish. Never sacrifice the happy though. Don't be too inclusive. Don't take this the wrong way but being too inclusive can be just as much as a put off as being too exclusive. There are many things that make some people feel included and a part of the site as much as push another demographic away from sites. I will state, while I have no issue with the LGBT+ community I find pronouns to be exclusive to that community which makes me feel excluded from communities that require them. However on the flip side not having those could do the reverse to someone that is LGBT+. These should be your personal preference and not influenced by the community at large. Don't threaten your members or potential members. "DO THIS AND YOU WILL BE BANNED!" it feels like living under WW2 Hitler and who wants that? Just provide the rules clearly and then from there you choose the punishments from the administrative side. Your non-staff people don't need to know how you deal with oath breakers. Rules like this often make the staff seem juvenile and inexperienced. Don't force ratios. No one likes them, good sites will balance out naturally and really they just piss people off. Restricting a type of character should be plot defining/breaking not annoying to keep numbers within a spectrum. Members that don't want to play the other type of character will fill their ratio and never create another character. The unfortunate part for you is that this player may have given you more active characters but your restriction limited them so they had to stop. Don't put silly limits on characters. This goes with the above. Restrictions on character amounts, character types (unless it's setting breaking) is just silly. I know that you're trying to mitigate the fall out if that person leaves but really, there is going to be fallout regardless. Just let them be creative, you'd be surprised at how good of a member some of those chronic character makers are. Don't require post templates. They are tedious and annoying to most. People that just want to roleplay will find it daunting and eventually just give up. Don't make rules for the possibilities. If you're thinking of all the potentially bad things that could happen if you don't add the rule then you may need to think about how you are portraying your rules to members. Your rules should cater toward the crowd you want, not the crowd that you think you might get. Now these aren't hard and fast rules to live by. If you have a don't in your rules but you like it, have at it. It's your site for a reason. The Dos Now dos are really subjective and there aren't as many because really if you avoid the don'ts then you are often in a good position with your rules. These all depend on the community you want to pull in and how you want to portray yourself to your members and your potential members. Not all of these dos will apply to every circumstance but they are a good rule of thumb. Make sure your rules are clear. Not every rule needs an explanation if it's stated correctly and elaborating too much often causes confusion. Make sure that you include the basics. While your ad may say "no word count" it doesn't mean that's how someone got to your site. Make sure you always include things like your word count, rating, your OOC account restrictions, whether you are an APP or APC site, whether you allow art for playbys etc. These things are immediate go or no-gos for potential members hiding them or making them difficult to find is a turn off. Make sure the voice in your rules is the voice you want people to hear. If you sound like a dictator people will think you're a dictator. If you sound professional people will think your professional. This is all in the wording of your rules and how you portray you and your staff. Make sure your fears of the worst are kept away from the rules. When you put your fears and start banning things without having a reason to this often can mean that you are paranoid. Paranoid staff members don't make for good staff members as they always look for what someone is doing wrong and is highly likely to push members away. When something you fear comes up, deal with it then, not in the rules. Ask for someone to read over your rules. This is important because when you write your rules you are normally happy with them, however some things may be unclear. Having a second or third set of eyes look them over will help you figure out the holes in your rules. I hope this helps you get more members and stop pushing away potentials through poorly written/conveyed rules. If you have a suggestion for a do or don't feel free to post a comment below and I will review it. JSYK Playbys can span many different ages, especially in the age of television and media. Many Playbys have been acting for most of their life so forcing a rule that disallows the use of a younger version of a playby is silly. Lets take some people that span ages: Michelle Trachtenburg (Harriette the Spy) Drew Barrymore (ET) Chloe Grace Moretz (The Amityville Horror) Leonardo Decaprio (Growing Pains) Seth Green (Big Business or My Step Mother is an Alien) Elijah Wood (The Good Son) Sean Astin (The Goonies) Sean Connery (Pretty sure he's a vampire and hasn't aged in a century since he was turned) And these are just a few actors/actresses that have went from young ages to adults in their span of acting. It should be perfectly fine to play them from any era of their life as long as the character matches the age. This sort of rule also negates classic playbys from movies older than the 80s where the actors are in their 80s-90s but their acting career was in their 30s.

Before we get started, this is what we're going to create: You can add as many articles as you like without needing to alter the script. Create Your Articles Go to webpage maker (under skins & templates) Click create new webpage Give it a page title, doesn't matter what, we're not going to see it. Give it a key, something memorable for you because you'll need it later. Set allow key to use board wrappers to No. Your contents need to include valid HTML, so wrap your paragraphs into paragraphs <p>I'm a paragraph!</p> and wrap the entire contents into a div with the class articles and it must have a unique ID. For IDs, I just use article_1 (number increasing for each new article) but you might prefer something more memorable. You will need to remember what it is. <div id="article_1" class='articles'> <p>Yay! First paragraph!</p> <p>I'm a middle paragraph</p> <p>I'm another paragraph!</p> </div> Rinse and repeat until you have the articles you want. Or just make two for the purposes of this tutorial. Create the Container The container is what will house the articles, it will also include our magical menu. Back in webpage maker (under skins & templates) Click Create a New Webpage Give it a page title, this one matters because it will appear in your nav strip. (ie. My Community -> lore) Set allow key to use board wrappers to Yes. Paste in the following code: <div id="welcome_articles"> <h1>Lore</h1> Welcome to our lore. Here you can bla bla bla. Click the links on the left to read the relevant articles. </div> <div id="article_container"> <aside> <ul class="article_container_list"> <h3>Lore Index</h3> <li><a class="container_links" href="#" data-showdiv="article_1">Link 1</a></li> <li><a class="container_links" href="#" data-showdiv="article_2">Link 2</a></li> </ul> </aside> <div class="article_content"> <% article_1 %> <% article_2 %> </div> </div> <script> $(".container_links").click(function(){ $(".articles:visible").hide(); $("#"+$(this).attr("data-showdiv")).show(); }); $('.container_links').click( function(){ if ( $(this).hasClass('active') ) { $(this).removeClass('active'); } else { $('.container_links.active').removeClass('active'); $(this).addClass('active'); } }); // following is purely to prevent page jump when user clicks on link $('a.container_links').click(function(e){ e.preventDefault(); }); </script> where <% article_1 %> and <% article_2 %> are the keys to the articles you created earlier. The javascript is already included and assuming that you don't replace your class names, it doesn't need to be altered. Besides the aforementioned keys, the most important part of the code for you is <li><a class="container_links" href="#" data-showdiv="article_1">Link 1</a></li> the data-showdiv attribute needs to be the same as one of the articles you created earlier. So, say you created an article about species and you gave it an id of species. Your link should look like this <li><a class="container_links" href="#" data-showdiv="species">Species</a></li> Once you have added the links and keys, save it. If you visit it now, you'll see that everything is displayed but clicking the link will make everything vanish except the for corresponding article. You'll also notice that the list sits on top of everything else. Time to hit the style sheets! Stylesheet Go to your stylesheets and paste in the following #welcome_articles { margin-bottom: 10px; padding: 5px; border-bottom: 1px solid rgba(0,0,0, .1); } #article_container { display: flex } #article_container .article_content { flex-grow: 2; padding: 0 20px 20px; border-left: 1px solid rgba(0,0,0, .1) } #article_container aside { padding: 10px; min-width: 15% } #article_container .articles { display: none } ul.article_container_list { list-style-type: none; margin: 0; padding: 0 } ul.article_container_list li { display: block; margin: 1px; } a.container_links { display: block; border-bottom: 1px solid rgba(0,0,0, .1); padding: 5px } a.container_links.active { padding-left: 15px } ul.article_container_list h3 { margin-top: 0 } The most important bits are #article_container { display: flex } this makes the aside and div.article_content sit next to each other. Sometimes however, the aside can look a little bit claustrophobic, so I add #article_container aside { padding: 10px; min-width: 15% } To ensure that the div.article_content grows to fill the entire space left over, I add #article_container .article_content { flex-grow: 2 } To hide all of the articles by default, I add #article_container .articles { display: none } if you are having problems with the script after adding this code, move #article_container .articles { display: none } to your guidebook page so that it sits above the scripts: ie <style> #article_container .articles { display: none } </style> <script> $(".container_links").click(function(){ $(".articles:visible").hide(); $("#"+$(this).attr("data-showdiv")).show(); }); $('.container_links').click( function(){ if ( $(this).hasClass('active') ) { $(this).removeClass('active'); } else { $('.container_links.active').removeClass('active'); $(this).addClass('active'); } }); // following is purely to prevent page jump when user clicks on link $('a.container_links').click(function(e){ e.preventDefault(); }); </script> Finally, it is useful if the displayed article's link is different from the others. To do this I add a.container_links.active { padding-left: 15px } Responsiveness Make sure your head (in the global wrappers) includes the following <meta name="viewport" content="width=device-width, initial-scale=1"> This will ensure the zoom is at 100%. If you have any fixed width elements in your header or footer you may find that that user now needs to scroll horizontally. I recommend fixing that so that those elements no longer include a fixed width. I've addressed the default fixed widths in the following code @media screen and (max-width: 979px) { body { font-size: 1rem } #wrapper { width: calc(100% - 20px); margin: 0 auto; } #article_container { display: block; } ul.article_container_list { text-align: center } #userlinks { width: 90% } ul.article_container_list li { margin-bottom: 10px } ul.article_container_list li:last-child { margin-bottom: 0 } } The important part (applicable to the guidebook) is as follows #article_container { display: block; } now the aside sits above the content. ul.article_container_list { text-align: center } we center the links (note that they automatically expand to fill the available space because we made the links into blocks earlier.) ul.article_container_list li { margin-bottom: 10px } we make the links easier to tap for a chunky finger. ul.article_container_list li:last-child { margin-bottom: 0 } but the last list item doesn't need a bottom margin, so we get rid of it. The end result for mobiles becomes this: Just want some copy and paste? <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <div id="welcome_articles"><h1>Lore</h1> Welcome to our lore. Here you can bla bla bla. Click the links on the left to read the relevant articles. </div> <div id="article_container"> <aside> <ul class="article_container_list"> <h3>Lore Index</h3> <li><a class="container_links" href="#" data-showdiv="article_1">Link 1</a></li> <li><a class="container_links" href="#" data-showdiv="article_2">Link 2</a></li> </ul> </aside> <div class="article_content"> <% article_1 %> <% article_2 %> </div> </div> <style> #welcome_articles { margin-bottom: 10px; padding: 5px; border-bottom: 1px solid rgba(0,0,0, .1); } #article_container { display: flex } #article_container .article_content { flex-grow: 2; padding: 0 20px 20px; border-left: 1px solid rgba(0,0,0, .1) } #article_container aside { padding: 10px; min-width: 15% } #article_container .articles { display: none } ul.article_container_list { list-style-type: none; margin: 0; padding: 0 } ul.article_container_list li { display: block; margin: 1px; } a.container_links { display: block; border-bottom: 1px solid rgba(0,0,0, .1); padding: 5px } a.container_links.active { padding-left: 15px } ul.article_container_list h3 { margin-top: 0 } @media screen and (max-width: 979px) { body { font-size: 1rem } #wrapper { width: calc(100% - 20px); margin: 0 auto; } #article_container { display: block; } ul.article_container_list { text-align: center } #userlinks { width: 90% } ul.article_container_list li { margin-bottom: 10px } ul.article_container_list li:last-child { margin-bottom: 0 } } </style> <script> $(".container_links").click(function(){ $(".articles:visible").hide(); $("#"+$(this).attr("data-showdiv")).show(); }); $('.container_links').click( function(){ if ( $(this).hasClass('active') ) { $(this).removeClass('active'); } else { $('.container_links.active').removeClass('active'); $(this).addClass('active'); } }); // following is purely to prevent page jump when user clicks on link $('a.container_links').click(function(e){ e.preventDefault(); }); </script> I hope that someone finds this useful! As already noted, any forum software can utilise this guide, the actual magic is the script and that is not software specific.

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!

So the Character Mod will likely hold all of your character's information. It's a matter of pulling that information out and being able to utilize it elsewhere to make lists. Below is the code for a Playbys list however can work for other things. With the new version of the Character Mod it is not required to do this for groups as the Character List allows you to filter by groups now. So first things first, you need to create your custom field for the plaby/faceclaim that your users will be able to edit and add their plaby into. If you already have this then skip to the next step. To do this you need to go to Community > Characters > Custom Fields > Create New > Create a Text Field. Whether you show it in the posts or profile or not is irrelevant. In our example below the key we use is "playby" so you need to use this or make sure to change it in the code. Once you have this created you need the field ID. To find this you can mouse over the field, by going to the edit page and looking at the URL or copy and pasting the URL into your favorite editor. That ID is what you'll replace the # with in the below code into an HTML block in Pages (Pages > Blocks > Create New > Custom HTML): <div class='ipsPad'> <h2 class="ipsType_sectionTitle ipsType_reset cForumTitle">Playby List</h2> <div class="ipsPad ipsBox"> {{$runit = \IPS\Db::i()->select('*', 'characters_fields_values', 'field_# != ""', 'field_# ASC');}} <ul class='ipsDataList ipsDataList_reducedSpacing playbyList ipsGrid ipsGrid_collapsePhone' data-ipsgrid data-ipsgrid-equalheights="row"> {{foreach $runit as $playbys}} {{$char = \IPS\characters\Character::load( $playbys[character_id]);}} {{if $char->approved == 1}} <li class="ipsPhotoPanel ipsPhotoPanel_small ipsAreaBackground_reset ipsClearfix ipsGrid_span4 ipsPad"> <span class="ipsUserPhoto ipsUserPhoto_small ipsPos_top"> {{if $char->photo}} <img src="{file="$char->photo"}" alt="$char->name" /> {{else}} <img src='{resource="default_photo.png" app="core" location="global"}' alt="$char->name"> {{endif}} </span> <div class=""> <strong>Playby:</strong> {$char->fields('playby')} <br /><strong>Character:</strong> {template="link" app="characters" location="front" group="character" params="$char"} <br /><strong>Played by:</strong> {$char->owner()->link()|raw} </div> </li> {{endif}} {{endforeach}} </ul> </div> </div> This code will give you a simple list with an image to the side, the playby, the character and the player that plays the character. It is in a grid view and you can edit as necessary but it's in alphabetical order by first name of the playby. To explain the code a little we first tell the code to find all characters that have a playby filled in so the field is "not blank". Then we loop through those (where the foreach starts) to show them. To get the character name and player name we first load the character then check to be sure they are approved, because we only want approved characters showing in our lists, and then we output how we want everything to look. You're free to ask questions in the IPS Staff People Coterie or get assistance. Please feel free to leave a review below.

Resources used: https://www.tablesgenerator.com/html_tables# https://www.w3schools.com/cssref/default.asp https://fonts.google.com

Anyone who handles CSS/HTML is going to eventually have to deal with fonts in one way or another. Today, we're going to go over some of the do's, don'ts, and things to consider when it comes to fonts and how you use them on your site. This is nowhere near an exhaustive guide to using fonts, but it should be a good starting point regardless. While they're technically fonts, this guide doesn't cover glyph fonts like FontAwesome, as it is more concerned with accessibility than aesthetics. Picking A Font This needs to be broken down into two decisions; typeface, and font face. There are 4 styles of typeface, and countless font faces to choose from, and your selections will greatly affect the feel of your site and how readable it is. These selections will also dictate every other decision you make when it comes to styling your fonts, especially sizing which we will get into soon. The four typefaces are: Serif: Serif typefaces are the ones with a short, decorative stroke at the end of a longer stroke on a letter, such as Times New Roman. Sans serif: Sans serif typefaces are simply fonts that don't have this shorter decorative stroke, like Arial or Calibri. Monospace: Monospace typefaces take up an equal amount of horizontal space for each letter, regardless of the visual width of the letter, like Courier. Script: Script typefaces are considered decorative and generally appear hand-written, such as Comic Sans. A good rule of thumb is to use a single sans serif font for the main bulk of your text, and another font for your headers and accent text and never use more than 3 fonts on your site. Google Fonts has a massive list of font faces in every category, and is a great resource for all of your font face needs. If you're indecisive, you can also simply specify serif, sans serif, or monospace for your font face. I wouldn't recommend this with script, however, as the default is general Comic Sans, which a lot of people find childish in a font. Font Sizing Picking the right size for your font is arguably just as important as finding the right font face, if not even more so. Even the most beautiful font means nothing if its too small to read. While you might like the absolute control px measurements provide, it can be considered a browser behavior hijack of sorts, in that it forces control of font sizes away from the user and into your hands. We want to avoid browser behavior hijacking and maximize accessibility to our sites, and thus I present to you the rem measurement! Rem is a relative measurement of font size, meaning that it will display the font as a size relative to what your user's browser size is set to. A smaller number will result in smaller text, and a larger number will result in larger text. Think of it in terms of percentages, with 1rem equaling to 100%, 0.5rem being 50%, 1.5rem being 150%, and so on. You always want to set the font size of your body to 1rem as a starting point, and consider going to perhaps 1.1 or 1.2rem for serif fonts as they tend to be a bit harder to read at smaller sizes. Additionally, the fancier a script font is, the larger it needs to be, and I would strongly suggest not dipping below 2rem for these. Font Colour The colour of your text is almost as important as the size of it. The key thing to avoid is letting your font blend into your background, or contrast so strongly it causes eye fatigue. On a white background, for example, both baby pink and black are going to be almost equally uncomfortable to read for more than a few words. An off-white colour like #aaaaaa is great for darker backgrounds, while a dark grey like #111111 is good for lighter backgrounds. You can quickly check this by adjusting your screen's brightness in a dark room. If the text becomes hard to read when you lower your brightness, the contrast needs to be increased. If your text becomes uncomfortable to read when you increase it, you need to scale back the contrast slightly. When it comes to headers, there's another option for the code-savvy among us; text-stroke. Its supported by every browser with the exception of the mobile version of Opera. That being said, avoid using it on your main body text as this can make it hard to read all on its own. It can be a powerful effect, but with great power comes great responsibility. Line Height and Letter/Word Spacing Generally speaking, you don't want to mess around with your line heights, or letter or word spacing. If there is an issue with one of these things, simply pick a different font, as you can seriously mess with people's ability to visually track the lines and words as they read them. Decreasing line, letter, and word spacing tends to result in text bunching up on itself, and spaces between words suddenly disappearing or becoming hard to find. Increasing any of the 3 can be just as damaging, as it can cause the eye to be dragged away from the text by what's known as rivers; white space between letters/words that coincidentally align across multiple lines. The only exception to this rule that should even be considered is in the case of headers, and even then it should be used sparingly and only to slightly increase line height or letter/word spacing. Forcing Letter Cases Forcing text into all uppercase or lowercase letters is something I consider almost a sin in web design, especially in a roleplay site. You're hijacking the ability to decide letter case from your members in a lot of cases, and it can dramatically affect readability on your site because it breaks the general expectations people have for properly formatted text. Nobody likes it when the page is shouting at them (and it does weird things to screen readers), and all lowercase makes the writer seem lazy or incompetent. The same goes for code that forces the first letter of every sentence to be uppercase, or (perhaps the worst of all) code that forces the first letter of every word into uppercase. Aesthetics be damned, don't do this. Even for headers. Period. The only exception to this rule is the small-caps option, and this should be used very sparingly. As in headers and accents only sparingly. Also, increase your font size by at least 0.2rem if you're going to use it as some fonts do wonky things. Text Alignment Font alignment is, in short, which side of the screen your font pushes against. There's left (the standard for websites), center, and right aligned text. Generally speaking, leave this one alone because we expect our lines to start neatly pushed up against the left side of the page/box. Like messing with line height and word/letter spacing, this can seriously affect the ability to visually track the text your user is reading. In the case of headers, keep it left or center aligned, as right aligned headers with left aligned text can confuse some people. The exception to this is if you have a border under/box around your headers that spans the whole width of the page/box its being used in, and even then use it sparingly. Justify and Word Breaks Justify and word break, while technically two different things, tend to be used hand-in-hand, and pose an absolute nightmare for accessibility (and are what inspired me to write this guide). Justify is the black sheep of text alignment, setting the text to align against both the left and right sides of the screen, and word break forces words that don't fit at the end of a line to hyphenate and continue on the next line. Setting alignment to justify has a nasty habit of creating rivers in your text, as it messes with letter and word spacing in a big way. Word break may seem a little more innocent on the surface, but it forces words to break in weird places instead of between syllables as is grammatically correct, and can thus cause confusion. Justified text and word breaks are standard in print media because there are people who's sole job is to make sure words break properly and that rivers don't show up in the text. This is simply impossible online, so avoid both of these at all costs. Even for headers. Some Final Thoughts Before I let you run amok with your new font knowledge, I've got a few more quick things that don't really require more than a full section of their own. Instead, I'm just going to throw them into bullet points. Always distinguish your bold, italics, and links from the main body text with a different colour or font face, not a different size. Never put text directly on top of an image/texture. This makes it near impossible to read most text, even if you use an outline. Unless you need to change the font styling on a specific element (such as bold text or headers), let the font styles you set for the body dictate things. This helps to ensure cohesive fonts across the site, and prevents mistakes. Only load the fonts you need. This is more for loading times, but it also helps reduce mistakes because you have a list of the fonts available right there in your CSS/HTML. If your font doesn't quite look right for any reason, find a new one instead of trying to force it with CSS. If you have good vision, find a friend or relative that needs glasses, and let them look over your site both with and without their glasses. This can sniff out issues that you might've missed. Now, go forth and design readable sites!

So with IPS the default avatar is small to say the least but it also must be square, which doesn't leave room for that awesome profile style that many a roleplayer loves. It is still possible but it takes a little extra work. Please note, that by doing this you must manually add each of your Profile field items to your authorPane otherwise this image will show twice. First off, you need to create a Profile Field in Members > Member Settings > Profile For me I just named it "Big Avatar" and used the following settings: The group does matter so if you intend to separate it out I recommend to do it now. But I chose not to show it on the profile, no real point to do that, but to show it in posts with the following code. This code will grab the file and add all necessary upload options to it. <img src='{file="$content" extension="members"}' /> Next we need to edit your Post template. To do that go to Themes > Themes > Click on the < / > icon next to your theme. I certainly recommend this be a test theme to start. In this first list you'll need to find postContainer. It is forums > front > topics > postContainer Here you need to find this: {template="customFieldsDisplay" group="global" app="core" params="$comment->author()"} Remove it. This removes the duplicate field bit. Next you need to find this: {template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"} And replace with this. But there will be something you will have to replace with your own variables and I'll show you how after this section: {{if $comment->author()->contentProfileFields()[core_pfieldgroups_2][core_pfield_2] != ''}} {$comment->author()->contentProfileFields()[core_pfieldgroups_2][core_pfield_2]|raw} {{else}} {template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"} {{endif}} This is the bit you need to focus on: [core_pfieldgroups_2][core_pfield_2] This first part [core_pfieldgroups_2] is the profile field group or category. The latter part [core_pfield_2] is the profile field itself. So the easiest way to find this is to go to your Members > Member Settings > Profile and look at the URL when trying to edit these: If that doesn't work go to the URL and copy and paste it into an editor or use your handy dandy inspect tool for each. Once you've done that I recommend one last bit, since not all users know how to resize images. It's always best to add a little bit of preventive CSS to your custom.css: .cAuthorPane_photo img { max-width: 250px; max-height: 400px; } This will guarantee that the avatar isn't over the size of 250px width and 400px height. There is plenty more to expanding the author pane but this will at least give you a little direction and possible help you create an awesome custom mini profile for your OOC accounts.

One of the things I find useful as both a staffer and a member is having a list of all my subscribed topics displayed on every page. This means I get an update on every thread whenever I log in and it means that I don’t need to manually keep a list updated. In jcink, we can do this with load(). This is exactly as it implies, it lets you load information from another webpage. To mitigate server load (and prevent your site from getting in trouble for resource usage), we bind load to a button. This means that your user needs to click on the button to see their subbed threads. Since this button only needs to be used by members, I hide it from guests to prevent curious visitors from making pointless requests of the server. I presume you know how to hide something based on usergroup, so I’ll focus on the code for the Auto Thread Tracker. Put the following HTML where you want it. <a href="#threads" id="button-tracker">Thread Tracker</a> <div id="threads"> <div id="thread-container"> </div> </div> Put the following script just before the closing </body> in your board wrapper. <script> $(document).ready(function(){ $("#button-tracker").click(function(){ // first we prevent the page jump that happens when you have a hashtag in your link event.preventDefault(); // now we load the good stuff $("#thread-container").load("https://kit89.jcink.net/index.php?act=UserCP&CODE=26 .tableborder > table > tbody > tr:not(:first-of-type)"); }); }); </script> Use CSS to hide the bits that you don’t want! For example: div#thread-container tr:first-child, div#thread-container tr:last-child, div#thread-container tr td:first-child, div#thread-container tr td:nth-child(3), div#thread-container tr td:nth-child(4), div#thread-container tr td:nth-child(6) { display: none } Will produce: This is how it looks on my site! I hope that this is for useful for someone! I find it very helpful for staying on top of my threads.

In this wee guide, I'm going to show you how to do a side by side forum layout with MYBB and Jcink. This is the only customization that this code does. Mybb Preview (select Grid Forum from the theme selector down the bottom). Jcink Preview. What we're basically going to do is this: <div class="forum-flex"> Category Header and other goodies <div class="forum no1"> Forum Header Other goodies </div> <div class="forum no2"> Forum Header Other goodies </div> <div class="forum no3"> Forum Header Other goodies </div> </div> And with the CSS that is at the bottom of this post, we will get something like this: The HTML for MyBB forumbit_depth1_cat <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder"> <thead> <tr> <td class="thead{$expthead}" colspan="5"> <div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div> <div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div> </td> </tr> </thead> <tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e"> <tr> <td> <div class="forum-flex"> {$sub_forums} </div> </td> </tr> </tbody> </table> <br /> forumbit_depth2_forum <div class="forum no{$forum['fid']}"> <table style="width: 100%; height: 100%;"> <tr> <td class="{$bgcolor}" align="center" width="1"> <span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span> </td> <td class="{$bgcolor}"> <strong> <a href="{$forum_url}">{$forum['name']}</a> </strong>{$forum_viewers_text} <div class="smalltext"> {$forum['description']}{$modlist}{$subforums} </div> </td> <td class="{$bgcolor}" align="center" style="white-space: nowrap"> {$threads}{$unapproved['unapproved_threads']}<br> Threads </td> <td class="{$bgcolor}" align="center" style="white-space: nowrap"> {$posts}{$unapproved['unapproved_posts']} <br> Posts </td> <td class="{$bgcolor}" align="right" style="white-space: nowrap"> {$lastpost} </td> </tr> </table> </div> The only important part for this code is the flex is the div, you can change whatever you like within the divs. So really, all you need is this: <div class="forum no{$forum['fid']}"> <!-- your forum coding here --> </div> forumdisplay_subforums <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder"> <tr> <td class="thead" colspan="5" align="center"><strong>{$lang->sub_forums_in}</strong></td> </tr> <tr> <td> <div class="forum-flex">{$forums}</div> </td> </tr> </table> <br /> HTML For Jcink Category Headers <div class="tableborder category" id="cat-<!-- |cat_id| -->"> <div class='maintitle<!-- |collapsed_class| -->' align='left'> <span style='float:right;'><a href='#' onclick='catcollapse("<!-- |cat_id| -->");return false;' id='main_<!-- |cat_id| -->'><!-- |collapse_img| --></a>&nbsp;&nbsp;</span> <{CAT_IMG}><a href="index.php?c=<!-- |cat_id| -->"><!-- |cat_name| --></a></div> <div id='cat_<!-- |cat_id| -->' style="<!-- |collapsed_style| -->"> <table width="100%" border="0" cellspacing="1" cellpadding="4"> <tr> <td> <div class="forum-flex"> <% FORUM_ROWS %> </div> </td> </tr> </table> </div> </div> <br class='cat-lb' /> Forum Row <div class="forum no<!-- |forum_id| -->"> <table style="width:100%;height:100%"> <tr class='forum-row'> <td class="row4" align="center"> <!-- |img_new_post| --> </td> <td class="row4"> <b><a class="tooltip" tooltip="<!-- |description_clean| -->" href="?showforum=<!-- |forum_id| -->" alt="<!-- |name| -->"><!-- |name_text| --></a></b> <br /> <span class='desc'><span class='forum-desc'><!-- |description| --></span> <!-- |subforums| --> <br /> <span class='forum-led-by'><!-- |moderators| --></span> </span> </td> <td class="row2" align="center"> <!-- |topics| --> </td> <td class="row2" align="center"> <!-- |replies| --> </td> <td class="row2" nowrap="nowrap"> <!-- |last_post| --><br /> In: <!-- |last_unread| --><!-- |last_topic| --><br /> By: <!-- |last_poster| --> </td> </tr> </table> </div> The only important part of the above code is the div class forum. You can change whatever you like within that. So all you really need is this: <div class="forum no{$forum['fid']}"> <!-- your forum coding here --> </div> CSS for both Jcink and MyBB .forum-flex { display: flex; flex-wrap: wrap; } .forum-flex .forum { flex-basis: 48%; /* not working? Try and decrease this number */ margin: 1%; flex-grow: 2; } So what's going on here? Display flex tells the coding that the children of the forum-flex are to behave flexibly. Flex-wrap tells the children of forum-flex to wrap onto a new line if need be. Flex basis is the width of the forum, if possible. I put 48% to account for the 1% margin on either side. Flex-grow tells the forum to grow to fill the entire available space. If you wanted to fit more forums on a line, just change the flex-basis! Also, so that the forums look neatly uniform, I recommend putting a height on .forum. Anyway, that's it! I hope that helps, if you need any assistance, please feel free to yell.

There is this common trend among roleplay admins, we all have unrealistic expectations for what we consider a 'successful' site. When we don't meet these unrealistic expectations we feel terrible, we think that we are failing, we feel that maybe we should just give up. This is bullshit!!! Things that we think should happen to determine that site is successful and the reasons they are BS. The moment I open a site I should have 10 members and I should just get more and more from there. Only about 25% of roleplay sites get more than 10 active members (at one time), ever, throughout their entire lifespan. It's even less as the numbers go up. Additionally, member count doesn't make a site, members do. I advertise everywhere and none of my guests join my site. It's a pretty well known fact that statistics are skewed when it comes to guests online. Spiders/bots count as guests and are most likely your biggest fans. They love when you update content so they will visit regularly. Everyone hates me. If you believe this then you shouldn't be an administrator. This isn't meant to put you down but seriously if you think people/the world is against you then you will always feel the negative and none of the positive parts of being an administrator. As an administrator you get the really shitty stuff. You have to deal with the bad things and the problem members and the problem problems, your job is already shit, if you stack that with a "nobody likes me, everybody hates me... I guess I'll go eat worms" mentality there will never be a moment that you enjoy roleplaying, enjoy your site, or enjoy being an admin. My site is failing, I should just shut it down. Yes, absolutely. If you aren't behind your site, no one else will be either. You need to be the advocate for your site and so you have to believe that it's going to be successful in order for it to be. No one else does this but you. We don't have 50 posts, hell 10 posts or even 5 per day. My members must hate me or be lazy or flaking. Not really. We all know that life comes first and even your most rapid fire posters will get burned out. Power through, continue on and keep going, that's all that you can do to get through any slump. Thinking the site is dying because of the slump? It's wrong. Every roleplay has slumps (even if they don't appear to from the outside looking in). The reality is: You choose if your site is successful! This may sound insane but it's one hundred percent accurate. Your site is as successful as you say it is. No matter the numbers, how quickly people join, how they post or really anything. If you open your site and you say "my site is successful" you've succeeded. Congratulations! You have successfully run an RP. When you start to go down a negative administrative route you actually start yourself on a very destructive path. Honestly, this path is the only path that I believe may lead to a truly unsuccessful site. Basically by being overly negative you start to run your site into the ground. The following things start to happen: You start to see fault in all of your members like they are out to get you. Your members joined your site because they like something about it. Becoming paranoid, or similar will actually push those members away. If they had a problem you would know already. You start to blame yourself for not living up to obscure, non-standardized, inaccurate, success standards. As stated above, success isn't deemed by numbers or people or characters or whatever, it's by your sheer attitude. When you blame yourself you start personifying this into places you shouldn't. Your staff, your cBox/chat room, your members, resource sites. When they see that you are losing faith they lose faith and they look for somewhere else to be. By losing faith in your site or yourself you tell your site members not to believe in too. You start to see fault in your site and it's features. Thinking that your features are the specific reason people are not joining, staying etc is a really bad way to go. Changing a lot, and often, will not only start to push away your existing member base but it will start to mix and match things that may not be overly attractive because you see things on "successful" sites that have this or that feature and that must be what makes them that way. Unless you know for sure the change you are making is a good thing it's always a good idea to at least seek advice from your existing members. While not everyone will agree you can get a more basic level of understanding from what they provide you as to what changes would help them enjoy your site more. If your existing members love your site, then new/potential members will likely love it too. All my members left to make another site, this fucking sucks. Hell yeah it does. It's often, not because of you, it's because they are fickle and they wanted something else but it seems like it's all your fault. I won't say, for sure, it's not you or your site setup but this often isn't anything that can't be corrected moving forward. Request a review and see about getting some feedback from any members that are willing to talk. You can go back and forth on features and options and shoulda dones and coulda dones but in the end? You are the reason your site is successful or not and it's all in how you see it. You see that you're successful. Then you are. I know this feels more like a "feel good" but doesn't give you any information sort of guide but that's sort of the point. The number one reason for site death is administrators losing interest in their own sites because they feel bad about it, they feel like they are doing something wrong and that's why "no one" joins. Unfortunately inspiration is a fickle thing and so is life which is what makes roleplayers so selective with the sites that they put their time into. You could run the most amazing site and still only get 3 members over the course of its history. Yeah its a bit frustrating if you had big plans for it but it shouldn't take away from your focus on the existing members, that will likely become great roleplay partners, and growing it from there. You never know, the special care that you put into those three members may get you your next ten.

*** Notice: This topic has a section for self hosted/piggy-back hosted MyBB forums that can access their core files through an FTP account for further capabilities of this function. Unfortunately the further capabilities consist of pulling thread prefixes/styled usernames to show as well and if you use Icyboards you cannot access core files to make these edits BUT you can still use Section One! [1.8] Recent/Latest Post Without A Plugin If you are anything like me you hate a long list of plugins in your ACP and you really hate uploading plugins because anything could go wrong (like accidentally placing files where they don't belong and finding them 3 weeks later thinking "how the ****?". So here is my replacement for this issue. There are two topics for this section. The first is the basic generic "pulling" and the second is a more advanced clean up for self hosted mybb forums (because unfortunately using the built in portals latest posts/threads function does not show thread prefixes (which a lot of people use for dictating whether or not a thread is Mature, Open, Private, etc.) and it also does not style a username with the color/styles attached to the usergroup) which we will fix in that section of this tutorial. Tutorial Created By: Isoldehn Tutorial Permissions: Please do not re-post this tutorial else where, instead link someone to this thread. Tutorial Needs: Overall, the ability to copy and paste. Section 1 - Knowledge Of MyBB Templates Section 2 - FTP Access & Knowledge On Editing Core Files Section One Using the script to pull the threads from the Portal! Please be sure your portal page is enabled and latest posts is enabled/settings configured. I'll let you figure this out on your own because you basically decide how many to show and from what forums/all forums. Step 1: - Open the ACP - Navigate to Templates & Styles --> Templates --> *current template set you are using* --> Portal Templates --> portal - Find: {$latestthreads} - Replace with: <div class="recent_posts">{$latestthreads}</div> Step 2: - Open up the template where ever you would like to add latest threads/posts to. Generally the option is on the index page, or a header, or even a sidebar. I cannot tell you where to place this since this is your choice. - Insert this: <script type="text/javascript"> jQuery(function(){ jQuery(".recent_posts").load("{$mybb->settings['bburl']}/portal.php .recent_posts"); }); </script> <div class="recent_posts"></div> * Credit for this coding is unnecessary as it is a simple script that can be developed by anyone. Step 3: (optional) - Style your latest posts/threads how you like. - Navigate back to Templates & Styles --> Templates --> *current template set you are using* --> Portal Templates --> portal_latestthreads - Create how you would like the div/table to be shown. You can delete everything inside, coding it to your own liking and then add the variable for the threads back in where you would like the thread/post list to show. Variable below for those that accidentally forget to save it. {$threadlist} - Navigate back to Templates & Styles --> Templates --> *current template set you are using* --> Portal Templates --> portal_latestthreads_thread - Again, create this how you would like it to be shown. Variables for things are below in case you forget to save. <a href="{$mybb->settings['bburl']}/{$thread['threadlink']}" title="{$thread['fullsubject']}">{$thread['subject']}</a> (Link to thread and name of thread) <a href="{$thread['forumlink']}">{$thread['forumname']}</a> (Link & name to the forum/board post was created in) <a href="{$thread['lastpostlink']}">Last Post</a> (Link to last post) {$lastposterlink} (Link to the last person that posted) {$lastpostdate} (Date the last post was made) {$thread['replies']} (Number of replies) {$thread['views']} (Number of views) Section Two Fixing the fact that thread prefixes do not show and usergroup styles do not work. Remember, if you continue on with section two we will be editing core files. BEFORE EVER EDITING CORE FILES YOU SHOULD ALWAYS CREATE A BACKUP OF YOUR SITE/FTP AREA (ALL FILES). Just in case anything goes wrong. This tutorial was also created for the MyBB 1.8 Series. If you use this on 1.6 things could very well go horribly wrong and support for 1.6 is no longer offered through MyBB Support. Step 1: - Open your FTP client or your file area where all core files of MyBB can be found. - Navigate to portal.php and open to edit. Step 2: - Find: $latestthreads = ''; // Latest forum discussions - This is the section/area we will be editing. Below those lines (336 & 337) will be all the edits that are being made. Step 3: - Find: $query = $db->query(" SELECT t.tid, t.fid, t.uid, t.lastpost, t.lastposteruid, t.lastposter, t.subject, t.replies, t.views, u.username - Replace with: $query = $db->query(" SELECT t.tid, t.fid, t.uid, t.lastpost, t.lastposteruid, t.lastposter, t.subject, t.replies, t.views, t.prefix, u.username, u.usergroup, u.displaygroup Step 4: - Find: LEFT JOIN ".TABLE_PREFIX."users u ON (u.uid=t.uid) - Replace with: LEFT JOIN ".TABLE_PREFIX."users u ON (u.uid=t.lastposteruid) Step 5: - Find: $lastposterlink = build_profile_link($lastposter, $thread['lastposteruid']); - Replace with: $lastposterlink = build_profile_link(format_name($thread['lastposter'], $thread['usergroup'], $thread['displaygroup']), $thread['lastposteruid']); Step 6: - Find: $thread['subject'] = htmlspecialchars_uni($thread['subject']); $thread['fullsubject'] = htmlspecialchars_uni($thread['fullsubject']); $thread['threadlink'] = get_thread_link($thread['tid']); $thread['lastpostlink'] = get_thread_link($thread['tid'], 0, "lastpost"); $thread['forumlink'] = get_forum_link($thread['fid']); $thread['forumname'] = $forum_cache[$thread['fid']]['name']; - Replace with: $prefix = build_prefixes($thread['prefix']); $prefix = $prefix['displaystyle']; $thread['subject'] = $prefix . " " . htmlspecialchars_uni($parser->parse_badwords($thread['subject'])); $thread['fullsubject'] = htmlspecialchars_uni($thread['fullsubject']); $thread['threadlink'] = get_thread_link($thread['tid']); $thread['lastpostlink'] = get_thread_link($thread['tid'], 0, "lastpost"); $thread['forumlink'] = get_forum_link($thread['fid']); $thread['forumname'] = $forum_cache[$thread['fid']]['name']; We are now finished!

The magic is done with ids. Every category and forum is assigned a number, you can find this number by hovering over their link and looking at the URL. The URL will look something like this: https://URL.com/forumdisplay.php?fid=1 The number on the end is the forum/category's ID! We will use the forum ID in the forum's class to help us differentiate between each forum. The two templates you'll want to edit are: forumbit_depth1_cat - for the category forumbit_depth2_forum - for the forum And the fantastic variable you want is {$forum['fid']} Essentially, what you want to do is give your category and forums a class in the aforementioned templates. These classes should be: category no{$forum['fid']} forum no{$forum['fid']} Which looks like this in CSS (with the number varying) .category.no1 { /* stuff here */ } .forum.no1 { /* stuff here */ } So what's with the space? The space allows us to do the bulk of your styling without needing to repeat yourself. For example. If you want all forums to have uppercase 14px text. You need only type in the following: .forum { font-size: 14px; text-transform: uppercase; } Now you want to target one particular forum to have a certain background with a certain text color? .forum.no1 { background: #0a0a0a; color: #efefef; } The final result being: .forum { font-size: 14px; text-transform: uppercase; } .forum.no1 { background: #0a0a0a; color: #efefef; } Forum number one will still have 14px uppercase text! Sure beats having to repeat yourself! I won't give you the HTML code for your category and forum, because it depends entirely upon your design. Just make sure you use the classes given and you're set to make your forums and categories diverse little individuals!

Hello and welcome to the Initiative! We are here to help you RP! From talking about roleplay to advertising your site to helping you find the right Faceclaim/Playby for your character, guides and more! We are here to help and we know that a new site with new people can get overwhelming so we're happy to show you around. To start off your journey we'd like to make sure that you're comfortable with our layout! We offer both a dark and light layout. You can choose which version you like by doing the following: Look in the top right (near your username is) Click the the image that looks like this The site will reload to the light theme! Click it again to switch back. The other thing you can change is the forum (general site) layout from the grid format to a traditional list view. To do this go to the main forum page. At the top next to the "Start a new topic" button there are three buttons: - this button will switch the layout to the traditional forum list. - this button is default and will provide you with the grid layout. - thus button is the fluid view. This means that all topics will be listed, rather than you having to visit each forum. You can filter what forum topics you see by clicking on the relevant forums on the right hand side. Click on the forums you want to see! Now lets complete the profile! You can also follow this awesome tutorial it explains how to complete your profile. All settled? Now lets get you integrated into the community! We recommend taking a few moments and introduce yourself. Not sure what to say? That's okay! We offer up some questions for you to fill out in case you are stumped! Now you will have welcomes from members around the site! Want to join our discord community? The easiest way for you to do this is through the Discord integration. To do this: Go to your account settings. Click on discord account. Click on link your discord account. Approve everything and you're good to go! Not comfortable with linking your account to your discord? No worries! Click on the discord icon in the footer. Go the name change channel and post there with a link to your account. Wait for a staff member to change your role, granting you the ability to post in the other channels. It's a lot easier on all if you use the discord integration tool. This link does not give us or anyone else any extra information about your account, any additional access to your discord account, or any additional control over your discord account. Nor are you revoking any control or privacy that you would normally have. Next up, do you want to give us some of your insight or maybe you'd rather just confess some awesome roleplay stuff with us? Head on over to the Chat & Discussion or the RPG Confessions and tell us! Are you here to add your site to the directory? Awesome! Once you have posted around the site and earned 10 content items (this includes gallery images, guides, playbys/faceclaims, posting in the wanted section and more!) you are able to go post in our intuitive directory. In here you will be able to choose how people can find your site with the ease of filters. The filters themselves help other members find sites that they may never have considered in the past as being part of what they were looking for! It helps give all sites a lot more exposure as we don't hide the sites behind categories! We hope this helped you and that you are feeling confident about being a part of this site! We love that you're here! If you're looking how to change other site specific items, like notifications, then check out our other "Initiative Guides" here. If you have other questions feel free to ask in the Ask Us forum or Staff Contact Center we'll be happy to help you!