The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Round avatar on log in widget

+2
Bigtuber
Veraa
6 posters

Go down

In progress Round avatar on log in widget

Post by Veraa September 30th 2017, 17:24

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.
Round avatar on log in widget 396e7f1e-8e16-47b9-b282-cf2ea42fa5cd

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!
Veraa
Veraa
New Member

Female Posts : 4
Reputation : 1
Language : English/Dutch

http://peculiarchildren.actieforum.com

Back to top Go down

In progress Re: Round avatar on log in widget

Post by Bigtuber October 1st 2017, 08:48

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? Smile
Bigtuber
Bigtuber
Forumember

Male Posts : 450
Reputation : 19
Language : German, English
Location : Germany

https://hilfe.forumieren.com/

Back to top Go down

In progress Re: Round avatar on log in widget

Post by Veraa October 1st 2017, 11:56

@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?
Veraa
Veraa
New Member

Female Posts : 4
Reputation : 1
Language : English/Dutch

http://peculiarchildren.actieforum.com

Back to top Go down

In progress Re: Round avatar on log in widget

Post by Ape October 1st 2017, 15:33

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


Round avatar on log in widget Left1212Round avatar on log in widget Center11Round avatar on log in widget Right112
Round avatar on log in widget Ape_b110
Round avatar on log in widget Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19084
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Round avatar on log in widget

Post by Veraa October 2nd 2017, 00:00

@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
Veraa
Veraa
New Member

Female Posts : 4
Reputation : 1
Language : English/Dutch

http://peculiarchildren.actieforum.com

Back to top Go down

In progress Re: Round avatar on log in widget

Post by Van-Helsing October 2nd 2017, 02:54

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. Wink

The result will looks like this:

Round avatar on log in widget AnuX5DwNSQeQJfC6WNu0fg
Van-Helsing
Van-Helsing
Hyperactive

Male Posts : 2431
Reputation : 116
Language : English, Greek

http://itexperts.forumgreek.com/

Back to top Go down

In progress Re: Round avatar on log in widget

Post by Veraa October 2nd 2017, 19:33

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:
Veraa
Veraa
New Member

Female Posts : 4
Reputation : 1
Language : English/Dutch

http://peculiarchildren.actieforum.com

Back to top Go down

In progress Re: Round avatar on log in widget

Post by SLGray October 2nd 2017, 20:26

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


Round avatar on log in widget Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: Round avatar on log in widget

Post by Ace 1 October 13th 2017, 20:36

@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%; }
Ace 1
Ace 1
Helper
Helper

Male Posts : 843
Reputation : 64
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum