PDA

View Full Version : Show Thread Enhancements - Control signatures height per pixel with CSS


Mazinger
02 Dec 2008, 15:09
This mod will help you determine a fixed height for signatures in posts with CSS to prevent members from having a large annoying signature. (it will cut from the signature and hide the rest of it) - screenshot attached.

Long signatures and signatures with alot of images will not be an issuse anymore!


INSTALLATION


EDIT postbit OR postbit_legacy (which you use) and search for:

$post[signature]Replace it with

<div class="fixedsig">$post[signature]</div>Then go to the style option and add these lines in the CSS


.fixedsig {
max-height:250px;
height:expression((document.documentElement.clientHeight) > 250? "250px" : "100%");
overflow:hidden;
}
You can change the 250 to the height you want (per pixels)

And you're done!


SUPPORT


Please click Mark as Installed if you want to get support for this mod.

Leo Brazil
03 Dec 2008, 11:26
Great idea. I going to check this out.

TomJames
12 Dec 2008, 16:17
Awesome.

Mazinger
12 Dec 2008, 16:31
If you have installed it, then click Mark as Installed please. :)

TomJames
12 Dec 2008, 19:36
Just finished installing it, works perfectly and very easy to install. Thanks.

Mike08
28 Dec 2008, 00:18
Thanks!!! It works! ;)

I needed a code to modify the width of the signature. So with your permission I have adapted to modify the code in height and width.

Here it is. Example with 800x300px.

.fixedsig {
max-width:800px;
width:expression((document.documentElement.clientWidth) > 800? "800px" : "100%");
overflow:hidden;

max-height:300px;
height:expression((document.documentElement.clientHeight) > 300? "300px" : "100%"); }

Mazinger
28 Dec 2008, 13:57
Well, I could add a width control too, but I decided to leave it to image resize mods; they would give better results for width control.

Mike08
28 Dec 2008, 21:01
I have the ncode image resizer installed but don't work in signatures images. I think the best way to have a well-organized forum :D.

I have users who have reached 1,200px width pictures in signatures :eek:

And vBulletin can only limit the size of attached images, not the bbcodes.

Anyway, thanks again :up:

Boosted Panda
30 Dec 2008, 22:02
Great one Ill try this later!

RocCityDad
19 Jan 2009, 19:39
Hi I am new to vbulletin.. where do I go to make this edit.. thanks

RocCityDad
19 Jan 2009, 19:53
i don't think I did it right... not working

Mazinger
20 Jan 2009, 19:37
Are you sure you applied my instructions correctly?

yingzhou
31 Jan 2009, 13:21
If I don't want to hide it, how can I add the scrollbar to the last part?

Mazinger
31 Jan 2009, 22:09
If I don't want to hide it, how can I add the scrollbar to the last part?
Change overflow:hidden; to overflow:scroll;

HolyKiller
08 Feb 2009, 18:13
I'm using 6 skins on my forum. One is default skin, the other four are from eXtreme pixels, and the last one is free skin Pro Bangla ( from vbulletin.org -> HERE (http://www.vbulletin.org/forum/showthread.php?t=198937) ).

This signature restriction works perfectly on the fist five skins (default and eXtremepixels skins) BUT, it doesn't work with ProBangla skin. I am rly confused.

In CSS i have (like in other's five skins)

/* ***** Signature Cut ***** */
.fixedsig {
max-height:100px;
height:expression((document.documentElement.clientHeight) > 100? "100px" : "100%");
overflow:hidden;
}


and in postbit_legacy (again, "like in other skins")

<div class="fixedsig">$post[signature]</div>


Can anyone please help me, what i can do with this?

Thanks a LOT

Holy

Mazinger
09 Feb 2009, 03:17
PM me with your forum admin access and I'll have a look myself.

HolyKiller
09 Feb 2009, 09:42
PM me with your forum admin access and I'll have a look myself.

Funny, but ok, i'll send you access to test forum :)

Check your PM

trotskid
01 Mar 2009, 11:48
Then go to the style option and add these lines in the CSS

Hi, where exactly can I modify that?

Thanks ;)

Mazinger
01 Mar 2009, 12:32
Look at this:
http://www.vbulletin.com/docs/html/main/stylemanager_css_additional

trotskid
01 Mar 2009, 13:21
Thank you Mazinger!

Itīs posible to limit also the width?

Greetings

Mazinger
01 Mar 2009, 19:35
I would recommend using an image resizer mod for this.

trotskid
01 Mar 2009, 19:53
ImageResizer donīt works very well on my forum (3.8.1) :S. Instead of this I use Resize IMG tag with Highslide but only for images.

Thanks anyway, and thanks also for this hack ;)

HolyKiller
09 Mar 2009, 11:22
I would recommend using an image resizer mod for this.

This is 100% better cos this restriction crop (or scrool) EVERYTHING, not only IMG tags. Even texts, hyperlinks, quote/code bars ... everything. So the signature is strictly cut everything larger than XXX px.

Love this hack :p

Mazinger
09 Mar 2009, 22:11
Love your comment too. ;)

Pteppic
28 Mar 2009, 22:59
I'm getting different problems with IE and Firefox. In the former, the signatures that are within the limit are stretched to fit it. This is not a problem in Firefox, although youtube videos embedded in signatures (by specialised bbcode) bleed over into the post below (or whatever's there). I suppose the embedding html overrides the mod somehow, but as a complete CSS noob, I haven't a clue how to fix it, and the IE stretching thing I can't figure out at all. (Screenshots attatched)

Mazinger
29 Mar 2009, 15:11
I think my mod have no control over flash objects in Firefox, may be there's something that can be done to solve it - I don't it now, sorry!

Pteppic
29 Mar 2009, 19:36
Well, necessity is the mother of invention :p , and I managed to find some solutions on my own - I set the wmode parameter in the embedding code to opaque and used "this.scrollHeight" in the css instead of "(document.documentElement.clientHeight)".

Mike08
12 Apr 2009, 22:23
Thank you Mazinger!

Itīs posible to limit also the width?

Greetings

Thanks!!! It works! ;)

I needed a code to modify the width of the signature. So with your permission I have adapted to modify the code in height and width.

Here it is. Example with 800x300px.

.fixedsig {
max-width:800px;
width:expression((document.documentElement.clientWidth) > 800? "800px" : "100%");
overflow:hidden;

max-height:300px;
height:expression((document.documentElement.clientHeight) > 300? "300px" : "100%"); }
Here it is :D

****IMPORTANT: Place this code at very top of CSS.

EvilJohn
26 Apr 2009, 18:05
Thank you. Works very well. :up:

HayleyP
17 Aug 2009, 07:38
I used the "scroll" instead of "hidden" but how do I make it so if the signature is the right size, you can't see the scroll bars?

valendono
17 Aug 2009, 11:53
it is max-height is valid css for ie, ff or any else browser ? I dont max-height is global css variables, some browser cant read it.

triff
12 Jun 2010, 16:55
Is it possible to change the limitation from px to % or something that change with the users screen resolution? As it is it will look quite different depending on your screen resolution.

SGL.

KID_1194
19 Jun 2010, 06:14
This is awesome .. thaks a lot Mazinger !

BUDIMAN
05 Oct 2012, 13:26
Work perfectly...tq

Mazinger
20 Mar 2013, 13:35
You're welcome all.