Skip to:
Content
Pages
Categories
Search
Top
Bottom

who’s online/ recently active widgets showing just a picture


  • ashrod
    Participant

    @ashrod

    hi there,

    the Who’s Online widget and recently active widgets only show me a tiny profile picture of the user. However, the members widget shows the tiny profile picture as well as the user’s name.

    How do i get these two widgets to display the names of the users as well?

    thank you

Viewing 1 replies (of 1 total)

  • xmginc
    Participant

    @xmginc

    @ashrod, hope this helps. This fades in a tooltip by animating the member’s name in a black box with arrow pointing up towards the avatar on hover. It may need tweaking for your site and hope other’s can improve and optimize this further. I needed a quick solution to work with the Woffice theme by Alkaweb and is working well for me so far.

    If you want to see this in action, just copy this and go to Woffice demo site using Firefox + Firebug and copy paste into the style editor tab and hover over the who’s online avatar to see the tooltip.

    .avatar-block a {
    width: 50px;
    height: 50px;
    /* change to whatever your avatar size is */
    display: inline-block;
    position: relative;
    }
    .avatar-block a:after {
    content: attr(data-bp-tooltip);
    font-size: 10px;
    position: absolute;
    z-index: 999;
    background: #000;
    color: #e0e0e0;
    padding: 2px 5px;
    line-height: 15px;
    opacity: 0;
    transition: opacity 0.4s ease-out;
    top: 55px;
    /* based on a 50x50 avatar and places the tooltip 5px below */
    text-align: center;
    margin-left: -50%;
    left: 0;
    width: 100px;
    pointer-events: none;
    border-radius: 3px;
    }
    .avatar-block a:before {
    /* this is the arrow pointing up */
    content: '';
    position: absolute;
    left: 20px;
    top: 50px;
    /* based on a 50x50 avatar and places the tooltip 5px below */
    width: 0;
    height: 0;
    transition: opacity 0.4s ease-out;
    opacity: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #000;
    clear: both;
    z-index: 999;
    pointer-events: none;
    }
    .widget.buddypress div.avatar-block {
    overflow: visible !important;
    }
    .avatar-block a:hover:before,
    .avatar-block a:hover:after {
    opacity: 1;
    }
    .avatar-block .item-avatar {
    display: inline-block;
    }
Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.
Skip to toolbar