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.

Change Avatar Area From Circle To Square

4 posters

Go down

Solved Change Avatar Area From Circle To Square

Post by penny¢ 16/11/2021, 17:02

Technical Details


Forum version : #ModernBB
Position : Founder
Concerned browser(s) : Other
Who the problem concerns : All members
When the problem appeared : creation of group
Forum link : https://thezonegroups.forumotion.com/

Description of problem

How do I change the avatar area from circle to square? I have put a square avatar but it shows in a white circle. I know I have to alter the css, but please give detailed info on where to go and how to find the specific css I need. Please don't just put "find this in css..." as I will not know where to go to look for the css, LOL.

I did find an article in the trash here when I did a search about this but did not find anything it said to look for, therefore I could not change any of the coding like it said to do. Not sure if it was even the same version as mine.

I did find a coding area for avatars, but nothing like skouliki posted in that help thread: ".postprofile-avatar img {
border-radius: 120px; }"

I went to: Display_Templates_Profile_profile_avatar_gallery_ but did not find anything like above.
My settings for avatars are_Display_Avatar Management_Personal Avatars_Maximum Dimensions 200x200

Thanks!


Last edited by penny¢ on 27/11/2021, 17:37; edited 2 times in total
penny¢
penny¢
Forumember

Posts : 126
Reputation : 3
Language : English

https://thezonegroups.forumotion.com/

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by skouliki 16/11/2021, 18:16

hello

add this to your css for avatars in the posts

Code:

.postprofile-avatar img {
    border-radius: unset !important;
}

if you want square avatars on the profile page add also this code

Code:

.mod-login-avatar img {
    border-radius: unset !important;
}


if the radius is 100% is a circle if the radius is 0% or unset then is a square shape
your forum version modern has the avatars by default circular
skouliki
skouliki
Manager
Manager

Female Posts : 15064
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

TonnyKamper likes this post

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by Ape 16/11/2021, 18:42

To find your CSS files page please follow this.

ACP >> Display Tab >> Pictures and Colors >> Colors >> CSS Stylesheet Tab >>


Change Avatar Area From Circle To Square Left1212Change Avatar Area From Circle To Square Center11Change Avatar Area From Circle To Square Right112
Change Avatar Area From Circle To Square Ape_b110
Change Avatar Area From Circle To Square 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

Solved Re: Change Avatar Area From Circle To Square

Post by penny¢ 16/11/2021, 18:57

Ape, I found that spot but it is blank. Do I copy/paste the info from skouliki into the blank area?
I am currently going thru the pop-up list when I clicked "See your forum's basic CSS" looking for an avatar area.
penny¢
penny¢
Forumember

Posts : 126
Reputation : 3
Language : English

https://thezonegroups.forumotion.com/

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by penny¢ 16/11/2021, 19:01

This is what I find in the css list:

.postprofile-avatar,.postprofile-name,.postprofile-rank {
line-height: 1.125;
text-align: center;
}
.postprofile-avatar {
text-align: center;
margin-bottom: 6px;
}
.postprofile-avatar img {
border-radius: 120px;
border: 3px solid #FFF;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.3);
width: 120px;
height: 120px;

Is this where I change the avatar info? This opens in a new window, so do I change it there or change it then copy/paste entire page into the blank area?

I will get this! Smile
penny¢
penny¢
Forumember

Posts : 126
Reputation : 3
Language : English

https://thezonegroups.forumotion.com/

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by penny¢ 16/11/2021, 19:09

Further down, under "Advanced Profiles" is this:

#profile-advanced-details .avatar {
float: left;
margin-top: 6px;
}
.avatar {
background-color: #FFF;
border-radius: 50px;
border: 2px solid #FFF;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.3);
height: 50px;
overflow: hidden;
width: 50px;
}
.avatar img {
width: 46px;
}
.friend-block .avatar {
margin: 0 auto;
cursor: pointer;
}
penny¢
penny¢
Forumember

Posts : 126
Reputation : 3
Language : English

https://thezonegroups.forumotion.com/

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by Ape 16/11/2021, 19:09


In the CSS files you have already

Remove:
Code:
.postprofile-avatar img {
border-radius: 120px;
border: 3px solid #FFF;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.3);
width: 120px;
height: 120px;
}

Replace with:
Code:
.postprofile-avatar img, .mod-login-avatar img  {
    border-radius: unset !important;
}

then save Wink


Change Avatar Area From Circle To Square Left1212Change Avatar Area From Circle To Square Center11Change Avatar Area From Circle To Square Right112
Change Avatar Area From Circle To Square Ape_b110
Change Avatar Area From Circle To Square 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

Solved Re: Change Avatar Area From Circle To Square

Post by penny¢ 16/11/2021, 19:14

I change it in the pop-up page? There is no save on that.
penny¢
penny¢
Forumember

Posts : 126
Reputation : 3
Language : English

https://thezonegroups.forumotion.com/

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by penny¢ 16/11/2021, 19:17

Or copy paste to blank area, change info, then click "submit" there?

If so, do I copy/paste entire css info or just that one specific small area?

Sorry, just don't want to mess anything up.
penny¢
penny¢
Forumember

Posts : 126
Reputation : 3
Language : English

https://thezonegroups.forumotion.com/

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by Ape 16/11/2021, 19:22

Do you have a test account i can use on your forum ?


Change Avatar Area From Circle To Square Left1212Change Avatar Area From Circle To Square Center11Change Avatar Area From Circle To Square Right112
Change Avatar Area From Circle To Square Ape_b110
Change Avatar Area From Circle To Square 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

Solved Re: Change Avatar Area From Circle To Square

Post by penny¢ 16/11/2021, 19:28

No but I will make one if you tell me how
penny¢
penny¢
Forumember

Posts : 126
Reputation : 3
Language : English

https://thezonegroups.forumotion.com/

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by Ape 16/11/2021, 19:30

ok do you know how to take a screen shot ?

If yes go to your CSS file page and take a screen shot of it for me Wink


Change Avatar Area From Circle To Square Left1212Change Avatar Area From Circle To Square Center11Change Avatar Area From Circle To Square Right112
Change Avatar Area From Circle To Square Ape_b110
Change Avatar Area From Circle To Square 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

Solved Re: Change Avatar Area From Circle To Square

Post by penny¢ 16/11/2021, 19:33

This one?

Change Avatar Area From Circle To Square Image8
penny¢
penny¢
Forumember

Posts : 126
Reputation : 3
Language : English

https://thezonegroups.forumotion.com/

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by penny¢ 16/11/2021, 19:46

I can send you my sign in info if it will help.
penny¢
penny¢
Forumember

Posts : 126
Reputation : 3
Language : English

https://thezonegroups.forumotion.com/

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by skouliki 16/11/2021, 22:21

Please don't double post.  Please use the edit button, instead

go there to the CSS sheet and copy/paste my codes then click submit

scroll down and set this option to no

Force the basic CSS:No
skouliki
skouliki
Manager
Manager

Female Posts : 15064
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

TonnyKamper likes this post

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by SarkZKalie 17/11/2021, 15:23

@penny¢ just turn off Optimize CSS then add this to it
Code:
.postprofile-avatar img, .mod-login-avatar img  {
    border-radius: 0;
}


Change Avatar Area From Circle To Square Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1407
Reputation : 218
Language : English

https://rotavn.forumotion.com/

TonnyKamper likes this post

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by penny¢ 17/11/2021, 16:08

Thank you all for the help. It worked and we now have a square avatar area. Now to get that White frame off and we'll be good to go. Don't think that will look good on png avis.

Thanks again for all the patience and help!
penny¢
penny¢
Forumember

Posts : 126
Reputation : 3
Language : English

https://thezonegroups.forumotion.com/

skouliki likes this post

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by skouliki 17/11/2021, 16:23

go again to your css and copy paste this code and click submit

Code:

.postprofile-avatar img {
    border: unset !important;
}

skouliki
skouliki
Manager
Manager

Female Posts : 15064
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

TonnyKamper likes this post

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by penny¢ 27/11/2021, 17:36

My apologies @skouliki I did not come back and check this thread again because I had marked it solved. I just found your reply while searching for another topic. I did c/p that code as you said and it worked. No more White frame. Thank you so much for your help and I will mark this as solved again.
penny¢
penny¢
Forumember

Posts : 126
Reputation : 3
Language : English

https://thezonegroups.forumotion.com/

Back to top Go down

Solved Re: Change Avatar Area From Circle To Square

Post by skouliki 27/11/2021, 18:56

you are welcome

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

Female Posts : 15064
Reputation : 1690
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

Back to top Go down

Back to top

- Similar topics

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