[Scotty501]

Hi All, (Me again)

I am using the fishbook theme for BP. I have already corrected one CSS issue with the help of @hnla. I seem to have another one. When a user replies to a thread the avatar used is pushed over the text box meaning you have to start typing half way down the box.

A screenshot is here http://www.ukushosting.com/Images/cssissue.jpg

The site is http://www.ukushosting.com/testshop – if you need to look feel free to use the following logins username: testuser and password: testuser.

I would really appreciate some help as I am pretty weak with CSS issues – thanks in advance.

[Virtuali]

Get this application for firefox: http://getfirebug.com/

It can help you inspect elements, and you can see what your problem is through it.

Go to the css error, and right click, and click “Inspect Element”, and it should give you the current rule, and than tweak it to find what your problem is, than change it in your real file.

[Scotty501]

Thanks for the reply @virtuali

I do use Firebug by I am very green when it comes to CSS. I inspected the element and it is in the CSS as below

`}
div.ac-reply-avatar img {
border: 2px solid #FFFFFF !important;
}`

Could you suggest a command to use – of course I can play with the setting (ie px etc) but I am not sure where to begin.

Thanks again.

[Virtuali]

Give the link to the activity stream where you are having problems with, and I’ll inspect it.

[Scotty501]

Thanks @Virtuali

Link is http://www.ukushosting.com/testshop/activity/

You probably will need to login to see the thread – username testuser and pw is testuser.

Thanks again – it’s people like you that makes projects like this happen – much appreciated.

[pcwriter]

@Scotty501

The problem doesn’t look like it’s the image; rather, there doesn’t seem to be a large enough margin to the left of the comment div. Look for the following in your theme’s style.css file:
`div.activity-comments form div.ac-reply-content`
Add this and adjust to taste:
`margin-left:50px;`

[Virtuali]

That’s not the issue he is having. It’s with the avatar and the textarea is colliding.

Find this line in your `wp-content/themes/fishbook-buddypress-buddypack/style.css`

`div.ac-reply-avatar img {
border: 2px solid #FFFFFF !important;`

Add this to the bottom:

`width: 33px;
height: 33px;
}`

[pcwriter]

Both will work.

One will shrink the comment box to accommodate the actual width of the avatar, the other will shrink the avatar to accommodate the actual margin of the comment box.

Use whichever you prefer.

[Virtuali]

Shrinking avatar would make more sense because who wants to type in a textarea that is the size of the cursor?

[Scotty501]

Working.

@Virtuali – Thanks man – worked great. I did wonder why the default was to make the Avatar so large when replying – you addition worked great.

@pcwriter – I appreciate you taking the time to respond – Thank you

[Virtuali]

Probably the avatar was so big because the default css attribute for the avatar sitewide (`.avatar { `) was probably set to a height and width, so it would automatically assign that height and width to that image because it has nothing else specified.