Official - Free How to increase the width of Postbit

[glennrocksvb]

If you increased the thread font size to something bigger (e.g. this forum uses 16px as default) or you increased the avatar size (like this forum does), then having the default 160px width of postbit would look awkward to be too narrow.

Add this in css_additional template or via Sitebuilder > Style > CSS Editor:

.l-desktop .conversation-list.thread-view .l-col__flex-3,
.l-desktop .conversation-list.thread-view .l-row__fixed--left > .l-col__flex-3 {
    margin-left: 205px;
}
.l-desktop .conversation-list.thread-view .l-col__fixed-3,
.l-desktop .conversation-list.thread-view .l-row__fixed--left > .l-col__fixed-3 {
    width: 205px;
    padding-right: 0;
}

Adjust the width and left margin accordingly. They should have the same value.

Demo:
See the postbit section on this thread.

[t0fx]

thnx bro

[ABDURHMAN]

Thanks you

[glennrocksvb]

The code does not work correctly
Causes distortion of display subjects

You should post issues you're having on this mod and not on the other topic.

Anyway, which specifically are being distorted? Could you post a screenshot?

I checked your site and you seem to have edited the postbit template and added some HTML tags. In that case, you may need to tweak the CSS code provided here in order for the code to work properly.

[ABDURHMAN]

I am sorry to write the previous comment ..
Images showing deformation after using the code:



Template content (conversation_userinfo) :

{vb:set schemaAuthor.itemprop, author}
{vb:set schemaAuthor.itemscope, 1}
{vb:set schemaAuthor.itemtype, http://schema.org/Person}

<div class="userinfo b-userinfo b-post__hide-when-deleted" {vb:schema {vb:raw schemaAuthor}}>
    <vb:if condition="$user['showavatars']">
        {vb:set avatarbase, ''}
        <vb:if condition="empty($conversation['avatar']['isfullurl'])">
            {vb:set avatarbase, {vb:raw baseurl_corecdn}}
            {vb:strcat {vb:raw avatarbase}, "/"}
        </vb:if>

        <vb:if condition="!$conversation['userid'] AND $conversation['avatar']['avatarpath'] AND $conversation['avatar']['hascustom']">
            <span class="b-avatar b-avatar--m b-avatar--thread h-margin-bottom-l"><img src="{vb:raw avatarbase}{vb:raw conversation.avatar.avatarpath}" alt="{vb:raw conversation.authorname}" title="{vb:raw conversation.authorname}" /></span>
        <vb:elseif condition="!$conversation['userid']" />
            <span class="b-avatar b-avatar--m b-avatar--thread h-margin-bottom-l"><img src="{vb:raw avatarbase}images/default/default_avatar_medium.png" width="64" height="64" alt="{vb:phrase guest_avatar}" title="{vb:phrase guest_avatar}" /></span>
        <vb:elseif condition="!empty($conversation['senderAvatar']) AND !empty($conversation['senderAvatar']['avatarpath']) AND !empty($conversation['senderAvatar']['hascustom'])" />
            <a href="{vb:url 'profile', {vb:raw conversation}}" class="b-avatar b-avatar--m b-avatar--thread h-margin-bottom-l"><img src="{vb:raw avatarbase}{vb:raw conversation.senderAvatar.avatarpath}" alt="{vb:raw conversation.authorname}" title="{vb:raw conversation.authorname}" /></a>
        <vb:elseif condition="$conversation['avatar'] AND $conversation['avatar']['avatarpath'] AND $conversation['avatar']['hascustom']" />
            <a href="{vb:url 'profile', {vb:raw conversation}}" class="b-avatar b-avatar--m b-avatar--thread h-margin-bottom-l"><img src="{vb:raw avatarbase}{vb:raw conversation.avatar.avatarpath}" alt="{vb:raw conversation.authorname}" title="{vb:raw conversation.authorname}" /></a>
        <vb:else />
            <a href="{vb:url 'profile', {vb:raw conversation}}" class="b-avatar b-avatar--m b-avatar--thread h-margin-bottom-l"><img src="{vb:raw avatarbase}images/default/default_avatar_medium.png" width="64" height="64" alt="{vb:raw conversation.authorname}" title="{vb:raw conversation.authorname}" /></a>
        </vb:if>
    </vb:if>
    <!-- responsive alteration: Added userinfo-details wrapper in order to
    support left floated avatar with all other information on the right. -->
    {vb:set userInfo, {vb:raw conversation.userinfo}}
    <div class="b-userinfo__details">
        {vb:set schemaAuthor.itemprop, name}
        <div class="author h-text-size--14">
            <strong><vb:if condition="$conversation['userid'] > 0"><a href="{vb:url 'profile', {vb:raw conversation}}" {vb:schema schemaAuthor}></vb:if><vb:if condition="isset($conversation['musername'])">{vb:raw conversation.musername}<vb:elseif condition="isset($conversation['authorname'])" />{vb:raw conversation.authorname}<vb:else />{vb:phrase guest}</vb:if><vb:if condition="$conversation['userid'] > 0"></a></vb:if></strong>
            {vb:template pmchat_userinfo_link, conversation={vb:raw conversation}}
        </div>
        {vb:hook 'conversation_above_usertitle'}
        <vb:if condition="!empty($userInfo['usertitle'])">
            <vb:comment>usertitle is already html escaped in the userInfo array, if it's required</vb:comment>
            <div class="usertitle">{vb:raw userInfo.usertitle}</div>
        </vb:if>
        {vb:set reputationimglevel {vb:raw conversation.reputationimg.level}}

        <div class="b-meter h-margin-top-m {vb:raw conversation.reputationimg.type}" title="{vb:rawphrase {vb:raw reputationimglevel}}">
            {vb:set counter, {vb:php range, 1,5}}
            <vb:each from="counter" value="nr">
                <div class="b-meter__bar<vb:if condition="$conversation['reputationimg']['bars'] >= $nr"> b-meter__bar--selected</vb:if>"></div>
                <div class="b-meter__bar<vb:if condition="$conversation['reputationimg']['bars'] >= $nr"> b-meter__bar--selected</vb:if>"></div>
            </vb:each>
        </div>

        <div class="b-userinfo__rank h-margin-top-s{vb:if "empty($userInfo['rank'])", ' h-hide'}">{vb:raw userInfo.rank}</div>

        <ul class="b-userinfo__additional-info-block h-margin-top-xl">
            <vb:if condition="$conversation['userid'] > 0">
                <div id="info-lin"><li class="b-userinfo__additional-info"><label>{vb:phrase join_date}:</label> <span>{vb:date {vb:raw userInfo.joindate}, 'registered'}</span></li></div>
                <div id="info-lin"><li class="b-userinfo__additional-info"><label>{vb:phrase posts}:</label> <span>{vb:raw userInfo.posts}</span></li></div>
                <vb:if condition="isset($conversation['postelements']) AND $conversation['postelements'] == 4">
                    <li class="b-userinfo__additional-info"><label>{vb:phrase infractions}:</phrase><span>{vb:raw conversation.warnings}/{vb:raw conversation.infractions} ({vb:raw conversation.ipoints})</span></li>
                </vb:if>
            </vb:if>
            {vb:hook 'conversation_userstats'}
        </ul>
        <ul class="b-userinfo__icons h-margin-none OLD__userinfo-extra OLD__icons">
            <vb:if condition="$conversation['online'] == 'online'">
                {vb:set olstatus, ' online'}
            <vb:else />
                {vb:set olstatus, ' offline'}
            </vb:if>
            <li class="b-userinfo__icon h-left OLD__online-status{vb:raw olstatus}" title="<vb:if condition="$olstatus == ' online'">{vb:rawphrase x_is_online_now, {vb:raw conversation.authorname}}<vb:else />{vb:rawphrase x_is_offline, {vb:raw conversation.authorname}}</vb:if>"><span class="b-icon b-icon__status--<vb:if condition="$conversation['online']=='online'">green<vb:else />gray</vb:if>"></span></li>

            {vb:template conversation_signature, type=collapsed, conversation={vb:raw conversation}, collapsedClass="b-userinfo__icon h-left"}
        </ul>
    </div>
</div>

[glennrocksvb]

Since you're using RTL, you need to change left to right and vice versa in the CSS code.

[ABDURHMAN]

Done RTL change CSS .
The same problem .

[glennrocksvb]

Can you post another screenshot after your CSS changes?

Does the issue go away if you temporarily remove your customizations? As I mentioned earlier, you added some HTML tags and you need to adjust the CSS to accommodate your HTML changes. The CSS code was based on the default HTML markup. It may not fully work if there are unexpected HTML tags.

[ABDURHMAN]

The problem has been resolved

The problem was with the code where I was editing the following format:

  .l-desktop .conversation-list.thread-view .l-col__flex-3, .l-desktop .conversation-list.thread-view .l-row__fixed--right > .l-col__flex-3 {     margin-left: 205px; } .l-desktop .conversation-list.thread-view .l-col__fixed-3, .l-desktop .conversation-list.thread-view .l-row__fixed--right > .l-col__fixed-3 {     width: 205px;     padding-right: 0; }

The problem was with the code specified in red color :
margin-left: 205px;
It is replaced with the following code:
margin-right: 205px;

The correct code for those who use RTL :

  .l-desktop .conversation-list.thread-view .l-col__flex-3, .l-desktop .conversation-list.thread-view .l-row__fixed--right > .l-col__flex-3 {     margin-right: 205px; } .l-desktop .conversation-list.thread-view .l-col__fixed-3, .l-desktop .conversation-list.thread-view .l-row__fixed--right > .l-col__fixed-3 {     width: 205px;     padding-right: 0; } [/H

[watershed]

Cheers

[glennrocksvb]

Glad you figured it out!

[Nintenex]

Users awaiting moderation or email confirmation and banned users are not allowed to view the code.

I'm unable to see the code even when logged in.

Nevermind i was able to fix had to go back and research for this topic.

[sky55]

Wonderful dear

[faustvasea]

I've tried this modification, it does work fine, but it's makes the avatar smaller.

Is there any way to make the avatar to be as they should be ?

[mohammed]

Thank you!
The code widens the area but keeps the original tight wrap of the text. Any clues? Please see the picture:

UPDATE: RESOLVED: Changed row-fixed to row-flex-3