Round avatar on log in widget

Hi there,

When I put the log in widget on my forum, it displays a normal sized avatar (200x280 in my case). I was wondering if you can customize that size. I'd really like it if it were a round avatar, and a little bit smaller, like on here.


If anyone could help me customize my log in widget to get the avatar like the screen shot above, that would be great!

Thanks in advance!

Hey @Veraa,

add the following code into your CSS:

Code:

.mod-login-avatar img {
    border: 3px solid #f00;
    border-radius: 100%;
    width: 120px;
    height: 120px;
    box-shadow: 0 0 10px #000;
}

That gives the image a red border (3px), rounds the avatar by 100%, sets the width and height of the avatar to 120x120px and last but not least there is a 10px black shadow around the avatar.
You can easily change the values and colors.

Does this help you?

@Bigtuber Thank you so much for your help!

However, it doesn't seem to work :C
I pasted it into my css but the widget still shows a full sized avatar.

Is there a specific placement for this code in the CSS? Or another setting that might help get this code to work?

Try and add it to the top of the css codes if that don't work move it to the bottom of the codes.

@Ape Thanks for the suggestion, unfortunately it still doesn't work.

@Bigtuber I tried the code on another forum, and there it worked perfectly fine. I'm guessing there's something on my forum that's blocking this code? Could that be possible? They are both phpBB so that can't be the problem

Hello @Veraa,
Please add the below code in your CSS stylesheet:

Code:

b span.gen img {
    border-radius: 100%;
    width: 60px;
    height: 60px;
}

if this code not work modify it like the code below:

Code:

b span.gen img {
    border-radius: 100%!important;
    width: 60px!important;
    height: 60px!important;
}

The !important will force your CSS stylesheet by giving priority to your code.

The result will looks like this:

Thanks for all of your help!

Sadly it doesn't work, but I'll just be creative and leave the widget out or replace it, no biggie.
Thanks again c:

Add the codes and then clear your browser's cache and history.

@Veraa, I registered on your forum but couldn't find a log in widget, so I made my own phpbb2 forum. I think this css should work:

Code:

#gallery_container img[alt="avatar"] { border-radius: 50%; }