Increase the avatar of your Forum

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • josueinaki
    Senior Member
    • Sep 2015
    • 199
    • 5.1.x

    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 6 Feb '16, 8:48am.
  • napy8gen
    Senior Member
    • Jul 2001
    • 525
    • 6.X

    #2
    Bigger avatar for vb5, CSS solution by Replicant in post no 4 http://www.vbulletin.com/forum/forum...tar-field-size
    Get Our vbulletin 6 themes

    Comment


    • josueinaki
      josueinaki commented
      Editing a comment
      thank you to show me this, will try this code
  • Aros12
    Member
    • Jan 2016
    • 74
    • 5.0.x

    #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

    • glennrocksvb
      Former vBulletin Developer
      • Mar 2011
      • 4011
      • 5.7.X

      #4
      Originally posted by Aros12
      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.

      Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

      Comment

      • Aros12
        Member
        • Jan 2016
        • 74
        • 5.0.x

        #5
        Here you go...

        Comment

        • glennrocksvb
          Former vBulletin Developer
          • Mar 2011
          • 4011
          • 5.7.X

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

          Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

          Comment

          • Aros12
            Member
            • Jan 2016
            • 74
            • 5.0.x

            #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

            • glennrocksvb
              Former vBulletin Developer
              • Mar 2011
              • 4011
              • 5.7.X

              #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;
              }

              Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

              Comment

              • Aros12
                Member
                • Jan 2016
                • 74
                • 5.0.x

                #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!
              • Aros12
                Member
                • Jan 2016
                • 74
                • 5.0.x

                #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 9 Feb '16, 9:32pm.
              • Aros12
                Member
                • Jan 2016
                • 74
                • 5.0.x

                #11
                Fixed. Thanks again for the help!

                Comment

                • jkotlowski
                  Senior Member
                  • May 2015
                  • 103
                  • 5.1.x

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

                    t5forums.com is your first and best source for all of the information you’re looking for. From general topics to more of what you would expect to find here, t5forums.com has it all. We hope you find what you are searching for!

                  • 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.
                • jkotlowski
                  Senior Member
                  • May 2015
                  • 103
                  • 5.1.x

                  #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

                  • glennrocksvb
                    Former vBulletin Developer
                    • Mar 2011
                    • 4011
                    • 5.7.X

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

                    Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                    Comment

                    • jkotlowski
                      Senior Member
                      • May 2015
                      • 103
                      • 5.1.x

                      #15
                      Originally posted by Glenn Vergara
                      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;
                      
                      }
                      [USER="3396"]media[/USER] 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;}
                      
                      [USER="3396"]media[/USER] 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...