Free Mod How to align the Additional User Info on Postbit left-justified for label and right-justified for value

[glennrocksvb]

Add the below custom CSS to align the additional user info in postbit left-justified for label (flush left) and right-justified for value (flush right).

.b-userinfo__additional-info {
    display: flex;
    justify-content: space-between;
}

If you want to exclude some user info (e.g. the Social Networks Icons in Postbit mod) and keep its original alignment, use this CSS code instead:

.b-userinfo__additional-info:not(.b-userinfo__additional-info--user-social-icons) {
    display: flex;
    justify-content: space-between;
}

For excluding other user info, please let me know so I can provide the necessary CSS code.

You may need to reduce the font size and increase the postbit width to allow for more division between the left and right justified content.

To reduce the font size, simply add font-size: 11px; or whater desired value in the above CSS code.



Demo:
Please see postbit on this forum.

Enjoy!

[Belon]

Add the below custom CSS to align the additional user info in postbit left-justified for label (flush left) and right-justified for value (flush right).

.b-userinfo__additional-info {
display: flex;
justify-content: space-between;
}

If you want to exclude some user info (e.g. the Social Networks Icons in Postbit mod) and keep its original alignment, use this CSS code instead:

.b-userinfo__additional-info:not(.b-userinfo__additional-info--user-social-icons) {
display: flex;
justify-content: space-between;
}

For excluding other user info, please let me know so I can provide the necessary CSS code.

You may need to reduce the font size and increase the postbit width to allow for more division between the left and right justified content.

To reduce the font size, simply add font-size: 11px; or whater desired value in the above CSS code.



Demo:
Please see postbit on this forum.

Enjoy!

hye im new with vbulletin, where do i put this code? can u help me with the instructions?

[glennrocksvb]

You add custom CSS in css_additional.css template in Style Manager in AdminCP.

[Sergiobodyweb]

I wanted to ask a question, but then I solved by myself.
I wanted to have round, larger (100px) avatars, smaller text on the postbit user info additional data and enlarge avatar on hover.
The enlarge avatars active only on desktop or the mobile will be crooked.

Below the code I used, it works pretty good with the exception of not being able to align the first field, no idea why, the class is the same.

/* Round Avatar Effect - START */
.avatar img,
.avatar:not(.medium) > img,
.b-avatar:not(.b-avatar--m) > img,
.b-avatar--thread > img,
.b-avatar--s > img,
.b-comment .b-avatar img,
.b-comp-menu-dropdown__trigger-avatar,
.profile-sidebar-widget .profileContainer .profile-photo-wrapper .profile-photo,
.b-avatar--pmchat,
.b-pmchat__participants-avatar,
img.avatar,
img.b-avatar {
    border-radius: 100%;
}
.avatar,
.b-avatar,
.b-avatar--thread {
    border: 0;
}


.l-desktop .b-avatar--thread {
    height: 100px;
    width: 100px;
}

.l-desktop .b-avatar--thread > img {
    max-height: 100px;
    max-width: 100px !important;
    width: 100px;
    height: 100px;
}

/* Round Avatar Effect - END */

/* Postbit Userdata align and sixe - START */

.b-userinfo__additional-info {
    font-size: 11px;
    display: flex;
    justify-content: space-between;
}

/* Postbit Userdata align and sixe - END */


/* Smooth Enlarge Avatar Effect on Hover - START */
.l-desktop .b-avatar--thread > img,
.l-desktop .avatar img,
.l-desktop .b-avatar img,
.l-desktop .b-avatar--s > img {
    transition: transform .2s ease;
}

/* Topic Avatars */
.l-desktop .b-avatar--thread > img:hover {
    transform: scale(1.05);
}

/* Other Avatars */
.l-desktop .avatar img:hover,
.l-desktop .b-avatar img:hover,
.l-desktop .b-post-sm:hover .avatar img,
.l-desktop .topic-list-container .topic-list .topic-item:hover .avatar img,
.l-desktop .js-memberlist-table-body .b-table__row:hover .b-avatar--s > img {
    transform: scale(1.15);
}
/* Smooth Enlarge Avatar Effect on Hover - END */

/* Smooth Enlarge Last Visitors Avatar Effect on Hover - START */
.l-desktop .vbmodsthatrocks-last-visitors-widget .avatar img:hover {
    transform: scale(1.5);
}

.l-desktop .vbmodsthatrocks-last-visitors-widget .display-avatar .b-avatar-username {
   top: 0;
}

.l-desktop .vbmodsthatrocks-last-visitors-widget .avatar img:hover + .b-avatar-username {
    position: relative;
    top: 20px;
    transition: top .2s ease;
    background: #fff;
    box-shadow: 0 5px 6px rgba(0,0,0,.10),0 -3px 12px rgba(0,0,0,.2);
    border-radius: 4px
}
/* Smooth Enlarge Last Visitors Avatar Effect on Hover - END */​

​

[MahmoudE9]

Thank you for the wonderful effort