Announcement

Collapse
No announcement yet.

How to increase the width of Postbit

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Free Mod How to increase the width of Postbit

    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:

    For vB6/vBCloud:
    Code:
    .b-post__grid-container {
        grid-template-columns: 220px 1fr;
    }​
    Adjust the 220px value accordingly.

    For vB5:
    Code:
    .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.
    Last edited by glennrocksvb; 02-19-2024, 12:09 AM. Reason: Added code for vB6/vBCloud
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    thnx bro

    Comment


      #3
      Thanks you
      https://www.gamezers.com

      Comment


        #4
        Originally posted by ABDURHMAN View Post
        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.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


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

          Click image for larger version

Name:	99-99-9-9-9=-9.PNG
Views:	330
Size:	187.5 KB
ID:	7731

          Template content (conversation_userinfo) :

          HTML Code:
          {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>
          https://www.gamezers.com

          Comment


            #6
            Since you're using RTL, you need to change left to right and vice versa in the CSS code.
            Helpful? Donate. Thanks!
            Buy me a coffeePayPal QR Code
            Fast VPS Host for vBulletin:
            A2 Hosting & IONOS

            Comment


              #7
              Done RTL change CSS .
              The same problem .
              https://www.gamezers.com

              Comment


                #8
                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.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #9
                  The problem has been resolved

                  The problem was with the code where I was editing the following format:
                  HTML Code:
                    .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 :

                  HTML Code:
                    .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
                  https://www.gamezers.com

                  Comment


                  • watershed
                    watershed commented
                    Editing a comment
                    Cheers

                  #10
                  Glad you figured it out!
                  Helpful? Donate. Thanks!
                  Buy me a coffeePayPal QR Code
                  Fast VPS Host for vBulletin:
                  A2 Hosting & IONOS

                  Comment


                    #11
                    Originally posted by glennrocksvb View Post
                    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.

                    Comment


                      #12
                      Wonderful dear

                      Comment


                        #13
                        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 ?

                        Comment


                          #14
                          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




                          Click image for larger version  Name:	Untitled.png Views:	0 Size:	34.7 KB ID:	20959

                          Comment

                          Users Viewing This Page

                          Collapse

                          There is 1 user viewing this forum topic.

                          • Guest Guest

                          Latest Posts

                          Collapse

                          Working...
                          X
                          Searching...Please wait.
                          An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                          Please push the back button and reload the previous window.'
                          An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                          Please push the back button and reload the previous window.'
                          An internal error has occurred and the module cannot be displayed.
                          There are no results that meet this criteria.
                          Search Result for "|||"