Announcement

Collapse
No announcement yet.

Increase the avatar of your Forum

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Increase the avatar of your Forum

    When I got the VB5 found small avatars compared to version 4, so I made this code to increase the avatars. Feel free to inform modifications or improvements

    Put this in your css_additional.css

    Fixed to responsive view in mobile. Thanks Glenn

    PHP Code:
    .l-desktop .b-avatar--thread {
     
    bordernone;
    }
    .
    l-desktop .b-avatar--{
        
    height32px;
        
    width120px;
    }
    .
    l-desktop .b-avatar--img {
        
    max-height120px;
        
    max-width120px !important;
    }
    .
    l-desktop .b-userinfo {
        
    text-aligncenter;
        
    color#252C2F;
        
    padding10px 0px 0px 7px;

    Last edited by josueinaki; Sat 6th Feb '16, 8:48am.

  • #2
    Bigger avatar for vb5, CSS solution by Replicant in post no 4 http://www.vbulletin.com/forum/forum...tar-field-size
    Get Our New Flat Theme Pro Pack or Grab all 34 vb5.5.1 skins @sultantheme.com -vb3 responsive style or vb4 responsive style and vbcloud custom style

    Comment


    • josueinaki
      josueinaki commented
      Editing a comment
      thank you to show me this, will try this code

  • #3
    I added the original CSS code by Replicant in post no 4 (thank you), but now the avatar is left justified and not centered...Any suggestions?

    Comment


    • #4
      Originally posted by Aros12 View Post
      I added the original CSS code by Replicant in post no 4 (thank you), but now the avatar is left justified and not centered...Any suggestions?
      You need to post a link to your forum as other CSS may be affecting the centering.

      GIPHY for vB5 AutoLinker Social Icons in Postbit Audio Player Clear Cache Cron DragDrop Upload Topic AutoUpdate Force Read Stop Links in Posts ...and more!

      Comment


      • #5
        Here you go...

        http://www.hobbysquawk.com/forum/rc-...nam-tiger-moth

        Comment


        • #6
          Code:
          .b-userinfo {
              width: 210px;
          }
          Btw, with all your CSS changes, it broke the responsive view in mobile.

          GIPHY for vB5 AutoLinker Social Icons in Postbit Audio Player Clear Cache Cron DragDrop Upload Topic AutoUpdate Force Read Stop Links in Posts ...and more!

          Comment


          • #7
            Thank you again Glenn, that fixed the issue. So, ugh...So is there a workaround for the responsive mobile view when making all of these CSS additions?

            Comment


            • #8
              Use CSS Media Queries.

              Or utilize the l-small, l-xsmall, l-desktop CSS classes that vB is adding dynamically to the <body> tag based on the screen size.
              For all the CSS you added for increasing the avatar size, prepend the CSS rules with l-desktop class to make them applicable only to bigger screens (includes tablets) and leave the default style for mobile screens alone. For example, this:

              Code:
              .b-userinfo {
                  width: 210px;
              }
              should be:

              Code:
              .l-desktop .b-userinfo {
                  width: 210px;
              }

              GIPHY for vB5 AutoLinker Social Icons in Postbit Audio Player Clear Cache Cron DragDrop Upload Topic AutoUpdate Force Read Stop Links in Posts ...and more!

              Comment


              • #9
                Okay, does this code look correct if I want to have center-justified avatars at 125x125px without causing the responsive mobile mode to break?

                Code:
                .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
                margin-left: 240px!important;
                }
                .b-userinfo__details {
                width: 240px;
                margin-left: -20px;
                }
                .l-desktop .b-userinfo {
                width: 210px;
                }
                .b-avatar--m {
                height: 125px!important;
                width: 125px!important;
                }
                
                .b-avatar--m > img {
                max-height: 125px!important;
                max-width: 125px !important;
                height: 125px!important;
                width: 125px!important;
                }
                media only screen and (max-width: 783px) {
                .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
                margin-left:0px!important;
                float:none!important;
                }
                .b-userinfo__details {
                margin-left: 0;
                display:none;
                }
                
                .b-avatar--m {
                height: 60px!important;
                width: 60px!important;
                }
                
                .b-avatar--m > img {
                max-height: 60px!important;
                max-width: 60px !important;
                height: 60px!important;
                width: 60px!important;
                }}

                Comment


                • Replicant
                  Replicant commented
                  Editing a comment
                  You are missing the @ on the media line. This will cause the issue you are having.

                • Aros12
                  Aros12 commented
                  Editing a comment
                  Thanks Replicant!

              • #10
                Anyone?

                Comment


                • josueinaki
                  josueinaki commented
                  Editing a comment
                  im update the code to be responsive with mobile device like Glenn said. Now the avatar on pc you can make bigger and then mobile device access they will see the normal size
                  Last edited by josueinaki; Tue 9th Feb '16, 9:32pm.

              • #11
                Fixed. Thanks again for the help!

                Comment


                • #12
                  So, did anyone figure this out 100%?

                  josueinaki Aros12

                  Sorry to bother. I'm trying to get my avatars up to 175x250. Using the code on the first post here, I'm able to do about 150 width. After that, the avatar begins sliding under the post and is no longer visible. The postbit doesn't seem to get wider with the size of the image.
                  Want bigger avatars for your forum? There's a mod here. But be sure to vote for the JIRA requesting the fix here!

                  Comment


                  • jkotlowski
                    jkotlowski commented
                    Editing a comment
                    josueinaki

                    Apologies for the belated reply. I hadn't checked the site in quite some time...

                    http://www.t5forums.com/

                  • josueinaki
                    josueinaki commented
                    Editing a comment
                    Sorry for delay, put this in your css additional and adjust as you need
                    Code:
                    .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 
                    {
                        margin-left: 250px;//<---change here
                    }

                  • jkotlowski
                    jkotlowski commented
                    Editing a comment
                    Thank you! I'll give it a shot as soon as I am off work.

                • #13
                  So... It seems that the upgrade to 5.2.3 broke the CSS code I was using to increase the sizes of avatars and now they're disgustingly small again. I've tried tinkering, but I'm not entirely sure why the code stopped working afterwards. (Seriously... If we can make responsive avatars through additional CSS like I had before the upgrade, why can't vbulletin just put that support in natively? Surely my members aren't the only people in VB5 that absolutely hate the stupid size restriction)
                  Want bigger avatars for your forum? There's a mod here. But be sure to vote for the JIRA requesting the fix here!

                  Comment


                  • #14
                    There was a report by a user in 5.2.3 discussion that content of css_additional template got wiped away after the upgrade. Do you have other custom CSS that also stopped working?

                    GIPHY for vB5 AutoLinker Social Icons in Postbit Audio Player Clear Cache Cron DragDrop Upload Topic AutoUpdate Force Read Stop Links in Posts ...and more!

                    Comment


                    • #15
                      Originally posted by Glenn Vergara View Post
                      There was a report by a user in 5.2.3 discussion that content of css_additional template got wiped away after the upgrade. Do you have other custom CSS that also stopped working?
                      I've only got two custom CSS codes right now. The first one is for the avatar sizes.

                      Code:
                      .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
                      margin-left: 240px!important;
                      }
                      .b-userinfo__details {
                      width: 225px;
                      margin-left: -10px;
                      }
                      .l-desktop .b-userinfo {
                      width: 210px;
                      }
                      .b-avatar--m {
                      height: auto!important;
                      width: auto!important;
                      }
                      
                      .b-avatar--m > img {
                      max-height: 275px!important;
                      max-width: 200px !important;
                      height: auto!important;
                      width: auto!important;
                      
                      }
                      media only screen and (max-width: 783px) {
                      .l-col__flex-3, .l-row__fixed--left > .l-col__flex-3 {
                      margin-left:0px!important;
                      float:none!important;
                      }
                      .b-userinfo__details {
                      margin-left: 0;
                      display:none;
                      }
                      
                      .b-avatar--m {
                      height: auto!important;
                      width: auto!important;
                      }
                      
                      .b-avatar--m > img {
                      max-height: 100px!important;
                      max-width: 60px !important;
                      height: auto!important;
                      width: auto!important;
                      }}
                      That one stopped functioning.

                      The other is for restricting signature image bbcode sizes.

                      Code:
                      .post-signature img {max-width: 600px;}
                      
                      media only screen and (max-width: 783px) {
                        .post-signature img {max-width: 300px;}
                      This one still works.
                      Want bigger avatars for your forum? There's a mod here. But be sure to vote for the JIRA requesting the fix here!

                      Comment

                      Related Topics

                      Collapse

                      Working...
                      X