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

    Official - Free 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:

    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.

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

        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:	83
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.

            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.

                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!

                  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

                          Working...
                          X