   | |
| Forum moderator: bigblog |
| uCoz Community » For Webmasters » Design Customization » Round Avatars (How to make round avatars appear in the tag board!) |
| Round Avatars |
A question I haven't been about to answer searhing on the forums, I just want to know the exact code for the automatic creation of 32x32 round avatars for the Tag Board. Anyone can help me with this, it will be much apprecheated!
Proud Ucoz Member Since 2013
Warning: Do not trust Zayaan Ibrahim with projects, he will scam you by overpricing! ♥ http://rawtrex.com/ ♥ |
Use border radius.
HTML: Code <img src="AVATAR_URL" class="CLASS_NAME" /> CSS: Code .CLASS_NAME{ border-radius:100%; } Edit: You can use inline if it's easier for you. Code <img src="AVATAR_URL" style="border-radius:100%;" /> Post edited by Eriko - Saturday, 2014-05-17, 4:58 PM
|
What abotu if you only want the avatar of members IN their profile only to be round... How you do that?
Proud Ucoz Member Since 2013
Warning: Do not trust Zayaan Ibrahim with projects, he will scam you by overpricing! ♥ http://rawtrex.com/ ♥ |
just add this to the tag that you want to make round.
style="border-radius:100%;" example. Code <img src="IMAGE_SOURCE" style="border-radius:100%; /> note: border-radius:100%; works best on blocks with the same width and height. i.e. 32px by 32px. having a different width and height would make it look like an egg. |
Quote Eriko (  )<img src="IMAGE_SOURCE" I can't find that in the USER profile appearance area... What I do see only is this: I see | <?if($_AVATAR$)?>$_AVATAR$<?else?> | but I don't see the specified | <img src="IMAGE_SOURCE" | in there though. 
Proud Ucoz Member Since 2013
Warning: Do not trust Zayaan Ibrahim with projects, he will scam you by overpricing! ♥ http://rawtrex.com/ ♥ Post edited by Elexy - Sunday, 2014-05-18, 12:08 PM
|
Elexy, this code will work. HTML:
Code <div class="for-ava-region"><?if($_AVATAR$)?>$_AVATAR$<?else?> <img title="$USERNAME$" style="width:120px; height:120px;border-radius:6px;-moz-border-radius:6px;" src="/Icons/NoAvatar.png"><?endif?></div> CSS: Code .for-ava-region img {border-radius:100%;} Hope this helps. 
Jack of all trades in development, design, strategy.
Working as a Support Engineer. Been here for 13 years and counting. |
Glad to see some help, but I have some problems with this are the following;
1. I only want the PROFILE avatars in the User's Profile area to be round. 2. Members with the "No Avatar" picture get the round avatars, but members who uploaded their own avatars don't. 3. I can not find this ".for-ava-region" anywhere in the CSS of the website. Sorry for contuning the bother with this Yami and Paradox. 
Proud Ucoz Member Since 2013
Warning: Do not trust Zayaan Ibrahim with projects, he will scam you by overpricing! ♥ http://rawtrex.com/ ♥ Post edited by Elexy - Sunday, 2014-05-18, 1:31 PM
|
Quote Elexy ( )1. I only want the PROFILE avatars in the User's Profile area to be round. Quote Elexy ( )3. I can not find this ".for-ava-region" anywhere in the CSS of the website. It's really no problem. Erm, as to your questions/comments - that HTML code I provided, you'll need to edit the HTML in the forum posts so that is looks like that. In short I've simply placed a div with the class for-ava-region around whatever image elements I'd like to have a round border. As for the CSS the class has never been defined before as it's not part of the standard CSS so you'll have to add it in. Hope this helps! 
Jack of all trades in development, design, strategy.
Working as a Support Engineer. Been here for 13 years and counting. |
Quote Paradox ( )It's really no problem. Erm, as to your questions/comments - that HTML code I provided, you'll need to edit the HTML in the forum posts so that is looks like that. In short I've simply placed a div with the class for-ava-region around whatever image elements I'd like to have a round border. As for the CSS the class has never been defined before as it's not part of the standard CSS so you'll have to add it in. Hope this helps! Thanks for taking the time to reply Paradox, one can always count on you. <3 Now one last question which I hope can be helped... This has to do with the Game Section though. When items in this section are added for review by a website staff members, I notice that the preview picture of it in the main section and category section does not show the picture but shows the space there empty as if something was there for reviewing. Members who are not part of the staff see a blank space which pretty much shows there is something there, just not visible to them. While a staff member can see the preview image taking that same blank space (as if it was active). So I wanted to know if there is a way to not show that blank space of inactive entries (that need to be verified before they are visible to the website members) and just have the active entries take it space instead (like it should be)? That is pretty much the last issue on my site. ^.^ Proud Ucoz Member Since 2013
Warning: Do not trust Zayaan Ibrahim with projects, he will scam you by overpricing! ♥ http://rawtrex.com/ ♥ |
Hi Sunny, hope you are doing well!
My website is: http://rawtrex.com/ And the problem I am talking about is this here:  The RED block in the image is originally an inactive entry. The members do not see the red block, just a blank space there (they see the background color in fact). However, even though it is inactive, staff members of the site can actually see the preview that goes there. Until it is activated, members only see a blank spot RIGHT where that red block is. I want to know how can I make it so that doesn't happens, and instead, members see all the active entries but not a blank space like that for the inactive entries. Attachments:
9256732.jpg
(416.5 Kb)
Proud Ucoz Member Since 2013
Warning: Do not trust Zayaan Ibrahim with projects, he will scam you by overpricing! ♥ http://rawtrex.com/ ♥ Post edited by Elexy - Tuesday, 2014-05-20, 3:42 PM
|
Quote Sunny ( )Elexy, are you using an informer to display games? What's its code ($MYINF_1$ etc.)? No dear, This particular section is the Game Section converted to a "Music" section. All I did was just change the wording in the template customization, nothing else. So what you are seeing there is the actual "Game" section area. There is no informers or anything, it's just the way that the Game section works with Ucoz. Notice the red block, that red block is an empty black space (shows the background only) because what goes there is an inactive entry, the image it should show next to "Call Me Maybe" is the following picture:  However, the entry with that picture is inactive so it should not show... It also shouldn't show an empty space like that either. Now, staff members of the site (with the ability to activate uploads that members post because they are up for moderation) can see that picture in that red block there. However, if you are a guest, member or any other account type that is not a staff member, that red space that should show the picture I have posted on this post is simply a space there with the background color of the template. Meaning, the space is taken up, but no one but the staff members can see what is taking that space up. I seriously need this changed to having every inactive entry NOT show like that... Until then, I can not give members the ability to upload their own things to the site. Attachments:
8044025.png
(30.8 Kb)
Proud Ucoz Member Since 2013
Warning: Do not trust Zayaan Ibrahim with projects, he will scam you by overpricing! ♥ http://rawtrex.com/ ♥ Post edited by Elexy - Saturday, 2014-05-24, 3:02 AM
|
Code <?if($NOT_ACTIVE$)?><div>REDSPACE</div><?endif?> I'm not sure if there's a $NOT_ACTIVE$ tag for the games section, though. If there is, wrap that redspace code with the code (<?if($NOT_ACTIVE$)?>and <?endif?>) I gave. Post edited by Eriko - Saturday, 2014-05-24, 11:28 AM
|
Quote Eriko ( )I'm not sure if there's a $NOT_ACTIVE$ tag for the games section, though. If there is, wrap that redspace code with the code (<?if($NOT_ACTIVE$)?>and <?endif?>) I gave. It doesn't show a red space, I am just using that to show what I mean... This is how it looks when you are not a staff member account on the site:  There is just an empty space there, the empty space between "Meet The Creeper" and "A Man Loves A Woman" is an inactive entry. Again, as you can see, it looks like an empty space when it is inactive. What I want is that the entry next to it takes its space (like moves up) instead of showing an empty spot like that for being an inactive entry. Attachments:
2370202.jpg
(156.8 Kb)
Proud Ucoz Member Since 2013
Warning: Do not trust Zayaan Ibrahim with projects, he will scam you by overpricing! ♥ http://rawtrex.com/ ♥ Post edited by Elexy - Saturday, 2014-05-24, 1:29 PM
|
| |||