Skip to:
Content
Pages
Categories
Search
Top
Bottom

CSS issue with Activity

  • 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.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Avatar of Virtuali
    Virtuali
    Participant

    @gunju2221

    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.

    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.

    Avatar of Virtuali
    Virtuali
    Participant

    @gunju2221

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

    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.

    Avatar of pcwriter
    pcwriter
    Participant

    @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;`

    Avatar of Virtuali
    Virtuali
    Participant

    @gunju2221

    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;
    }`

    Avatar of pcwriter
    pcwriter
    Participant

    @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.

    Avatar of Virtuali
    Virtuali
    Participant

    @gunju2221

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

    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

    Avatar of Virtuali
    Virtuali
    Participant

    @gunju2221

    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.

Viewing 10 replies - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.