Announcement

Collapse
No announcement yet.

How to center postbit Username and avatar?

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

  • [vB4] How to center postbit Username and avatar?

    Well, yea. At the moment I did a fresh install of vBulletin.
    Last time I used vBulletin was v2.0 which is AAAAAAAAAAAAGES ago.

    Takes time to get it all back in my head

    Anyhoo;

    How can I center the username, user title and avatar to the middle of the postbit and leave the rest alone? Still using the standard postbit.css and the varity of all postbit.templates just dizzles me.

    EDIT: Oh, and how to add borders around avatars? Can't get to understand that part either.
    Last edited by Forgotten Name; Mon 15th Feb '10, 10:25am.

  • #2
    Try adding this to additional.css (may have to modify for 4.0.1):
    Code:
    /* center avatar, username, title, rank in postbit legacy 4.0.2 */
    .postbitlegacy .userinfo .username_container, .postbitlegacy .userinfo .rank, .postbitlegacy .userinfo .usertitle {text-align:center;}
    .postbitlegacy .userinfo .postuseravatar, .postbitlegacy .userinfo .postuseravatar img {float:none; text-align:center;}

    Please don't PM or VM me for support - I only help out in the threads.
    vBulletin Manual & vBulletin 4.0 Code Documentation (API)
    Want help modifying your vbulletin forum? Head on over to vbulletin.org
    If I post CSS and you don't know where it goes, throw it into the additional.css template.

    W3Schools <- awesome site for html/css help

    Comment


    • #3
      Thank you, the username and avatar is now centered.

      However, user title is not am not quite sure how to add that one?

      Comment


      • #4
        Do you havea link to the showthread page?

        Please don't PM or VM me for support - I only help out in the threads.
        vBulletin Manual & vBulletin 4.0 Code Documentation (API)
        Want help modifying your vbulletin forum? Head on over to vbulletin.org
        If I post CSS and you don't know where it goes, throw it into the additional.css template.

        W3Schools <- awesome site for html/css help

        Comment


        • #5
          As in forum? It's currently closed, I'm afraid.

          Not sure what to post though? Postbit.css / Postbit_legacy.php or anything?

          Comment


          • #6
            This works on 4.0.1:
            Code:
            /* center avatar, username, title, rank in postbit legacy 4.0.1 */
            .postbitlegacy .userinfo .username_container, .postbitlegacy .userinfo .rank, .postbitlegacy .userinfo .usertitle {text-align:center;}
            .postbitlegacy .userinfo .postuseravatar, .postbitlegacy .userinfo .postuseravatar img  {float:none; text-align:center;}
            .postbitlegacy .userinfo .usertitle {display: block; float:none; text-align:center; clear: both;}

            Please don't PM or VM me for support - I only help out in the threads.
            vBulletin Manual & vBulletin 4.0 Code Documentation (API)
            Want help modifying your vbulletin forum? Head on over to vbulletin.org
            If I post CSS and you don't know where it goes, throw it into the additional.css template.

            W3Schools <- awesome site for html/css help

            Comment


            • #7
              Excellent!

              The EDIT still mentions that I'm looking around for a border, can you help me out on this one too?

              Comment


              • #8
                That's just a stylevar. Go into StyleVars and type "avatar" in the search box and you'll see postbitlegacy_avatar_border come up.

                Please don't PM or VM me for support - I only help out in the threads.
                vBulletin Manual & vBulletin 4.0 Code Documentation (API)
                Want help modifying your vbulletin forum? Head on over to vbulletin.org
                If I post CSS and you don't know where it goes, throw it into the additional.css template.

                W3Schools <- awesome site for html/css help

                Comment


                • #9
                  that work with me at 4.0.2
                  thanks lynne

                  Comment


                  • #10
                    I'm confirming this works on 4.1.4 ^^

                    Comment


                    • #11
                      Originally posted by Lynne View Post
                      This works on 4.0.1:
                      Code:
                      /* center avatar, username, title, rank in postbit legacy 4.0.1 */
                      .postbitlegacy .userinfo .username_container, .postbitlegacy .userinfo .rank, .postbitlegacy .userinfo .usertitle {text-align:center;}
                      .postbitlegacy .userinfo .postuseravatar, .postbitlegacy .userinfo .postuseravatar img  {float:none; text-align:center;}
                      .postbitlegacy .userinfo .usertitle {display: block; float:none; text-align:center; clear: both;}
                      Hello,

                      I noticed someone posted this worked on 4.1.4.

                      I'm on 4.1.3 and the above works *except for* the Username above the Avatar.

                      Any suggested tweaks on the code above?

                      Thanks
                      FF w/ Web Dev / Firebug / DW

                      Comment


                      • #12
                        experienced in 4.1.7 and it worked perfectly.

                        Comment


                        • #13
                          i just used on my vb 4.1.7 this line in the additional.css

                          .postbitlegacy .userinfo .postuseravatar, .postbitlegacy .userinfo .postuseravatar img {float:none; text-align:center;}works perfect.
                          Thanks allot!

                          Comment


                          • #14
                            trying it on vb4.1.10 on my customize template


                            Code:
                            .postbitlegacy .userinfo .postuseravatar img, .eventbit .userinfo .eventuseravatar img
                             {     
                            max-width: {vb:math {vb:stylevar postbitlegacy_userinfo_width} - {vb:math {vb:stylevar padding}*2}};
                            text-align:center;
                            }
                            but doesn't work

                            even with this the avatar doesn't move
                            Code:
                            margin-left: 50px;
                            only if i use this
                            Code:
                             margin-right: 50px;
                            the avatar move but it is not in center to all users

                            i am using right to left
                            language.
                            any idea?
                            Last edited by cashcash; Wed 21st Mar '12, 4:10am.

                            Comment


                            • #15
                              Originally posted by Lynne View Post
                              This works on 4.0.1:
                              Code:
                              /* center avatar, username, title, rank in postbit legacy 4.0.1 */
                              .postbitlegacy .userinfo .username_container, .postbitlegacy .userinfo .rank, .postbitlegacy .userinfo .usertitle {text-align:center;}
                              .postbitlegacy .userinfo .postuseravatar, .postbitlegacy .userinfo .postuseravatar img {float:none; text-align:center;}
                              .postbitlegacy .userinfo .usertitle {display: block; float:none; text-align:center; clear: both;}
                              its working on 4.2.0 also

                              Comment

                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                              Working...
                              X