Postbit CSS Styling

[Cmoney31]

I'm trying to move the online status icon next to the username. Does anyone know how to do this? I can move it to that space, but not keeping it responsive with each individual username, as they vary in length.



I posted an image above showing what I'm looking for, thanks

[Cmoney31]

Edited the post, still trying to figure out how to do this

[noypiscripter]

It is impossible without modifying the HTML markup in the template (which is not recommended) because the length of the username is not fixed. But it is possible to put the online icon before the username using pure CSS. Do you only want to do this on small screens?

/* give space for online icon in the username */
.l-small .b-userinfo__details .author { margin-left: 15px; }

/* change the container of the online and signature icons from relative to static to allow online icon to be moved relative to outermost container */
.l-small .b-userinfo__icons { position: static; }

/* move online icon before the username */
.l-small .b-userinfo__icon.online, .l-small .b-userinfo__icon.offline {
    position: absolute;
    left: 83px;
    top: 12px;
}

/* move signature icon to where it was */
.l-small .js-userinfo__signature {
    position: absolute;
    right: 9px;
    top: 9px;
}

This code is based on the Default vB5 Style. Since it looks like you already made some CSS customizations on your site based from your screenshot, you may need to tweak the above CSS to make it work on your end.

[Cmoney31]

On all screens really, I just took a smaller screenshot for easier viewing. But okay, its a shame it can't be done without modifying the HTML markup. Thanks though!

[noypiscripter]

It's still possible but using JS and not just CSS. You can insert JS using template hooks system.