digitalFAQ.com Forum - Add space above signature in vBulletin, solve other signature problems with CSS

By default, vBulletin doesn't make very good use of "white space" (or "blank space"). Everything tends to be crammed together, and certain elements of the site run on without logical separation. The fix for this is to use some template edits.

I just now changed my signature here on this site, and didn't like how close it was getting to the post content. So a template change was in order. This problem was easily fixed by adding some inline CSS to the vBulletin style.

Go to your vBulletin admin panel -- yourforumurl/admincp, unless you changed it (which is SUGGESTED FOR SECURITY!) Anyway...

Admin CP
- Styles & Templates
  - Style Manager
    - Edit Templates
      - Postbit Templates
        postbit AND/OR postbit_legacy (it varies from template to template)

HTML Code:

<if condition="$post['signature']">

        <!-- sig -->

            <div>

                __________________<br />

                $post[signature]

            </div>

        <!-- / sig -->

        </if>

And then add in some basic inline CSS for a new margin. There's already a div for us to work with, so this change is super simple to make.

Change the code to:

HTML Code:

        <if condition="$post['signature']">

        <!-- sig -->

            <div style="margin: 10px 0 0 0;">

               __________________<br />

                $post[signature]

            </div>

        <!-- / sig -->

        </if>

Notice that all I did was add this inside the first div:

PHP Code:


		
			
style="margin: 10px 0 0 0;"

That's it. You can change that to more/less pixels if you want, but that's all that's needed.

If for some reason you'd like to space get some space on the left (an indentation of the signature), simply add a value into the fourth spot (left margin):

PHP Code:


		
			
style="margin: 10px 0 0 25px;"

That can even further offset the signature from the posted content.

If you don't quite understand the margin CSS, and what those numbers are, it's easy:

margin: top right bottom left;
px = pixels

If signature size is a problem (people adding big dumb images, using various workarounds that side-step your user roles/permissions options), add more CSS and size the signature space properly. It will then crop anybody's overly large signatures.

PHP Code:


		
			
style="margin: 10px 0 0 0; width: 850px; height: 60px; overflow:hidden;"

You may need to resize the pixel width based off your own forum style's dimensions. The values here are simply what would work on digitalFAQ.com/forum.

They may be able to add too much, but you can certainly prevent the site from displaying what they've added!

And if you don't like the line that is added above the signature, you can remove it or replace it with other code. You can replace it with an image, with other text, make the liner longer, etc. What you do here is completely up to the preference of your and/or your site members (NEVER FORGET THE PREFERENCES OF YOUR MEMBERS -- THEY ARE MORE IMPORTANT THAN YOU ARE !)

Hope that helps! :)