Go Back   vb.org Archive > vBulletin Modifications > Archive > vB.org Archives > vBulletin 3.5 > vBulletin 3.5 Template Modifications

Reply
 
Thread Tools
Prevent Oversized Images Breaking Message Tables & Sigs 2.1 Details »»
Prevent Oversized Images Breaking Message Tables & Sigs 2.1
Version: 2.1, by Freesteyelz Freesteyelz is offline
Developer Last Online: Nov 2023 Show Printable Version Email this Page

Version: 3.5.3 Rating:
Released: 03-13-2006 Last Update: 03-14-2006 Installs: 125
Template Edits
 
No support by the author.

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:

Code:
  <!-- message -->
  <div id="post_message_$post[postid]">$post[message]</div>
  <!-- / message -->
Replace it with:

Code:
  <!-- message -->
  <div id="post_message_$post[postid]" class="hidemsg">$post[message]</div>
  <!-- / message -->
3. Click "Save".

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

Code:
.hidemsg  {
  width:700px;
  padding-bottom:20px;
  overflow:auto;
  overflow-x:auto;
  overflow-y:hidden;
  }
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:

Code:
  <!-- sig -->
   <div>
    __________________<br />
    $post[signature]
   </div>
  <!-- / sig -->
Replace it with:

Code:
  <!-- sig -->
   <div class="hidesig">
    __________________<br />
    $post[signature]
   </div>
  <!-- / sig -->
4. In Main CSS go to the bottom at Additional CSS Definitions and add code bit:

Code:
.hidesig  {
  width:700px;
  height:400px;
  overflow:hidden;
  }
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:

Code:
  $news[message]
Replace it with:

Code:
  <!-- message -->
                <div class="hideadvnews">
  $news[message]
                </div>
  <!-- / message -->
4. In Main CSS go to the bottom at Additional CSS Definitions and add code bit:

Code:
.hideadvnews {
  width:700px;
  padding-bottom:20px;
  overflow:auto;
  overflow-x:auto;
  overflow-y:hidden;
  }
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:

Code:
  <if condition="$show['signature']">
  <div>__________________<br />
  $news[signature]</div>
  </if>
Replace it with:

Code:
  <if condition="$show['signature']">
  <div class="hideadvsig">__________________<br />
  $news[signature]</div>
  </if>
4. In Main CSS go to the bottom at Additional CSS Definitions and add code bit:

Code:
.hideadvsig  {
  width:700px;
  height:400px;
  overflow:hidden;
  }
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.

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.

Comments
  #72  
Old 05-03-2006, 03:37 AM
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Posts: 1,552
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

You're correct Kenn in that multiple classes can be done by placing a space between them. The problem, however, is that not all browsers will render it the same way (one reference is with IE 6 and IE 7); I'm referring to cross-variables and inheritance. Since I did not know what was contained in "satellite_postbit" the safer route was to use two <div> tags.

My statement was a bit misleading so I thank you for the clarification. Ohh and thank your for clicking "Install".
Reply With Quote
  #73  
Old 05-03-2006, 04:41 AM
kennn kennn is offline
 
Join Date: Mar 2006
Location: Cumberland, Maryland, USA
Posts: 21
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Freesteyelz
You're correct Kenn in that multiple classes can be done by placing a space between them. The problem, however, is that not all browsers will render it the same way (one reference is with IE 6 and IE 7); I'm referring to cross-variables and inheritance. Since I did not know what was contained in "satellite_postbit" the safer route was to use two <div> tags. My statement was a bit misleading so I thank you for the clarification.
Good point. I just thought I'd bring up that FYI as a lot of people don't realize you can list multiple classes like that. I know I was using CSS for a couple years before I discovered that "trick." I have three vbStyle skins myself (Element, Satellite and Aria) and they each use an additional class to set off the post text for formatting (which is a good idea and something I routinely add to my other skins). When I installed your hack, I just added your hidemsg class to the one that was already in there and it works like a charm.

Quote:
Originally Posted by Freesteyelz
Ohh and thank your for clicking "Install".
You're most welcome!
Reply With Quote
  #74  
Old 05-03-2006, 05:54 AM
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Posts: 1,552
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Yup. I need to be careful with my choice of wording (and spelling).

There's a powerful quality with CSS and like yourself I'm constantly finding new ways of implementing it. I'm glad to see another user who appreciates CSS and customizes it to suit his/her needs. :classic:
Reply With Quote
  #75  
Old 05-08-2006, 05:02 PM
JaniU JaniU is offline
 
Join Date: Mar 2006
Location: FINLAND
Posts: 5
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hey, this works just great in normal posts but it messes up the private messages. I have only modded the postpit legacy and added the css. It streches all private messages even though there is no pictures in them. First I didn't believe it was because of this, but after removing the CSS all pm's showed fine again... and put it back and again they streched, probably to the width set in the css.

Any ideas??
Reply With Quote
  #76  
Old 05-08-2006, 05:16 PM
kennn kennn is offline
 
Join Date: Mar 2006
Location: Cumberland, Maryland, USA
Posts: 21
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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.
Reply With Quote
  #77  
Old 05-08-2006, 06:50 PM
JaniU JaniU is offline
 
Join Date: Mar 2006
Location: FINLAND
Posts: 5
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Yeah that works, thanks!
Reply With Quote
  #78  
Old 05-08-2006, 08:50 PM
Smiry Kin's's Avatar
Smiry Kin's Smiry Kin's is offline
 
Join Date: Dec 2005
Location: United Kingdom!
Posts: 954
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

sorry noob question??

whats main CSS?? you on about vbulletin_editor.css?
Reply With Quote
  #79  
Old 05-08-2006, 10:50 PM
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Posts: 1,552
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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

Quote:
Originally Posted by kennn

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.
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
  #80  
Old 05-12-2006, 09:58 PM
UtahNissans UtahNissans is offline
 
Join Date: May 2006
Posts: 27
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Another noob question, where is postbit legacy located? Also I added the following to my additional css
PHP Code:
.hideadvnews {
  
width:auto;
  
padding-bottom:20px;
  
overflow:auto;
  
overflow-x:auto;
  
overflow-y:hidden;
  } 
And the larger images still stretch the window out.
Reply With Quote
  #81  
Old 05-13-2006, 12:46 AM
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Posts: 1,552
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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
Reply

Thread Tools

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

Forum Jump


All times are GMT. The time now is 04:46 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05031 seconds
  • Memory Usage 2,336KB
  • Queries Executed 27 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (16)bbcode_code
  • (1)bbcode_php
  • (3)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (6)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (4)pagenav_pagelink
  • (11)post_thanks_box
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete