vBulletin LTS

Prevent Oversized Images Breaking Message Tables & Sigs 2.1
Mod Version: 2.1, by Freesteyelz

Description: Using the CSS "overflow" attribute you can prevent large images from breaking your message column. This helps extremely for the people who use fixed widths. Images that display larger than the message column width will show a horizontal bar.

But it has already been done: Yes, but the other (non) CSS methods affect the overall performance of the forum. The CSS method previously provided required editing a .php file. Plus, in Internet Explorer both the horizontal and vertical scrollbar displayed. This method eliminates the vertical scrollbar. The modification only requires editing the postbit and/or postbit_legacy template and Main CSS.

What else to expect: The horizontal scrollbar will affect the entire post of the oversized image. That's the nature of the modification. No biggie.

Targeted Layout Type: Fixed width layout

Browsers tested: Internet Explorer and Firefox

Compatible vB versions: 3.5.3, 3.5.4, 3.5.5 and 3.6+

Thank yous: CyberAlien (Correction on ID to Class); kennn (PM resize - conditional code below)



Optional Modifications Added (3.14.06)!:
A) Signature (Cuts off oversized signatures in message bits by width & height.)

B) vBadvanced Newsbit (Same like the original, just with vBadvanced.)

C) vBadvanced Newsbit Signatures (Same like the original signature mod, just with vBadvanced.)

D) Private Message conditional posted by kennn (click here to post

Spoiler (click to open)

I ran into this, too. My first thought was to change width to auto, which seemed to work fine for any skin no matter how wide or narrow the post area and also for PMs but then I tried it in IE and discovered that, without a specific pixel width declared, IE does not display a scrollbar and merely pushes the post area wider.

What I then did was go back to using an actual pixel width (which I also discovered needs to be figured out individually per skin or things like CENTER tags do not look centered) and then added the conditional around class shown below...

Code:

<div id="post_message_$post[postid]" class="someclassname<if condition="THIS_SCRIPT != 'private'"> hidemsg</if>">$post[message]</div>

Note, that I already had a class in there so I wrapped the second hidemsg class in the if conditional to add it in only if not in a "private" area. I cannot take credit for that conditional, btw. I found that on the joindays hack because it also does not work properly in the PM area.

If you do not already have a class in there, it would look like this...

Code:

<div id="post_message_$post[postid]"<if condition="THIS_SCRIPT != 'private'"> class="hidemsg"</if>>$post[message]</div>

I'm not sure if this is the best way to do it but it works.

Close

)

-----------------

Finally, let's edit!
(Or you can download the .txt file for the installation instructions)

1. Back up your templates!

2. In your postbit or postbit_legacy template find this or something similar to:

Replace it with:

3. Click "Save".

4. In Main CSS go to the bottom at Additional CSS Definitions and add code bit:

5. Change the width "700px" to whatever you want. All other settings keep.

6. Click "Save".

7. Click if you use it.

Finished!


*For those of you who use a fluid layout take a look at this post

Spoiler (click to open)

Good work.

For those of you with variable width forums, I would suggest using:

Code:

.hideadvnews {
  width:auto;
  padding-bottom:20px;
  overflow:auto;
  overflow-x:auto;
  overflow-y:hidden;
  }

By setting the width to auto it will automatically adjust to fit the length of your screen.

Close

. Thanks 007 for sharing.


=====================

Optional Modifications (Below)!!!:

*The 3 (A, B & C) optional modifications below follow the same steps as above with the exception of #2, #4 and #5.

A) For Signatures (Hide Oversized Images width & height):

2. In your postbit or postbit_legacy template find this or something similar to:

Replace it with:

4. In Main CSS go to the bottom at Additional CSS Definitions and add code bit:

5. Change the width "700px" and height "400px" to whatever you want. Signatures (text or image) that exceed either width or height limit will be cut off. This code does not affect the message Table. Keep the remaining codes the same.

*If the center tag doesn't work in the signature after implementing the code above see this post for the solution

Spoiler (click to open)

The center tag still works, but the way the signature displays will be relative to the overall width message settings. For example, if your message width is 700px and your signature limit is 500px the signature content will naturally shift over to the left. You can, however, with the use of "margin" set it so that the signature row will be positioned in the center. Try this:

Replace:

Code:

  <!-- sig -->
   <div class="hidesig">
    __________________<br />
    $post[signature]
   </div>
  <!-- / sig -->

With:

Code:

  <!-- sig -->
    __________________<br />
   <div class="hidesig">
    $post[signature]
   </div>
  <!-- / sig -->

And replace:

Code:

.hidesig  {
  width:700px;
  height:400px;
  overflow:hidden;
  }

With:

Code:

.hidesig  {
  width:700px;
  height:400px;
  margin:auto;
  border:1px #000000 solid;
  overflow:hidden;
  }

Keep "border:1px #000000 solid;" for now and see the result. While all of the users' signatures will appear centered, left aligned signatures should be flushed to the left border and right aligned signatures should be flushed to the right border. When you're done just remove "border:1px #000000 solid;".

See if that helps.

Close

.

---------------------------------

B) For vBAdvanced Newsbits:

2. In your vBadvanced CMPS Templates --> adv_portal_newsbits template find this or something similar to:

Replace it with:

4. In Main CSS go to the bottom at Additional CSS Definitions and add code bit:

5. Change the width "700px" to whatever you want. All other settings keep.

---------------------------------

C) For vBAdvanced Newsbits (Signature):

2. In your vBadvanced CMPS Templates --> adv_portal_newsbits template find this or something similar to:

Replace it with:

4. In Main CSS go to the bottom at Additional CSS Definitions and add code bit:

5. Change the width "700px" and height "400px" to whatever you want. Signatures (text or image) that exceed either width or height limit will be cut off. This code does not affect the vBadvanced message Table. Keep the remaining codes the same.

*If the center tag doesn't work in the signature after implementing the code above see this post for the solution

Spoiler (click to open)

The center tag still works, but the way the signature displays will be relative to the overall width message settings. For example, if your message width is 700px and your signature limit is 500px the signature content will naturally shift over to the left. You can, however, with the use of "margin" set it so that the signature row will be positioned in the center. Try this:

Replace:

Code:

  <!-- sig -->
   <div class="hidesig">
    __________________<br />
    $post[signature]
   </div>
  <!-- / sig -->

With:

Code:

  <!-- sig -->
    __________________<br />
   <div class="hidesig">
    $post[signature]
   </div>
  <!-- / sig -->

And replace:

Code:

.hidesig  {
  width:700px;
  height:400px;
  overflow:hidden;
  }

With:

Code:

.hidesig  {
  width:700px;
  height:400px;
  margin:auto;
  border:1px #000000 solid;
  overflow:hidden;
  }

Keep "border:1px #000000 solid;" for now and see the result. While all of the users' signatures will appear centered, left aligned signatures should be flushed to the left border and right aligned signatures should be flushed to the right border. When you're done just remove "border:1px #000000 solid;".

See if that helps.

Close

.

Finished (Once More)!

7. Click if you use it.