Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
Prevent Oversized Images Breaking Message Tables & Sigs 2.1 Details »
Prevent Oversized Images Breaking Message Tables & Sigs 2.1
Mod Version: 2.1, by Freesteyelz (Member) Freesteyelz is offline
Developer Last Online: Apr 2010 I like it Show Printable Version Email this Page

This modification is in the archives.
vB Version: 3.5.3 Rating: (0 vote - 0 average) Installs: 125
Released: 14 Mar 2006 Last Update: 15 Mar 2006 Downloads: 65
Not Supported Template Edits  

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace it with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

3. Click "Save".

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace it with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace it with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace it with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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 if you use it.

Download Now

Only licensed members can download files, Click Here for more information.

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
  #46  
Old 08 Apr 2006, 21:22
Herc Herc is offline
 
Join Date: Nov 2003
Thanks, definitely one of the best mods
Reply With Quote
  #47  
Old 08 Apr 2006, 21:35
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Thanks, Herc.

Originally Posted by Dennis B
Excellent, thanks!

PS: The "fluid" version in post #27 does not work in IE for me, so I kept the original version.
In post #27 it was suggested to use "auto" for width. See if "100%" works instead.
Reply With Quote
  #48  
Old 08 Apr 2006, 21:43
RDX1 RDX1 is offline
 
Join Date: Apr 2002
Thanks! Installed.
Reply With Quote
  #49  
Old 08 Apr 2006, 22:23
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Thanks, RDX1.
Reply With Quote
  #50  
Old 09 Apr 2006, 21:00
tonym's Avatar
tonym tonym is offline
 
Join Date: Mar 2006
Arrow Thanks

Thanks for sharin your work!!!!:banana:
Reply With Quote
  #51  
Old 09 Apr 2006, 21:28
COBRAws's Avatar
COBRAws COBRAws is offline
 
Join Date: Oct 2002
Real name: Jack
Is there a way so scrollbars wont apear, and just resize the images? Thank you
Reply With Quote
  #52  
Old 09 Apr 2006, 22:30
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
COBRAws: Not with this mod. You can find what you're looking for in the Code Modifications.

tonym: NP.
__________________


Reply With Quote
  #53  
Old 10 Apr 2006, 02:53
Xplorer4x4 Xplorer4x4 is offline
 
Join Date: Apr 2005
Real name: Call me X
This is great, thanks
Reply With Quote
  #54  
Old 11 Apr 2006, 03:51
beano33 beano33 is offline
 
Join Date: Feb 2003
Is it possible to have a vertical scrollbar as well? It's annoying when someone posts a 1000px image.
Reply With Quote
  #55  
Old 11 Apr 2006, 04:16
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
beano33: Sure, the mod is quite flexible. As in the example of the sig mod, just add the "height" attribute and remove "overflow-x" and "overflow-y" such as:

Replace:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

With:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Just change the width and height values of "700px" to whatever you want.

*The only reason I did not set a height limit is because there will be some posts that will be extensively long which are valid such as articles, tutorials and reviews. See, both image and text will be affected in the post that is being enforced.



Xplorer4x4: Thanks for the support.
__________________


Reply With Quote
  #56  
Old 11 Apr 2006, 14:06
dbembibre's Avatar
dbembibre dbembibre is offline
 
Join Date: Oct 2004
Real name: Daniel
Sorry to say that this dont work if you have more that one image oversized in the same post only the last image has scrollbar
Reply With Quote
  #57  
Old 11 Apr 2006, 22:39
beano33 beano33 is offline
 
Join Date: Feb 2003
Originally Posted by Freesteyelz
[b]
*The only reason I did not set a height limit is because there will be some posts that will be extensively long which are valid such as articles, tutorials and reviews. See, both image and text will be affected in the post that is being enforced.



Xplorer4x4: Thanks for the support.
I gave it a shot but it enlarged the body of the post to whatever I set to its minimum height, so one line would still end up occupying the space of a 400px image. I also wasn't able to overcome the problems others have encountered with IE to use it on auto. I looked into ways to solve that, but it involves adding javascript to trick IE into using CSS max-width settings. Obviously that's something people interested in a simple template hack would like to avoid.

Anyway, I ended up creating a new bbcode based on this thread to deal with oversized images:
http://www.vbulletin.org/forum/showthread.php?t=94250
Reply With Quote
  #58  
Old 12 Apr 2006, 00:01
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Originally Posted by dbembibre
Sorry to say that this dont work if you have more that one image oversized in the same post only the last image has scrollbar
It should work as indicated in the second post. The code is designed to wrap the entire post and display properly in IE and Firefox.

Can you please send a screenshot, the codes and the browser so I can try and duplicate your problem?
__________________


Reply With Quote
  #59  
Old 12 Apr 2006, 00:07
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Originally Posted by beano33
I gave it a shot but it enlarged the body of the post to whatever I set to its minimum height, so one line would still end up occupying the space of a 400px image. I also wasn't able to overcome the problems others have encountered with IE to use it on auto. I looked into ways to solve that, but it involves adding javascript to trick IE into using CSS max-width settings. Obviously that's something people interested in a simple template hack would like to avoid.

Anyway, I ended up creating a new bbcode based on this thread to deal with oversized images:
http://www.vbulletin.org/forum/showthread.php?t=94250

Hmm. I'll look into it and post back with an update. My test will be exclusive to fluid width layouts.
__________________


Reply With Quote
  #60  
Old 13 Apr 2006, 20:26
Dennis B's Avatar
Dennis B Dennis B is offline
 
Join Date: Jul 2002
Originally Posted by Freesteyelz
In post #27 it was suggested to use "auto" for width. See if "100%" works instead.
No, unfortunately "100%" does not work in IE either.
Also, a fixed width of "700px" messes up my PMs.

For now I'm using "100%", at least my FF users are happy and the IE users still get the same as before.
__________________
Dennis
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 19:19.

Layout Options | Width: Wide Color: