Top X Friends Profile Block

[Amaury]

This is something I've been trying to adjust for a long time, and I just can't get it work.

I tried playing around with the profile_tiny_avatar variable yesterday, adjusting the width and height, and I just couldn't get it to work. It made it so either two friends appeared per row or one friend per row, making the top friends block very long.

How do I make it so usernames aren't cut off while keeping it to three per row?

http://i101.photobucket.com/albums/m62/AmauryGarcia/FriendsBlock-1.jpg

[WorldCraft]

Try adding this to additional.css .member_summary .friends_mini .friends_list li{
height: 100px;
}

[Amaury]

Try adding this to additional.css .member_summary .friends_mini .friends_list li{
height: 100px;
}

There's still a little cutoff.

Additionally, users that don't space out their username or just have lone-ish usernames also get cut off.

Look at clawthecyclops113 and Gott (horizontal):

http://i101.photobucket.com/albums/m62/AmauryGarcia/ProfileBlock-1.jpg

[WorldCraft]

You need to form one compromise here, or you'll need to space them all out far enough to where long names won't cover using css 'width', and that'll probably make the rows only have 2 names per row, depending on how wide you have the sidebar set to.

Increase the height I provided in the css to something larger to fix the vertical cutoff at least. If you still want to play around with the width just add a width: Xpx; after length:100px; one and see what looks decent.

[Amaury]

I added width to that and got it to work.

Height and width are at 105px. I reduced the amount of friends that show up from nine back to the default six so it wouldn't be so long. I think it looks (http://www.kh-mediaflare.net/member.php?18-Amaury) pretty good.

Also, if you could check the Postbit and Profile thread again, that'd be great.

[WorldCraft]

I can't view the friends block a guest. But good to see you found something that works.

[Amaury]

I can't view the friends block a guest. But good to see you found something that works.

I keep forgetting my privacy settings are all set to Registered Members, lol.

Temporarily set "Friends" to "Everyone" so you can see.

[WorldCraft]

Very nice, glad it worked out.

[Amaury]

I wanted to the same thing for the Members section of a group (http://www.kh-mediaflare.net/group.php?groupid=11). Would I add something similar to additional.css?

If you can't access the area in the hyperlink I provided, let me know.

[WorldCraft]

Can't access it

[Amaury]

Can't access it

https://vborg.vbsupport.ru/external/2013/01/25.png

[WorldCraft]

Hmm. Try something like this in additional.css


/*This will remove the cutoff*/
#membersblock ul.blockrow li
{
width: auto;
}

/*This will allow the thumbs to center*/
.memberlist a.avatar
{
float: none;
width: auto;
}

[Amaury]

Hmm. Try something like this in additional.css


/*This will remove the cutoff*/
#membersblock ul.blockrow li
{
width: auto;
}

/*This will allow the thumbs to center*/
.memberlist a.avatar
{
float: none;
width: auto;
}


Hm. Seems to have created some excess spacing within the border.

http://www.kh-mediaflare.net/group.php?groupid=11

Use these to see it:
User: Test Account
Password: account@test

[WorldCraft]

Figured it'd look like that, sorry.

Under '#membersblock ul.blockrow li' add text-align:center;

Under '.memberlist a.avatar' replace width:auto; with display:inline-block;

[Amaury]

Figured it'd look like that, sorry.

Under '#membersblock ul.blockrow li' add text-align:center;

Under '.memberlist a.avatar' replace width:auto; with display:inline-block;

Odd.

If you take a look, it didn't affect the Members block of the group, but it did affect the main group listings (Community -> Groups).

I did get a new idea, though, that'll probably work better. Is it possible to just have it list names and not avatars in a bullet list format?


Name 1
Name 2


Or maybe even remove the Members block since you can click on the number link under Members in the information area to see all members.

[WorldCraft]

You must have made a mistake somewhere, the display:inline-block; did not get accepted.

It should look like this:


/*This will remove the cutoff*/
#membersblock ul.blockrow li
{
width: auto;
text-align: center;
}

/*This will allow the thumbs to center*/
.memberlist a.avatar
{
float: none;
display: inline-block;
}

[Amaury]

You must have made a mistake somewhere, the display:inline-block; did not get accepted.

It should look like this:


/*This will remove the cutoff*/
#membersblock ul.blockrow li
{
width: auto;
text-align: center;
}

/*This will allow the thumbs to center*/
.memberlist a.avatar
{
float: none;
display: inline-block;
}


Yup, I did. However, check my last reply again. I edited it with better ideas.

Also, while we're here, I noticed that the body area for "Group Discussions" goes past the header and isn't aligned with it on the left, the Moderation Tools button in the group areas is fatter / thicker than when viewing a forum, and in a group discussion, the Moderator Tools choices text is too close to the selector circles.

In all these cases, I'm thinking padding adjustments?


Group Page (http://i101.photobucket.com/albums/m62/AmauryGarcia/Groups1_zps623c0f3f.png)
Group Discussion (http://i101.photobucket.com/albums/m62/AmauryGarcia/Groups2_zpsb995fb6e.png)

[WorldCraft]

For the Group Page, add this to additional.css

#group_discussion_inlinemod_form .blockhead
{
margin-left: -2px;
}


As for the button, I'm completely eyeballing this, but:

#group_discussion_inlinemod_form #inlinemod_formctrls .popupctrl
{
padding: 1px 0 1px 1px;
}



For the Moderator Tools being close to the radio buttons, I'm not too sure about, by default they do not look like that, there is probably a conflict in the CSS somewhere. If you provide me with temporary mod permissions I'll Firebug it and take a look for you. For security reasons, remove the user and pass you have provided me from your previous post.

[Amaury]

For the Group Page, add this to additional.css

#group_discussion_inlinemod_form .blockhead
{
margin-left: -2px;
}


As for the button, I'm completely eyeballing this, but:

#group_discussion_inlinemod_form #inlinemod_formctrls .popupctrl
{
padding: 1px 0 1px 1px;
}



For the Moderator Tools being close to the radio buttons, I'm not too sure about, by default they do not look like that, there is probably a conflict in the CSS somewhere. If you provide me with temporary mod permissions I'll Firebug it and take a look for you. For security reasons, remove the user and pass you have provided me from your previous post.

In the second screenshot, if you take a look at a text piece (e.g., Delete Message) look how close it is to the selector circle compared to elsewhere:

http://i101.photobucket.com/albums/m62/AmauryGarcia/StaffForum_zps4e99c55a.png

Also, if you could change your password to something strong first, then I can do it. I don't want people hijacking a staff account with the password I already provided you. Alternatively, you could register yourself, and I could promote you. Up to you. :)

[WorldCraft]

I changed the password. And yes, I understand how it should look, which makes me think there is something conflicting in the CSS.

[Amaury]

I changed the password. And yes, I understand how it should look, which makes me think there is something conflicting in the CSS.

Promoted.

Gave you permissions for styles, but let me know if you need any other permissions.

[WorldCraft]

Ok, I guess I was looking at the wrong page on my forum, they do appear a bit close when on that page. Anyway, I added this to your additional.css templates to space them.

#postlist #inlinemod_formctrls label input
{
margin-right: 3px;
}

Would you still like me to try what you wanted here? (https://vborg.vbsupport.ru/showpost.php?p=2398859&postcount=15)

[Amaury]

Ok, I guess I was looking at the wrong page on my forum, they do appear a bit close when on that page. Anyway, I added this to your additional.css templates to space them.

#postlist #inlinemod_formctrls label input
{
margin-right: 3px;
}

Would you still like me to try what you wanted here? (https://vborg.vbsupport.ru/showpost.php?p=2398859&postcount=15)

Sure.

Additionally, if you want to make a test style to make sure everything works right before applying it to the live parent style, feel free.

[WorldCraft]

How does this look? I can remove the bullets if you do not want them.

https://vborg.vbsupport.ru/external/2013/01/21.png

[Amaury]

How does this look? I can remove the bullets if you do not want them.

https://vborg.vbsupport.ru/external/2013/01/21.png

That's perfect. (I wanted the bullets.)

Now that I think about it, could the same be done for the Friends block on profiles?

EDIT: Odd. Bullets aren't showing for me.

[WorldCraft]

You should be all set now. I've put a few comments in /*Like this*/ To show that there are two blocks of CSS. One for the groups pages, one for the profile pages.

[Amaury]

You should be all set now. I've put a few comments in /*Like this*/ To show that there are two blocks of CSS. One for the groups pages, one for the profile pages.

Thanks.

Was all this done via additional.css? Also, I'm still not seeing bullets for the group one.

For profiles, though, I don't think it makes much sense, now that I think about it. Is it possible to remove the Friends block and just have the Friends tab?

I tried to remove it once before, but the code I took out did nothing.

[WorldCraft]

Yes this was all added to additional.css. The bullets should be there, they appear for me. Perhaps you should delete your browser's internet cache to see if they will appear.

You can remove the friends block....but it'll leave behind an extra divider bar as it isn't designed for that (you'd need to find the adequate template to remove it). But you'd add
div.friends_mini
{
display:none;
}


I like to be as helpful as I can, but I really recommend you try to learn how to do these type of edits. They really are not that difficult if you understand HTML/CSS and how to properly use your browser's web developer tools (Firebug for example if you use Firefox). It's much more beneficial for yourself and your community to learn basic web development skills. This site is great for tutorials and information: http://www.w3schools.com/html/default.asp

[Amaury]

Yes this was all added to additional.css. The bullets should be there, they appear for me. Perhaps you should delete your browser's internet cache to see if they will appear.

You can remove the friends block....but it'll leave behind an extra divider bar as it isn't designed for that (you'd need to find the adequate template to remove it). But you'd add
div.friends_mini
{
display:none;
}


I like to be as helpful as I can, but I really recommend you try to learn how to do these type of edits. They really are not that difficult if you understand HTML/CSS and how to properly use your browser's web developer tools (Firebug for example if you use Firefox). It's much more beneficial for yourself and your community to learn basic web development skills. This site is great for tutorials and information: http://www.w3schools.com/html/default.asp

Thank you. I've visited that site before via Lynne's signature. :)

And I do apologize. I know I seem really noob-ish. A lot of the stuff you saw in additional.css, though, were things I figured out.

[WorldCraft]

Hmm well the bullets do not appear on Google Chrome for some reason, maybe that is why you could not see them. I'll take a closer look at that and see if I can figure that out.

Edit: This should now be resolved.

[Amaury]

Hmm well the bullets do not appear on Google Chrome for some reason, maybe that is why you could not see them. I'll take a closer look at that and see if I can figure that out.

Yeah, Google Chrome doesn't seem to like some things. XD

For example, this (https://www.vbulletin.com/forum/showthread.php/415796-Dropdown-Menu-Items-Not-Indented-on-Google-Chrome).

And thanks.