This topic has 37 replies, 5 voices, and was last updated 10 years by 
-
-
Hi, there seems to be a problem with the 50×50 thumbnails on my site. They are not round and smooth like the ones on your site, as viewed side by side in my same browser!! I am attaching a screen shot to show you the problem. The 50×50 thumbnails on my site have a flat bottom and flat right side and do not fit snugly into the nice round frame.
Mozila Firefox V. 28.
Please help. Thanks!!
Hi, I would sure appreciate a response. I’m thinking of buying another theme because these medium size thumbnails look so awful. Please see image above. I don’t know which size these are. Maybe they aren’t the 50×50? They are the medium size that shows up in the Sitewide Activity and login on the right. Thanks!
Ok, here is the problem, these should be 80×80 avatars. That is why they look so awful. The image class for these problem images is the 50×50, but it should be 80×80.
The only page where I have spotted the PROPERLY FORMATTED IMAGE is in a group forum post within BuddyPress.
All of the other images of this size are designated as 50×50 and are too small for the circle, so they show a flat right side and flat bottom, as shown in the photo attached above.
I hope someone can please send me some code to resolve this issue. I am in a rush. Thank you!
Can you post a link to your site. I’m not having this issue so I’m wondering if your site it loading some other css file that’s screwing it up for you.
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThis support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
OMG, insanity, I just opened every .css file on the server app.css, buddypress.css, and I cannot find any reference to change this.
PLEASE FOR THE LOVE OF GOD WILL SOMEONE TELL ME HOW TO CHANGE EVERY REFERENCE TO:
img class=”avatar-50 photo” width=”50″ height=”50″
TO:
img class=”avatar avatar-80 photo” width=”80″ height=”80″
My site is under development, so I cannot post a link. But, this is an image of what is happening: http://snag.gy/zQekd.jpg
I have used Firebug to find out what is causing the issue, as described above.
I hope someone can help. I am under deadline and really upset. My client is going to be livid!!!
Hard to help without seeing all the css that’s being loaded. (keep in mind I dont work for the devs of the theme. I’m just trying to help.)
BuddyPress uses two different default avatar sizes. 50px for thumbnails and 150px for full. You can change these defaults. Refer to this: http://codex.buddypress.org/getting-started/guides/customizing-buddypress-avatars/
Kleo has its own sytling for the avatar thumbnail which can be found in kleo/buddypress/css/buddypress.css
COPY CODE#buddypress .activity-list .activity-avatar { float: left; display: block; overflow: hidden; position: relative; border-radius: 3px; z-index: 2; border-style: solid; border-width: 5px; margin-left: 10px; margin-top: -7px; /*box-shadow: 0 0 0 13px #fff;*/ width: 60px; height: 60px; }It really sounds like you have some css from another plugin overriding kleo’s buddypress.css styles, but again, hard to tell without seeing it with my own eyes.
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThis support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
Hi sharmstr,
It’s really nice of you to try to help. I plugged your css into the general settings page css box, but no change.
The only plugins I have running on this WP installation are BuddyPress and BBPress.
Interestingly, the BBPress images look ok. I did install BBPress after installing Kleo. I installed BuddyPress before installing Kleo. I wonder if that order has something to do with it. Perhaps, I should uninstall BuddyPress and try it again…
I hope the theme developers hop in here and help. That would sure be appreciated!
Thanks again
Uninstalling buddypress and reinstalling it did nothing. Just wasted my time.
I truly hope that the developers will take a look at my attached image and tell me what is going wrong.
The 50×50 image loads and then the circle that comes in around it appears to be flattening the right side and bottom. But, only in Buddypress. The Activity, groups, the login.
The thumbnail looks perfect in the BBpress forum pages.
Any ideas???
Do you have any plugins active? I had the same problem and it turned out to be a facebook plugin. Deactivating and deleting the plugin solved the problem for me.
Hi Jonbie, Thanks for the suggestion. I don’t have many other plugins, except for some security plugins running. But, I just deactivated everything to give it a test, and nothing has changed 🙁
I cannot believe that no one from KLEO support has responded to this problem yet. I am truly disappointed. I have just completely uninstalled KLEO parent and child, Buddypress, BBpress and reinstalled them all and nothing has changed. I have no other plugins nothing installed this is it. PLEASE HELP!!!
There’s no way I can access the page?
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThis support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
Here’s the fix. KLEO Support left out some of the avatars in one of the previous support questions. But, I figured it out. Hopefully, it will help someone else. Otherwise, your theme is very lovely. Just wish your support was a little quicker….
.bp-login-widget-user-avatar img.avatar,
.activity-list span.avatar,
#whats-new-avatar,
#activity-stream div.avatar,
.buddypress.widgets ul.item-list .item-avatar,
.buddypress.widgets .avatar-block .item-avatar {
height: 60px;
width: 60px;
left: -30px;
margin-bottom: 20px;
}Hi ThemeVal,
We have tested in different scenarios but could not replicate your problem in the activity stream. What browser do you use?
Sorry for the late reply.
Thanks sharmstr for your answer.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.We try to respond as quickly we can but sometimes we focus on developing some new functionality or fixing a found bug and it takes a bit more time to get a response.
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.Thanks, Abe. I appreciate hearing from you.
FYI, the code I posted above solved the problem of seeing the hard flat edges inside the circles, but the images are now very blurred. A 60×60 being forced into a 50×50 area.
If you know of a fix to my problem that will not make the images blurry, I would greatly appreciate your help!!
By the way, did you see my screen capture??? The same 50×50 images on your demo site looked fine in my same browser, side by side, with mine. So, it definitely has something to do with the code in my installation. It has nothing to do with the browser.
That is really strange if the demo site looks ok since they should have the same styles. Please follow sharmstr instruction to increase default 50px buddypress thumb size: http://codex.buddypress.org/getting-started/guides/customizing-buddypress-avatars/
That will point you to add some code to change the size in wp-content/plugins/bp-custom.php
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.I’m VERY confused, Abe. Obviously. And, upset.
What size should I designate in that custom file??????
You know, it seems like since you wrote the code, that you could be more helpful in providing code to help fix it. I am NOT a coder, I know NOTHING about BuddyPress, and I have spent the last 24 hours digging around in the code, GUESSING, digging out avatar call out codes, sticking them into the custom css, seeing if they work. Now, I have some that don’t have flat edges showing, some that do, some blurry images, some with the online marker now moved away at least 10 pixels from the circle. Just really LOVELY F’N results, you know. If you know of any code, or could possibly help me out here, it would be appreciated. This project is due tomorrow and my head is going to roll.
You know what would be seriously helpful here, Abe (and could have just saved me 24 hours), is if you could please provide me with the code for all of the 50×50 avatars that are affected on my site. I DO NOT KNOW OR UNDERSTAND CODE, so I am just pulling at straws here. Can you imagine what that is like??? Now, I have the following list, but I know that some of them aren’t correct, but I don’t know which ones, and there are probably others that I need in the list… But, again, I don’t know code, so I have no clue. Just pulling out hair here. But, since you wrote the code, you probably know…
.kleo-rounded img.avatar,
.bbp_widget_login .bbp-logged-in .user-submit,
#buddypress .activity-list .activity-avatar,
.bp-login-widget-user-avatar,
#buddypress #friend-list li div.item-avatar img.avatar,
#buddypress #member-list li div.item-avatar img.avatar,
#buddypress #members-list li div.item-avatar img.avatar,
#members-list li div.item-avatar img.avatar,
#buddypress ul.item-list li img.avatar,
#buddypress .activity-list li.mini .activity-avatar img.avatar,
#buddypress .activity-list li.mini .activity-avatar img.FB_profile_pic,
.bp-login-widget-user-avatar img.avatar,
.activity-list span.avatar,
#whats-new-avatar,
#activity-stream div.avatar,
.buddypress.widgets ul.item-list .item-avatar,
.buddypress.widgets .avatar-block .item-avatar {
height: 60px;
width: 60px;
left: -30px;
margin-bottom: 20px;
}So, this code controls both the awful looking member profiles in the activity stream, but it also controls the thumbnail of the groups images, SO THAT IS NOT GOOD.
I have to decide whether I want flat squared off member profiles inside of the circles or tiny group images inside of large circular frames.
That is not a good tradeoff. Maybe you could help?????
#buddypress ul.item-list li img.avatar,
Whoa. You are the only one having this issue. Its extremely difficult to figure out what is wrong with your setup without having access to it. It could be any number of things. Early on you said that the problem would be fixed if you could get the avatars to come in at 80px instead of 50px. I gave you a link that describes and walks you through how to do that. All of the other css code is for rounding the containing div. Take a look at this link again to see if calling a bigger avatar (60 to 80px) will fix your problem.
http://codex.buddypress.org/getting-started/guides/customizing-buddypress-avatars/
The part you want to focus on in the above link is the “How to Change BuddyPress Avatar Sizes”. As the instructions state, you’ll want to open /plugins/bp-custom.php and add the following to it
COPY CODEdefine ( 'BP_AVATAR_THUMB_WIDTH', 80 ); define ( 'BP_AVATAR_THUMB_HEIGHT', 80 );Save it, reupload it to your server, hit F5, take a break, come back, hit F5 and see if it worked. You can play with the 80 setting to see if just 60 will do it.
And btw, changes dont show up right away. You need to be patient. Hit F5 to reload the page, as well. I’m guessing somewhere along the line one of the proposed fixes actually worked but you just assumed it didnt because you didnt see it right away. That happens all the time.
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThis support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
Try my above and reset all your css. The css controls the rounding the div. The stuff I just sent controls the avatar within the rounded div.
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThis support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
Hi Sharmstr, you’re very kind to help. No, actually, I said that 60×60 made the flatness at the bottom and right side go away. But, the image blurred as a result, because it is getting squashed into a 50×50 circle.
I did make that change in the custom bp file with a 60×60 setting and it did nothing.
I am seeing changes made in live time. My browser is not caching.
How do you reset the .css?
PS, I can see the images load beautifully round initially.
Then, something comes in from the bottom and right to cover and make them square.
Maybe that would help someone figure out what is going on.
Hold on. Squashing a 60px image to dispaly at 50px will not cause blurriness. It will if you go from 50px to 60px.
Did you reupload your avatar? If not, it will still use your original 50px avatar and blow it up to 60px which will cause blurriness. If you reupload your avatar, BuddyPress will save it at 60px, overwriting the smaller 50px one.
Just try it 🙂 I’m determined to get this working. LOL
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThis support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
Oh, and by reset the css, I just mean undo any of the changes you did. That’s all.
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThis support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
You’re very sweet and I appreciate your help.
Yes, I uploaded a new avatar. It does cause blurriness — the 60 size fitting in the 50 circle… Just sayin’
I wish I knew which codes to include in my list — that css was the closest thing I got to get it working.
Changing the avatar size in the custom folder has not done anything.
It has something to do with the circle or frame coming in over the image once it loads on the page. Something there, perhaps a white square frame is covering the bottom and right-hand side, causing the flat hard edges. See picture that I posted above.
WAIT! If the the border-width of 5px isnt being set properly, then the image jumps to the upper right. This looks similar to your issue, right?
https://31.media.tumblr.com/a7cb3b3cb1f68c74d13cc54be9c13d85/tumblr_n32cbpjoNc1squolvo1_500h.jpg
So, what I did is brought up the demo site, inspected the element in firebug. I unchecked ‘border-width: 5px;’ in the #buddypress .activity-list .activity-avatar rule.
See if your border-width is set to 0 or is crossed out.
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionThis support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com
Thanks so much for your help, but I don’t think we’ve solved the problem…
Yes, this is what I am seeing, although your example is more severe than mine. Your example looks more cut off. Mine is less, maybe just 1 or 2 pixels… But, enough to make it look BAD!
This is happening all over the site, so it is hard to know which one to choose to look at in the .css, but just for an example, this image that is having the issue has this .css (and all five of those items are checked, oh, and none are crossed out — at least on this example):
#buddypress #friend-list li div.item-avatar img.avatar, #buddypress #member-list li div.item-avatar img.avatar, #buddypress #members-list li div.item-avatar img.avatar {
border-radius: 100%;
border-style: solid;
border-width: 5px;
width: 60px;
height: 60px;I have a question… Is there a place in the .css that would set a rule for ALL the images?? Maybe that is where something is crossed out or unchecked???
Here is another example. This is the image in the right-hand login widget that has the same issue. Its .css is as follows:
img {
max-width: 100%;
height: auto;
}
img {
vertical-align: middle;
}
img {
border: 0px none;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
}Here’s another example:
#buddypress ul.item-list li img.avatar {
float: left;
}
img[alt] {
font-size: 82%;
line-height: 10px;
}
img {
max-width: 100%;
height: auto;
}
img {
vertical-align: middle;
}
img {
border: 0px none;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
}Hi ThemeVal, Please try and put a testing demo on a live server so we can have access to it so it will be much easier to see your problem. Your issue is a very isolated one and haven’t managed to reproduce it. I have given you the file location where you should have added the code and the link http://codex.buddypress.org/getting-started/guides/customizing-buddypress-avatars/ has very straight instructions. I have guessed you had a basic knowledge if you are developing sites for a client of yours
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.Hi Abe, that actually didn’t work for me… But, I played around with the .css and got some very nice results. I’m satisfied. Thanks for trying to help. I don’t know why I would have an isolated problem. I love your theme… more each day! As I posted at ThemeForest last night:
“As I get deeper and deeper into the depth of this theme, I am truly impressed with the design and quality. I wish every theme had so many beautiful features and details. You guys are definitely a cut above and are setting a new standard. A very beautiful theme! I can’t wait to explore it more and create beautiful websites!”
Thank you, A happy customer 🙂
Thanks ThemeVal for your appreciation. We try to help each of our clients to have everyone happy.
It is strange what happens in your install since nobody could replicate your issue.Thanks
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.
The forum ‘KLEO’ is closed to new topics and replies.
