XF 1.x Re: Membercard option like at TheAdminZone

JacquiiDesigns

Customer
I posted the following on TAZ in regards to the new styling changes and dark theme addition:
In love with the new membercard styling!!!
Steve - will such a stying option eventually be added to PixeExit's most fabulous Xenbase framework?
kudos on the new designs. Great work dude! :tup:

J.
2017-07-19_5-11-30.png

My suggestion is simple: Please make such an option available for selection in the Xenbase framework's stying properties. @Steve said it could possibly be an option added to the Resources section as well.

Either/or would be great! And IDK if sharing such functionality would be simple - but it's a very nice modification. I *want* it.

Anyway = Superb work on the TAZ themes fellas. Quite impressed as per usual.

Cheers.

J.
 

Russ

Pixel Exit Staff
I've always wanted to dive into various membercards... we'll see what we can come up with.

For now... try this in your extra.css:

Code:
.Responsive .xenOverlay.memberCard
{
    max-width: 320px;
}
{xen:helper clearfix, '.xenOverlay.memberCard .userInfo .userStats'}
.xenOverlay.memberCard .userInfo .userStats dt, .xenOverlay.memberCard .userInfo .userStats dd
{
    padding: 2px 0;
}
.xenOverlay.memberCard .userInfo .userStats dt
{
    float: left;
    clear: both;
}
.xenOverlay.memberCard .userInfo .userStats dd
{
    float: right;
}
.Responsive .xenOverlay.memberCard .avatarCropper
{
    float: none;
    margin-left: auto;
    margin-right: auto;
}
.Responsive .xenOverlay.memberCard .userInfo
{
    margin-left: 0;
    padding-top: 5px;
}
.XenBase .xenOverlay.memberCard .userInfo h3,
.XenBase .xenOverlay.memberCard .userInfo .userTitleBlurb,
.XenBase .xenOverlay.memberCard .userInfo .status,
.XenBase .xenOverlay.memberCard .userLinks,
.XenBase .xenOverlay.memberCard .lastActivity
{
    text-align: center;
}
 
Last edited:

DelDrago

Customer
@Russ,

Is it possible to do something like this with Xenforo 2? I've been using this membercard on my forums, and would like to have something similar when we complete the upgrade to X2 (which is in process). Thanks!
 

Russ

Pixel Exit Staff
This is a pure CSS version:

Screenshot_4.png


Add to extra.less:

Code:
.tooltip.tooltip--member
{
    width: 300px;
    .memberTooltip-header
    {
        display: block;
        text-align: center;
        .memberTooltip-avatar
        {
            display: block;
            text-align: center;
            margin: 0 auto;
        }
        .memberTooltip-headerInfo
        {
            display: block;
            .memberTooltip-headerAction
            {
                position: absolute;
                top: 5px;
                right: 5px;
            }
            [dir=auto] { text-align: center; }
        }
    }
    .pairJustifier
    {
        display: block;
        padding: 5px 6px;
        .pairs.pairs--rows { display: block; margin: 0; }
        dt { float: left; text-align: left; }
        dd { float: right; text-align: right; }
    }
}
Will get that result above. Any further changes may require template edits.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.