Dynamic Memberlist 3.0

[Antechinus]

Hmm, ok here's a plan. Special offer this week. Pick two other light themes and three dark themes. I'll take the first five suggestions from anyone, and I'll give you CSS for all five. That should give enough examples so just about anyone can deal with it.

[Kindred]

Bloc' studio003 (dark)

[Antechinus]

CSS:

Code Select Expand

/* ----------------------------------- */
/* CSS for the Dynamic Memberlist mod. */
/* ----------------------------------- */
#mlist_wrapper {
overflow: auto;
}
#mlist_form .catbg a, #mlist_wrapper .catbg a {
margin: 0 6px;
display: inline-block;
white-space: nowrap;
}
#who_list .catbg a {
display: inline-block;
white-space: nowrap;
}
/* Memberlist search page. */
#mlist_form>.roundframe {
padding: 16px 8px 8px 8px;
text-align: center;
border: 1px solid #222;
}
#mlist_form>.roundframe>label {
padding-left: 8px;
}
#mlist_form #search {
width: 230px;
margin: -1px 6px 0 6px;
border: none;
background: none;
}
#mlist_form #submit {
margin: 0 6px;
}
#mlist_form .reset {
max-width: 32em;
margin: 12px auto;
}
#mlist_form .reset li {
width: 45%;
margin: 3px -0.15em;
display: inline-block;
text-align: initial;
}
#mlist_form label {
padding: 1px 8px 3px 3px;
}
#mlist_form .input_check {
opacity: 0.7;
margin-top: 0;
}
#mlist_form input_check:focus {
opacity: 1;
}
#mlist_form .reset li:nth-child(3) {
width: 90.1%;
}
/* The main memberlist page. */
/* Pages, letters and sorting links. */
#mlist_wrapper .pagelinks {
margin: 0 6px;
}
#mlist_letters {
padding: 4px;
text-align: right;
border-top: 1px solid #222;
}
#mlist_letters a:link, #mlist_letters a:visited {
width: 1.6em;
margin-top: 4px;
padding: 4px;
display: inline-block;
background: #181818;
text-align: center;
border: 1px solid #222;
}
#mlist_letters a:hover {
background:  #0f0f0f;
text-decoration: none;
border: 1px solid #1e1e1e;
}
#mlist_sort_links {
margin: 0;
padding: 4px;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
}
#mlist_sort_links>li {
margin: 2px 0;
display: inline-block;
}
#mlist_sort_links a:link, #mlist_sort_links a:visited {
padding: 4px 9px;
display: block;
background: #181818;
white-space: nowrap;
border: 1px solid #222;
}
#mlist_sort_links a:hover {
background: #0f0f0f;
text-decoration: none;
border: 1px solid #1e1e1e;
}
/* Start of the actual member blocks */
#blocksbox {
margin: 0;
padding: 6px 0;
}
.member_block {
margin: 4px 2px;
padding: 1px;
display: inline-block;
background: #222;
text-align: center;
}
.member_block .reset {
/* Sets the overall width of the blocks. */
width: 155px;
background: #181818;
padding-bottom: 6px;
}
.member_block li {
padding: 0 4px;
}
.member_block h4>a {
padding: 5px 0 3px 0;
display: block;
overflow: hidden;
font-size: 1.1em;
white-space: nowrap;
text-overflow: ellipsis;
}
.avatar_block {
/* Make this slightly taller than maximum avatar height. */
height: 125px;
}
.avatar_block .offline_avatar {
opacity: 0.5;
}
.avatar_block .avatar {
width: auto;
height: auto;
/* Adjust these to suit preferred maximum avatar size. */
max-width: 120px;
max-height: 120px;
}
.member_block .who_action {
height: 3em;
overflow: hidden;
text-overflow: ellipsis;
}
.member_block .im_icons {
min-height: 24px;
max-height: 24px;
}
.member_block .im_icons img {
vertical-align: middle;
}
/* ----------------------------------- */
/* End CSS for Dynamic Memberlist mod. */
/* ----------------------------------- */

Screenshot attached. Depending on how many icons you have displayed at the bottom of each block, you may want to increase the width slightly. I notice Bloc's icons are a bit larger than the defaults.

[Kindred]

looking good on Studio003!

[dougiefresh]

As indicated in the Quick Buddies mod thread, I've made that mod compatible with this mod.  However, in doing so, I noticed that you commented out the original memberlist template and added your own template function to replace it.  My suggestion would be to create a new template file and copy that template file to the themes, then modify the source file to load that template file.  You would need to alter the function name so that there isn't a conflict with the original template function, though....

Anyway, awesome mod!  Looking forward to using it on my own site!

[Antechinus]

I like just commenting it out. Saves loading extra files, and has the same effect. Commenting is bulletproof for install/uninstall 99% of the time.

(you're talking to a bloke who has specialised in hacking templates )

[dougiefresh]

And that's fine, too....  It's just a suggestion, after all 

[Jade Elizabeth]

Hmm, ok here's a plan. Special offer this week. Pick two other light themes and three dark themes. I'll take the first five suggestions from anyone, and I'll give you CSS for all five. That should give enough examples so just about anyone can deal with it.

Reseller!

Can you make it have borders like the boardindex has?

[Antechinus]

Isn't Reseller a paid theme? Any suggestions will have to be themes I can just grab for free and install on my local. Or, if you've bought the thing, give me live access to a test site running it. I don't want the theme myself, so aint paying for it.

ETA: Ok, so it's free. Took a look at it.

[Antechinus]

Ok, here ya go. Not many changes required. Good basic start. Tweak it to suit yourself.

Code Select Expand

/* CSS for the Dynamic Memberlist mod. */
/* ----------------------------------- */
#mlist_wrapper {
overflow: auto;
}
#mlist_form .catbg a, #mlist_wrapper .catbg a {
margin: 0 6px;
display: inline-block;
white-space: nowrap;
}
#who_list .catbg a {
display: inline-block;
white-space: nowrap;
}
/* Memberlist search page. */
#mlist_form>.roundframe {
padding: 8px;
text-align: center;
border: 1px solid #c8c8c8;
border-radius: 7px;
}
#mlist_form #search {
width: 230px;
margin: 9px 6px 0 6px;
}
#mlist_form #submit {
margin: 9px 6px 0 6px;
}
#mlist_form .reset {
max-width: 34em;
margin: 12px auto;
}
#mlist_form .reset li {
width: 45%;
margin: 3px -0.15em;
display: inline-block;
text-align: initial;
}
#mlist_form .reset li:nth-child(3) {
width: 90.15%;
}
/* The main memberlist page. */
/* Pages, letters and sorting links. */
#mlist_wrapper .pagesection {
margin: 0;
padding: 0;
}
#mlist_wrapper .pagelinks {
margin: 3px;
}
#mlist_letters {
padding: 4px;
text-align: right;
}
#mlist_letters a:link, #mlist_letters a:visited {
padding: 4px 9px;
display: inline-block;
background: #f5f5f5;
text-align: center;
border: 1px solid #e4e4e4;
}
#mlist_letters a:hover {
background: #2ecc71;
color: #fff;
text-decoration: none;
}
#mlist_sort_links {
margin: 0;
padding: 4px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
#mlist_sort_links>li {
margin: 2px 0;
display: inline-block;
}
#mlist_sort_links a:link, #mlist_sort_links a:visited {
padding: 4px 9px;
display: block;
background: #425d78;
color: #fff;
font-size: 0.929em;
white-space: nowrap;
border-radius: 4px;
}
#mlist_sort_links a:hover {
background: #2ecc71;
text-decoration: none;
}
/* Start of the actual member blocks */
#blocksbox {
margin: 0;
padding: 6px 0;
}
#mlist_wrapper #blocksbox {
border-bottom: 1px solid #ccc;
}
.member_block {
margin: 4px 2px;
padding: 7px;
display: inline-block;
background: #fff;
text-align: center;
border-radius: 3px;
}
.member_block .reset {
/* Sets the overall width of the blocks. */
width: 155px;
background: #f5f5f5;
border: 1px solid #e4e4e4;
}
.member_block li {
padding: 0 4px;
}
.member_block h4>a {
padding: 5px 0 1px 0;
display: block;
overflow: hidden;
font-size: 1.1em;
color: #34495e;
white-space: nowrap;
text-overflow: ellipsis;
}
.avatar_block {
/* Make this slightly taller than maximum avatar height. */
height: 125px;
}
.avatar_block .offline_avatar {
opacity: 0.7;
}
.avatar_block .avatar {
width: auto;
height: auto;
/* Adjust these to suit preferred maximum avatar size. */
max-width: 120px;
max-height: 120px;
}
.member_block .who_action {
height: 3em;
overflow: hidden;
text-overflow: ellipsis;
}
.member_block .im_icons {
min-height: 24px;
max-height: 24px;
}
.member_block .im_icons img {
vertical-align: middle;
}
/* ----------------------------------- */
/* End CSS for Dynamic Memberlist mod. */
/* ----------------------------------- */

Come to think of it, I should alter the mod's template to add a selected class for the sorting option buttons. That'd give some more possibilities for styling.

* Antechinus likes extra styling possibilities

[Jade Elizabeth]

Mine are wonky, even when I set them to the same min-height

[d3vcho]

Im testing it right now in my forum. It looks pretty well.

Nice work.

[Antechinus]

Mine are wonky, even when I set them to the same min-height

Yes, Jade. Which ones are wonky? The ones with two lines of text in the membergroup field.  I did mention your incredibly long member group names breaking to two lines of text were what was causing that the other night, when you first installed the mod on your test site. It had never occurred to me that anyone would use member group names that long. There are four things you can do about it.

1/ Use a sensible name for the group. I'm not sure you really need ones called "Oh great, I'm in the long ranks" and "Not sure why I'm still here..."
2/ Set all blocks to have a double height on that li. Using .member_block .membergroup {min-height: 3em;} or thereabouts should do it.
3/ Use white-space: nowrap; and text-overflow: ellipsis; to stop the text breaking to two lines.
4/ Use smaller text in that field, so it fits on one line. Using .member_block .membergroup {font-size: 0.8em;} or whatever, for example.

Oh yeah, you could also:

5/ Use overflow: auto; on that li, just to make it really ugly.
6/ Use custom coding to call membergroup badges of a standard size, instead of text.

Given that it's Sunday morning and I'm just into my first cup of coffee, I'm sure there are other options too.

The point is that it's not a bug in the mod, as such. It's something specific to your site, that you will have to think of a solution for if you wish to use group names that long.

[roza]

Does anyone use this mod along with the @mention member mod without any problem? I have installed both in my forum(smf2.0.11 with customized curve theme) but the mention mod does not work properly. I just thought that the issue might be because of a conflict between these two mods. Unfortunately, I do not remember which one has been installed first.

[Antechinus]

I never tested this with the mentions mod. It's probably not hard to get it working, since I imagine it would only take a simple insertion into the memberlist template. Ask the author of that mod about it.

[H0MiCiDE]

How can I customize, I can't seem to find the information or do it myself

[Macabreo]

I don't know how can I complete that successfully by myself.

[H0MiCiDE]

How can I customize, I can't seem to find the information or do it myself

can anyone help me with this? still trying to achieve custom results!

[Deaks]

more useful if you said how you want to customise it ....

[H0MiCiDE]

more useful if you said how you want to customise it ....

change the color of the member block