The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
Prevent Oversized Images Breaking Message Tables & Sigs 2.1 Details »» | |||||||||||||||||||||||||||
Prevent Oversized Images Breaking Message Tables & Sigs 2.1
Developer Last Online: Nov 2023
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 --> Code:
<!-- message --> <div id="post_message_$post[postid]" class="hidemsg">$post[message]</div> <!-- / message --> 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; } 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 --> Code:
<!-- sig --> <div class="hidesig"> __________________<br /> $post[signature] </div> <!-- / sig --> Code:
.hidesig { width:700px; height:400px; overflow:hidden; } *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] Code:
<!-- message --> <div class="hideadvnews"> $news[message] </div> <!-- / message --> Code:
.hideadvnews { width:700px; padding-bottom:20px; overflow:auto; overflow-x:auto; overflow-y:hidden; } --------------------------------- 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> Code:
<if condition="$show['signature']"> <div class="hideadvsig">__________________<br /> $news[signature]</div> </if> Code:
.hideadvsig { width:700px; height:400px; overflow:hidden; } *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
|
Comments |
#22
|
||||
|
||||
Quote:
[high]* MissKalunji clicks installed and satisfied :banana:[/high] |
#23
|
||||
|
||||
Thanks for sharing!
|
#24
|
|||
|
|||
Used it on CMPS newsbit. It seems to overflow the whole message as opposed to just the image. See http://www.aquaticplantcentral.com.
|
#25
|
||||
|
||||
Yup. As I've stated above and in the .txt instructions:
Quote:
|
#26
|
|||
|
|||
Oops! Sorry, should have read more carefully. Thanks.
|
#27
|
||||
|
||||
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..
Quote:
|
#28
|
||||
|
||||
Good work.
For those of you with variable width forums, I would suggest using: Code:
.hideadvnews { width:auto; padding-bottom:20px; overflow:auto; overflow-x:auto; overflow-y:hidden; } |
#29
|
||||
|
||||
does not work here
Code:
/* Here you can change the look of the post text and links */ .hidemsg { width:200px; padding-bottom:20px; overflow:auto; overflow-x:auto; overflow-y:hidden; } .satellite_postbit { color: #283A5E; font: 12px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; text-decoration: none; } .satellite_postbit a:link { color: #8297C8; font: 12px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; text-decoration: none; } .satellite_postbit a:visited { color: #8297C8; font: 12px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; text-decoration: none; } .satellite_postbit a:hover, .satellite_postbit a:active { color: #55C546; font: 12px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; text-decoration: underline; } .satellite_header_bg { background: #FFFFFF url(images/satellite/misc/header_bg.gif) ; } .satellite_inner_border { border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; } .satellite_border_out { border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; } .satellite_cat_spacer { padding:5px 0px 5px 0px; } .satellite_spacer { padding:5px 0px 5px 0px; } .satellite_postbit_spacer { padding:3px 0px 3px 0px; } .satellite_control_nav { color: #FFFFFF; font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; padding: 3px 6px 3px 6px; white-space: nowrap; } .satellite_control_nav a:link { color: #FFFFFF; text-decoration: none; } .satellite_control_nav a:visited { color: #FFFFFF; text-decoration: none; } .satellite_control_nav a:hover, .vbmenu_control_nav a:active { color: #FFFFFF; text-decoration: underline; } div.hr { height: 1px; background: #fff url(images/satellite/misc/hr.gif) repeat scroll center; } div.hr hr { display: none; } .satellite_sticky { background-color: #edf3f9; color: #4D528C; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; } .satellite_lastvisit { background-color: #edf3f9; color: #4D528C; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; } .satellite_announcement { background-color: #edf3f9; color: #4D528C; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; } .satellite_announcement_icon { background-color: #e5eef7; color: #4D528C; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; } .satellite_nav_border { background-color: transparent; border: 1px dotted #feecac; } .satellite_nav { background-color: #feffe6; border: 1px solid #FFFFFF; padding: 4px; } .satellite_icon_legend { background-color: #D1D1E1; color: #000000; border: 1px solid #E3E6E8; } .satellite_inline { background: #283A5E url(images/satellite/gradients/gradient_thead.gif) repeat-x top left; color: #FFFFFF; font: bold 11px tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; padding: 3px 6px 3px 6px; white-space: nowrap; } .satellite_inline a:link { color: #FFFFFF; text-decoration: none; } .satellite_inline a:visited { color: #FFFFFF; text-decoration: none; } .satellite_inline a:hover, .satellite_inline a:active { color: #FFFFFF; text-decoration: underline; } .satellite_footer { background: #DDE0E4 url(images/satellite/misc/footer_links_bg.gif) repeat-x top left; color: #8297C8; font-family: tahoma; } .satellite_footer a:link { color: #FFFFFF; text-decoration: none; } .satellite_footer a:visited { color: #FFFFFF; text-decoration: none; } .satellite_footer a:hover, .satellite_footer a:active { color: #FFFFFF; text-decoration: underline; } .satellite_info { background-color: #F1F4F6; color: #283A5E; padding: 2px; border: 1px inset; margin-bottom: 2px; } /* Start Sub-forums-list in Columns */ .subforum { padding:0; margin: 0; } .subforum li { display:inline; width:170px; float:left; padding-left:0.5em; padding-right:0.5em; } .clear { clear:both; } /* End */ Code:
<!-- post #$post[postid] --> <if condition="$show['spacer']"> $spacer_open <div id="edit$post[postid]" style="padding:0px 0px $stylevar[cellpadding]px 0px"> <if condition="!$post['islastshown']"><!-- this is not the last post shown on the page --></if> </if> <table id="post$post[postid]" class="tborder" cellpadding="0" cellspacing="0" border="0" width="100%" align="center" style="border: 1px solid #D7DCE1"> <tr> <td class="thead" colspan="2"style="font-weight:normal" $post[scrolltothis]> <div class="normal" style="float:$stylevar[right]"> <if condition="$show['postcount']">#<a href="showpost.php?$session[sessionurl]p=$post[postid]&postcount=$post[postcount]" target="new" rel="nofollow" id="postcount$post[postid]" name="$post[postcount]"><strong>$post[postcount]</strong></a></if> <a href="#top" onclick="return toggle_collapse('postbit_$post[postid]')"><img id="collapseimg_postbit_$post[postid]" src="$stylevar[imgdir_button]/collapse_thead$vbcollapse[$collapseimg_postid].gif" alt="" border="0" /></a> </div> <div class="normal"> <a name="post$post[postid]"><img class="inlineimg" src="$stylevar[imgdir_statusicon]/post_$post[statusicon].gif" alt="$post[statustitle]" border="0" /></a> $post[iplogged] <if condition="$show['reputationlink']"><a href="reputation.php?$session[sessionurl]p=$post[postid]" rel="nofollow"><img class="inlineimg" src="$stylevar[imgdir_button]/reputation.gif" alt="<phrase 1="$post[username]">$vbphrase[add_to_xs_reputation]</phrase>" border="0" /></a></if> <if condition="$show['reportlink']"><a href="report.php?$session[sessionurl]p=$post[postid]" rel="nofollow"><img class="inlineimg" src="$stylevar[imgdir_button]/report.gif" alt="$vbphrase[report_bad_post]" border="0" /></a> </if> <if condition="$show['inlinemod']"> <input type="checkbox" name="plist[$postid]" id="plist_$postid" style="vertical-align:middle; padding:0px; margin:0px 0px 0px 5px" value="$post[checkbox_value]" onclick="inlineMod.toggle(this)" /> </if> </div> </td> </tr> <tr id="collapseobj_postbit_$post[postid]" style="{$GLOBALS['vbcollapse']['collapseobj_postbit_' . $post[postid]]};" valign="top"> <td> <table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%"> <tr> <td class="alt2" width="175" valign="top"> <table cellpadding="0" cellspacing="0" border="0" width="175"> <tr> <td> <!-- user info --> <div id="postmenu_$post[postid]"> <if condition="$show['profile']"> <a class="bigusername" href="member.php?$session[sessionurl]u=$post[userid]">$post[musername]</a><!-- v3 Arcade --> <if condition="$post['arcadeawards']"><a class="bigusername" href="member.php?$session[sessionurl]u=$post[userid]"><img src="$vboptions[arcadeimages]/trophy.gif" align="absmiddle" alt="$vbphrase[arcade_champion]" border="0" /></a></if> <!-- /v3 Arcade --> <span class="smallfont">$post[onlinestatus]</span> <script type="text/javascript"> vbmenu_register("postmenu_$post[postid]", true); </script> <else /> $post[musername] </if> </div> <if condition="$post['usertitle']"><div class="smallfont">$post[usertitle]</div></if> <if condition="$post['rank']"><div class="smallfont">$post[rank]</div></if> <if condition="$show['reputation']"><if condition="$show['reppower']">$vbphrase[reppower]: $post[reppower] </if><div><div style="padding:2px 0px 2px 0px;"></div>$post[reputationdisplay]</div></if> <if condition="$show['avatar']"> <br /><a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a></if> <div class="smallfont"> <br /> <div class="satellite_info"><strong>$vbphrase[posts]:</strong> $post[posts] </div> <if condition="$post['joindate']"><div class="satellite_info"><strong>$vbphrase[join_date]:</strong> $post[joindate]</div> </if> <if condition="$post['field2']"><div class="satellite_info"><strong>$vbphrase[location_perm]:</strong> $post[field2]</div> </if> <if condition="$post['age']"><div class="satellite_info"><strong>$vbphrase[age]:</strong> $post[age]</div> </if> <div style="padding:2px 0px 2px 0px;"></div><div>$post[icqicon]$post[aimicon]$post[msnicon]$post[yahooicon]$post[skypeicon]</div> <if condition="$show['warning']"><br /><br /><div class="smallfont">$post[warning]</div></if> </div> <!-- / user info --> </td> </tr> </table> </td> <td class="alt1" width="100%" valign="top"> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td valign="top"> <!-- message, attachments, sig --> <div class="smallfont"> <if condition="$show['messageicon'] OR $post['title']"> <!-- icon and title --> <if condition="$show['messageicon']"><img class="inlineimg" src="$post[iconpath]" alt="$post[icontitle]" border="0" /></if> <if condition="$post['title']"><strong>$post[title]</strong> - </if> <!-- status icon and date --> </if> <if condition="!$show['announcement']"> $post[postdate]<if condition="!$show['detailedtime']">, $post[posttime]</if> <else /> <phrase 1="$post[startdate]" 2="$post[enddate]">$vbphrase[x_until_y]</phrase> </if> $post[firstnewinsert] <!-- / status icon and date --> </div> <div style="padding:3px 0px 3px 0px;"></div><div class="hr"><hr /></div><div style="padding:3px 0px 3px 0px;"></div> <!-- / icon and title --> <!-- message --> <div id="post_message_$post[postid]" class="satellite_postbit" class="hidemsg">$post[message]</div> <!-- / message --> <if condition="$show['attachments']"> <!-- attachments --> <div style="padding:$stylevar[cellpadding]px"> <if condition="$show['thumbnailattachment']"> <fieldset class="fieldset"> <legend>$vbphrase[attached_thumbnails]</legend> <div style="padding:$stylevar[formspacer]px"> $post[thumbnailattachments] </div> </fieldset> </if> <if condition="$show['imageattachment']"> <fieldset class="fieldset"> <legend>$vbphrase[attached_images]</legend> <div style="padding:$stylevar[formspacer]px"> $post[imageattachments] </div> </fieldset> </if> <if condition="$show['imageattachmentlink']"> <fieldset class="fieldset"> <legend>$vbphrase[attached_images]</legend> <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0"> $post[imageattachmentlinks] </table> </fieldset> </if> <if condition="$show['otherattachment']"> <fieldset class="fieldset"> <legend>$vbphrase[attached_files]</legend> <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0"> $post[otherattachments] </table> </fieldset> </if> <if condition="$show['moderatedattachment']"> <fieldset class="fieldset"> <legend>$vbphrase[attachments_pending_approval]</legend> <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0"> $post[moderatedattachments] </table> </fieldset> </if> </div> <!-- / attachments --> </if> <if condition="$post['signature']"> <!-- sig --> <div> <br /><div class="hr" style="width: 100px;"><hr /></div><div style="padding:3px 0px 3px 0px;"></div> $post[signature] </div> <!-- / sig --> </if> <if condition="$show['postedited']"> <!-- edit note --> <div class="smallfont"> <div style="padding:3px 0px 3px 0px;"></div><div class="hr"><hr /></div><div style="padding:3px 0px 3px 0px;"></div> <em> <phrase 1="$post[edit_username]" 2="$post[edit_date]" 3="$post[edit_time]">$vbphrase[last_edited_by_x_on_y_at_z]</phrase>. <if condition="$post['edit_reason']">$vbphrase[reason]: $post[edit_reason]</if> </em> </div> <!-- / edit note --> </if> </td> </tr> </table> </td> </tr> <tr> <td class="alt2" style="border-top: 0px;"> </td> <td class="alt1" style="border-top: 0px;"> <div align="$stylevar[right]"> <!-- controls --> <if condition="$post['editlink']"> <a href="$post[editlink]" name="vB::QuickEdit::$post[postid]"><img src="$stylevar[imgdir_button]/edit.gif" alt="$vbphrase[edit_delete_message]" border="0" /></a> </if> <if condition="$post['forwardlink']"> <a href="$post[forwardlink]"><img src="$stylevar[imgdir_button]/forward.gif" alt="$vbphrase[forward_message]" border="0" /></a> </if> <if condition="$post['replylink']"> <a href="$post[replylink]" rel="nofollow"><img src="$stylevar[imgdir_button]/<if condition="$post['forwardlink']">reply_small<else />quote</if>.gif" alt="$vbphrase[reply_with_quote]" border="0" /></a> </if> <if condition="$show['quickreply'] AND !$show['threadedmode']"> <a href="$post[replylink]" rel="nofollow" id="qr_$post[postid]" onclick="return false"><img src="$stylevar[imgdir_button]/quickreply.gif" alt="$vbphrase[quick_reply_to_this_message]" border="0" /></a> </if> <if condition="$show['moderated']"> <img src="$stylevar[imgdir_misc]/moderated.gif" alt="$vbphrase[moderated_post]" border="0" /> </if> <!-- / controls --> </div> <!-- message, attachments, sig --> </td> </tr> </table> </td> </tr> </table> <!-- post $post[postid] popup menu --> <div class="vbmenu_popup" id="postmenu_$post[postid]_menu" style="display:none"> <table cellpadding="4" cellspacing="1" border="0"> <tr> <td class="thead">$post[username]</td> </tr> <if condition="$show['profile']"> <tr><td class="vbmenu_option"><a href="member.php?$session[sessionurl]u=$post[userid]">$vbphrase[view_public_profile]</a></td></tr> </if> <if condition="$show['pmlink']"> <tr><td class="vbmenu_option"><a href="private.php?$session[sessionurl]do=newpm&u=$post[userid]"><phrase 1="$post[username]">$vbphrase[send_private_message_to_x]</phrase></a></td></tr> </if> <if condition="$show['emaillink']"> <tr><td class="vbmenu_option"><a href="sendmessage.php?$session[sessionurl]do=mailmember&u=$post[userid]" rel="nofollow"><phrase 1="$post[username]">$vbphrase[send_email_to_x]</phrase></a></td></tr> </if> <if condition="$show['homepage']"> <tr><td class="vbmenu_option"><a href="$post[homepage]"><phrase 1="$post[username]">$vbphrase[visit_xs_homepage]</phrase></a></td></tr> </if> <if condition="$show['search']"> <tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=finduser&u=$post[userid]" rel="nofollow"><phrase 1="$post[username]">$vbphrase[find_more_posts_by_x]</phrase></a></td></tr> </if> <if condition="$post['userid'] AND $show['member']"> <tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=addlist&userlist=buddy&u=$post[userid]"><phrase 1="$post[username]">$vbphrase[add_x_to_buddy_list]</phrase></a></td></tr> </if> <!-- v3 Arcade --> <if condition="$post['arcadeawards']"> <tr><td class="thead"><phrase 1="$post[username]">$vbphrase[xs_arcade_awards]</phrase></a></td></tr> $post[arcadeawards] </if> <if condition="($post['arcadeoptions'] & 1) AND $post['userid']!=$bbuserinfo['userid']"> <tr><td class="thead">$vbphrase[arcade]</a></td></tr> <tr><td class="vbmenu_option"><a href="arcade.php?do=newchallenge&userid=$post[userid]"><phrase 1="$post[username]">$vbphrase[challenge_x_in_the_arcade]</phrase></td></tr></if> <!-- /v3 Arcade --> <if condition="$post[usergroupid]!=6 AND $post[usergroupid]!=5 AND $post[usergroupid]!=7 AND can_moderate($forum[forumid], '', $bbuserinfo[userid])"> <tr><td class="vbmenu_option"><span onmouseover="this.style.cursor='hand';" onClick="window.open('/modcp/user.php?do=editsig&userid=$post[userid]','edit','width=500,height=350,scrollbars=yes')"><b>Edit $post[username]'s Signature</b></span></td></tr> </if> <if condition="$post[usergroupid]!=6 AND $post[usergroupid]!=5 AND $post[usergroupid]!=7 AND can_moderate($forum[forumid], '', $bbuserinfo[userid])"> <tr><td class="vbmenu_option"><span onmouseover="this.style.cursor='hand';" onClick="window.open('/modcp/user.php?do=avatar&userid=$post[userid]','edit','width=500,height=350,scrollbars=yes')"><b>Edit $post[username]'s Avatar</b></span></td></tr> </if> <if condition="$post[usergroupid]!=6 AND $post[usergroupid]!=5 AND $post[usergroupid]!=7 AND can_moderate($forum[forumid], '', $bbuserinfo[userid])"> <tr><td class="vbmenu_option"><span onmouseover="this.style.cursor='hand';" onClick="window.open('/modcp/user.php?do=profilepic&userid=$post[userid]','edit','width=500,height=350,scrollbars=yes')"><b>Edit $post[username]'s Profile Picture</b></span></td></tr> </if> </table> </div> <!-- / post $post[postid] popup menu --> <if condition="$show['spacer']"> </div> $spacer_close </if> <!-- / post #$post[postid] --> <if condition="!$GLOBALS['FIRSTPOSTID']"> $spacer_open <div style="padding:0px 0px $stylevar[cellpadding]px 0px"> <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center"> <tr> <td class="thead" align="left">advertisements</td> </tr> <tr> <td class="alt1" align="center"> <table cellspacing="0" width="718" border="0" cellspadding="0"> <tbody> <tr> <!-- begin ad--> <iframe src="postbit.html" frameborder="0" width="735" height="90"></iframe> <!-- end ad--> </td> </tr> </tbody> </table> </td> </tr> </table> </div> $spacer_close </if> |
#30
|
||||
|
||||
You cannot place 2 "class" attributes in a a single div tag. This is what you currently have:
Code:
<!-- message --> <div id="post_message_$post[postid]" class="satellite_postbit" class="hidemsg">$post[message]</div> <!-- / message --> If anything replace it with: Code:
<!-- message --> <div id="post_message_$post[postid]" class="satellite_postbit"><div class="hidemsg">$post[message]</div></div> <!-- / message --> |
#31
|
||||
|
||||
Thank you 007 for sharing that.
|
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|