Prevent Oversized Images Breaking Message Tables & Sigs 2.1
 

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)

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

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 https://vborg.vbsupport.ru/ if you use it. :)

Finished!


*For those of you who use a fluid layout take a look at this post. 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.

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

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.

Finished (Once More)!

7. Click https://vborg.vbsupport.ru/ if you use it. :)

yaaayy!! I've been looking for a 3.5.4 compatible resizer lately and couldn't find one...and this one, with the scroll bar is very interesting

Will check it out now

simply a good idea for fixed width skin...:)
will that cut-off the image or re-size?
my bad luck...abt browser..hope it mite work on opera too
what will it do?

Excellent!!! With vb 3.5 i don't like to edit php files... so your Template modification is perfect for me!!

Yup. I too don't like editing .php files. :)

It does neither. Basically the code adds a horizontal bar in a post with oversized images using the "auto" value. If you want to simply cut off the image just replace "auto" with "hidden". As for Opera, I don't know. My guess is CSS strict compliant browsers will render the code properly.

An example is provided in my first post just in case you didn't see it. :)

Be great if you could get this to work for vBA CMPS portal. Nice hack in any event.

wow! this is great .. now i can set a larger size for images and it wont break the margins.. sweet!

/me clicks install

Installified!

Installed and works a treat, well done.

Laters

Thank you again for the feedback and support everyone! :)

Ask and shall receive. Updated above are the optional codes. :banana:

Optional Modifications Added (3.14.06)!:

1. Signature (Cuts off oversized signatures in message bits by width & height.)

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

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

Nice!

it would be nice:) if you put all that in a txt so we can download

You should use "class", not "id" for those <div> elements. That template is repeated for every post, so you'll have several divs with same id but every id should be unique so your code isn't correct. And you don't need additional div at all - just add class to existing div.

I'll work on it. :)

Each ID is unique. Only the front name "hide" remains the same. The reason I didn't use class is that some users, like myself, add additional (and/or common) values to the existing <div> element (e.g., <div id="hidemsg" class="whatever">). The way this modification was written, each modification is independent from one another. This gives the user full control how he/she want to display the messages, signatures, vBadvanced messages and vBadvanced signatures. I just copied and pasted lines of code to make it simple to understand. So the codes are correct.

In the CSS rule, "ID's" can be repeated but "class" cannot within an element.

You are confusing those parameters. "class" can be repeated as many times as you want, "id" must be unique per document.
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

That's not quite what I meant but I see where you're coming from. In W3C standards you can list similiar ID's such as (e.g., hide1, hide2, hide3, etc...) in the same document. The reason for this is to separate each one from one another. The class element brings common attributes/values into the unique ID's. That's where redundancy of the "class" is usefull.

In the modification I chose (ID's): hidemsg, hidesig, hideadvnews, hideadvsig. All in which are unique. I can now add "class" into the element if I chose to. To test, give each of the 4 modification different values. They will all behave independently from one another. :)

That template is used for every post in thread, so those ids are repeated as many times as many posts are shown, so ids are not unique.

Interesting point in which I had not considered. Updating now...

Thank you CyberAlien for sticking with me on this mod. I've made the corrections on both install instructions. :)

*I sent an update to those who've installed this mod prior to the change.

Well thank you :)

[high]* MissKalunji clicks installed and satisfied :banana:[/high]

Thanks for sharing!

Used it on CMPS newsbit. It seems to overflow the whole message as opposed to just the image. See http://www.aquaticplantcentral.com.

Yup. As I've stated above and in the .txt instructions:

Normal messages won't be affected, only those with oversized images. :)

Oops! Sorry, should have read more carefully. Thanks.

Freesteyelz.. I got a problem.. Abt template edit.. O'm using vBStyle's Element skin.. Whn I go for edit the postbit template.. I allready found a class code..

Wht should i do now? Gimmi appropriate code plz..

Good work.

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

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

does not work here

and

any clue?

You cannot place 2 "class" attributes in a a single div tag. This is what you currently have:


If anything replace it with:

Thank you 007 for sharing that. :)

Did not work !!!

On your forum or mine?

Last night and earlier this morning I was changing the templates and only now I re-added the code. Check again and see.

managed to fix, i was using a template cache system hack, i cleared the cache and it fixed it ;)

at first, sorry for bad english...iam from bavaria

the sig limits break the center tag, when i using the code for limit the sig, the center code in the sigs dont work

what can i do?

KaneLX

mentalrz: Glad you got it to work. :)

KaneLX: Please post the code bit so I can try to duplicate your problem.

Ok, here ist the postbit legacy


Without the <div class="hidesig">, Center was work fine...

Greets from bavaria

KaneLX

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:

With:

And replace:

With:

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. :)

Wow. super service.....:up:

Yes, that works:up:

thanks

greets

KaneLX

Glad it's working. :)

This works great,

Thanks Freesteyelz