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
  #12  
Old 03-14-2006, 08:31 PM
MissKalunji's Avatar
MissKalunji MissKalunji is offline
 
Join Date: Aug 2003
Location: Canada
Posts: 2,845
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Nice!
Reply With Quote
  #13  
Old 03-14-2006, 08:31 PM
MissKalunji's Avatar
MissKalunji MissKalunji is offline
 
Join Date: Aug 2003
Location: Canada
Posts: 2,845
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

it would be nice if you put all that in a txt so we can download
Reply With Quote
  #14  
Old 03-14-2006, 08:33 PM
CyberAlien's Avatar
CyberAlien CyberAlien is offline
 
Join Date: Mar 2002
Posts: 438
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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.
Reply With Quote
  #15  
Old 03-14-2006, 08:49 PM
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Posts: 1,552
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by MissKalunji
it would be nice if you put all that in a txt so we can download
I'll work on it.
Reply With Quote
  #16  
Old 03-14-2006, 08:50 PM
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Posts: 1,552
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by CyberAlien
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.

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.
Reply With Quote
  #17  
Old 03-14-2006, 08:58 PM
CyberAlien's Avatar
CyberAlien CyberAlien is offline
 
Join Date: Mar 2002
Posts: 438
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by Freesteyelz
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
Reply With Quote
  #18  
Old 03-14-2006, 09:21 PM
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Posts: 1,552
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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.
Reply With Quote
  #19  
Old 03-14-2006, 10:35 PM
CyberAlien's Avatar
CyberAlien CyberAlien is offline
 
Join Date: Mar 2002
Posts: 438
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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.
Reply With Quote
  #20  
Old 03-14-2006, 11:29 PM
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Posts: 1,552
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Interesting point in which I had not considered. Updating now...
Reply With Quote
  #21  
Old 03-14-2006, 11:43 PM
Freesteyelz's Avatar
Freesteyelz Freesteyelz is offline
 
Join Date: Jan 2006
Posts: 1,552
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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.
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 11:47 PM.


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.04725 seconds
  • Memory Usage 2,312KB
  • Queries Executed 25 (?)
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
  • (12)bbcode_code
  • (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
  • (3)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_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