The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Round avatar on log in widget

View previous topic View next topic Go down

In progress Round avatar on log in widget

Post by Veraa on September 30th 2017, 4:24 pm

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!
avatar
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 on October 1st 2017, 7:48 am

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
avatar
Bigtuber
Forumember

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

http://kingsroadforum.forumieren.com/

Back to top Go down

In progress Re: Round avatar on log in widget

Post by Veraa on October 1st 2017, 10:56 am

@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?
avatar
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 on October 1st 2017, 2:33 pm

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



avatar
APE
Manager
Manager

Male Posts : 10827
Reputation : 1008
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

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

Back to top Go down

In progress Re: Round avatar on log in widget

Post by Veraa on October 1st 2017, 11:00 pm

@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
avatar
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 on October 2nd 2017, 1:54 am

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:

avatar
Van-Helsing
Hyperactive

Male Posts : 2324
Reputation : 92
Language : English, Greek

http://helpgr.forumgreek.com/

Back to top Go down

In progress Re: Round avatar on log in widget

Post by Veraa on October 2nd 2017, 6:33 pm

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:
avatar
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 on October 2nd 2017, 7:26 pm

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


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

avatar
SLGray
Administrator
Administrator

Male Posts : 40523
Reputation : 2733
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

In progress Re: Round avatar on log in widget

Post by Ace 1 on October 13th 2017, 7:36 pm

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

Male Posts : 823
Reputation : 62
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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