Skip to:
Content
Pages
Categories
Search
Top
Bottom

How to display user avatar horizontally? [code included]

  • @henry0

    Member

    For the widget that displays the avatars for what users are online, how would I go about making it so that they display horizontally and not vertically? I have yet to find a solution in the support forums and would greatly appreciate some help.
    So far I have my coding as this:

    `

    <a href="”>

    `

    Took it from the bp-core-widgets.php modified it slightly with a padding.

Viewing 9 replies - 1 through 9 (of 9 total)
  • @hnla

    Participant

    For starter it’s a list of items, so a good start would be to rewrite the markup using appropriate semantic elements, in this case a ul construct:

    `

    • <a href="”>

    `
    Try not to add inline styling, it’s only used by scripting and shouldn’t be used when it can be avoided, style the elements using the id and classes in your stylesheets.

    To get a horizontal list either float the list elements or display:inline-block. If floated you’ll need to add clearing to the parent ul i.e overflow:hidden, if using inline-block and you want to center the images add text-align:center to the parent ul.

    @henry0

    Member

    Thanks for the quick response! I’ll give that a try. I had no choice to use the inline styling. I modified everything in the CSS to try to adjust the .img so it isn’t pushed right up against the side of the widget. Nothing worked.

    @hnla

    Participant

    It’s simply a case of understanding the weight of selectors, now you have an id on the ul you should be able to weight the selector set in your favour i,e:

    #avatar-block-inline li.item-avatar-online a img {}

    if necessary add classes to the a or img elements

    changing the class names as I have may well have removed some of the styling that was being applied so you may not have the issue you did, but also may have to style anew as it were.

    @henry0

    Member

    Ah, worked like a charm! Thank you for your help. Another quick question if you don’t mind. When a user goes to his or her profile is it possible to not display the sidebar but just have like a default page template?

    @hnla

    Participant

    Just use a conditional check to see if displayed user == to logged in user, you can see those sorts of conditions at work if you look through profile pages for views that only show for the actual profile user or items that only show if you are logged in, then simply compare the two to see if they match ‘==’ you can then wrap the sidebar call in that conditional check to only show it if that condition is not met ‘!==’

    @henry0

    Member

    Oh, I didn’t see this post. I don’t follow you on this one. All I want to do is not to display the sidebar on the user profile pages but have the sidebar be on all my otherpages. I tried writing a conditional statement but that wouldn’t really work seeing as I’d have to write out all the pages for every user who’d join. Then I tried modifying the CSS to not display the sidebar div but that didn’t work. I know theirs a way to resolve this issue that’s so simple but I just can’t see it.

    @hnla

    Participant

    Simple approach (guess I was overthinking what you were after ) if you don’t want the sidebar whatsoever when viewing an account/profile view would be to remove the sidebar call altogether.

    in:
    member/single/home.php

    comment out the sidebar function thus:
    ` `

    Then you’ll probably need to adjust your styles for that specific page.

    @henry0

    Member

    Yeah, I thought it was that easy too. I took out that line of code in the member/single/home.php but the sidebar still shows up for some reason. I actually went in and took out that line of code for the member/single/index.php and for a few other files but the side bar is still showing up. I am running the buddypress template pack if that helps and I’m using my own custom theme.

    @henry0

    Member

    Yeah okay something is really messed up here, I deleted this line of code “ in every file in the bp folder and in the bp template folder and that still didn’t remove the side bar from the user profile page. Any one know what the problem is with this?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to display user avatar horizontally? [code included]’ is closed to new replies.
Skip to toolbar