Skip to:
Content
Pages
Categories
Search
Top
Bottom

CSS issue with Activity

  • @scotty501

    Member

    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)
  • @gunju2221

    Participant

    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

    Member

    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.

    @gunju2221

    Participant

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

    @scotty501

    Member

    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

    Participant

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

    @gunju2221

    Participant

    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

    Participant

    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.

    @gunju2221

    Participant

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

    @scotty501

    Member

    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

    @gunju2221

    Participant

    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)
  • The topic ‘CSS issue with Activity’ is closed to new replies.
Skip to toolbar