vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 3.5 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=155)
-   -   Prevent Oversized Images Breaking Message Tables & Sigs 2.1 (https://vborg.vbsupport.ru/showthread.php?t=110310)

lordofgun 03-18-2006 01:45 PM

Only installed the signature portion because the rest screwed up my showthread.

changed to:

Code:

.hidesig  {
  width:700px;
  height:400px;
  overflow:auto;
  }

and it works great. I like scrollbars.

Am I still allowed to click install? :D

Freesteyelz 03-18-2006 10:30 PM

Sure. :)

How did it affect your Showthread?

Mike Blitz 04-04-2006 11:21 AM

it did the same thing to mine

stretched it out so far even when I took out the code it was still messed up

I only tested it on default anyway so just reverted it

and is there anyway to have scrolling bars with the hide sig, not sure if it was suppost to be in there already or not

Freesteyelz 04-07-2006 07:41 AM

To have scrolling in sigs just replace "hidden" with "auto".

With reference to the stretching I'll need to see a screenshot of the problem and the code bit(s) used. It shouldn't have done that.

Dennis B 04-08-2006 02:42 PM

Excellent, thanks!

PS: The "fluid" version in post #27 does not work in IE for me, so I kept the original version.

Herc 04-08-2006 08:22 PM

Thanks, definitely one of the best mods;)

Freesteyelz 04-08-2006 08:35 PM

Thanks, Herc. :)

Quote:

Originally Posted by Dennis B
Excellent, thanks!

PS: The "fluid" version in post #27 does not work in IE for me, so I kept the original version.

In post #27 it was suggested to use "auto" for width. See if "100%" works instead.

RDX1 04-08-2006 08:43 PM

Thanks! Installed.

Freesteyelz 04-08-2006 09:23 PM

Thanks, RDX1. :)

tonym 04-09-2006 08:00 PM

Thanks for sharin your work!!!!:banana:

COBRAws 04-09-2006 08:28 PM

Is there a way so scrollbars wont apear, and just resize the images? Thank you

Freesteyelz 04-09-2006 09:30 PM

COBRAws: Not with this mod. You can find what you're looking for in the Code Modifications.

tonym: NP. :)

Xplorer4x4 04-10-2006 01:53 AM

This is great, thanks

beano33 04-11-2006 02:51 AM

Is it possible to have a vertical scrollbar as well? It's annoying when someone posts a 1000px image. :D

Freesteyelz 04-11-2006 03:16 AM

beano33: Sure, the mod is quite flexible. As in the example of the sig mod, just add the "height" attribute and remove "overflow-x" and "overflow-y" such as:

Replace:
Code:

.hidemsg  {
  width:700px;
  padding-bottom:20px;
  overflow:auto;
  overflow-x:auto;
  overflow-y:hidden;
  }

With:
Code:

.hidemsg  {
  width:700px;
  height:700px;
  padding-bottom:20px;
  overflow:auto;
  }

Just change the width and height values of "700px" to whatever you want. :)

*The only reason I did not set a height limit is because there will be some posts that will be extensively long which are valid such as articles, tutorials and reviews. See, both image and text will be affected in the post that is being enforced.



Xplorer4x4: Thanks for the support. :)

dbembibre 04-11-2006 01:06 PM

Sorry to say that this dont work if you have more that one image oversized in the same post only the last image has scrollbar:(

beano33 04-11-2006 09:39 PM

Quote:

Originally Posted by Freesteyelz
[b]
*The only reason I did not set a height limit is because there will be some posts that will be extensively long which are valid such as articles, tutorials and reviews. See, both image and text will be affected in the post that is being enforced.



Xplorer4x4: Thanks for the support. :)

I gave it a shot but it enlarged the body of the post to whatever I set to its minimum height, so one line would still end up occupying the space of a 400px image. I also wasn't able to overcome the problems others have encountered with IE to use it on auto. I looked into ways to solve that, but it involves adding javascript to trick IE into using CSS max-width settings. Obviously that's something people interested in a simple template hack would like to avoid. :)

Anyway, I ended up creating a new bbcode based on this thread to deal with oversized images:
https://vborg.vbsupport.ru/showthread.php?t=94250

Freesteyelz 04-11-2006 11:01 PM

Quote:

Originally Posted by dbembibre
Sorry to say that this dont work if you have more that one image oversized in the same post only the last image has scrollbar:(

It should work as indicated in the second post. :) The code is designed to wrap the entire post and display properly in IE and Firefox.

Can you please send a screenshot, the codes and the browser so I can try and duplicate your problem?

Freesteyelz 04-11-2006 11:07 PM

Quote:

Originally Posted by beano33
I gave it a shot but it enlarged the body of the post to whatever I set to its minimum height, so one line would still end up occupying the space of a 400px image. I also wasn't able to overcome the problems others have encountered with IE to use it on auto. I looked into ways to solve that, but it involves adding javascript to trick IE into using CSS max-width settings. Obviously that's something people interested in a simple template hack would like to avoid. :)

Anyway, I ended up creating a new bbcode based on this thread to deal with oversized images:
https://vborg.vbsupport.ru/showthread.php?t=94250


Hmm. I'll look into it and post back with an update. My test will be exclusive to fluid width layouts.

Dennis B 04-13-2006 07:26 PM

Quote:

Originally Posted by Freesteyelz
In post #27 it was suggested to use "auto" for width. See if "100%" works instead.

No, unfortunately "100%" does not work in IE either.
Also, a fixed width of "700px" messes up my PMs.

For now I'm using "100%", at least my FF users are happy and the IE users still get the same as before.

Freesteyelz 04-13-2006 11:40 PM

The "700px" needs to be adjusted accordingly. I only used that number as an example. :)

I had in mind fixed width layouts when I did this mod but I'll run some tests with fluid layouts. :)

Hemanth 04-23-2006 12:19 PM

Hi,

What is this "MAin CSS". Which file?

Freesteyelz 04-23-2006 09:57 PM

In your Admin CP go to:

Styles & Templates --> Style Manager --> All Style Options (select the style you're using) --> Main CSS

Hemanth 04-24-2006 06:48 AM

Quote:

In your Admin CP go to:

Styles & Templates --> Style Manager --> All Style Options (select the style you're using) --> Main CSS
Oh.. Tha k you.. I think it was a file in the clientscripts folder :)

Freesteyelz 04-25-2006 12:53 AM

Nah. If that were the case I wouldn't be able to place this as a template mod. :classic:

SHOBizzy 04-30-2006 03:20 PM

Nice job! Thank you!

But I do have a little issue with the sig area stretching. (screenshot below) The in-post part works flawlessly.

Right now my "additional CSS" for signatures reads:

.hidesig {
width:700px;
height:310px;
overflow:auto;
}

And what happens is the sig area seems to be extended to the set size whether or not there is enough characters to actually fill it. On some people's sigs this is ok, but others it's quite obvious and ever so slightly annoying. :)

http://i70.photobucket.com/albums/i9...sigstretch.jpg

Maybe I missed something in my code that made it mess up. Thanks for any help you can give me.

Freesteyelz 04-30-2006 11:55 PM

You didn't miss anything, actually. :) By defining the height the affected area automatically adjusts to the size, which in your case is 310px. That's just the natural behavior for the value set. The width value was the primary focus for this mod; I added the height upon request. :)

CSS Conditionals and hacks won't work across browsers so it's better to avoid them as I did for the mod. I'm constantly experimenting so if (or when) I come across something of value I'll update this mod or possibly release a new one. :)

SHOBizzy 05-01-2006 09:54 AM

I didn't miss anything. It's a first, mark your calendars. :cool:

Thanks for the info and the hack. :up:

Freesteyelz 05-01-2006 11:14 PM

Hehe. Not a problem and thank you for clicking "Install". :)

kennn 05-03-2006 02:33 AM

I realize I'm a little late to the party on this but I wanted to point out that what was said in a post a couple pages back (and quoted below) is only half correct. You can have multiple classes on an element - it is perfectly legal to do this. The first example in the quote is incorrect as Freesteyelz points out. The second example is okay but adds an unnecessary DIV and extra code. The solution is this:

HTML Code:

<div id="something" class="whatever1 whatever2">$post[message]</div>
Both classes will be used and this is completely acceptable CSS.

Quote:

Originally Posted by Freesteyelz
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 -->



Freesteyelz 05-03-2006 03:37 AM

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". :)

kennn 05-03-2006 04:41 AM

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!

Freesteyelz 05-03-2006 05:54 AM

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:

JaniU 05-08-2006 05:02 PM

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

kennn 05-08-2006 05:16 PM

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.

JaniU 05-08-2006 06:50 PM

Yeah that works, thanks!

Smiry Kin's 05-08-2006 08:50 PM

sorry noob question??

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

Freesteyelz 05-08-2006 10:50 PM

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

UtahNissans 05-12-2006 09:58 PM

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.

Freesteyelz 05-13-2006 12:46 AM

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


All times are GMT. The time now is 01:04 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01532 seconds
  • Memory Usage 1,842KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (9)bbcode_code_printable
  • (1)bbcode_html_printable
  • (1)bbcode_php_printable
  • (10)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (40)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 

Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • pagenav_page
  • pagenav_complete
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete