#element: memberlist

[aesopcodes]

the big apple (wip)

This is a rough WIP personal project, so all the screenshots shared over the next few weeks/months are rough drafts and just shared to keep the motivation going as I dabble back into coding. The memberlist top section is uncoded, I'm designing things in fragments due to a busy schedule.

Context: adjustment for the memberlist/directory template I use (using jcink's display function to separate the memberlist into filterable/sortable categories: general, faces, members, quick search)

[jcinkskins]

MILE HIGH ($65, UNLIMITED)

mile high is a vibrant with a touch of greyscale and high-contrast jcink skin curated for the best of user experience.

please read my terms and conditions before purchasing! https://bit.ly/yorozuyacodes-purchasepolicy purchase link to ko-fi: https://bit.ly/milehigh-skin

the skin also comes with a matching set of 45+ templates! https://bit.ly/milehigh-templates

features. • custom 6 groups, needing only to change the names, easily editable • customised html templates • dark/light mode • responsive flex elements • "plugged-in" guidebook in the first category and provided templates for additional stylings + groups • a unique main profile tailored for admin group/ooc account/etc with only needing to fill the "freeform" and ooc information section • font and gradient variables • freebies profile codes for the freeform section • nicole codebox script and isotope memberlist/directory

after purchase. detailed guideline installation pdf full xml file html templates xml file

[eternity-codes]

Hi, I didn't see it but are you taking commissions for a full skin with templates?

Hi, I recently opened my tumblr dedicated with creating new skins for jcinka. Yes I do take commissions, however it depends on what the forum will be about, i.e. genre because that way it will be easier for me to adjust certain elements. As for guidebook, memberlist is a separate issue.

[skinsort]

This will be of interest to only a few of you I'm sure, but I'm so used to the kanban style of doing things in code that I made my own system for skinning in Notion. Nitty gritty below the cut

The not started column is more or less in order of how I want to approach things- I find starting at the edges and working your way in is the best way to be able to get responsive coding right. My general process is first I get the view I want at a lager screen size- I have some intuition about how to structure things there so I'm not tearing my hair out later, I wish I knew how to articulate it better. I generally code things to be flexible from the start, so usually I need to start compensating when I've deliberately coded things to take up smaller than 100% widths of the view. At some point, having all the real estate in the screen will be critical- and that's usually where my breakpoint is. Secondly, I squish the screen in until things start to break. 600px seems to be my sweet spot for breakpoints. That's where 99% of my stuff was made responsive for Itero, and that's where my hero broke this time around too. I really try to keep to a single breakpoint- this often means simplifying structures as soon as a view gets that narrow, even if nothing has broken. Having things change across the site at different widths is a great way to get a headache.

When I finish an overall view (like the index, or a topic with all it's posts, etc) I'll do a sweep of all the common elements like colors and swap them to vars. I try to keep these segmented sensibly so that once I make a different mode, it's just a matter of swapping a few of those and not having to go bit by bit through the site making sure every swap looks good. I'm one of the few, the insane, the blue light lovers who really prefers a light skin, but I know I'm in the minority so I basically view a dark mode as obligatory.

Also for the curious, this is what my board looked like for my first skin.

I was interested in different things here. I wanted to guesstimate how long I thought things would take me, so I assigned a size to them, right at the beginning before I'd ever messed around in jcink. I was right about most of it, overestimated a few things, didn't underestimate at all, I think. I also was on a crunch towards the end as I was seized by the rabid desire to actually open a site, so I sorted my 'tickets' by tiers of necessity and put a lot of the most interesting problems on hold. Do people need a memberlist, or fun scroll animations for a site to be functional? As much as I hate it, the answer is the memberlist. No one is going to touch my css because I'm not selling itero, so I never went through and cleaned up after myself. As much as I really want to make a rule for topic descriptions so I can scrape all the threads on my board and generate a full timeline of everything that happens, that's an unreasonable ask for members. Some day I may go back and do some of this (especially the scrolling stuff), but like. Itero works. If I do more it'll probably be to beautify it, not any real structural or even functional change. Also, on the Modernity kanban board, I've got a field for tracking time which I'm going to try to be diligent about. While I've been able to pull a good deal of stuff to make jcink behave from my first skin (no one cares about you, news banner), I'm starting from scratch on the structure of the rest of it, so it should be representative of how much time a skin actually takes, from nothing, which I think should be interesting. Anyway, that's way too much writing about how I'm organizing my work as I approach a new skin. I hope this was useful, or at the very least interesting, and if not, thanks for reading to the end anyway, lol.

[beehawcodes]

!!skin installation commissions open!!

i've officially opened my skin installation commissions. please read my TOS before commissioning me. if you would like to commission me, please reach out to me on discord at (BEEHAWVT) the basic skin installation package includes: ✿ stylesheet installation ✿ board wrapper installation ✿ html template installation ✿ profile field creation, insertion, and testing (for the mini profile, main profile, and memberlist) ✿ webpage installation and set up (including inputting guidebook information [rules, setting, lore content, etc.], member group aesthetics/descriptions) ✿ member group color stylings ✿ font/color corrections ✿ main admin posts (code bank, claims, etc.) add ons for additional cost: ✿ addition of wanted elements/minor skin tweaks ✿ converting claims to auto claims, adding auto tracker to profiles all payments will be made via paypal or ko-fi and the starting price for commissions is $30USD - the price does vary given the complexity of what is being asked, and if there are any additional services outside of the basic package requested above.

[thezachariassmithexperience]

UPDATE

I forgot to put the form elements in the memberlist, so it wasn't working.

Click here to download the version of the skin with a working member list.

Smith Basic - free base skin

Live preview / download

Smith Basic is a free base skin. All coding and scripts were either written by me personally or are available as free resources online.

You are welcome and encouraged to mess around and modify the skin any way you like. No attribution is required on the skin itself, however I do request that the credit in the stylesheet is retained.

To support my work and see more skins like this, buy me a ko-fi

Features

10 member group colours

click to highlight code box (max height 300px)

scroll to top button

enable emoticons & enable signature turned off by default

main profiles for admins & members

view all topics a member has posted in (as opposed to their posts or topics started by them)

snip after first name in member list (prevents line break on hyphenated names)

tables & popup boxes styled

pagination & mod boxes included in HTML templates

posts numbered from start of thread (this is also the link to the post)

[jaslenecodes]

FAVORITE CRIME — WORK IN PROGRESS ✨

here's a preview of my upcoming skin!! v excited for it as i've worked with so many new elements!! thinking of making it a multisale!! it's got a couple of work that needs to be done (memberlist...... bane of my Existence) but!! it's nearly finished and i'm excited for u to see it!!!

some features:

light/dark mode toggle

variable for group gradient colors

different size for forum rows

changing forum / topic rows per poster membergroup color

sticky mini profile on post row

[necromancercoding]

Will you share how you were able to get profile fields that isn't humor showing up in the memberlist? Your coding is so amazing!

Hi anon! The easy way to do this, if you only want one single field, is to use the Humor field and rename it to one that you'd actually want in the memberlist. I do that all the time if it's only, idk, the face claim that I want there.

But if you want more than one, you have to use javascript to get them from each of the profiles. It is a very similar code to the one I give here, with a few adjustments.

$(document).ready(function(){ $('a.mbuser').each(function() {   var mblink = $(this).attr('href');   var self = $(this); var parent = $(this).parents('.member');   $.get(mblink, function( data ) {     var mbfield = $(data).find('.psfield .psflabel span:contains("Name of field")').parents('.psfield');     $(parent).find('.mbfields').html(mbfield);   }); }); });

You'll have to have your profile template edited so that the profile fields are like:

<div class="psfield"><div class="psflabel">{contact_field.LABEL}</div><div class="psfcontent">{contact_field.CONTENT}</div></div>

And your memberlist must have at least the next elements:

<div class="member"><a href="{memberrow.U_VIEWPROFILE}" class="mbuser">{memberrow.USERNAME}</a><div class="mbfields"></div></div>

With that you'll be all set. Of course, you must edit the code to satisfy your needs, so I recommend having a basic understanding of jQuery grammar to try to fiddle with this code. Good luck!

Español bajo el cut!

¡Hola anon! La manera más fácil de hacer esto, si sólo quieres un campo, es usar el campo de Humor, cambiándole el nombre por uno que necesites en la memberlist. Yo hago esto a menudo, si por ejemplo, no sé, necesito el Face Claim en esa zona.

Pero si quieres más de uno, ahí tendrás que usar un javascript para sacarlos de cada uno de los perfiles. Es un código similar al que di aquí, con algunos ajustes.

$(document).ready(function(){ $('a.mbuser').each(function() { var mblink = $(this).attr('href'); var self = $(this); var parent = $(this).parents('.member'); $.get(mblink, function( data ) { var mbfield = $(data).find('.psfield .psflabel span:contains("Name of field")').parents('.psfield'); $(parent).find('.mbfields').html(mbfield); }); }); });

Tendrás que tener tu template del perfil editado para que la zona de los campos de perfiles sean como:

<div class="psfield"><div class="psflabel">{contact_field.LABEL}</div><div class="psfcontent">{contact_field.CONTENT}</div></div>

Y tu memberlist tiene que tener al menos estos elementos:

<div class="member"><a href="{memberrow.U_VIEWPROFILE}" class="mbuser">{memberrow.USERNAME}</a><div class="mbfields"></div></div>

Y con eso, ya lo tienes. Por supuesto, tendrás que editar el código para que se ajuste a lo que buscas, por lo que recomiendo un entendimiento básico de la gramática de jQuery si vas a intentar usar este código. ¡Buena suerte!

[sadricodes]

SadriCodes: Jcink Variable-Based Layouts

A look at how Jcink variables can be used to determine what information is shown/hidden in a layout. Useful when coding main profiles, mini profiles, and even elements of the memberlist/post row.

like my work? Consider buying me a coffee!

[aesopcodes]

DWR skin updates.

Memberlist, Directory (Multi-Section with Isotope for: face claims, searches, city, general), and ‘online list’ with images. 

I haven’t styled any of it fully but I’ll probably later. I figured out how to style based on sections so I just have to figure out what I want. I included the ‘online list’ because it’s tied to a script i’ve been messing with to retrieve info/etc. I used it to retrieve simplify the actual template members have to fill out for the directory. 

I'm super proud of this because it took FOREVER to figure out how to use the different isotope features: combination, button, search, hash, AND function. I wanted to make it so that I can include a link to a user's character list that would lead to a pre-filtered page. This can be done now for other details, not just users (ie, plots, locations). On the plus side I learned a heap about javascript and jquery.

Plus JCINK'S 'Display' function is super useful if you want an organized but thorough memberdirectory.

[zhenwuma-blog]

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html style="height: 100%;">

<head> <meta charset="UTF-8"> <title>FMBA</title>

<!-- To ensure proper drawing and touchscreen scaling, The Bootstrap required to add a viewport metadata tag to <head>. --> <meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap core CSS file --> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css" />

<!-- JQuery file --> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.0.js"></script>

<!-- Bootstrap core JavaScript file --> <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>

<!--JQuery UI--> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/jquery-ui.min.css" /> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-ui.min.js"></script> <script> $(function() { $("#slider-range").slider({ range: true, min: 16, max: 50, values: [20, 30], slide: function(event, ui) { $("#age").val(" " + ui.values[0] + " years old - " + ui.values[1] + " years old"); } }); $("#age").val(" " + $("#slider-range").slider("values", 0) + " years old - " + $("#slider-range").slider("values", 1) + " years old"); }); </script>

<!--CSS--> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/option-area.css" /> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/content-area.css" /> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/general.css" />

</head>

<body style="height: 100%;"> <div class="container-fluid element-height"> <div class="row element-height"> <div class="col-md-3"> <!-- find by name --> <div class="search-area"> <h2 class="search-area-title"><b>SEARCH</b></h2> <div class="search-area-content"> <form class="form1" action="queryResult.action" method="post"> <input name="name" class="findByNameInput" type="text" placeholder="Search..."><button class="findByNameBtn" type="submit"></button> </form> </div> </div>

<!-- find by condition --> <div class="search-area"> <form action="queryResult.action" method="post"> <h2 class="search-area-title"><b>FILTER</b></h2> <h4 class="search-area-subtitle">AGE:<input type="text" name="age" id="age" style="border:0; color:#F42B43; font-weight:bold;" value="24-60"></h4> <div class="search-area-content"> <div id="slider-range"></div> </div> <h4 class="search-area-subtitle">GENDER:</h4> <div class="radio-toolbar-2"> <input class="radio-toolbar-2-input" type="radio" id="gender1" name="gender" value="male" checked> <label class="radio-toolbar-2-label" for="gender1">MALE</label>

<input class="radio-toolbar-2-input" type="radio" id="gender2" name="gender" value="female"> <label class="radio-toolbar-2-label" for="gender2">FEMALE</label> </div> <h4 class="search-area-subtitle">CLASS:</h4> <select class="select-1" name="memberClass"> <option value="" selected="selected">Please choose the class</option> <option value="class 1 of 2017">class 1 of 2017</option> <option value="class 2 of 2017">class 2 of 2017</option> <option value="class 3 of 2017">class 3 of 2017</option> <option value="class 4 of 2017">class 4 of 2017</option> <option value="class 1 of 2018">class 1 of 2018</option> <option value="class 2 of 2018">class 2 of 2018</option> <option value="class 3 of 2018">class 3 of 2018</option> <option value="class 4 of 2018">class 4 of 2018</option> <option value="class 1 of 2019">class 1 of 2019</option> <option value="class 2 of 2019">class 2 of 2019</option> <option value="class 3 of 2019">class 3 of 2019</option> </select> <h4 class="search-area-subtitle">HOBBY:</h4> <select class="select-1" name="hobby"> <option value="" selected="selected">Please choose the hobby</option> <option value="outdoorsports">Outdoor sports</option> <option value="music">Music</option> <option value="fitness">Fitness</option> <option value="painting">Painting</option> <option value="dancing">Dancing</option> <option value="games">Games</option> <option value="other">Other</option> </select> <h4 class="search-area-subtitle">CONSTELLATION:</h4> <select class="select-1" name="constellation"> <option value="" selected="selected">Please choose the constellation</option> <option value="aquarius">Aquarius</option> <option value="pisces">Pisces</option> <option value="aries">Aries</option> <option value="taurus">Taurus</option> <option value="gemini">Gemini</option> <option value="cancer">Cancer</option> <option value="leo">Leo</option> <option value="virgo">Virgo</option> <option value="libra">Libra</option> <option value="scorpio">Scorpio</option> <option value="sagittarius">Sagittarius</option> <option value="capricorn">Capricorn</option> </select> <button class="button-1" type="submit">Query</button> </form> <c:if test="${!empty loginAdmin }"> <p class="contactNumb"><a href="${pageContext.request.contextPath}/admin/adminMemberList.action?num=1">Enter the administrator system</a></p> </c:if> <p class="contactNumb">GET IN TOUCH: +86 13766652668</p> <c:if test="${!empty loginMember }"> <p class="contactNumb"><a href="${pageContext.request.contextPath}/member/logout.action">LOG OUT</a></p> </c:if> </div> </div> <div class="col-md-9 element-height right-content-area"> <div id="fmba_banner" class="carousel slide" data-ride="carousel" data-interval="2000"> <ol class="carousel-indicators"> <li data-target="#fmba_banner" data-slide-to="0" class="active"></li> <li data-target="#fmba_banner" data-slide-to="1"></li> </ol>   <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="${pageContext.request.contextPath}/img/banner/mp_banner_1.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="${pageContext.request.contextPath}/img/banner/mp_banner_2.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> </div>

</div> <div class="member-list-area"> <ul class="member-list-title"> <li class="member-list-title-memberPhoto">PHOTO</li> <li class="member-list-title-memberName">NAME</li> <li class="member-list-title-memberRegion dropdown"> <a href="#" class="dropdown-toggle dropdowntitleLI" data-toggle="dropdown"> REGION <b class="caret"></b> </a> <ul class="dropdown-menu"> <li class="dropdownContentLiRegion"><a href="${pageContext.request.contextPath}/admin/queryResult.action?address=Beijing">Beijing</a></li> <li class="dropdownContentLiRegion"><a href="${pageContext.request.contextPath}/admin/queryResult.action?address=Shanghai">Shanghai</a></li> <li class="dropdownContentLiRegion"><a href="${pageContext.request.contextPath}/admin/queryResult.action?address=Guangzhou">Guangzhou</a></li> <li class="dropdownContentLiRegion"><a href="${pageContext.request.contextPath}/admin/queryResult.action?address=Shenzhen">Shenzhen</a></li> <li class="dropdownContentLiRegion"><a href="${pageContext.request.contextPath}/admin/queryResult.action?address=Tianjin">Tianjin</a></li> <li class="dropdownContentLiRegion"><a href="${pageContext.request.contextPath}/admin/queryResult.action?address=Hangzhou">Hangzhou</a></li> <li class="dropdownContentLiRegion"><a href="${pageContext.request.contextPath}/admin/queryResult.action?address=Wuhan">Wuhan</a></li> <li class="dropdownContentLiRegion"><a href="${pageContext.request.contextPath}/admin/queryResult.action?address=Chengdu">Chengdu</a></li> <li class="dropdownContentLiRegion"><a href="${pageContext.request.contextPath}/admin/queryResult.action?address=Others">Others</a></li> </ul> </li> <li class="member-list-title-memberIndustry dropdown"> <a href="#" class="dropdown-toggle dropdowntitleLI" data-toggle="dropdown"> INDUSTRY <b class="caret"></b> </a> <ul class="dropdown-menu"> <li class="dropdownContentLiIndustry"><a href="${pageContext.request.contextPath}/admin/queryResult.action?industry=Education">Education</a></li> <li class="dropdownContentLiIndustry"><a href="${pageContext.request.contextPath}/admin/queryResult.action?industry=Financial">Financial</a></li> <li class="dropdownContentLiIndustry"><a href="${pageContext.request.contextPath}/admin/queryResult.action?industry=Internet">Internet</a></li> <li class="dropdownContentLiIndustry"><a href="${pageContext.request.contextPath}/admin/queryResult.action?industry=Ecommerce">Ecommerce</a></li> <li class="dropdownContentLiIndustry"><a href="${pageContext.request.contextPath}/admin/queryResult.action?industry=Advertising">Advertising</a></li> <li class="dropdownContentLiIndustry"><a href="${pageContext.request.contextPath}/admin/queryResult.action?industry=Media">Media</a></li> <li class="dropdownContentLiIndustry"><a href="${pageContext.request.contextPath}/admin/queryResult.action?industry=Trading">Trading</a></li> <li class="dropdownContentLiIndustry"><a href="${pageContext.request.contextPath}/admin/queryResult.action?industry=Telecommunications">Telecommunications</a></li> <li class="dropdownContentLiIndustry"><a href="${pageContext.request.contextPath}/admin/queryResult.action?industry=Transportation">Transportation</a></li> <li class="dropdownContentLiIndustry"><a href="${pageContext.request.contextPath}/admin/queryResult.action?industry=Logistics">Logistics</a></li> <li class="dropdownContentLiIndustry"><a href="${pageContext.request.contextPath}/admin/queryResult.action?industry=Medical">Medical</a></li> <li class="dropdownContentLiIndustry"><a href="${pageContext.request.contextPath}/admin/queryResult.action?industry=Government">Government</a></li> <li class="dropdownContentLiIndustry"><a href="${pageContext.request.contextPath}/admin/queryResult.action?industry=Others">Others</a></li> </ul> </li> <li class="member-list-title-memberCompany">COMPANY</li> <div style="clear: both;"></div> </ul> <c:if test="${empty memberList }"> <c:forEach items="${page.list }" var="member" varStatus="status"> <ul class="member-list-content"> <li class="member-list-content-memberPhoto member-list-content-white"> <div class="img-container1"><img class="memberPhoto1" src="/memberPhoto/${member.photo}" /></div> </li> <li class="member-list-content-memberName member-list-content-white"> <a href="memberInfo.action?id=${member.id }">${member.name }</a> </li> <li class="member-list-content-memberRegion member-list-content-white">${member.address }</li> <li class="member-list-content-memberIndustry member-list-content-white">${member.industry }</li> <li class="member-list-content-memberCompany member-list-content-white">${member.company }</li> <div style="clear: both;"></div> </ul> </c:forEach> </c:if> <c:if test="${!empty memberList }"> <c:forEach items="${memberList }" var="member"> <ul class="member-list-content"> <li class="member-list-content-memberPhoto member-list-content-white"> <div class="img-container1"><img class="memberPhoto1" src="/memberPhoto/${member.photo}" /></div> </li> <li class="member-list-content-memberName member-list-content-white"> <a href="memberInfo.action?id=${member.id }">${member.name }</a> </li> <li class="member-list-content-memberRegion member-list-content-white">${member.address }</li> <li class="member-list-content-memberIndustry member-list-content-white">${member.industry }</li> <li class="member-list-content-memberCompany member-list-content-white">${member.company }</li> <div style="clear: both;"></div> </ul> </c:forEach> </c:if> </div> <c:if test="${empty memberList }"> <div class="member-pagenation"> <ul> <li><a href="${page.url }?num=${page.prePageNum}">prev</a></li> <c:forEach begin="${page.startPage}" end="${page.endPage}" var="pagenum"> <li><a href="${page.url}?num=${pagenum}">${pagenum}</a></li> </c:forEach> <li><a href="${page.url }?num=${page.nextPageNum}">next</a></li> </ul> </div> </c:if> </div> </div> </div> </body>

</html>

[aesopcodes]

This is an auto-filtering memberlist that I made (using MixItUp) in June for Island Daze. It’s a site I co-admined on . The filtering allowed you to type in names of characters or roleplayers. See above, I filtered for my own characters ‘aesop’. It also filtered through storyline / membergroup / neighborhood / etc all on the same page.

In this sampled version you have to alter the url on jcink to show more than the default # of members: ie, /index.php?act=Members&max_results=50. A code that filters like this would be better suited without that limitation, so a page for a directory is best. This was a precursor to the directory code that I currently use. You can find those in the jcinkskinathon skins I made.

Still it was pretty nifty. If I knew how to screen record, I’d show all the ace sliding effects. Anyway this is just for the portfolio.

[aesopcodes]

Skin #3 - Week 5

Codename: Memento

Genre: Dark Supernatural / Post-apocalypse / etc

Element: Memberlist & Directory

Feature wise, I’ve been fiddling with variables and classes and having way too much fun - hence the city / species / color graphics for the directory & memberlists.

Memento is finally up to the progress level of Germinate & Paradiso. The next element is the main profile... hopefully I can finish it in time for week 6 (ie, tomorrow). Herpaderp. Fun times.

[aesopcodes]

Skin #2 - Week 4

Codename: Germinate

Genre: Mythology + Creationism + Who-Knows

Element: Basic Memberlist / Advanced Directory [Week 4]

Notes RE: Advanced Directory:

You can link directly to a filter. This serves as a ‘Who’s Who’ list to see all the characters that belongs to one rper.

You can also filter by groups, age, and more importantly face claims. This serves as a face claim list.

[aesopcodes]

Skin #1 - Week 4.

Codename: Paradiso

Genre: Young Adult Dystopia

Element: Basic Member List / Advanced Member Directory [Week 4]

Notes RE: Advanced Directory:

You can link directly to a filter. This serves as a ‘Who’s Who’ list to see all the characters that belongs to one rper.

You can also filter by groups, age, and more importantly face claims. This serves as a face claim list.

[aesopcodes]

Memberslist.

I adapted a great filtering script from /newbreedmarketing/. I tinkered with it a bit for the sake of functionality regaridng the site and elements. There’s a lot of different ways for it to work. It will filter the profile-cards based on the lements you have listed. I used information that exists in drop down format, as well as the character and the roleplayer’s name. You can also type in keywords . One caveat is that when linking to the memberlist you have to replace your link with: /?act=Members&max_results=50

Filtering between the default 20 users is super lame and 50 is the max.

In any case there’s a super cool effect that happens when you make your selection. I don’t know how to record the screen, so if you’d like to see it in action you can check it out on ISLAND DAZE. I’m a co-admin there!

Getting this to function, styling it, and adjusting the js has made my year. It’s not fully coded but once again, this is the site whose construction process will never end.