Runboard.com
You're welcome.
Welcome: You have reached Pastor Rick's Design Elements message board... Enjoy your stay and please tell others about this board...

User Quick Links:    runboard.com       Sign up (learn about it) ● Sign in (lost password?)


 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 550
Karma: 11 (+12/-1)
Reply ● Quote
Taming the Signature Size


Most of the time Runboards default settings for the user signature are more than adequate but sometimes you will discover that handful of users that are great board members except for their insistence on using a monster sized image as their signature. Occasionally the image can even be so large that it literally breaks the boards layout!

While there is no way to shrink the images actual file size there is a way to shrink the images display size so that the cool "fire breathing dragon" pic designed to be a PC wallpaper image will not destroy you message boards layout.

In your CSS you can post something like this:

.ak_msg_post_signature_block {
width: 500px;
height: 150px;
overflow: hidden;
}


This would define a specific area for the signature and hide what does not fit into that area.

Now say you didn't want to cut off a users nifty picture but you still want to control the size being displayed to everyone else. To do that you would change the code I posted above to something like this:

.ak_msg_post_signature_block img {
max-width: 500px;
width: expression([sign in to see URL] > 500 ? 500: true);
max-height: 150px;
height: expression([sign in to see URL] > 150 ? 150: true);
}


The code I have posted will work for all browsers down to IE6... Of course, if you feel that none of your users would use a browser as ancient as IE6 then you can get rid of the "expression" commands like so:

.ak_msg_post_signature_block img {
max-width: 500px;
max-height: 150px;
}


Finally, it has been my experience that you only need to use either the max-width or max-height in your code and allow the browser to set the "aspect ratio" for the one you do not set. What that means is that if you only use one of the possible settings then the users signature pic will appear to be a smaller version of the pic they chose to use. When you actually do set both settings then user signature pics will look distorted a lot of the time.

Last edited by Pastor Rick, 12/31/2014, 10:55 am


---

Advertise Boards On TRDConceptsDE
12/31/2014, 12:01 am Link to this post Send Email to Pastor Rick   Send PM to Pastor Rick Blog
 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 550
Karma: 11 (+12/-1)
Reply ● Quote
Re: Taming the Signature Size


I did say "finally" in my last post but there is one other small detail to consider when limiting a users signature size. You may have noticed the three dashes "---" that separate a users post from a users signature. Those are inside the .ak_msg_post_signature_block along with a couple of carriage returns (in code that is a <br>). Because of that you should add about 25px to the max-height statement.

For example, if you want to have a 150px height limit on a users signature then you would need to add 25px to what you want, in this case the results would be 150+25=175.

Alternatively you could use CSS to eliminate the three dashes as I discussed in ]this topic. Going that route allows you to just use the numbers you want to use without resorting to the math. emoticon

---

Advertise Boards On TRDConceptsDE
12/31/2014, 12:40 pm Link to this post Send Email to Pastor Rick   Send PM to Pastor Rick Blog
 


Add a reply





You are not logged in (login)