Change width of reputition button

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Mr.Bennet
    New Member
    • Jun 2012
    • 29

    [Forum] Change width of reputition button

    Hey!

    I wanna change the width of the "Give reputition" button. I tried to change the size of the picture. But now it looks like this:

    Click image for larger version

Name:	frågavbulletin.jpg
Views:	1
Size:	16.0 KB
ID:	3723934

    The icon that´s the normaly, is still there, but only the first character in the things that I added, is there.

    I guess that it´s some CSS that has to be done. But I don´t find in what CSS file. Anyone have a clue?

    Best regards
  • Merjawy
    Senior Member
    • Sep 2002
    • 2613

    #2
    There are more than one icon in there...
    To be or not to be... Where the hell is the question????
    My psychiatrist told me I was crazy and I said I want a second opinion. He said okay, you're ugly too

    Live vBulletin 4.2.0 Multilingual * Alpha/Beta vB 4 - vB 5 Tier 1A
    CentOS 6.2 - Apache:2.2.15(Apache2Handler) - PHP:5.3.3 - MySQL:5.1.61
    Xampp/Win-XP - Apache v2.2.21(Apache2Handler) - PHP:5.3.8 - MySQL:5.5.16

    Comment

    • Mr.Bennet
      New Member
      • Jun 2012
      • 29

      #3
      And that means?

      Comment

      • Merjawy
        Senior Member
        • Sep 2002
        • 2613

        #4
        If you want to change it, then change both files, one is black and the other is blue
        hover your mouse over the icon here and you will see it changes
        To be or not to be... Where the hell is the question????
        My psychiatrist told me I was crazy and I said I want a second opinion. He said okay, you're ugly too

        Live vBulletin 4.2.0 Multilingual * Alpha/Beta vB 4 - vB 5 Tier 1A
        CentOS 6.2 - Apache:2.2.15(Apache2Handler) - PHP:5.3.3 - MySQL:5.1.61
        Xampp/Win-XP - Apache v2.2.21(Apache2Handler) - PHP:5.3.8 - MySQL:5.5.16

        Comment

        • TheLastSuperman
          Senior Member
          • Sep 2008
          • 1799

          #5
          Originally posted by Mr.Bennet
          Hey!

          I wanna change the width of the "Give reputition" button. I tried to change the size of the picture. But now it looks like this:

          [ATTACH=CONFIG]60221[/ATTACH]

          The icon that´s the normaly, is still there, but only the first character in the things that I added, is there.

          I guess that it´s some CSS that has to be done. But I don´t find in what CSS file. Anyone have a clue?

          Best regards
          Try modifying the css found in postbit.css such as:

          Code:
          .postbitlegacy .postfoot .textcontrols a.reputation, .postbit .postfoot .textcontrols a.reputation  {
              background: url({vb:stylevar imgdir_button}/reputation-40b.png) no-repeat {vb:stylevar postbit_control_background} {vb:stylevar left};
              padding: {vb:stylevar postbit_control_padding};
              padding-{vb:stylevar left}: {vb:math {vb:stylevar postbit_control_padding}+20};
              border: {vb:stylevar postbit_control_border};
          }
          .postbitlegacy .postfoot .textcontrols a.reputation:hover, .postbit .postfoot .textcontrols a.reputation:hover  {
              background: url({vb:stylevar imgdir_button}/reputation-40b-hover.png) no-repeat {vb:stylevar postbit_control_hover_background} {vb:stylevar left};
              padding: {vb:stylevar postbit_control_padding};
              padding-{vb:stylevar left}: {vb:math {vb:stylevar postbit_control_padding}+20};
              border: {vb:stylevar postbit_control_hover_border};
          }
          Or it might be better to make changes to the above and paste in additional.css this way upon a future upgrade the code in postbit.css is not overwritten or if a merge issue occurs etc.


          Former vBulletin Support Staff
          Hacked recently? See my blog post "Recovering a Hacked vBulletin Site".
          Thinking outside the box? Need modification support? Visit www.vBulletin.org and have at it!

          Comment

          • Mr.Bennet
            New Member
            • Jun 2012
            • 29

            #6
            Originally posted by TheLastSuperman
            Or it might be better to make changes to the above and paste in additional.css this way upon a future upgrade the code in postbit.css is not overwritten or if a merge issue occurs etc.
            Hmm, sorry. I don´t understand what to do... I´m really knew at this.

            I found the code in the postbit.css, but what to do with it?

            Comment

            • TheLastSuperman
              Senior Member
              • Sep 2008
              • 1799

              #7
              Originally posted by Mr.Bennet
              Hmm, sorry. I don´t understand what to do... I´m really knew at this.

              I found the code in the postbit.css, but what to do with it?
              Well this is more of a CSS quesiton however since it ties into vBulletin I'll explain a little however some of this you'll need to take a few minutes to learn and understand basic css before you realize how it works ok?

              There are two definitions shown above, the top being the regular button and the the bottom being the button when hovered over.

              This line in each:
              Code:
              background: url({vb:stylevar imgdir_button}/reputation-40b.png) no-repeat {vb:stylevar postbit_control_background} {vb:stylevar left};
              Is how it shows the little Star/Sheriff Badge Image you see for reputation so if you swap out that image for another your new image will now display instead .


              Former vBulletin Support Staff
              Hacked recently? See my blog post "Recovering a Hacked vBulletin Site".
              Thinking outside the box? Need modification support? Visit www.vBulletin.org and have at it!

              Comment

              • Mr.Bennet
                New Member
                • Jun 2012
                • 29

                #8
                Originally posted by TheLastSuperman
                Is how it shows the little Star/Sheriff Badge Image you see for reputation so if you swap out that image for another your new image will now display instead .
                I changed the "/
                reputation-40b.png" picture with my new. But it don´t work. I see the "
                little Star/Sheriff Badge" + the first character of the new image. So the rest is "hidden".

                Comment

                • TheLastSuperman
                  Senior Member
                  • Sep 2008
                  • 1799

                  #9
                  Originally posted by Mr.Bennet
                  I changed the "/
                  reputation-40b.png" picture with my new. But it don´t work. I see the "
                  little Star/Sheriff Badge" + the first character of the new image. So the rest is "hidden".
                  And that image is uploaded to the /buttons/ folder within the /images/ folder on your server correct?

                  i.e. {vb:stylevar imgdir_button} is the folder name that you are saving buttons in so if you only changed the part after {vb:stylevar imgdir_button} which was /reuptation-40b.png YET did not upload your new button to that same folder then it will not show at all unless your in IE then it should show a little red x.


                  Former vBulletin Support Staff
                  Hacked recently? See my blog post "Recovering a Hacked vBulletin Site".
                  Thinking outside the box? Need modification support? Visit www.vBulletin.org and have at it!

                  Comment

                  • Mr.Bennet
                    New Member
                    • Jun 2012
                    • 29

                    #10
                    Hmm. I think i´m getting to it. But still don´t work.

                    I found this path in my ftp:
                    /public_html/forum/images/styles/Aesthetica/buttons
                    I changed the name to: reputationn-40b-hover and reputationn-40b
                    So did I do in the postbit.css and in the postbit_legacy . But I only found "reputation-40b.png" in postib_legacy. So I changed that to "reputationn-40b.png". Now I see the images. But it still looks liket this:
                    http://www.xn--trnasmart-w2a.se/foru...ad.php/2-Test2 (I guess you have to be logged in, but you see the image at the top of this post)
                    As you can see there you see the star as usual. But than you you only see the first character in the new image that I did. What´s next?

                    Comment

                    • TheLastSuperman
                      Senior Member
                      • Sep 2008
                      • 1799

                      #11
                      Originally posted by Mr.Bennet
                      Hmm. I think i´m getting to it. But still don´t work.

                      I found this path in my ftp:
                      /public_html/forum/images/styles/Aesthetica/buttons
                      I changed the name to: reputationn-40b-hover and reputationn-40b
                      So did I do in the postbit.css and in the postbit_legacy . But I only found "reputation-40b.png" in postib_legacy. So I changed that to "reputationn-40b.png". Now I see the images. But it still looks liket this:
                      http://www.xn--trnasmart-w2a.se/foru...ad.php/2-Test2 (I guess you have to be logged in, but you see the image at the top of this post)
                      As you can see there you see the star as usual. But than you you only see the first character in the new image that I did. What´s next?
                      I believe your editing something wrong, either the template itself or the css template but no matter which one you should be able to revert the template to restore it (be careful if it's a custom style and yours does look custom). I recommend you take your time and make these changes, until it's done correctly you will see aesthetic issues and you may want to keep tinkering until you understand how images are defined using css.


                      Former vBulletin Support Staff
                      Hacked recently? See my blog post "Recovering a Hacked vBulletin Site".
                      Thinking outside the box? Need modification support? Visit www.vBulletin.org and have at it!

                      Comment

                      • Mr.Bennet
                        New Member
                        • Jun 2012
                        • 29

                        #12
                        Hmmm, I really don´t know what to do. And i´m actually not interested to learn programming.

                        If I send accountname and password. Could you please help me? It would mean the world to be.

                        + rep for you, because of your resilience in answering.

                        Comment

                        Related Topics

                        Collapse

                        Working...