Help with Change memberlist apperance [phpBB3]

Hi @Wizzard
Regarding this topic https://help.forumotion.com/t163640-change-memberlist-apperance-phpbb3#1150236

I Really like this i have asked my wife to install it on our forum and she has made some small change to make it fit in with out forum.

Just one thing i have noticed that you can only see 10 profiles it would look better if it would show 12 or more.
Is there away to add the number to 12 not 10 ?

Ape wrote:I Really like this i have asked my wife to install it on our forum and she has made some small change to make it fit in with out forum.

Just one thing i have noticed that you can only see 10 profiles it would look better if it would show 12 or more.
Is there away to add the number to 12 not 10 ?

On test forum (for me) it shows 15 members. Can you try removing mistake in your CSS with background, maybe that is causing a mistake:



Also, there is a chance that because you have extra stuff above it takes the height available for this content.



There has to be something, either in CSS or template itself (or any other) that limits the height of this.

hi @Ape and @Wizzard
The number of members in the members list is the same as the number of Topics per page


Administration Panel > General > Messages and emails
Configuration

https://i.servimg.com/u/f30/20/35/61/89/ocia_a39.png

@كونان2000

Thank you for fixing this. I thought about it first but wasn't sure and didn't test it. Hopefully this will work.

كونان2000 wrote:hi @Ape and @Wizzard
The number of members in the members list is the same as the number of Topics per page


Administration Panel > General > Messages and emails
Configuration

https://i.servimg.com/u/f30/20/35/61/89/ocia_a39.png

Hi @كونان2000 that is not the problem it's set to 15 already even if i change it to 12 it is the same.

I even removed the code and it still only shows 10

EDIT: I had to remove this code as it was messing up my mention as you type script.

@Ape
You are right. It doesn't change the result. Tell me, do you have something eddited in this template or some CSS applied? Can you try (as a test) to remove that top part and see if you get enough space to see more than 10? Just curious.

hi @Ape
I mean topics, not messages.

-------------------

Ape wrote:

كونان2000 wrote:hi @Ape and @Wizzard
The number of members in the members list is the same as the number of Topics per page


Administration Panel > General > Messages and emails
Configuration

https://i.servimg.com/u/f30/20/35/61/89/ocia_a39.png

Hi @كونان2000 that is not the problem it's set to 15 already even if i change it to 12 it is the same.

I even removed the code and it still only shows 10

EDIT: I had to remove this code as it was messing up my mention as you type script.

Can you tell me how your mention scripts works so that we can fix the issue?

I sent you a PM @Wizzard with the codes i use and where i got it from.

Ape wrote:I sent you a PM @Wizzard with the codes i use and where i got it from.

I can't reply to you because you disabled that option.

But, because the code I edited has nothing to do with your script (not pasting your script here), this is NEW HTML for template:

Code:

                <div class="member-list">
  <!-- BEGIN memberrow -->
  <div class="member-card">
    <div class="card-header avatar-mini">
      <a href="{memberrow.U_VIEWPROFILE}" class="avatarImg">{memberrow.AVATAR_IMG}
      {memberrow.USERNAME}</a> 
    </div>
    <div class="card-body">
      <p class="joined">Joined: {memberrow.JOINED}</p>
      <p class="last-visit">Last Visit: {memberrow.LASTVISIT}</p>
      <p class="posts">Posts: {memberrow.POSTS}</p>
    </div>
    <div class="card-footer">
      <a href="{memberrow.PM_LINK}" class="pm-link">{memberrow.PM_IMG}</a>
      <a href="{memberrow.WWW_LINK}" class="website-link">{memberrow.WWW_IMG}</a>
    </div>
  </div>
  <!-- END memberrow -->
</div> 

And this is CSS:

Code:

.member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
 
.member-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  background: #f9f9f9 url(https://i.servimg.com/u/f62/14/65/46/14/statu10.png); 
  border-radius: 10px;
  padding: 15px;
  width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}
 
.member-card:hover {
  transform: translateY(-5px);
}
 
.card-header {
  display: flex;
  justify-content: center;
      border-bottom: 1px solid #a0947e;
    margin-bottom: 10px;
}

.card-header a span strong {
  display:block;
  font-size:15px;
  text-align:center;
}
 
.card-header a img {
width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid #fff;
    outline: 1px solid #ccc;
    object-fit: cover;
}
 
 
.card-body {
  text-align: center;
  margin-top: 10px;
}
 
.card-body p {
    background: #fff;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #cccccc;
}
 
.card-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}
 
.card-footer a {
    margin-right: 2px;
}
 
.pm-link, .website-link {
  text-decoration: none;
  color: #007bff;
}
 
.pm-link:hover, .website-link:hover {
  text-decoration: underline;
}

Please make backup before you edit template. Script is not changed.

okay almost there now i have a small problem with some names not lined up right.

I have left it installed for you to see.

Ape wrote:okay almost there now i have a small problem with some names not lined up right.

I have left it installed for you to see.

I can see you fixed it now. I thought my CSS will make the text block and then text-align it to center. And now I see you did exactly that.


EDIT:
I see. They need to belong to some group so that there is a color around it. Other usernames belong to some groups and that's why they have "span strong" while these usernames are plain text. That's why.

Yes they are members who have not posted yes.

Ape wrote:Yes they are members who have not posted yes.

You can still put them in the members gruop if you set the required post to be 0. But I think it won't sync. I will check this a bit later if you don't want it done that way.

I don't really want them in a group if i can help it.

EDIT: it was okay on the old code

Ape wrote:I don't really want them in a group if i can help it.

EDIT: it was okay on the old code

Can you try in that template to edit span around

Code: {memberrow.USERNAME}

Code:

<span class="cardUsername">{memberrow.USERNAME}</span>

And then in CSS make it like this:

Code:

.card-header a span strong, .card-header .cardUsername  {
....
}

I hope this will work and test autosuggest systemj as well.

No that never worked

Ape wrote:No that never worked

Make it like this then:

Code:

span.cardUsername {
    text-align: center;
    display: block;
}

I got this:

Wizzard wrote:

Ape wrote:No that never worked

Make it like this then:

Code:

span.cardUsername {
    text-align: center;
    display: block;
}

I got this:

thats got it moved down but the text is small now on all of them.

Ape wrote:

Wizzard wrote:

Ape wrote:No that never worked

Make it like this then:

Code:

span.cardUsername {
    text-align: center;
    display: block;
}

I got this:

thats got it moved down but the text is small now on all of them.

Did you keep previous css for span strong? Or you removed it'

i removed it

Ape wrote:i removed it

You can edit all of it in that property as you did. That's fine

Thank you @Wizzard
That fixed it thank you.

Thank you @Wizzard all fixed.

Problem solved & topic archived. Please read our forum rules: ESF General Rules

Great work.