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.
  #76  
Old 08 May 2006, 19:50
JaniU JaniU is offline
 
Join Date: Mar 2006
Yeah that works, thanks!
Reply With Quote
  #77  
Old 08 May 2006, 21:50
Smiry Kin's's Avatar
Smiry Kin's Smiry Kin's is offline
 
Join Date: Dec 2005
sorry noob question??

whats main CSS?? you on about vbulletin_editor.css?

Last edited by Smiry Kin's; 08 May 2006 at 21:57.
Reply With Quote
  #78  
Old 08 May 2006, 23:50
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
@Smiry Kin's: Main CSS is located in...

Admin CP --> Styles & Templates --> Style Manager --> All Style Options --> Main CSS

Go all the way to the bottom for Additional CSS Definitions.

Originally Posted by kennn


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

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


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

I'm not sure if this is the best way to do it but it works.
Sweet. I did not factor in the private message section of the postbit so thank you kennn for your conditional. I've listed you in the Thank Yous and have linked your conditional in the Optional Modifications letter "D)". :classic:
__________________


Reply With Quote
  #79  
Old 12 May 2006, 22:58
UtahNissans UtahNissans is offline
 
Join Date: May 2006
Another noob question, where is postbit legacy located? Also I added the following to my additional css

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

And the larger images still stretch the window out.
Reply With Quote
  #80  
Old 13 May 2006, 01:46
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
The codes are in two parts for each postbit that you want to control the images in. Without the postbit code it won't work. The CSS you've posted is for vBadvanced CMPS. That code is strictly for the Portal's news section.

For postbit_legacy, in your Admin CP go to:

Styles & Templates --> Style Manager --> All Style Options --> Edit Options --> Postbit Templates --> postbit_legacy

If you still need help let me know and I'll help you through it.
__________________


Reply With Quote
  #81  
Old 13 May 2006, 06:47
UtahNissans UtahNissans is offline
 
Join Date: May 2006
Sweet it works now. The only thing I am confused about is in phpbb2 they had a script that would actually resize teh images automatically and then with the mouse over the image it would show the actual size. Does anyone know how to do that?

Also I seem to just have the scrolling bar. How do I apply example #2 to my site?
Reply With Quote
  #82  
Old 14 May 2006, 01:11
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
There is a mod here that automatically resizes large images based on defined rules but it strains server resources. I think it's in the Code Modifications.

As for example #2, images that are within the width perimeter will post in full while images outside the width perimeter will show a scrollbar or get cut off, depending on the "auto" and "hidden" values.
__________________


Reply With Quote
  #83  
Old 14 May 2006, 21:20
UtahNissans UtahNissans is offline
 
Join Date: May 2006
Well I did input the code already and it creates the scroll bar. If the other method is stressful on the server then I might not want to do that. But right now my board is fairly small and I am given 13GB of tranfer per day. So if I wanted to do it so that the board would resize automatically where would I look?
Reply With Quote
  #84  
Old 14 May 2006, 23:22
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
You can find it here.
__________________


Reply With Quote
  #85  
Old 15 May 2006, 11:45
Aurous Aurous is offline
 
Join Date: Apr 2004
Originally Posted by 007
Good work.

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


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

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

width:auto; only works fine in FireFox. Even 100% doesnt work well in IE. So basically you need to set a width value for IE users.

Last edited by Aurous; 15 May 2006 at 11:47.
Reply With Quote
  #86  
Old 16 May 2006, 01:30
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
That's correct.

While this modification was designed for fixed width layouts various members have offered solutions for fluid layouts. We haven't come across an effective code that warrants me changing the instructions or mod version. If we do then I will send an update via e-mail to all of the members who have cliced the "Install" link.
__________________


Reply With Quote
  #87  
Old 28 May 2006, 16:45
GrendelKhan{TSU's Avatar
GrendelKhan{TSU GrendelKhan{TSU is offline
 
Join Date: Jun 2005
works great!

/me clicks install
__________________
Unreal Addicts: The Ultimate UT Fraggin Fix
Unreal Tournament Sniper Clan and UT Gaming Community.
Serving frags and fun to the UT Community Since 1999
www.UnrealAddicts.com
Reply With Quote
  #88  
Old 29 May 2006, 00:55
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Thank you.
__________________


Reply With Quote
  #89  
Old 18 Jun 2006, 19:07
dwgotz dwgotz is offline
 
Join Date: Jun 2006
Just wanted to post and say this is a fantastic mod
Reply With Quote
  #90  
Old 18 Jun 2006, 21:47
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Thanks for the feedback.
__________________


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

Layout Options | Width: Wide Color: