Announcement

Collapse
No announcement yet.

Increase the avatar of your Forum

Collapse
X
Collapse
 
  • Page of 3
  • Filter
  • Time
  • Show
Clear All
new posts
Previous 1 2 3 template Next
  • #1

    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 {
         border: none;
    }
    .    l-desktop .b-avatar--m {
            height: 32px;
            width: 120px;
    }
    .    l-desktop .b-avatar--m > img {
            max-height: 120px;
            max-width: 120px !important;
    }
    .    l-desktop .b-userinfo {
            text-align: center;
            color: #252C2F;
            padding: 10px 0px 0px 7px;
    } 
    Last edited by josueinaki; Sat 6 Feb '16, 8:48am.
    Tags: None
  • #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 36 vb5.6.6 skins @sultantheme.com -vb3 responsive style or vb4 responsive style and vbcloud custom style and Please check out Our first vBCloud pre-made theme

    Comment

    • josueinaki
      #2.1
      josueinaki commented
      Mon 21 Dec '15, 8:06pm
      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.

      Flag Icon Postbit AJAX Search Topic List Pagination INITIALS AVATAR Better Name Card Quote Selected Text Likes Summary Post Footer Translate Stop Links in Posts +MORE!

      Comment

      • #5
        Here you go...

        Hobby Squawk RC Forum for Airplanes, Boats, Cars, Helicopters, Tanks, and Trucks
        http://www.hobbysquawk.com/forum/rc-airplanes/propeller-airplanes/1848-dynam-tiger-moth

        Comment

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

          Flag Icon Postbit AJAX Search Topic List Pagination INITIALS AVATAR Better Name Card Quote Selected Text Likes Summary Post Footer Translate Stop Links in Posts +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;
}

              Flag Icon Postbit AJAX Search Topic List Pagination INITIALS AVATAR Better Name Card Quote Selected Text Likes Summary Post Footer Translate Stop Links in Posts +MORE!
              • Likes 1

              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
                  #9.1
                  Replicant commented
                  Wed 10 Feb '16, 6:22am
                  Editing a comment
                  You are missing the @ on the media line. This will cause the issue you are having.
                • Aros12
                  #9.2
                  Aros12 commented
                  Wed 10 Feb '16, 6:46am
                  Editing a comment
                  Thanks Replicant!
              • #10
                Anyone?

                Comment

                • josueinaki
                  #10.1
                  josueinaki commented
                  Tue 9 Feb '16, 9:19pm
                  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.
              • #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
                    #12.2
                    jkotlowski commented
                    Mon 25 Apr '16, 3:33pm
                    Editing a comment
                    josueinaki

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

                    t5forums.com - t5forums Resources and Information.
                    http://www.t5forums.com/
                    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
                    #12.3
                    josueinaki commented
                    Thu 19 May '16, 7:19pm
                    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
                    #12.4
                    jkotlowski commented
                    Sun 29 May '16, 7:32pm
                    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?

                    Flag Icon Postbit AJAX Search Topic List Pagination INITIALS AVATAR Better Name Card Quote Selected Text Likes Summary Post Footer Translate Stop Links in Posts +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;

}
[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

                      Previous 1 2 3 template Next

                      Related Topics

                      Collapse
                      Working...
                      X