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 |
#32
|
||||
|
||||
Did not work !!!
|
#33
|
||||
|
||||
On your forum or mine?
Last night and earlier this morning I was changing the templates and only now I re-added the code. Check again and see. |
#34
|
||||
|
||||
managed to fix, i was using a template cache system hack, i cleared the cache and it fixed it
|
#35
|
|||
|
|||
at first, sorry for bad english...iam from bavaria
the sig limits break the center tag, when i using the code for limit the sig, the center code in the sigs dont work what can i do? KaneLX |
#36
|
||||
|
||||
mentalrz: Glad you got it to work.
KaneLX: Please post the code bit so I can try to duplicate your problem. |
#37
|
|||
|
|||
Ok, here ist the postbit legacy
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="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%" align="center"> <tr> <if condition="$show['announcement']"> <td class="thead" style="font-weight:normal" colspan="2"> <img class="inlineimg" src="$stylevar[imgdir_statusicon]/post_$post[statusicon].gif" alt="$post[statustitle]" border="0" /> <phrase 1="$post[startdate]" 2="$post[enddate]">$vbphrase[x_until_y]</phrase> </td> <else /> <td class="thead" style="font-weight:normal" $post[scrolltothis]> <!-- status icon and date --> <a name="post$post[postid]"><img class="inlineimg" src="$stylevar[imgdir_statusicon]/post_$post[statusicon].gif" alt="$post[statustitle]" border="0" /></a> $post[postdate]<if condition="!$show['detailedtime']">, $post[posttime]</if> $post[firstnewinsert] <!-- / status icon and date --> </td> <td class="thead" style="font-weight:normal" align="$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> <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> </td> </if> </tr> <tr valign="top"> <td class="alt2" width="175"> <div id="postmenu_$post[postid]"> <if condition="$show['profile']"> <a class="bigusername" href="member.php?$session[sessionurl]u=$post[userid]">$post[musername]</a> <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['isstaffrank']"> <div class="smallfont"> <if condition="$post['staffrank_opentag']">$post[staffrank_opentag]</if> <if condition="$post['staffrank']">$post[staffrank]</if> <if condition="$post['staffrank_closetag']">$post[staffrank_closetag]</if> </div> </if> <if condition="$post['stars']"><div class="smallfont"><phrase 1="$post[stars]">$vbphrase[stars_name_x]</phrase></div></if> <if condition="$post['rank']"><div class="smallfont">$post[rank]</div></if> <if condition="$show['avatar']"> <div class="smallfont"> <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> </div> </if> <div class="smallfont"> <br /> <if condition="$show['last_seen_online']"><div>$vbphrase[last_seen_online]: $post[lastseen_date] $post[lastseen_time]</div></if> <if condition="$post['joindate']"><div>$vbphrase[join_date]: $post[joindate]</div></if> <if condition="$post['field2']"><div>$vbphrase[location_perm]: $post[field2]</div></if> <if condition="$post['age']"><div>$vbphrase[age]: $post[age]</div></if> <div> </div> <if condition="$show['reputation']"><div><if condition="$show['reppower']">$vbphrase[reppower]: $post[reppower]</if>$post[reputationdisplay]</div></if> <div>$post[icqicon] $post[aimicon] $post[msnicon] $post[yahooicon] $post[skypeicon]</div> </div> </td> <if condition="$show['moderated']"> <td class="alt2" id="td_post_$post[postid]"> <else /> <td class="alt1" id="td_post_$post[postid]"> </if> <if condition="$show['messageicon'] OR $post['title']"> <!-- icon and title --> <div class="smallfont"> <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> </div> <hr size="1" style="color:$stylevar[tborder_bgcolor]" /> <!-- / icon and title --> </if> <!-- message --> <div id="post_message_$post[postid]">$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 class="hidesig"> __________________<br /> $post[signature] </div> <!-- / sig --> </if> <if condition="$show['postedited']"> <!-- edit note --> <div class="smallfont"> <hr size="1" style="color:$stylevar[tborder_bgcolor]" /> <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> <tr> <td class="alt2"> $post[onlinestatus] <if condition="$show['reputationlink']"><a href="reputation.php?$session[sessionurl]p=$post[postid]" rel="nofollow"><img class="inlineimg" src="$stylevar[imgdir_button]/reputation.gif" border="0" alt="<phrase 1="$post[username]">$vbphrase[add_to_xs_reputation]</phrase>" /></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> $post[iplogged] </td> <if condition="$show['moderated']"> <td class="alt2" align="$stylevar[right]"> <else /> <td class="alt1" align="$stylevar[right]"> </if> <!-- 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 --> </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]" rel="nofollow"><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> <if condition="$show['btu_canban']"> <if condition="!isset($btu[$post[threadid]][$post[userid]])"> <tr><td class="vbmenu_option"><a href="postings.php?$session[sessionurl]do=btu_ban&t=$post[threadid]&u=$post[userid]">$vbphrase[btu_ban]</a></td></tr> <else /> <tr><td class="vbmenu_option"><a href="postings.php?$session[sessionurl]do=btu_ban&t=$post[threadid]&u=$post[userid]">$vbphrase[btu_unban]</a></td></tr> </if> </if> </table> </div> <!-- / post $post[postid] popup menu --> <if condition="$show['spacer']"> </div> $spacer_close </if> <!-- / post #$post[postid] --> Without the <div class="hidesig">, Center was work fine... Greets from bavaria KaneLX |
#38
|
||||
|
||||
The center tag still works, but the way the signature displays will be relative to the overall width message settings. For example, if your message width is 700px and your signature limit is 500px the signature content will naturally shift over to the left. You can, however, with the use of "margin" set it so that the signature row will be positioned in the center. Try this:
Replace: Code:
<!-- sig --> <div class="hidesig"> __________________<br /> $post[signature] </div> <!-- / sig --> Code:
<!-- sig --> __________________<br /> <div class="hidesig"> $post[signature] </div> <!-- / sig --> Code:
.hidesig { width:700px; height:400px; overflow:hidden; } Code:
.hidesig { width:700px; height:400px; margin:auto; border:1px #000000 solid; overflow:hidden; } See if that helps. |
#39
|
|||
|
|||
Quote:
Yes, that works:up: thanks greets KaneLX |
#40
|
||||
|
||||
Glad it's working.
|
#41
|
|||
|
|||
This works great,
Thanks Freesteyelz |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|